268 lines
17 KiB
HTML
268 lines
17 KiB
HTML
{% load i18n %}
|
|
{% load static %}
|
|
{% load basefilters %}
|
|
{% load horillafilters %}
|
|
{% if messages %}
|
|
<div class="oh-wrapper">
|
|
{% for message in messages %}
|
|
<div class="oh-alert-container">
|
|
<div class="oh-alert oh-alert--animated {{message.tags}}">
|
|
{{ message }}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
<div class="oh-wrapper mt-4" id="AllowanceAndDeduction">
|
|
<div class="oh-tabs">
|
|
<ul class="oh-tabs__tablist">
|
|
<li class="oh-tabs__tab oh-tabs__tab--active d-flex justify-content-between" data-target="#allowance_tab">
|
|
<div>
|
|
<div>
|
|
<img src="{% static 'images/ui/allowance_icon.png' %}" alt=""
|
|
style="width: 25px; height: 25px; margin-right: 3px" />
|
|
{% trans "Allowances" %}
|
|
</div>
|
|
</div>
|
|
{% if perms.payroll.add_allowance and active_contracts %}
|
|
<button title="Add Bonus"
|
|
class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2" title="Add"
|
|
hx-get="{% url 'add-bonus' %}?employee_id={{employee.id}}" hx-target="#objectCreateModalTarget"
|
|
data-target="#objectCreateModal" data-toggle="oh-modal-toggle">
|
|
<ion-icon class="md hydrated" name="add-outline" role="img" aria-label="add outline"></ion-icon>
|
|
</button>
|
|
{% endif %}
|
|
</li>
|
|
<li class="oh-tabs__tab" data-target="#deduction_tab">
|
|
<div>
|
|
<img src="{% static 'images/ui/deduction_icon.png' %}" alt=""
|
|
style="width: 25px; height: 25px; margin-right: 3px" />
|
|
{% trans "Deductions" %}
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="oh-tabs__contents" id="view-container">
|
|
<div class="oh-tabs__content oh-tabs__content--active" id="allowance_tab">
|
|
<!-- Sticky Table -->
|
|
{% if allowances %}
|
|
<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">
|
|
<div class="d-flex">
|
|
<div>
|
|
{% trans "Allowance" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="oh-sticky-table__th">{% trans "Date" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Is Taxable" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Is Condition Based" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Is Fixed" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Rate" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Amount" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Based On" %}</div>
|
|
{% if perms.payroll.change_allowance or perms.payroll.delete_allowance %}
|
|
<div class="oh-sticky-table__th oh-sticky-table__right">{% trans "Actions" %}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% for allowance in allowances %}
|
|
<div class="oh-sticky-table__tbody ui-sortable" draggable="true" data-toggle="oh-modal-toggle"
|
|
data-target="#objectDetailsModal"
|
|
hx-get="{% url 'single-allowance-view' allowance.id %}?instances_ids={{allowance_ids}}"
|
|
hx-target="#objectDetailsModalTarget">
|
|
<div class="oh-sticky-table__tr ui-sortable-handle">
|
|
<div class="oh-sticky-table__td">{{allowance.title}}</div>
|
|
<div class="oh-sticky-table__td">
|
|
{% if allowance.one_time_date %}{% trans "On" %} <span class="dateformat_changer">{{allowance.one_time_date}}</span>
|
|
{% else %}{% trans "All time allowance." %}{% endif %}</div>
|
|
<div class="oh-sticky-table__td">
|
|
{{allowance.is_taxable|yes_no}}
|
|
</div>
|
|
<div class="oh-sticky-table__td">
|
|
{{allowance.is_condition_based|yes_no}}
|
|
</div>
|
|
<div class="oh-sticky-table__td">
|
|
{{allowance.is_fixed|yes_no}}
|
|
</div>
|
|
<div class="oh-sticky-table__td">
|
|
{% if allowance.rate %}{{allowance.rate}}{% else %}-{% endif %}
|
|
</div>
|
|
<div class="oh-sticky-table__td">
|
|
{% if allowance.amount %}{{allowance.amount}}{% else %}-{% endif %}
|
|
</div>
|
|
<div class="oh-sticky-table__td">
|
|
{% if allowance.get_based_on_display%}
|
|
{{allowance.get_based_on_display}}
|
|
{% else %}-{% endif %}
|
|
</div>
|
|
{% if perms.payroll.change_allowance or perms.payroll.delete_allowance %}
|
|
<div class="oh-sticky-table__td oh-sticky-table__right">
|
|
<div class="oh-btn-group">
|
|
|
|
<a onclick="event.stopPropagation();" class="oh-btn oh-btn--light-bkg w-100"
|
|
href="{% url 'update-allowance' allowance.id %}"
|
|
title='{% trans "Update" %}'>
|
|
<ion-icon name="create-outline" role="img" class="md hydrated"
|
|
style="color: blue" aria-label="create outline"></ion-icon>
|
|
</a>
|
|
|
|
<a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
|
|
onclick="event.preventDefault();event.stopPropagation();"
|
|
hx-confirm="{% trans 'Do you want to delete this Allowance?' %}"
|
|
hx-post="{% url 'delete-employee-allowance' allowance.id %}"
|
|
hx-target="#AllowanceAndDeduction" title="{% trans 'Delete' %}">
|
|
<ion-icon name="trash-outline" role="img" class="md hydrated"
|
|
aria-label="trash outline"></ion-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="d-flex justify-content-center align-items-center" style="height:40vh">
|
|
{% if active_contracts %}
|
|
{% if basic_pay <= 0 %}
|
|
<h5 class="oh-404__subtitle">
|
|
{% trans "Basic pay not added . Please update in the active contract." %}
|
|
</h5>
|
|
{% else %}
|
|
<h5 class="oh-404__subtitle">
|
|
{% trans "This employee is not eligible for any allowances." %}
|
|
</h5>
|
|
{% endif %}
|
|
{% else %}
|
|
<h5 class="oh-404__subtitle">
|
|
{% trans "This employee doesn't have an active contract. Please check the employee's contract" %}
|
|
</h5>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="oh-tabs__content" id="deduction_tab">
|
|
{% if deductions %}
|
|
<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">
|
|
<div class="d-flex">
|
|
<div>
|
|
{% trans "Deduction" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="oh-sticky-table__th">{% trans "Is Pretax" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Is Condition Based" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Condition" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Is Fixed" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Amount" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Based On" %}</div>
|
|
{% if perms.payroll.change_deduction or perms.payroll.delete_deduction %}
|
|
<div class="oh-sticky-table__th oh-sticky-table__right">{% trans "Actions" %}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% for deduction in deductions %}
|
|
<div class="oh-sticky-table__tbody ui-sortable" draggable="true" data-toggle="oh-modal-toggle"
|
|
data-target="#objectDetailsModal"
|
|
hx-get="{% url 'single-deduction-view' deduction.id %}?instances_ids={{deduction_ids}}"
|
|
hx-target="#objectDetailsModalTarget">
|
|
<div class="oh-sticky-table__tr ui-sortable-handle">
|
|
<div class="oh-sticky-table__sd">{{deduction.title}}</div>
|
|
<div class="oh-sticky-table__td">
|
|
{{deduction.is_pretax|yes_no}}
|
|
</div>
|
|
<div class="oh-sticky-table__td">
|
|
{{deduction.is_condition_based|yes_no}}
|
|
</div>
|
|
<div class="oh-sticky-table__td">
|
|
{% if deduction.field %} {{deduction.get_field_display}}
|
|
{{deduction.get_condition_display}} {{deduction.value}}
|
|
{% endif %}
|
|
</div>
|
|
<div class="oh-sticky-table__td">
|
|
{{deduction.is_fixed|yes_no}}
|
|
</div>
|
|
<div class="oh-sticky-table__td">
|
|
{% if deduction.amount %}
|
|
{{deduction.amount}}
|
|
{% endif %}
|
|
</div>
|
|
<div class="oh-sticky-table__td">
|
|
{% if deduction.based_on %}
|
|
{{deduction.get_based_on_display}}
|
|
{% endif%}
|
|
</div>
|
|
{% if perms.payroll.change_deduction or perms.payroll.delete_deduction %}
|
|
<div class="oh-sticky-table__td oh-sticky-table__right">
|
|
<div class="oh-btn-group">
|
|
<a onclick="event.stopPropagation();" class="oh-btn oh-btn--light-bkg w-100"
|
|
href="{% url 'update-deduction' deduction.id %}"
|
|
title="{% trans 'Update' %}">
|
|
<ion-icon name="create-outline" role="img" class="md hydrated"
|
|
style="color: blue" aria-label="create outline"></ion-icon>
|
|
</a>
|
|
<a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
|
|
onclick="event.preventDefault();event.stopPropagation();"
|
|
hx-confirm="{% trans 'Do you want to delete this Deduction?' %}"
|
|
hx-post="{% url 'delete-deduction' deduction.id employee.id %}"
|
|
hx-target="#allowance_deduction" title="{% trans 'Delete' %}">
|
|
<ion-icon name="trash-outline" role="img" class="md hydrated"
|
|
aria-label="trash outline"></ion-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="d-flex justify-content-center align-items-center" style="height:40vh">
|
|
{% if active_contracts %}
|
|
<h5 class="oh-404__subtitle">{% trans "This employee is not eligible for any deductions." %}</h5>
|
|
{% else %}
|
|
<h5 class="oh-404__subtitle">
|
|
{% trans "This employee doesn't have an active contract. Please check the employee's contract" %}
|
|
</h5>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
const activeTab = localStorage.getItem('EmployeeAttendanceRequestActiveTab')
|
|
if (activeTab != null) {
|
|
$(".oh-tabs__content--active").toggleClass('oh-tabs__content--active');
|
|
$(".oh-tabs__tab--active").toggleClass('oh-tabs__tab--active');
|
|
$(`[data-target="${activeTab}"]`).toggleClass("oh-tabs__tab--active");
|
|
$(activeTab).toggleClass("oh-tabs__content--active");
|
|
}
|
|
$(".oh-tabs__tab[data-target]").click(function (e) {
|
|
e.preventDefault();
|
|
localStorage.setItem("EmployeeAttendanceRequestActiveTab", $(this).attr('data-target'))
|
|
var newActiveTab = $(this).attr('data-target')
|
|
$(".oh-tabs__content--active").toggleClass('oh-tabs__content--active');
|
|
$(".oh-tabs__tab--active").toggleClass('oh-tabs__tab--active');
|
|
$(`[data-target="${newActiveTab}"]`).toggleClass("oh-tabs__tab--active");
|
|
$(newActiveTab).toggleClass("oh-tabs__content--active");
|
|
});
|
|
});
|
|
let activeTabs = $("#AllowanceAndDeduction .oh-tabs__tab--active").length
|
|
if (!activeTabs) {
|
|
$("#AllowanceAndDeduction .oh-tabs__tab").first().toggleClass("oh-tabs__tab--active")
|
|
}
|
|
</script>
|