Files
Odoo-Modules/fusion_payroll/views/payroll_dashboard_views.xml
2026-02-22 01:22:18 -05:00

255 lines
18 KiB
XML

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<!-- ============================================================ -->
<!-- FUSION PAYROLL DASHBOARD FORM VIEW -->
<!-- ============================================================ -->
<record id="fusion_payroll_dashboard_form" model="ir.ui.view">
<field name="name">fusion.payroll.dashboard.form</field>
<field name="model">fusion.payroll.dashboard</field>
<field name="arch" type="xml">
<form string="Fusion Payroll" create="0" edit="0" delete="0">
<field name="currency_id" invisible="1"/>
<field name="company_id" invisible="1"/>
<div class="o_fusion_payroll_dashboard">
<!-- ========== HEADER ========== -->
<div style="padding: 24px 32px; border-bottom: 1px solid var(--o-color-border);">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<h1 style="margin: 0; font-size: 28px; font-weight: 600;">Fusion Payroll</h1>
<p style="margin: 4px 0 0 0; color: var(--o-color-text-muted);">Canadian Payroll Management</p>
</div>
<button name="action_run_payroll" type="object"
class="btn btn-primary btn-lg"
style="padding: 12px 32px; font-size: 16px;">
<i class="fa fa-play me-2"/> Run Payroll
</button>
</div>
</div>
<!-- ========== STATISTICS CARDS ========== -->
<div style="padding: 24px 32px;">
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px;">
<!-- Payroll This Month -->
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; padding: 24px; color: white;">
<div style="font-size: 13px; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px;">Payroll This Month</div>
<div style="font-size: 32px; font-weight: 700; margin: 8px 0;">
<field name="payroll_this_month" widget="monetary" options="{'no_label': True}"/>
</div>
<div style="font-size: 13px; opacity: 0.8;">
<field name="payroll_count_this_month"/> payslips processed
</div>
</div>
<!-- Payroll YTD -->
<div style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); border-radius: 12px; padding: 24px; color: white;">
<div style="font-size: 13px; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px;">Payroll This Year</div>
<div style="font-size: 32px; font-weight: 700; margin: 8px 0;">
<field name="payroll_this_year" widget="monetary" options="{'no_label': True}"/>
</div>
<div style="font-size: 13px; opacity: 0.8;">
Year to date total
</div>
</div>
<!-- Active Employees -->
<div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 12px; padding: 24px; color: white;">
<div style="font-size: 13px; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px;">Active Employees</div>
<div style="font-size: 32px; font-weight: 700; margin: 8px 0;">
<field name="active_employees"/>
</div>
<div style="font-size: 13px; opacity: 0.8;">
<field name="on_leave_employees"/> on leave
</div>
</div>
<!-- Average Pay -->
<div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 12px; padding: 24px; color: white;">
<div style="font-size: 13px; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px;">Avg Pay / Employee</div>
<div style="font-size: 32px; font-weight: 700; margin: 8px 0;">
<field name="avg_payroll_per_employee" widget="monetary" options="{'no_label': True}"/>
</div>
<div style="font-size: 13px; opacity: 0.8;">
This month
</div>
</div>
</div>
<!-- ========== QUICK ACTIONS ========== -->
<h3 style="margin: 0 0 16px 0; font-size: 18px; font-weight: 600;">Quick Actions</h3>
<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 32px;">
<!-- Run Payroll -->
<button name="action_run_payroll" type="object"
style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s;">
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
<i class="fa fa-play" style="font-size: 20px; color: white;"/>
</div>
<div style="font-weight: 600; font-size: 14px;">Run Payroll</div>
<div style="font-size: 12px; color: var(--o-color-text-muted); margin-top: 4px;">Process payments</div>
</button>
<!-- All Employees -->
<button name="action_view_employees" type="object"
style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s;">
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
<i class="fa fa-users" style="font-size: 20px; color: white;"/>
</div>
<div style="font-weight: 600; font-size: 14px;">Employees</div>
<div style="font-size: 12px; color: var(--o-color-text-muted); margin-top: 4px;"><field name="active_employees"/> active</div>
</button>
<!-- CRA Remittance -->
<button name="action_cra_remittance" type="object"
style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s;">
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
<i class="fa fa-bank" style="font-size: 20px; color: white;"/>
</div>
<div style="font-weight: 600; font-size: 14px;">CRA Remittance</div>
<div style="font-size: 12px; color: var(--o-color-text-muted); margin-top: 4px;">Tax payments</div>
</button>
<!-- T4 Slips -->
<button name="action_t4_slips" type="object"
style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s;">
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
<i class="fa fa-file-text-o" style="font-size: 20px; color: #333;"/>
</div>
<div style="font-weight: 600; font-size: 14px;">T4 Slips</div>
<div style="font-size: 12px; color: var(--o-color-text-muted); margin-top: 4px;">Tax statements</div>
</button>
<!-- ROE -->
<button name="action_roe" type="object"
style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s;">
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #5ee7df 0%, #b490ca 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
<i class="fa fa-file-archive-o" style="font-size: 20px; color: white;"/>
</div>
<div style="font-weight: 600; font-size: 14px;">ROE</div>
<div style="font-size: 12px; color: var(--o-color-text-muted); margin-top: 4px;">Employment records</div>
</button>
<!-- Settings -->
<button name="action_settings" type="object"
style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s;">
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
<i class="fa fa-cog" style="font-size: 20px; color: white;"/>
</div>
<div style="font-weight: 600; font-size: 14px;">Settings</div>
<div style="font-size: 12px; color: var(--o-color-text-muted); margin-top: 4px;">Configuration</div>
</button>
</div>
<!-- ========== CHARTS SECTION ========== -->
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 24px;">
<!-- Payroll Trend Chart -->
<div style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 24px;">
<h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Payroll Trend (Last 12 Months)</h4>
<div style="height: 300px;">
<!-- Embedded graph view -->
<field name="id" widget="fusion_payroll_chart" readonly="1"/>
</div>
</div>
<!-- Employee Distribution -->
<div style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 24px;">
<h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Employee Status</h4>
<div style="display: flex; flex-direction: column; gap: 16px; padding-top: 16px;">
<!-- Active -->
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 12px; height: 12px; border-radius: 50%; background: #22c55e;"/>
<div style="flex: 1;">Active</div>
<div style="font-weight: 600;"><field name="active_employees"/></div>
</div>
<!-- On Leave -->
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 12px; height: 12px; border-radius: 50%; background: #f59e0b;"/>
<div style="flex: 1;">On Leave</div>
<div style="font-weight: 600;"><field name="on_leave_employees"/></div>
</div>
<!-- Terminated -->
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 12px; height: 12px; border-radius: 50%; background: #ef4444;"/>
<div style="flex: 1;">Terminated</div>
<div style="font-weight: 600;"><field name="terminated_employees"/></div>
</div>
<div style="border-top: 1px solid var(--o-color-border); padding-top: 16px; margin-top: 8px;">
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 12px; height: 12px; border-radius: 50%; background: #6366f1;"/>
<div style="flex: 1; font-weight: 600;">Total</div>
<div style="font-weight: 700; font-size: 18px;"><field name="total_employees"/></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</field>
</record>
<!-- ============================================================ -->
<!-- PAYROLL STATS GRAPH VIEW -->
<!-- ============================================================ -->
<record id="fusion_payroll_stats_graph" model="ir.ui.view">
<field name="name">fusion.payroll.stats.graph</field>
<field name="model">fusion.payroll.stats</field>
<field name="arch" type="xml">
<graph string="Payroll Trend" type="bar">
<field name="name" type="col"/>
<field name="total_payroll" type="measure"/>
</graph>
</field>
</record>
<record id="fusion_payroll_stats_pivot" model="ir.ui.view">
<field name="name">fusion.payroll.stats.pivot</field>
<field name="model">fusion.payroll.stats</field>
<field name="arch" type="xml">
<pivot string="Payroll Analysis">
<field name="year" type="row"/>
<field name="month_name" type="col"/>
<field name="total_payroll" type="measure"/>
<field name="employee_count" type="measure"/>
</pivot>
</field>
</record>
<!-- ============================================================ -->
<!-- DASHBOARD ACTION -->
<!-- ============================================================ -->
<record id="action_fusion_payroll_dashboard_new" model="ir.actions.server">
<field name="name">Fusion Payroll Dashboard</field>
<field name="model_id" ref="model_fusion_payroll_dashboard"/>
<field name="state">code</field>
<field name="code">
action = model.action_open_dashboard()
</field>
</record>
<!-- Stats Graph Action -->
<record id="action_payroll_stats_graph" model="ir.actions.act_window">
<field name="name">Payroll Trend</field>
<field name="res_model">fusion.payroll.stats</field>
<field name="view_mode">graph,pivot,list</field>
<field name="domain">[('company_id', '=', active_id)]</field>
</record>
</odoo>