100 lines
4.4 KiB
HTML
100 lines
4.4 KiB
HTML
{% load i18n %}
|
|
<style>
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
{% if employee.payslip_set.all %}
|
|
<div class="d-flex flex-row-reverse">
|
|
<span class="m-3">
|
|
<span class="oh-dot oh-dot--small me-1" style="background-color:gray"></span>
|
|
{% trans "Draft" %}
|
|
</span>
|
|
<span class="m-3">
|
|
<span class="oh-dot oh-dot--small me-1" style="background-color:orange"></span>
|
|
{% trans "Review Ongoing" %}
|
|
</span>
|
|
<span class="m-3">
|
|
<span class="oh-dot oh-dot--small me-1" style="background-color:rgb(103, 171, 238)"></span>
|
|
{% trans "Confirmed" %}
|
|
</span>
|
|
<span class="m-3" >
|
|
<span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span>
|
|
{% trans "Paid" %}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="oh-sticky-table">
|
|
<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 "Start Date" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "End Date" %}</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 class="oh-sticky-table__th"></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 dateformat_changer">
|
|
{{payslip.start_date}}
|
|
</div>
|
|
<div class="oh-sticky-table__td dateformat_changer">
|
|
{{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>
|
|
<div class="oh-sticky-table__td">
|
|
<div class="oh-btn-group">
|
|
<div type="button" id="download" data-id={{payslip.id}} title="{% trans 'Download' %}" class="oh-btn oh-btn--light-bkg w-100"> <ion-icon name="download"></ion-icon></div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="d-flex justify-content-center align-items-center" style="height:40vh">
|
|
<h5 class="oh-404__subtitle">{% trans "No Payslips have been generated." %}</h5>
|
|
</div>
|
|
{% endif %}
|
|
<script>
|
|
// Use jQuery to select an element by its ID and add a click event handler
|
|
$("#download").click(function(e) {
|
|
e.preventDefault();
|
|
payslip_id = $(this).data("id");
|
|
window.location.href = `/payroll/payslip-pdf/${payslip_id}`
|
|
});
|
|
</script> |