| Server IP : 65.108.144.40 / Your IP : 216.73.217.165 Web Server : Apache/2.4.52 (Ubuntu) System : Linux ubuntu-8gb-hel1-1 5.15.0-173-generic #183-Ubuntu SMP Fri Mar 6 13:29:34 UTC 2026 x86_64 User : dev ( 1000) PHP Version : 8.2.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/erp/employee/templates/tabs/ |
Upload File : |
{% 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 "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 "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">
{{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.amount %}{{allowance.amount}}{% endif %}
</div>
<div class="oh-sticky-table__td">
{% if allowance.get_based_on_display%}
{{allowance.get_based_on_display}}
{% 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>