<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="fusion_payroll.ReportHub">
        <div class="o_action o_fusion_report_hub">
            <div class="container-fluid py-4">
                <!-- Header -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h1 class="mb-1">
                            <i class="fa fa-bar-chart me-2 text-primary"/>Payroll Reports
                        </h1>
                        <p class="text-muted mb-0">Select a report to view payroll data and analytics</p>
                    </div>
                </div>

                <!-- Reports Grid -->
                <div class="row g-3">
                    <!-- Left Column -->
                    <div class="col-md-6">
                        <!-- Paycheque History -->
                        <div class="card mb-2" style="cursor: pointer;" t-on-click="() => this.openReport('fusion_payroll.action_payroll_report_paycheque_history')">
                            <div class="card-body py-2 d-flex align-items-center">
                                <i class="fa fa-file-text-o fa-lg text-primary me-3"/>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Paycheque History</h6>
                                    <small class="text-muted">View all paycheques by date</small>
                                </div>
                                <i class="fa fa-chevron-right text-muted"/>
                            </div>
                        </div>

                        <!-- Deductions and Contributions -->
                        <div class="card mb-2" style="cursor: pointer;" t-on-click="() => this.openReport('fusion_payroll.action_payroll_report_deductions')">
                            <div class="card-body py-2 d-flex align-items-center">
                                <i class="fa fa-minus-circle fa-lg text-primary me-3"/>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Deductions and Contributions</h6>
                                    <small class="text-muted">Employee and company deductions</small>
                                </div>
                                <i class="fa fa-chevron-right text-muted"/>
                            </div>
                        </div>

                        <!-- Payroll Summary by Employee -->
                        <div class="card mb-2" style="cursor: pointer;" t-on-click="() => this.openReport('fusion_payroll.action_payroll_report_summary_employee')">
                            <div class="card-body py-2 d-flex align-items-center">
                                <i class="fa fa-users fa-lg text-primary me-3"/>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Payroll Summary by Employee</h6>
                                    <small class="text-muted">Pivot by employee</small>
                                </div>
                                <i class="fa fa-chevron-right text-muted"/>
                            </div>
                        </div>

                        <!-- Payroll Item List -->
                        <div class="card mb-2" style="cursor: pointer;" t-on-click="() => this.openReport('fusion_payroll.action_payroll_report_employee_directory')">
                            <div class="card-body py-2 d-flex align-items-center">
                                <i class="fa fa-address-book fa-lg text-primary me-3"/>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Payroll Item List</h6>
                                    <small class="text-muted">Employee pay rates and status</small>
                                </div>
                                <i class="fa fa-chevron-right text-muted"/>
                            </div>
                        </div>

                        <!-- Payroll Details -->
                        <div class="card mb-2" style="cursor: pointer;" t-on-click="() => this.openReport('fusion_payroll.action_payroll_report_payroll_details')">
                            <div class="card-body py-2 d-flex align-items-center">
                                <i class="fa fa-list-alt fa-lg text-primary me-3"/>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Payroll Details</h6>
                                    <small class="text-muted">Detailed breakdown per pay period</small>
                                </div>
                                <i class="fa fa-chevron-right text-muted"/>
                            </div>
                        </div>

                        <!-- Payroll Summary -->
                        <div class="card mb-2" style="cursor: pointer;" t-on-click="() => this.openReport('fusion_payroll.action_payroll_report_summary')">
                            <div class="card-body py-2 d-flex align-items-center">
                                <i class="fa fa-table fa-lg text-primary me-3"/>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Payroll Summary</h6>
                                    <small class="text-muted">Summary with all components</small>
                                </div>
                                <i class="fa fa-chevron-right text-muted"/>
                            </div>
                        </div>

                        <!-- Time Off -->
                        <div class="card mb-2" style="cursor: pointer;" t-on-click="() => this.openReport('fusion_payroll.action_payroll_report_time_off')">
                            <div class="card-body py-2 d-flex align-items-center">
                                <i class="fa fa-calendar-check-o fa-lg text-primary me-3"/>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Time Off</h6>
                                    <small class="text-muted">Vacation and leave balances</small>
                                </div>
                                <i class="fa fa-chevron-right text-muted"/>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="col-md-6">
                        <!-- Payroll Tax Liability -->
                        <div class="card mb-2" style="cursor: pointer;" t-on-click="() => this.openReport('fusion_payroll.action_payroll_report_tax_liability')">
                            <div class="card-body py-2 d-flex align-items-center">
                                <i class="fa fa-balance-scale fa-lg text-success me-3"/>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Payroll Tax Liability</h6>
                                    <small class="text-muted">Tax amounts owed vs paid</small>
                                </div>
                                <i class="fa fa-chevron-right text-muted"/>
                            </div>
                        </div>

                        <!-- Payroll Tax Payments -->
                        <div class="card mb-2" style="cursor: pointer;" t-on-click="() => this.openReport('fusion_payroll.action_payroll_report_tax_payments')">
                            <div class="card-body py-2 d-flex align-items-center">
                                <i class="fa fa-credit-card fa-lg text-success me-3"/>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Payroll Tax Payments</h6>
                                    <small class="text-muted">History of remittance payments</small>
                                </div>
                                <i class="fa fa-chevron-right text-muted"/>
                            </div>
                        </div>

                        <!-- Total Payroll Cost -->
                        <div class="card mb-2" style="cursor: pointer;" t-on-click="() => this.openReport('fusion_payroll.action_payroll_report_total_cost')">
                            <div class="card-body py-2 d-flex align-items-center">
                                <i class="fa fa-calculator fa-lg text-success me-3"/>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Total Payroll Cost</h6>
                                    <small class="text-muted">All payroll costs breakdown</small>
                                </div>
                                <i class="fa fa-chevron-right text-muted"/>
                            </div>
                        </div>

                        <!-- Total Pay -->
                        <div class="card mb-2" style="cursor: pointer;" t-on-click="() => this.openReport('fusion_payroll.action_payroll_report_total_pay')">
                            <div class="card-body py-2 d-flex align-items-center">
                                <i class="fa fa-money fa-lg text-success me-3"/>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Total Pay</h6>
                                    <small class="text-muted">Pay by type per employee</small>
                                </div>
                                <i class="fa fa-chevron-right text-muted"/>
                            </div>
                        </div>

                        <!-- Payroll Tax and Wage Summary -->
                        <div class="card mb-2" style="cursor: pointer;" t-on-click="() => this.openReport('fusion_payroll.action_payroll_report_tax_wage_summary')">
                            <div class="card-body py-2 d-flex align-items-center">
                                <i class="fa fa-pie-chart fa-lg text-success me-3"/>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Payroll Tax and Wage Summary</h6>
                                    <small class="text-muted">Wages and tax amounts</small>
                                </div>
                                <i class="fa fa-chevron-right text-muted"/>
                            </div>
                        </div>

                        <!-- Workers' Compensation -->
                        <div class="card mb-2" style="cursor: pointer;" t-on-click="() => this.openReport('fusion_payroll.action_payroll_report_workers_comp')">
                            <div class="card-body py-2 d-flex align-items-center">
                                <i class="fa fa-shield fa-lg text-success me-3"/>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Workers' Compensation</h6>
                                    <small class="text-muted">WCB wages by province</small>
                                </div>
                                <i class="fa fa-chevron-right text-muted"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t>

</templates>
