From f18c59fe894d4263c5193eabb44fae51a389a45e Mon Sep 17 00:00:00 2001
From: gsinghpal <gur_preet.singh@outlook.com>
Date: Sat, 30 May 2026 21:35:55 -0400
Subject: [PATCH] feat(fusion_clock): payslip list + inline paystub templates
 and shared employee navbar

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 fusion_clock/__manifest__.py                  |   3 +-
 .../views/portal_payslip_templates.xml        | 195 ++++++++++++++++++
 2 files changed, 197 insertions(+), 1 deletion(-)
 create mode 100644 fusion_clock/views/portal_payslip_templates.xml

diff --git a/fusion_clock/__manifest__.py b/fusion_clock/__manifest__.py
index b1ec1454..dcac26c4 100644
--- a/fusion_clock/__manifest__.py
+++ b/fusion_clock/__manifest__.py
@@ -5,7 +5,7 @@
 
 {
     'name': 'Fusion Clock',
-    'version': '19.0.3.11.8',
+    'version': '19.0.3.12.0',
     'category': 'Human Resources/Attendances',
     'summary': 'Complete Employee T&A with Geofencing, Shifts, Penalties, Overtime, Kiosk, Dashboard & Payroll Export',
     'description': """
@@ -78,6 +78,7 @@ Integrates natively with Odoo's hr.attendance module for full payroll compatibil
         'views/portal_clock_templates.xml',
         'views/portal_timesheet_templates.xml',
         'views/portal_report_templates.xml',
+        'views/portal_payslip_templates.xml',
         'views/kiosk_templates.xml',
         'views/kiosk_nfc_templates.xml',
     ],
diff --git a/fusion_clock/views/portal_payslip_templates.xml b/fusion_clock/views/portal_payslip_templates.xml
new file mode 100644
index 00000000..deca7954
--- /dev/null
+++ b/fusion_clock/views/portal_payslip_templates.xml
@@ -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">&#8592; 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>