268 lines
21 KiB
PHP
268 lines
21 KiB
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">รายการรายจ่าย (Deduction Categories)</h2>
|
|
<p class="text-slate-500 dark:text-slate-400 text-sm mt-1">จัดการประเภทรายจ่าย/หักลบทั้งหมดในระบบ</p>
|
|
</div>
|
|
<button onclick="document.getElementById('createDeductionModal').classList.remove('hidden')" class="inline-flex items-center justify-center px-4 py-2.5 bg-rose-500 hover:bg-rose-600 text-white text-sm font-medium rounded-xl transition-colors shadow-sm w-full md:w-auto">
|
|
<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="M12 4.5v15m7.5-7.5h-15" /></svg>
|
|
เพิ่มรายจ่ายใหม่
|
|
</button>
|
|
</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-hidden">
|
|
<table id="deductionTable" class="w-full text-left text-sm text-slate-600 dark:text-slate-300 display">
|
|
<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-6 py-4">รหัส</th>
|
|
<th class="px-6 py-4">ชื่อรายการรายจ่าย</th>
|
|
<th class="px-6 py-4 text-center">แหล่งที่มาเงิน</th>
|
|
<th class="px-6 py-4 text-center">ลดหย่อนภาษี</th>
|
|
<th class="px-6 py-4 text-center">สถานะ</th>
|
|
<th class="px-6 py-4 text-right">จัดการ</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100 dark:divide-slate-700">
|
|
<?php if (empty($deductions)): ?>
|
|
<tr>
|
|
<td colspan="6" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
|
|
ยังไม่มีข้อมูลรายการรายจ่าย
|
|
</td>
|
|
</tr>
|
|
<?php else: ?>
|
|
<?php foreach ($deductions as $ded): ?>
|
|
<tr class="hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
|
|
<td class="px-6 py-4 font-mono font-bold text-slate-700 dark:text-slate-200">
|
|
<?= htmlspecialchars($ded['code']) ?>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="font-medium text-slate-800 dark:text-slate-200"><?= htmlspecialchars($ded['name']) ?></div>
|
|
<?php if (!empty($ded['description'])): ?>
|
|
<div class="text-xs text-slate-500 dark:text-slate-400 mt-1"><?= htmlspecialchars($ded['description']) ?></div>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="px-6 py-4 text-center font-medium text-slate-700 dark:text-slate-200">
|
|
<?= $ded['fund_source'] === 'CGD' ? 'กรมบัญชีกลาง' : 'โรงพยาบาล' ?>
|
|
</td>
|
|
<td class="px-6 py-4 text-center">
|
|
<?php if ($ded['is_tax_deductible']): ?>
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">ใช่</span>
|
|
<?php else: ?>
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300">ไม่</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="px-6 py-4 text-center">
|
|
<?php if ($ded['is_active']): ?>
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">ใช้งาน</span>
|
|
<?php else: ?>
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400">ปิดใช้งาน</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button onclick='openEditDeductionModal(<?= json_encode($ded) ?>)' class="inline-flex items-center px-3 py-1.5 border border-slate-300 dark:border-slate-600 rounded-lg text-xs font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
|
|
แก้ไข
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Modal -->
|
|
<div id="createDeductionModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
|
|
<div class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm transition-opacity" onclick="document.getElementById('createDeductionModal').classList.add('hidden')"></div>
|
|
<div class="flex min-h-screen items-center justify-center p-4">
|
|
<div class="relative transform overflow-hidden rounded-2xl bg-white dark:bg-slate-800 text-left shadow-xl transition-all sm:w-full sm:max-w-lg border border-slate-100 dark:border-slate-700">
|
|
<form action="<?= BASE_URL ?>/settings/deduction" method="POST">
|
|
<div class="p-6">
|
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-6">เพิ่มรายการรายจ่ายใหม่</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="code" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">รหัสรายจ่าย (Code)</label>
|
|
<input type="text" id="code" name="code" required 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-rose-500 bg-slate-50 dark:bg-slate-900 sm:text-sm">
|
|
</div>
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">ชื่อรายการ (Name)</label>
|
|
<input type="text" id="name" name="name" required 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-rose-500 bg-slate-50 dark:bg-slate-900 sm:text-sm">
|
|
</div>
|
|
<div>
|
|
<label for="description" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">รายละเอียด (Description)</label>
|
|
<input type="text" id="description" name="description" 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">
|
|
</div>
|
|
<div>
|
|
<label for="fund_source" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">แหล่งที่มาเงิน</label>
|
|
<select id="fund_source" name="fund_source" 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="HOSPITAL">โรงพยาบาล</option>
|
|
<option value="CGD">กรมบัญชีกลาง (CGD)</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<label class="flex items-center cursor-pointer">
|
|
<div class="relative">
|
|
<input type="checkbox" name="is_tax_deductible" class="sr-only">
|
|
<div class="block bg-slate-200 dark:bg-slate-700 w-10 h-6 rounded-full transition-colors"></div>
|
|
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform transform translate-x-full"></div>
|
|
</div>
|
|
<div class="ml-3 text-sm font-medium text-slate-700 dark:text-slate-300">ใช้ลดหย่อนภาษีได้</div>
|
|
</label>
|
|
|
|
<label class="flex items-center cursor-pointer">
|
|
<div class="relative">
|
|
<input type="checkbox" name="is_active" class="sr-only" checked>
|
|
<div class="block bg-slate-200 dark:bg-slate-700 w-10 h-6 rounded-full transition-colors"></div>
|
|
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform transform translate-x-full"></div>
|
|
</div>
|
|
<div class="ml-3 text-sm font-medium text-slate-700 dark:text-slate-300">เปิดใช้งาน</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-50 dark:bg-slate-700/50 px-6 py-4 flex justify-end space-x-3">
|
|
<button type="button" onclick="document.getElementById('createDeductionModal').classList.add('hidden')" class="px-4 py-2 text-sm font-semibold text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">ยกเลิก</button>
|
|
<button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-rose-500 rounded-xl hover:bg-rose-600 transition-colors">บันทึก</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
<div id="editDeductionModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
|
|
<div class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm transition-opacity" onclick="document.getElementById('editDeductionModal').classList.add('hidden')"></div>
|
|
<div class="flex min-h-screen items-center justify-center p-4">
|
|
<div class="relative transform overflow-hidden rounded-2xl bg-white dark:bg-slate-800 text-left shadow-xl transition-all sm:w-full sm:max-w-lg border border-slate-100 dark:border-slate-700">
|
|
<form action="<?= BASE_URL ?>/settings/deduction/update" method="POST">
|
|
<input type="hidden" id="edit_id" name="id">
|
|
<div class="p-6">
|
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-6">แก้ไขรายการรายจ่าย</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="edit_code" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">รหัสรายจ่าย (Code)</label>
|
|
<input type="text" id="edit_code" name="code" required 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-rose-500 bg-slate-50 dark:bg-slate-900 sm:text-sm">
|
|
</div>
|
|
<div>
|
|
<label for="edit_name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">ชื่อรายการ (Name)</label>
|
|
<input type="text" id="edit_name" name="name" required 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-rose-500 bg-slate-50 dark:bg-slate-900 sm:text-sm">
|
|
</div>
|
|
<div>
|
|
<label for="edit_description" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">รายละเอียด (Description)</label>
|
|
<input type="text" id="edit_description" name="description" 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-rose-500 bg-slate-50 dark:bg-slate-900 sm:text-sm">
|
|
</div>
|
|
<div>
|
|
<label for="edit_display_order" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">ลำดับการแสดงผล</label>
|
|
<input type="number" id="edit_display_order" name="display_order" 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">
|
|
</div>
|
|
<div>
|
|
<label for="edit_fund_source" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">แหล่งที่มาเงิน</label>
|
|
<select id="edit_fund_source" name="fund_source" 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="HOSPITAL">โรงพยาบาล</option>
|
|
<option value="CGD">กรมบัญชีกลาง (CGD)</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<label class="flex items-center cursor-pointer">
|
|
<div class="relative">
|
|
<input type="checkbox" id="edit_is_tax_deductible" name="is_tax_deductible" class="sr-only">
|
|
<div class="block bg-slate-200 dark:bg-slate-700 w-10 h-6 rounded-full transition-colors"></div>
|
|
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform transform translate-x-full"></div>
|
|
</div>
|
|
<div class="ml-3 text-sm font-medium text-slate-700 dark:text-slate-300">ใช้ลดหย่อนภาษีได้</div>
|
|
</label>
|
|
|
|
<label class="flex items-center cursor-pointer">
|
|
<div class="relative">
|
|
<input type="checkbox" id="edit_is_active" name="is_active" class="sr-only">
|
|
<div class="block bg-slate-200 dark:bg-slate-700 w-10 h-6 rounded-full transition-colors"></div>
|
|
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform transform translate-x-full"></div>
|
|
</div>
|
|
<div class="ml-3 text-sm font-medium text-slate-700 dark:text-slate-300">เปิดใช้งาน</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-50 dark:bg-slate-700/50 px-6 py-4 flex justify-end space-x-3">
|
|
<button type="button" onclick="document.getElementById('editDeductionModal').classList.add('hidden')" class="px-4 py-2 text-sm font-semibold text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">ยกเลิก</button>
|
|
<button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-rose-500 rounded-xl hover:bg-rose-600 transition-colors">บันทึกการแก้ไข</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Custom Toggle Switch Logic */
|
|
input:checked ~ .block { background-color: #0ea5e9; }
|
|
input:checked[name="is_tax_deductible"] ~ .block { background-color: #10b981; }
|
|
input:checked ~ .dot { transform: translateX(100%); }
|
|
input:not(:checked) ~ .dot { transform: translateX(0); }
|
|
</style>
|
|
|
|
<!-- jQuery and 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() {
|
|
$('#deductionTable').DataTable({
|
|
"language": {
|
|
"sProcessing": "กำลังดำเนินการ...",
|
|
"sLengthMenu": "แสดง _MENU_ เรคคอร์ด",
|
|
"sZeroRecords": "ไม่พบข้อมูล",
|
|
"sInfo": "แสดง _START_ ถึง _END_ จาก _TOTAL_ เรคคอร์ด",
|
|
"sInfoEmpty": "แสดง 0 ถึง 0 จาก 0 เรคคอร์ด",
|
|
"sInfoFiltered": "(กรองข้อมูล _MAX_ ทุกเรคคอร์ด)",
|
|
"sSearch": "ค้นหา:",
|
|
"oPaginate": {
|
|
"sFirst": "แรกสุด",
|
|
"sPrevious": "ก่อนหน้า",
|
|
"sNext": "ถัดไป",
|
|
"sLast": "สุดท้าย"
|
|
}
|
|
},
|
|
"pageLength": 25,
|
|
"columnDefs": [
|
|
{ "orderable": false, "targets": 5 } // Disable sorting on Action column
|
|
]
|
|
});
|
|
});
|
|
|
|
function openEditDeductionModal(deduction) {
|
|
document.getElementById('edit_id').value = deduction.id;
|
|
document.getElementById('edit_code').value = deduction.code;
|
|
document.getElementById('edit_name').value = deduction.name;
|
|
document.getElementById('edit_description').value = deduction.description;
|
|
document.getElementById('edit_fund_source').value = deduction.fund_source || 'HOSPITAL';
|
|
document.getElementById('edit_display_order').value = deduction.display_order;
|
|
document.getElementById('edit_is_tax_deductible').checked = deduction.is_tax_deductible == 1;
|
|
document.getElementById('edit_is_active').checked = deduction.is_active == 1;
|
|
document.getElementById('editDeductionModal').classList.remove('hidden');
|
|
}
|
|
</script>
|
|
|
|
<?php require_once APP_ROOT . '/app/Views/layouts/footer.php'; ?>
|