feat(fusion_clock): payslip list + inline paystub templates and shared employee navbar
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
gsinghpal
195
fusion_clock/views/portal_payslip_templates.xml
Normal file
195
fusion_clock/views/portal_payslip_templates.xml
Normal file
@@ -0,0 +1,195 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<!-- Payslip List -->
|
||||
<template id="portal_payslip_list_page" name="Fusion Clock Payslips">
|
||||
<t t-call="portal.portal_layout">
|
||||
<t t-set="breadcrumbs_searchbar" t-value="False"/>
|
||||
<t t-set="no_breadcrumbs" t-value="True"/>
|
||||
<t t-set="no_header" t-value="True"/>
|
||||
|
||||
<div class="fclk-app">
|
||||
<div class="fclk-reports-container">
|
||||
<div class="fclk-ts-header" style="margin-bottom:24px;">
|
||||
<h2>Payslips</h2>
|
||||
</div>
|
||||
|
||||
<t t-if="payslips">
|
||||
<t t-foreach="payslips" t-as="payslip">
|
||||
<a t-attf-href="/my/clock/payslips/#{payslip.id}"
|
||||
class="fclk-report-item fclk-payslip-item">
|
||||
<div class="fclk-report-info">
|
||||
<h4>
|
||||
<t t-esc="payslip.date_from.strftime('%b %d')"/> -
|
||||
<t t-esc="payslip.date_to.strftime('%b %d, %Y')"/>
|
||||
</h4>
|
||||
<p>
|
||||
Net
|
||||
<span t-field="payslip.net_wage"
|
||||
t-options="{'widget': 'monetary', 'display_currency': payslip.currency_id}"/>
|
||||
</p>
|
||||
</div>
|
||||
<span t-attf-class="fclk-payslip-status fclk-payslip-status--#{payslip.state}">
|
||||
<t t-if="payslip.state == 'paid'">Paid</t>
|
||||
<t t-else="">Done</t>
|
||||
</span>
|
||||
</a>
|
||||
</t>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="fclk-empty-state">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="1.5">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
</svg>
|
||||
<p>No payslips available yet.</p>
|
||||
<p style="font-size:12px; margin-top:4px;">Finalized pay slips will appear here after each pay run.</p>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-call="fusion_clock.portal_employee_navbar">
|
||||
<t t-set="active" t-value="'payslips'"/>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</template>
|
||||
|
||||
<!-- Payslip Detail — inline paystub -->
|
||||
<template id="portal_payslip_detail_page" name="Fusion Clock Payslip Detail">
|
||||
<t t-call="portal.portal_layout">
|
||||
<t t-set="breadcrumbs_searchbar" t-value="False"/>
|
||||
<t t-set="no_breadcrumbs" t-value="True"/>
|
||||
<t t-set="no_header" t-value="True"/>
|
||||
|
||||
<div class="fclk-app">
|
||||
<div class="fclk-reports-container">
|
||||
<div class="fclk-ts-header fclk-payslip-detail-header" style="margin-bottom:16px;">
|
||||
<a href="/my/clock/payslips" class="fclk-payslip-back">← Payslips</a>
|
||||
<h2>
|
||||
<t t-esc="payslip.date_from.strftime('%b %d')"/> -
|
||||
<t t-esc="payslip.date_to.strftime('%b %d, %Y')"/>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Net pay highlight -->
|
||||
<div class="fclk-status-card fclk-payslip-net">
|
||||
<span class="fclk-payslip-net-label">Net Pay</span>
|
||||
<span class="fclk-payslip-net-value"
|
||||
t-field="payslip.net_wage"
|
||||
t-options="{'widget': 'monetary', 'display_currency': payslip.currency_id}"/>
|
||||
</div>
|
||||
|
||||
<!-- Deductions -->
|
||||
<div class="fclk-status-card fclk-payslip-section">
|
||||
<h4 class="fclk-payslip-section-title">Deductions</h4>
|
||||
<div class="fclk-payslip-row">
|
||||
<span>CPP</span>
|
||||
<span t-field="payslip.employee_cpp" t-options="{'widget': 'monetary', 'display_currency': payslip.currency_id}"/>
|
||||
</div>
|
||||
<div class="fclk-payslip-row" t-if="payslip.employee_cpp2">
|
||||
<span>CPP2</span>
|
||||
<span t-field="payslip.employee_cpp2" t-options="{'widget': 'monetary', 'display_currency': payslip.currency_id}"/>
|
||||
</div>
|
||||
<div class="fclk-payslip-row">
|
||||
<span>EI</span>
|
||||
<span t-field="payslip.employee_ei" t-options="{'widget': 'monetary', 'display_currency': payslip.currency_id}"/>
|
||||
</div>
|
||||
<div class="fclk-payslip-row">
|
||||
<span>Income Tax</span>
|
||||
<span t-field="payslip.employee_income_tax" t-options="{'widget': 'monetary', 'display_currency': payslip.currency_id}"/>
|
||||
</div>
|
||||
<div class="fclk-payslip-row fclk-payslip-row--total">
|
||||
<span>Total Deductions</span>
|
||||
<span t-field="payslip.total_employee_deductions" t-options="{'widget': 'monetary', 'display_currency': payslip.currency_id}"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Year to date -->
|
||||
<div class="fclk-status-card fclk-payslip-section">
|
||||
<h4 class="fclk-payslip-section-title">Year to Date</h4>
|
||||
<div class="fclk-payslip-row">
|
||||
<span>Gross</span>
|
||||
<span t-field="payslip.ytd_gross" t-options="{'widget': 'monetary', 'display_currency': payslip.currency_id}"/>
|
||||
</div>
|
||||
<div class="fclk-payslip-row">
|
||||
<span>CPP</span>
|
||||
<span t-field="payslip.ytd_cpp" t-options="{'widget': 'monetary', 'display_currency': payslip.currency_id}"/>
|
||||
</div>
|
||||
<div class="fclk-payslip-row">
|
||||
<span>EI</span>
|
||||
<span t-field="payslip.ytd_ei" t-options="{'widget': 'monetary', 'display_currency': payslip.currency_id}"/>
|
||||
</div>
|
||||
<div class="fclk-payslip-row">
|
||||
<span>Income Tax</span>
|
||||
<span t-field="payslip.ytd_income_tax" t-options="{'widget': 'monetary', 'display_currency': payslip.currency_id}"/>
|
||||
</div>
|
||||
<div class="fclk-payslip-row fclk-payslip-row--total">
|
||||
<span>Net</span>
|
||||
<span t-field="payslip.ytd_net" t-options="{'widget': 'monetary', 'display_currency': payslip.currency_id}"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<t t-if="has_pdf">
|
||||
<a t-attf-href="/my/clock/payslips/#{payslip.id}/pdf"
|
||||
class="fclk-payslip-pdf-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle; margin-right:6px;">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="7 10 12 15 17 10"/>
|
||||
<line x1="12" y1="15" x2="12" y2="3"/>
|
||||
</svg>
|
||||
Download PDF
|
||||
</a>
|
||||
</t>
|
||||
|
||||
<t t-call="fusion_clock.portal_employee_navbar">
|
||||
<t t-set="active" t-value="'payslips'"/>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</template>
|
||||
|
||||
<!-- Shared employee bottom nav (Clock / Timesheets / Reports / Payslips).
|
||||
`active` = clock|timesheets|reports|payslips. Payslips tab shows only
|
||||
when show_payslips is truthy. -->
|
||||
<template id="portal_employee_navbar" name="Fusion Clock Employee Navbar">
|
||||
<div class="fclk-nav-bar">
|
||||
<a href="/my/clock" t-attf-class="fclk-nav-item#{' fclk-nav-active' if active == 'clock' else ''}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
<span>Clock</span>
|
||||
</a>
|
||||
<a href="/my/clock/timesheets" t-attf-class="fclk-nav-item#{' fclk-nav-active' if active == 'timesheets' else ''}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
||||
<line x1="16" y1="2" x2="16" y2="6"/>
|
||||
<line x1="8" y1="2" x2="8" y2="6"/>
|
||||
<line x1="3" y1="10" x2="21" y2="10"/>
|
||||
</svg>
|
||||
<span>Timesheets</span>
|
||||
</a>
|
||||
<a href="/my/clock/reports" t-attf-class="fclk-nav-item#{' fclk-nav-active' if active == 'reports' else ''}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||
</svg>
|
||||
<span>Reports</span>
|
||||
</a>
|
||||
<t t-if="show_payslips">
|
||||
<a href="/my/clock/payslips" t-attf-class="fclk-nav-item#{' fclk-nav-active' if active == 'payslips' else ''}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="5" width="20" height="14" rx="2"/>
|
||||
<line x1="2" y1="10" x2="22" y2="10"/>
|
||||
</svg>
|
||||
<span>Payslips</span>
|
||||
</a>
|
||||
</t>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
Reference in New Issue
Block a user