gravity/จัดการข้อมูลเงินเดือนเจ้าหน้าที่โรงพยาบาล/app/Views/reports/salary_report.php

<?php require_once APP_ROOT . '/app/Views/layouts/header.php'; ?>

<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6 gap-4">
    <div>
        <h2 class="text-2xl font-bold text-slate-800 dark:text-white">รายงานเงินเดือน</h2>
        <p class="text-slate-500 dark:text-slate-400 text-sm mt-1">แสดงข้อมูลรายได้และรายจ่ายของเจ้าหน้าที่ในแต่ละเดือน</p>
    </div>
</div>

<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700 overflow-hidden mb-6 p-6">
    <form method="GET" action="<?= BASE_URL ?>/reports/salary" class="flex flex-col md:flex-row gap-4 items-end">
        <div class="w-full md:w-48">
            <label for="month" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">เดือน</label>
            <select id="month" name="month" class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 dark:text-white shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-600 focus:ring-2 focus:ring-sky-500 bg-slate-50 dark:bg-slate-900 sm:text-sm">
                <?php
                $months = [
                    '01' => 'มกราคม', '02' => 'กุมภาพันธ์', '03' => 'มีนาคม', '04' => 'เมษายน',
                    '05' => 'พฤษภาคม', '06' => 'มิถุนายน', '07' => 'กรกฎาคม', '08' => 'สิงหาคม',
                    '09' => 'กันยายน', '10' => 'ตุลาคม', '11' => 'พฤศจิกายน', '12' => 'ธันวาคม'
                ];
                foreach ($months as $m => $name): ?>
                    <option value="<?= $m ?>" <?= ($month ?? '') == $m ? 'selected' : '' ?>><?= $name ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="w-full md:w-32">
            <label for="year" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">ปี (พ.ศ.)</label>
            <select id="year" name="year" class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 dark:text-white shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-600 focus:ring-2 focus:ring-sky-500 bg-slate-50 dark:bg-slate-900 sm:text-sm">
                <?php 
                $currentYear = date('Y');
                for ($y = $currentYear - 2; $y <= $currentYear + 1; $y++): ?>
                    <option value="<?= $y ?>" <?= ($year ?? '') == $y ? 'selected' : '' ?>><?= $y + 543 ?></option>
                <?php endfor; ?>
            </select>
        </div>
        <div class="w-full md:w-64">
            <label for="type_id" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">ประเภทเจ้าหน้าที่</label>
            <select id="type_id" name="type_id" class="block w-full rounded-xl border-0 py-2.5 px-3 text-slate-900 dark:text-white shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-600 focus:ring-2 focus:ring-sky-500 bg-slate-50 dark:bg-slate-900 sm:text-sm">
                <option value="">-- ทั้งหมด --</option>
                <?php foreach ($officerTypes as $type): ?>
                    <option value="<?= $type['id'] ?>" <?= ($typeId ?? '') == $type['id'] ? 'selected' : '' ?>><?= htmlspecialchars($type['name']) ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <button type="submit" class="px-6 py-2.5 bg-slate-800 hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600 text-white text-sm font-medium rounded-xl transition-colors shadow-sm w-full md:w-auto flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 mr-2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /></svg>
            ดูรายงาน
        </button>
        <?php if (!empty($reportData)): ?>
        <a href="<?= BASE_URL ?>/reports/salary/export?month=<?= urlencode($month) ?>&year=<?= urlencode($year) ?>&type_id=<?= urlencode($typeId) ?>" class="px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium rounded-xl transition-colors shadow-sm w-full md:w-auto flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
            ส่งออก Excel
        </a>
        <?php endif; ?>
    </form>
</div>

