feat(accounting): 實作公共事業費管理與會計支出報表功能

resources/js/Components/UtilityFee/UtilityFeeDialog.tsx

@@ -0,0 +1,211 @@
+import { useEffect } from "react";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/Components/ui/dialog";
+import { Button } from "@/Components/ui/button";
+import { Input } from "@/Components/ui/input";
+import { Label } from "@/Components/ui/label";
+import { Textarea } from "@/Components/ui/textarea";
+import { SearchableSelect } from "@/Components/ui/searchable-select";
+import { useForm } from "@inertiajs/react";
+import { toast } from "sonner";
+
+export interface UtilityFee {
+    id: number;
+    transaction_date: string;
+    category: string;
+    amount: number | string;
+    invoice_number?: string;
+    description?: string;
+    created_at: string;
+    updated_at: string;
+}
+
+interface UtilityFeeDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    fee: UtilityFee | null;
+    availableCategories: string[];
+}
+
+const DEFAULT_CATEGORIES = [
+    "電費",
+    "水費",
+    "瓦斯費",
+    "電話費",
+    "網路費",
+    "清潔費",
+    "管理費",
+];
+
+export default function UtilityFeeDialog({
+    open,
+    onOpenChange,
+    fee,
+    availableCategories,
+}: UtilityFeeDialogProps) {
+    const { data, setData, post, put, processing, errors, reset, clearErrors } = useForm({
+        transaction_date: new Date().toISOString().split("T")[0],
+        category: "",
+        amount: "",
+        invoice_number: "",
+        description: "",
+    });
+
+    // Combine default and available categories
+    const categories = Array.from(new Set([...DEFAULT_CATEGORIES, ...availableCategories]));
+
+    useEffect(() => {
+        if (open) {
+            clearErrors();
+            if (fee) {
+                setData({
+                    transaction_date: fee.transaction_date,
+                    category: fee.category,
+                    amount: fee.amount.toString(),
+                    invoice_number: fee.invoice_number || "",
+                    description: fee.description || "",
+                });
+            } else {
+                reset();
+                setData("transaction_date", new Date().toISOString().split("T")[0]);
+            }
+        }
+    }, [open, fee]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+
+        if (fee) {
+            put(route("utility-fees.update", fee.id), {
+                onSuccess: () => {
+                    toast.success("紀錄已更新");
+                    onOpenChange(false);
+                    reset();
+                },
+                onError: () => {
+                    toast.error("更新失敗，請檢查輸入資料");
+                }
+            });
+        } else {
+            post(route("utility-fees.store"), {
+                onSuccess: () => {
+                    toast.success("公共事業費已記錄");
+                    onOpenChange(false);
+                    reset();
+                },
+                onError: () => {
+                    toast.error("紀錄失敗，請檢查輸入資料");
+                }
+            });
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[500px]">
+                <DialogHeader>
+                    <DialogTitle>{fee ? "編輯費用紀錄" : "新增費用紀錄"}</DialogTitle>
+                    <DialogDescription>
+                        {fee ? "修改此筆公共事業費的詳細資訊" : "記錄一筆新的公共事業費支出"}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <form onSubmit={handleSubmit} className="space-y-4 py-2">
+                    <div className="grid grid-cols-1 gap-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="transaction_date">
+                                費用日期 <span className="text-red-500">*</span>
+                            </Label>
+                            <Input
+                                id="transaction_date"
+                                type="date"
+                                value={data.transaction_date}
+                                onChange={(e) => setData("transaction_date", e.target.value)}
+                                className={errors.transaction_date ? "border-red-500" : ""}
+                                required
+                            />
+                            {errors.transaction_date && <p className="text-sm text-red-500">{errors.transaction_date}</p>}
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="category">
+                                    費用類別 <span className="text-red-500">*</span>
+                                </Label>
+                                <SearchableSelect
+                                    value={data.category}
+                                    onValueChange={(value) => setData("category", value)}
+                                    options={categories.map((c) => ({ label: c, value: c }))}
+                                    placeholder="選擇或輸入類別"
+                                    searchPlaceholder="搜尋類別..."
+                                    className={errors.category ? "border-red-500" : ""}
+                                />
+                                {errors.category && <p className="text-sm text-red-500">{errors.category}</p>}
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="amount">
+                                    金額 <span className="text-red-500">*</span>
+                                </Label>
+                                <Input
+                                    id="amount"
+                                    type="number"
+                                    step="0.01"
+                                    value={data.amount}
+                                    onChange={(e) => setData("amount", e.target.value)}
+                                    placeholder="0.00"
+                                    className={errors.amount ? "border-red-500" : ""}
+                                    required
+                                />
+                                {errors.amount && <p className="text-sm text-red-500">{errors.amount}</p>}
+                            </div>
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="invoice_number">發票號碼</Label>
+                            <Input
+                                id="invoice_number"
+                                value={data.invoice_number}
+                                onChange={(e) => setData("invoice_number", e.target.value)}
+                                placeholder="例：AB12345678"
+                            />
+                            {errors.invoice_number && <p className="text-sm text-red-500">{errors.invoice_number}</p>}
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="description">說明 / 備註</Label>
+                            <Textarea
+                                id="description"
+                                value={data.description}
+                                onChange={(e) => setData("description", e.target.value)}
+                                placeholder="輸入其他備註資訊..."
+                                className="resize-none"
+                            />
+                            {errors.description && <p className="text-sm text-red-500">{errors.description}</p>}
+                        </div>
+                    </div>
+
+                    <DialogFooter>
+                        <Button
+                            type="button"
+                            variant="outline"
+                            onClick={() => onOpenChange(false)}
+                            className="button-outlined-primary"
+                        >
+                            取消
+                        </Button>
+                        <Button type="submit" className="button-filled-primary" disabled={processing}>
+                            {processing ? "處理中..." : (fee ? "儲存變更" : "確認紀錄")}
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}

resources/js/Layouts/AuthenticatedLayout.tsx

@@ -17,7 +17,10 @@ import {
     Settings,
     Shield,
     Users,
-    FileText
+    FileText,
+    Wallet,
+    BarChart3,
+    FileSpreadsheet
 } from "lucide-react";
 import { toast, Toaster } from "sonner";
 import { useState, useEffect, useMemo } from "react";
@@ -126,6 +129,36 @@ export default function AuthenticatedLayout({
                 },
             ],
         },
+        {
+            id: "finance-management",
+            label: "財務管理",
+            icon: <Wallet className="h-5 w-5" />,
+            permission: "utility_fees.view",
+            children: [
+                {
+                    id: "utility-fee-list",
+                    label: "公共事業費",
+                    icon: <FileText className="h-4 w-4" />,
+                    route: "/utility-fees",
+                    permission: "utility_fees.view",
+                },
+            ],
+        },
+        {
+            id: "report-management",
+            label: "報表管理",
+            icon: <BarChart3 className="h-5 w-5" />,
+            permission: "accounting.view",
+            children: [
+                {
+                    id: "accounting-report",
+                    label: "會計報表",
+                    icon: <FileSpreadsheet className="h-4 w-4" />,
+                    route: "/accounting/report",
+                    permission: "accounting.view",
+                },
+            ],
+        },
         {
             id: "system-management",
             label: "系統管理",

resources/js/Pages/Accounting/Report.tsx

@@ -0,0 +1,230 @@
+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>
+    );
+}

