import { useState } from "react"; import { Button } from "@/Components/ui/button"; import { Input } from "@/Components/ui/input"; import { Label } from "@/Components/ui/label"; import { BarChart3, Download, Calendar, Filter, TrendingDown, Package, Pocket, RotateCcw, FileText } from 'lucide-react'; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Head, router } from "@inertiajs/react"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/Components/ui/table"; import { getDateRange, formatDateWithDayOfWeek } from "@/utils/format"; import { Badge } from "@/Components/ui/badge"; import Pagination from "@/Components/shared/Pagination"; import { SearchableSelect } from "@/Components/ui/searchable-select"; import { Can } from "@/Components/Permission/Can"; interface Record { id: string; date: string; source: string; category: string; item: string; reference: string; invoice_number?: string; amount: number | string; } interface PageProps { records: { data: Record[]; links: any[]; total: number; from: number; to: number; current_page: number; }; summary: { total_amount: number; purchase_total: number; utility_total: number; record_count: number; }; filters: { date_start: string; date_end: string; per_page?: number; }; } export default function AccountingReport({ records, summary, filters }: PageProps) { const [dateStart, setDateStart] = useState(filters.date_start); const [dateEnd, setDateEnd] = useState(filters.date_end); // Determine initial range type const today = new Date().toISOString().split('T')[0]; const initialRangeType = (filters.date_start === today && filters.date_end === today) ? "today" : "custom"; const [dateRangeType, setDateRangeType] = useState(initialRangeType); const [perPage, setPerPage] = useState(filters.per_page?.toString() || "10"); const handleDateRangeChange = (type: string) => { setDateRangeType(type); if (type === "custom") return; const { start, end } = getDateRange(type); setDateStart(start); setDateEnd(end); }; const handleFilter = () => { router.get( route("accounting.report"), { date_start: dateStart, date_end: dateEnd, per_page: perPage, }, { preserveState: true } ); }; const handlePerPageChange = (value: string) => { setPerPage(value); router.get( route("accounting.report"), { date_start: dateStart, date_end: dateEnd, per_page: value, }, { preserveState: true } ); }; const handleClearFilters = () => { setDateStart(""); setDateEnd(""); setPerPage("10"); router.get(route("accounting.report"), {}, { preserveState: false }); }; const handleExport = () => { window.location.href = route("accounting.export", { date_start: dateStart, date_end: dateEnd, }); }; return (

{/* Header */}

會計報表

彙整採購支出與各項公用事業費用

{/* Filters with Quick Date Range */}

快速時間區間

{[ { label: "今日", value: "today" }, { label: "昨日", value: "yesterday" }, { label: "本週", value: "this_week" }, { label: "本月", value: "this_month" }, { label: "上月", value: "last_month" }, ].map((opt) => ( ))}

開始日期

{ setDateStart(e.target.value); setDateRangeType('custom'); }} className="pl-9 block w-full h-9 bg-white" />

結束日期

{ setDateEnd(e.target.value); setDateRangeType('custom'); }} className="pl-9 block w-full h-9 bg-white" />

{/* Action Buttons */}

{/* Compact Summary - Full Width Grid (Horizontal Style) */}

總計支出 $ {Number(summary.total_amount).toLocaleString()}

採購支出 $ {Number(summary.purchase_total).toLocaleString()}

公共事業費 $ {Number(summary.utility_total).toLocaleString()}

{/* Results Table */}

日期來源類別項目詳細金額 {records.data.length === 0 ? (

此日期區間內無支出紀錄

) : ( records.data.map((record) => ( {formatDateWithDayOfWeek(record.date)} {record.source} {record.category}

{record.item} {record.invoice_number && ( 發票：{record.invoice_number} )}

$ {Number(record.amount).toLocaleString()} )) )}

{/* Pagination Footer */}

每頁顯示筆

); }