[ADD]added payslip tab to employee profile

This commit is contained in:
Horilla
2023-09-09 14:02:04 +05:30
parent 402e1d29f3
commit 8e8cd1d2b7
3 changed files with 110 additions and 0 deletions

View File

@@ -1,5 +1,6 @@
{% extends 'index.html' %}
{% load i18n %}
{% load static %}
{% block content %}
<div class="oh-wrapper">
<div class="oh-card mt-4 mb-5">
@@ -98,6 +99,15 @@
>{% trans "Leave" %}</a
>
</li>
<li class="oh-general__tab">
<a
href="#"
class="oh-general__tab-link"
data-action="general-tab"
data-target="#payroll"
>{% trans "Payroll" %}</a
>
</li>
<li class="oh-general__tab">
<a
href="#"
@@ -486,6 +496,12 @@
>
{% include 'leave-tab.html' %}
</div>
<div
class="oh-general__tab-target oh-profile__info-tab mb-4 d-none"
id="payroll"
>
{% include 'payroll-tab.html' %}
</div>
<div
class="oh-general__tab-target oh-profile__info-tab mb-4 d-none"
id="team"
@@ -504,5 +520,6 @@
</div>
</div>
</div>
<script src="{% static 'employee/search.js' %}"></script>
{% endblock content %}

View File

@@ -1,6 +1,7 @@
{% extends 'index.html' %}{% load static %}
{% block content %}
{% load i18n %}
{% load static %}
{% comment %} {% include 'employee_nav.html' %} {% endcomment %}
@@ -103,6 +104,15 @@
>{% trans "Leave" %}</a
>
</li>
<li class="oh-general__tab">
<a
href="#"
class="oh-general__tab-link"
data-action="general-tab"
data-target="#payroll"
>{% trans "Payroll" %}</a
>
</li>
<li class="oh-general__tab">
<a
href="#"
@@ -490,6 +500,12 @@
>
{% include "leave-tab.html" %}
</div>
<div
class="oh-general__tab-target oh-profile__info-tab mb-4 d-none"
id="payroll"
>
{% include "payroll-tab.html" %}
</div>
<div
class="oh-general__tab-target oh-profile__info-tab mb-4 d-none"
id="team"
@@ -508,5 +524,6 @@
</div>
</div>
</div>
<script src="{% static 'employee/search.js' %}"></script>
{% endblock content %}

View File

@@ -0,0 +1,76 @@
{% load i18n %}
<style>
.row-status--orange {
border-left: 4px solid orange;
border-radius: 5px;
}
.row-status--gray {
border-left: 4px solid gray;
border-radius: 5px;
}
.row-status--yellow {
border-left: 4px solid yellowgreen;
border-radius: 5px;
}
.row-status--blue {
border-left: 4px solid rgb(103, 171, 238);
border-radius: 5px;
}
a:hover {
text-decoration: none;
}
</style>
<div class="oh-sticky-table mt-4">
<div class="oh-sticky-table__table oh-table--sortable">
<div class="oh-sticky-table__thead">
<div class="oh-sticky-table__tr">
<div class="oh-sticky-table__th">{% trans "employee" %}</div>
<div class="oh-sticky-table__th">{% trans "period" %}</div>
<div class="oh-sticky-table__th">{% trans "Status" %}</div>
<div class="oh-sticky-table__th">{% trans "Gross Pay" %}</div>
<div class="oh-sticky-table__th">{% trans "Deduction" %}</div>
<div class="oh-sticky-table__th">{% trans "Net Pay" %}</div>
</div>
</div>
<div class="oh-sticky-table__tbody">
{% for payslip in employee.payslip_set.all %}
<a href="{% url 'view-created-payslip' payslip.id %}" class="oh-sticky-table__tr" >
<div class="oh-sticky-table__sd {% if payslip.status == "review_ongoing" %}row-status--orange {% elif payslip.status == "confirmed" %} row-status--blue {% elif payslip.status == "paid" %} row-status--yellow {% elif payslip.status == "draft" %} row-status--gray{% endif %}">
<div class="d-flex">
<div class="oh-profile oh-profile--md">
<div class="oh-profile__avatar mr-1">
<img
src="https://ui-avatars.com/api/?name={{payslip.employee_id.employee_first_name}}+{{payslip.employee_id.employee_last_name}}&background=random"
class="oh-profile__image"
alt=""
/>
</div>
<span class="oh-profile__name oh-text--dark">{{payslip.employee_id}}</span>
</div>
</div>
</div>
<div class="oh-sticky-table__td">
{{payslip.start_date}} - {{payslip.end_date}}
</div>
<div class="oh-sticky-table__td">
{{payslip.get_status_display}}
</div>
<div class="oh-sticky-table__td">
{{currency}} {{payslip.gross_pay|floatformat:2}}
</div>
<div class="oh-sticky-table__td">
{{currency}} {{payslip.deduction|floatformat:2}}
</div>
<div class="oh-sticky-table__td">
{{currency}} {{payslip.net_pay|floatformat:2}}
</div>
</a>
{% endfor %}
</div>
</div>
</div>