resources/js/Pages/UtilityFee/Index.tsx

@@ -0,0 +1,364 @@
+import { useState } from "react";
+import { Button } from "@/Components/ui/button";
+import { Input } from "@/Components/ui/input";
+import { SearchableSelect } from "@/Components/ui/searchable-select";
+import {
+    Plus,
+    Search,
+    X,
+    Pencil,
+    Trash2,
+    FileText,
+    Calendar,
+    Filter
+} from 'lucide-react';
+import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
+import { Head, router } from "@inertiajs/react";
+import Pagination from "@/Components/shared/Pagination";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/Components/ui/table";
+import { toast } from "sonner";
+import UtilityFeeDialog, { UtilityFee } from "@/Components/UtilityFee/UtilityFeeDialog";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/Components/ui/alert-dialog";
+
+interface PageProps {
+    fees: {
+        data: UtilityFee[];
+        links: any[];
+        from: number;
+        to: number;
+        total: number;
+        current_page: number;
+        last_page: number;
+        per_page: number;
+    };
+    availableCategories: string[];
+    filters: {
+        search?: string;
+        category?: string;
+        date_start?: string;
+        date_end?: string;
+        sort_field?: string;
+        sort_direction?: string;
+        per_page?: string;
+    };
+}
+
+export default function UtilityFeeIndex({ fees, availableCategories, filters }: PageProps) {
+    const [searchTerm, setSearchTerm] = useState(filters.search || "");
+    const [categoryFilter, setCategoryFilter] = useState<string>(filters.category || "all");
+    const [dateStart, setDateStart] = useState(filters.date_start || "");
+    const [dateEnd, setDateEnd] = useState(filters.date_end || "");
+
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+    const [editingFee, setEditingFee] = useState<UtilityFee | null>(null);
+    const [deletingFeeId, setDeletingFeeId] = useState<number | null>(null);
+
+    // Sorting
+    const [sortField, setSortField] = useState(filters.sort_field || 'transaction_date');
+    const [sortDirection, setSortDirection] = useState(filters.sort_direction || 'desc');
+
+    const handleSearch = () => {
+        router.get(
+            route("utility-fees.index"),
+            {
+                search: searchTerm,
+                category: categoryFilter,
+                date_start: dateStart,
+                date_end: dateEnd,
+                sort_field: sortField,
+                sort_direction: sortDirection,
+            },
+            { preserveState: true }
+        );
+    };
+
+    const handleClearFilters = () => {
+        setSearchTerm("");
+        setCategoryFilter("all");
+        setDateStart("");
+        setDateEnd("");
+        router.get(route("utility-fees.index"));
+    };
+
+    const handleSort = (field: string) => {
+        const newDirection = sortField === field && sortDirection === 'asc' ? 'desc' : 'asc';
+        setSortField(field);
+        setSortDirection(newDirection);
+        router.get(
+            route("utility-fees.index"),
+            {
+                search: searchTerm,
+                category: categoryFilter,
+                date_start: dateStart,
+                date_end: dateEnd,
+                sort_field: field,
+                sort_direction: newDirection,
+            },
+            { preserveState: true }
+        );
+    };
+
+    const openAddDialog = () => {
+        setEditingFee(null);
+        setIsDialogOpen(true);
+    };
+
+    const openEditDialog = (fee: UtilityFee) => {
+        setEditingFee(fee);
+        setIsDialogOpen(true);
+    };
+
+    const confirmDelete = (id: number) => {
+        setDeletingFeeId(id);
+        setIsDeleteDialogOpen(true);
+    };
+
+    const handleDelete = () => {
+        if (deletingFeeId) {
+            router.delete(route("utility-fees.destroy", deletingFeeId), {
+                onSuccess: () => {
+                    toast.success("紀錄已刪除");
+                    setIsDeleteDialogOpen(false);
+                },
+            });
+        }
+    };
+
+    return (
+        <AuthenticatedLayout breadcrumbs={[{ label: "財務管理", href: "#" }, { label: "公共事業費", href: route("utility-fees.index") }]}>
+            <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">
+                            <FileText className="h-6 w-6 text-primary-main" />
+                            公共事業費管理
+                        </h1>
+                        <p className="text-gray-500 mt-1">管理店鋪水、電、瓦斯等各項公共事業費用支出</p>
+                    </div>
+
+                    <Button
+                        onClick={openAddDialog}
+                        className="button-filled-primary gap-2"
+                    >
+                        <Plus className="h-4 w-4" /> 新增紀錄
+                    </Button>
+                </div>
+
+                {/* Toolbar */}
+                <div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                        {/* Search */}
+                        <div className="relative">
+                            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+                            <Input
+                                placeholder="搜尋發票、備註..."
+                                value={searchTerm}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                                onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+                                className="pl-10 h-10"
+                            />
+                            {searchTerm && (
+                                <button
+                                    onClick={() => setSearchTerm("")}
+                                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                                >
+                                    <X className="h-4 w-4" />
+                                </button>
+                            )}
+                        </div>
+
+                        {/* Category Filter */}
+                        <SearchableSelect
+                            value={categoryFilter}
+                            onValueChange={setCategoryFilter}
+                            options={[
+                                { label: "所有類別", value: "all" },
+                                ...availableCategories.map(c => ({ label: c, value: c }))
+                            ]}
+                            placeholder="篩選類別"
+                            className="h-10"
+                        />
+
+                        {/* Date Range Start */}
+                        <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"
+                                placeholder="開始日期"
+                            />
+                        </div>
+
+                        {/* Date Range End */}
+                        <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"
+                                placeholder="結束日期"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="mt-4 flex justify-end gap-2">
+                        <Button
+                            variant="outline"
+                            onClick={handleClearFilters}
+                            className="button-outlined-primary h-9"
+                        >
+                            清除所有
+                        </Button>
+                        <Button
+                            onClick={handleSearch}
+                            className="button-filled-primary h-9 gap-2"
+                        >
+                            <Filter className="h-4 w-4" /> 執行篩選
+                        </Button>
+                    </div>
+                </div>
+
+                {/* Table */}
+                <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
+                    <Table>
+                        <TableHeader className="bg-gray-50 text-gray-600 font-bold uppercase tracking-wider text-xs">
+                            <TableRow>
+                                <TableHead
+                                    className="cursor-pointer hover:text-primary transition-colors py-4 px-4 text-center"
+                                    onClick={() => handleSort('transaction_date')}
+                                >
+                                    費用日期 {sortField === 'transaction_date' && (sortDirection === 'asc' ? '↑' : '↓')}
+                                </TableHead>
+                                <TableHead
+                                    className="cursor-pointer hover:text-primary transition-colors py-4 px-4"
+                                    onClick={() => handleSort('category')}
+                                >
+                                    費用類別 {sortField === 'category' && (sortDirection === 'asc' ? '↑' : '↓')}
+                                </TableHead>
+                                <TableHead
+                                    className="cursor-pointer hover:text-primary transition-colors py-4 px-4 text-right"
+                                    onClick={() => handleSort('amount')}
+                                >
+                                    金額 {sortField === 'amount' && (sortDirection === 'asc' ? '↑' : '↓')}
+                                </TableHead>
+                                <TableHead
+                                    className="cursor-pointer hover:text-primary transition-colors py-4 px-4"
+                                    onClick={() => handleSort('invoice_number')}
+                                >
+                                    發票號碼 {sortField === 'invoice_number' && (sortDirection === 'asc' ? '↑' : '↓')}
+                                </TableHead>
+                                <TableHead className="py-4 px-4">說明 / 備註</TableHead>
+                                <TableHead className="py-4 px-4 text-center w-[120px]">操作</TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {fees.data.length === 0 ? (
+                                <TableRow>
+                                    <TableCell colSpan={6} className="h-48 text-center text-gray-500">
+                                        <div className="flex flex-col items-center justify-center space-y-2">
+                                            <FileText className="h-8 w-8 text-gray-300" />
+                                            <p>找不到符合條件的費用紀錄</p>
+                                        </div>
+                                    </TableCell>
+                                </TableRow>
+                            ) : (
+                                fees.data.map((fee) => (
+                                    <TableRow key={fee.id} className="hover:bg-gray-50/50 transition-colors">
+                                        <TableCell className="text-center font-medium">{fee.transaction_date}</TableCell>
+                                        <TableCell>
+                                            <span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-primary/10 text-primary">
+                                                {fee.category}
+                                            </span>
+                                        </TableCell>
+                                        <TableCell className="text-right font-bold text-gray-900">
+                                            $ {Number(fee.amount).toLocaleString()}
+                                        </TableCell>
+                                        <TableCell className="font-mono text-sm text-gray-600">
+                                            {fee.invoice_number || '-'}
+                                        </TableCell>
+                                        <TableCell className="max-w-xs truncate text-gray-600" title={fee.description}>
+                                            {fee.description || '-'}
+                                        </TableCell>
+                                        <TableCell>
+                                            <div className="flex items-center justify-center gap-2">
+                                                <Button
+                                                    variant="outline"
+                                                    size="sm"
+                                                    className="button-outlined-primary h-8 w-8 p-0"
+                                                    onClick={() => openEditDialog(fee)}
+                                                >
+                                                    <Pencil className="h-4 w-4" />
+                                                </Button>
+                                                <Button
+                                                    variant="outline"
+                                                    size="sm"
+                                                    className="button-outlined-error h-8 w-8 p-0"
+                                                    onClick={() => confirmDelete(fee.id)}
+                                                >
+                                                    <Trash2 className="h-4 w-4" />
+                                                </Button>
+                                            </div>
+                                        </TableCell>
+                                    </TableRow>
+                                ))
+                            )}
+                        </TableBody>
+                    </Table>
+
+                    <div className="border-t p-4">
+                        <Pagination links={fees.links} />
+                    </div>
+                </div>
+            </div>
+
+            <UtilityFeeDialog
+                open={isDialogOpen}
+                onOpenChange={setIsDialogOpen}
+                fee={editingFee}
+                availableCategories={availableCategories}
+            />
+
+            <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>確認刪除？</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            這將永久刪除此筆費用紀錄，此操作無法撤銷。
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>取消</AlertDialogCancel>
+                        <AlertDialogAction
+                            onClick={handleDelete}
+                            className="bg-red-600 hover:bg-red-700 text-white"
+                        >
+                            確認刪除
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </AuthenticatedLayout>
+    );
+}