163 lines
9.6 KiB
XML
163 lines
9.6 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<templates xml:space="preserve">
|
|
|
|
<t t-name="fusion_payroll.PayrollReportAction">
|
|
<div class="o_action o_payroll_report_action">
|
|
<!-- Loading Spinner -->
|
|
<div t-if="state.loading" class="d-flex justify-content-center align-items-center" style="min-height: 400px;">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div t-else="" class="container-fluid py-3">
|
|
<!-- Header -->
|
|
<div class="row mb-3">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="d-flex align-items-center">
|
|
<button class="btn btn-link p-0 me-3" t-on-click="goBack">
|
|
<i class="fa fa-chevron-left"/> Back
|
|
</button>
|
|
<h2 class="mb-0">
|
|
<t t-out="state.reportName"/>
|
|
</h2>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<!-- Export Buttons -->
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">
|
|
Export <i class="fa fa-caret-down ms-1"/>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li>
|
|
<a class="dropdown-item" href="#" t-on-click.prevent="exportXlsx">
|
|
<i class="fa fa-file-excel-o me-2"/> Export to Excel
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#" t-on-click.prevent="exportPdf">
|
|
<i class="fa fa-file-pdf-o me-2"/> Export to PDF
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters Row -->
|
|
<div class="row mb-3" t-if="state.filterDateRange">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body py-2">
|
|
<div class="row align-items-center">
|
|
<!-- Date Filter Dropdown -->
|
|
<div class="col-auto">
|
|
<select class="form-select form-select-sm"
|
|
t-on-change="onDateFilterChange"
|
|
t-att-value="state.selectedDateFilter">
|
|
<t t-foreach="state.dateFilterOptions" t-as="option" t-key="option[0]">
|
|
<option t-att-value="option[0]"
|
|
t-att-selected="option[0] === state.selectedDateFilter">
|
|
<t t-out="option[1]"/>
|
|
</option>
|
|
</t>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Date From -->
|
|
<div class="col-auto">
|
|
<input type="date"
|
|
class="form-control form-control-sm"
|
|
t-att-value="state.dateFrom"
|
|
t-on-change="onDateFromChange"/>
|
|
</div>
|
|
|
|
<!-- Date To -->
|
|
<div class="col-auto">
|
|
<input type="date"
|
|
class="form-control form-control-sm"
|
|
t-att-value="state.dateTo"
|
|
t-on-change="onDateToChange"/>
|
|
</div>
|
|
|
|
<!-- Apply Button (for custom dates) -->
|
|
<div class="col-auto" t-if="state.showCustomDate">
|
|
<button class="btn btn-primary btn-sm" t-on-click="applyFilters">
|
|
Apply
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Customize Button -->
|
|
<div class="col-auto ms-auto">
|
|
<button class="btn btn-outline-secondary btn-sm">
|
|
<i class="fa fa-sliders me-1"/> Customize
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Table -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-sm mb-0 o_payroll_report_table">
|
|
<thead>
|
|
<tr>
|
|
<t t-foreach="state.columns" t-as="column" t-key="column.field">
|
|
<th t-att-class="column.sortable ? 'cursor-pointer user-select-none' : ''"
|
|
t-on-click="() => this.sortByColumn(column)">
|
|
<t t-out="column.name"/>
|
|
<t t-if="column.sortable">
|
|
<i t-if="state.sortColumn === column.field"
|
|
t-att-class="'fa ms-1 ' + (state.sortDirection === 'asc' ? 'fa-sort-asc' : 'fa-sort-desc')"/>
|
|
<i t-else="" class="fa fa-sort ms-1 text-muted"/>
|
|
</t>
|
|
</th>
|
|
</t>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<t t-if="state.lines.length === 0">
|
|
<tr>
|
|
<td t-att-colspan="state.columns.length" class="text-center text-muted py-4">
|
|
There are no results matching the criteria.
|
|
</td>
|
|
</tr>
|
|
</t>
|
|
<t t-foreach="state.lines" t-as="line" t-key="line.id">
|
|
<tr t-att-class="this.getLineClass(line)"
|
|
t-on-click="() => line.model and line.res_id and this.openRecord(line)"
|
|
style="cursor: pointer;">
|
|
<t t-foreach="state.columns" t-as="column" t-key="column.field">
|
|
<td t-att-class="column.type === 'monetary' or column.type === 'float' ? 'text-end' : ''">
|
|
<!-- Unfoldable indicator -->
|
|
<t t-if="column_index === 0 and line.unfoldable">
|
|
<i t-att-class="'fa me-1 ' + (state.expandedLines[line.id] ? 'fa-caret-down' : 'fa-caret-right')"
|
|
t-on-click.stop="() => this.toggleLine(line.id)"/>
|
|
</t>
|
|
<t t-out="this.formatValue(line.values?.[column.field], column.type)"/>
|
|
</td>
|
|
</t>
|
|
</tr>
|
|
</t>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
|
|
</templates>
|