<!-- DataTables CSS for Tailwind -->
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.tailwindcss.css">
<style>
    /* DataTables Dark Mode Overrides */
    .dark .dt-container { color: #cbd5e1; }
    .dark .dt-length select, .dark .dt-search input { 
        background-color: #1e293b; border-color: #334155; color: #f8fafc; border-radius: 0.5rem; padding: 0.25rem 0.5rem;
    }
    .dark .dt-info, .dark .dt-paging-button { color: #94a3b8 !important; }
    .dark .dt-paging-button.current { background: #38bdf8 !important; color: #0f172a !important; border-color: #38bdf8 !important; }
    .dark .dt-paging-button:hover { background: #334155 !important; color: #f8fafc !important; }
    table.dataTable.no-footer { border-bottom: 1px solid #334155 !important; }
</style>

<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700 overflow-hidden p-6">
    <div class="overflow-x-auto">
        <table id="reportTable" class="w-full text-left text-sm text-slate-600 dark:text-slate-300 display whitespace-nowrap">
            <thead class="bg-slate-50 dark:bg-slate-900/50 text-slate-500 dark:text-slate-400 text-xs uppercase font-semibold">
                <tr>
                    <th class="px-4 py-3">ลำดับ</th>
                    <th class="px-4 py-3">ชื่อ-สกุล</th>
                    <th class="px-4 py-3 text-right">เงินเดือนหลัก</th>
                    <th class="px-4 py-3 text-right text-emerald-600 dark:text-emerald-400">รวมรายรับ</th>
                    <th class="px-4 py-3 text-right text-red-600 dark:text-red-400">รวมรายจ่าย</th>
                    <th class="px-4 py-3 text-right text-sky-600 dark:text-sky-400">รับสุทธิ</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                <?php if (!empty($reportData)): ?>
                    <?php $i = 1; foreach ($reportData as $row): ?>
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
                            <td class="px-4 py-3 text-center"><?= $i++ ?></td>
                            <td class="px-4 py-3 font-medium text-slate-800 dark:text-slate-200">
                                <?= htmlspecialchars(trim($row['hr_prefix'] ?? '') . trim($row['hr_fname'] ?? '') . ' ' . trim($row['hr_lname'] ?? '')) ?>
                            </td>
                            <td class="px-4 py-3 text-right font-mono"><?= number_format($row['base_salary'] ?? 0, 2) ?></td>
                            <td class="px-4 py-3 text-right font-mono text-emerald-600 dark:text-emerald-400 font-medium"><?= number_format($row['total_income'] ?? 0, 2) ?></td>
                            <td class="px-4 py-3 text-right font-mono text-red-600 dark:text-red-400 font-medium"><?= number_format($row['total_deduction'] ?? 0, 2) ?></td>
                            <td class="px-4 py-3 text-right font-mono text-sky-600 dark:text-sky-400 font-bold"><?= number_format($row['net_salary'] ?? 0, 2) ?></td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- DataTables JS -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.tailwindcss.js"></script>

<script>
    $(document).ready(function() {
        var t = $('#reportTable').DataTable({
            "language": {
                "lengthMenu": "แสดง _MENU_ รายการต่อหน้า",
                "zeroRecords": "ไม่พบข้อมูล",
                "info": "แสดงหน้าที่ _PAGE_ จาก _PAGES_",
                "infoEmpty": "ไม่มีข้อมูล",
                "infoFiltered": "(กรองจากทั้งหมด _MAX_ รายการ)",
                "search": "ค้นหา:",
                "paginate": {
                    "first": "หน้าแรก",
                    "last": "หน้าสุดท้าย",
                    "next": "ถัดไป",
                    "previous": "ก่อนหน้า"
                }
            },
            "pageLength": 10,
            "columnDefs": [{
                "searchable": false,
                "orderable": false,
                "targets": 0
            }],
            "order": [[ 1, "asc" ]] // Sort by Name by default
        });

        t.on('order.dt search.dt', function () {
            let i = 1;
            t.cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
                this.data(i++);
            });
        }).draw();
    });
</script>

<?php require_once APP_ROOT . '/app/Views/layouts/footer.php'; ?>