import { useState } from "react"; import { Button } from "@/Components/ui/button"; import { Input } from "@/Components/ui/input"; import { BarChart3, Download, Calendar, Filter, ArrowUpRight, TrendingDown, FileSpreadsheet, Package, Pocket } 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 { Card, CardContent, CardHeader, CardTitle, } from "@/Components/ui/card"; interface Record { id: string; date: string; source: string; category: string; item: string; reference: string; invoice_number?: string; amount: number | string; } interface PageProps { records: Record[]; summary: { total_amount: number; purchase_total: number; utility_total: number; record_count: number; }; filters: { date_start: string; date_end: string; }; } export default function AccountingReport({ records, summary, filters }: PageProps) { const [dateStart, setDateStart] = useState(filters.date_start); const [dateEnd, setDateEnd] = useState(filters.date_end); const handleFilter = () => { router.get( route("accounting.report"), { date_start: dateStart, date_end: dateEnd, }, { preserveState: true } ); }; const handleExport = () => { window.location.href = route("accounting.export", { date_start: dateStart, date_end: dateEnd, }); }; return (

會計支出報表

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

{/* Filters */}

開始日期

setDateStart(e.target.value)} className="pl-10 h-10 w-48" />

結束日期

setDateEnd(e.target.value)} className="pl-10 h-10 w-48" />

{/* Summary Cards */}

總計支出

$ {Number(summary.total_amount).toLocaleString()}

共有 {summary.record_count} 筆紀錄

採購支出

$ {Number(summary.purchase_total).toLocaleString()}

採購單彙整

公共事業費

$ {Number(summary.utility_total).toLocaleString()}

水、電、瓦斯、電信等費項

{/* Results Table */}

日期來源類別項目詳細憑證 / 單號金額 {records.length === 0 ? ( 此日期區間內無支出紀錄 ) : ( records.map((record) => ( {record.date} {record.source} {record.category}

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

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

); }