[ADD]added payslip tab to employee profile
This commit is contained in:
@@ -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 %}
|
||||
@@ -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 %}
|
||||
76
employee/templates/payroll-tab.html
Normal file
76
employee/templates/payroll-tab.html
Normal 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>
|
||||
Reference in New Issue
Block a user