231 lines
10 KiB
TypeScript
231 lines
10 KiB
TypeScript
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 (
|
||
<AuthenticatedLayout breadcrumbs={[{ label: "報表管理", href: "#" }, { label: "會計報表", href: route("accounting.report") }]}>
|
||
<Head title="會計報表" />
|
||
|
||
<div className="container mx-auto p-6 max-w-7xl">
|
||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
||
<BarChart3 className="h-6 w-6 text-primary-main" />
|
||
會計支出報表
|
||
</h1>
|
||
<p className="text-gray-500 mt-1">彙整採購支出與各項公用事業費用</p>
|
||
</div>
|
||
|
||
<Button
|
||
onClick={handleExport}
|
||
variant="outline"
|
||
className="button-outlined-primary gap-2"
|
||
>
|
||
<Download className="h-4 w-4" /> 匯出 CSV 報表
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Filters */}
|
||
<div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
|
||
<div className="flex flex-wrap items-end gap-4">
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium text-gray-700">開始日期</label>
|
||
<div className="relative">
|
||
<Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4 pointer-events-none" />
|
||
<Input
|
||
type="date"
|
||
value={dateStart}
|
||
onChange={(e) => setDateStart(e.target.value)}
|
||
className="pl-10 h-10 w-48"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium text-gray-700">結束日期</label>
|
||
<div className="relative">
|
||
<Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4 pointer-events-none" />
|
||
<Input
|
||
type="date"
|
||
value={dateEnd}
|
||
onChange={(e) => setDateEnd(e.target.value)}
|
||
className="pl-10 h-10 w-48"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<Button
|
||
onClick={handleFilter}
|
||
className="button-filled-primary h-10 px-6 gap-2"
|
||
>
|
||
<Filter className="h-4 w-4" /> 篩選
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Summary Cards */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||
<Card className="border-l-4 border-l-red-500 shadow-sm">
|
||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||
<CardTitle className="text-sm font-medium text-gray-500">總計支出</CardTitle>
|
||
<TrendingDown className="h-4 w-4 text-red-500" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold text-gray-900">$ {Number(summary.total_amount).toLocaleString()}</div>
|
||
<p className="text-xs text-gray-400 mt-1">共有 {summary.record_count} 筆紀錄</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-l-4 border-l-orange-500 shadow-sm">
|
||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||
<CardTitle className="text-sm font-medium text-gray-500">採購支出</CardTitle>
|
||
<Package className="h-4 w-4 text-orange-500" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold text-gray-900">$ {Number(summary.purchase_total).toLocaleString()}</div>
|
||
<p className="text-xs text-gray-400 mt-1">採購單彙整</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-l-4 border-l-blue-500 shadow-sm">
|
||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||
<CardTitle className="text-sm font-medium text-gray-500">公共事業費</CardTitle>
|
||
<Pocket className="h-4 w-4 text-blue-500" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold text-gray-900">$ {Number(summary.utility_total).toLocaleString()}</div>
|
||
<p className="text-xs text-gray-400 mt-1">水、電、瓦斯、電信等費項</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Results Table */}
|
||
<div className="bg-white rounded-lg shadow-sm border overflow-hidden">
|
||
<Table>
|
||
<TableHeader className="bg-gray-50">
|
||
<TableRow>
|
||
<TableHead className="w-[120px] py-4 px-4">日期</TableHead>
|
||
<TableHead className="w-[120px]">來源</TableHead>
|
||
<TableHead className="w-[120px]">類別</TableHead>
|
||
<TableHead className="px-4">項目詳細</TableHead>
|
||
<TableHead className="w-[180px]">憑證 / 單號</TableHead>
|
||
<TableHead className="w-[150px] text-right px-4">金額</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{records.length === 0 ? (
|
||
<TableRow>
|
||
<TableCell colSpan={6} className="h-48 text-center text-gray-500">
|
||
此日期區間內無支出紀錄
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
records.map((record) => (
|
||
<TableRow key={record.id} className="hover:bg-gray-50/50">
|
||
<TableCell className="font-medium">{record.date}</TableCell>
|
||
<TableCell>
|
||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${record.source === '採購單' ? 'bg-orange-100 text-orange-700' : 'bg-blue-100 text-blue-700'
|
||
}`}>
|
||
{record.source}
|
||
</span>
|
||
</TableCell>
|
||
<TableCell className="text-gray-600">{record.category}</TableCell>
|
||
<TableCell>
|
||
<div className="flex flex-col">
|
||
<span className="font-medium text-gray-900">{record.item}</span>
|
||
{record.invoice_number && (
|
||
<span className="text-xs text-gray-400">發票：{record.invoice_number}</span>
|
||
)}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell className="font-mono text-sm text-gray-500">
|
||
{record.reference}
|
||
</TableCell>
|
||
<TableCell className="text-right font-bold text-gray-900 px-4">
|
||
$ {Number(record.amount).toLocaleString()}
|
||
</TableCell>
|
||
</TableRow>
|
||
))
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
</div>
|
||
</AuthenticatedLayout>
|
||
);
|
||
}
|