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

app/Http/Controllers/AccountingReportController.php

@@ -0,0 +1,135 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\PurchaseOrder;
+use App\Models\UtilityFee;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Illuminate\Support\Carbon;
+
+class AccountingReportController extends Controller
+{
+    public function index(Request $request)
+    {
+        $dateStart = $request->input('date_start', Carbon::now()->startOfMonth()->toDateString());
+        $dateEnd = $request->input('date_end', Carbon::now()->endOfMonth()->toDateString());
+
+        // 1. Get Purchase Orders (Completed or Received that are ready for accounting)
+        $purchaseOrders = PurchaseOrder::with(['vendor'])
+            ->whereIn('status', ['received', 'completed'])
+            ->whereBetween('created_at', [$dateStart . ' 00:00:00', $dateEnd . ' 23:59:59'])
+            ->get()
+            ->map(function ($po) {
+                return [
+                    'id' => 'PO-' . $po->id,
+                    'date' => $po->created_at->toDateString(),
+                    'source' => '採購單',
+                    'category' => '進貨支出',
+                    'item' => $po->vendor->name ?? '未知廠商',
+                    'reference' => $po->code,
+                    'invoice_number' => $po->invoice_number,
+                    'amount' => $po->grand_total,
+                ];
+            });
+
+        // 2. Get Utility Fees
+        $utilityFees = UtilityFee::whereBetween('transaction_date', [$dateStart, $dateEnd])
+            ->get()
+            ->map(function ($fee) {
+                return [
+                    'id' => 'UF-' . $fee->id,
+                    'date' => $fee->transaction_date,
+                    'source' => '公共事業費',
+                    'category' => $fee->category,
+                    'item' => $fee->description ?: $fee->category,
+                    'reference' => '-',
+                    'invoice_number' => $fee->invoice_number,
+                    'amount' => $fee->amount,
+                ];
+            });
+
+        // Combine and Sort
+        $allRecords = $purchaseOrders->concat($utilityFees)
+            ->sortByDesc('date')
+            ->values();
+
+        $summary = [
+            'total_amount' => $allRecords->sum('amount'),
+            'purchase_total' => $purchaseOrders->sum('amount'),
+            'utility_total' => $utilityFees->sum('amount'),
+            'record_count' => $allRecords->count(),
+        ];
+
+        return Inertia::render('Accounting/Report', [
+            'records' => $allRecords,
+            'summary' => $summary,
+            'filters' => [
+                'date_start' => $dateStart,
+                'date_end' => $dateEnd,
+            ],
+        ]);
+    }
+
+    public function export(Request $request)
+    {
+        $dateStart = $request->input('date_start', Carbon::now()->startOfMonth()->toDateString());
+        $dateEnd = $request->input('date_end', Carbon::now()->endOfMonth()->toDateString());
+
+        $purchaseOrders = PurchaseOrder::with(['vendor'])
+            ->whereIn('status', ['received', 'completed'])
+            ->whereBetween('created_at', [$dateStart . ' 00:00:00', $dateEnd . ' 23:59:59'])
+            ->get();
+
+        $utilityFees = UtilityFee::whereBetween('transaction_date', [$dateStart, $dateEnd])->get();
+
+        $allRecords = collect();
+
+        foreach ($purchaseOrders as $po) {
+            $allRecords->push([
+                $po->created_at->toDateString(),
+                '採購單',
+                '進貨支出',
+                $po->vendor->name ?? '',
+                $po->code,
+                $po->invoice_number,
+                $po->grand_total,
+            ]);
+        }
+
+        foreach ($utilityFees as $fee) {
+            $allRecords->push([
+                $fee->transaction_date,
+                '公共事業費',
+                $fee->category,
+                $fee->description,
+                '-',
+                $fee->invoice_number,
+                $fee->amount,
+            ]);
+        }
+
+        $allRecords = $allRecords->sortByDesc(0);
+
+        $filename = "accounting_report_{$dateStart}_{$dateEnd}.csv";
+        $headers = [
+            'Content-Type' => 'text/csv; charset=UTF-8',
+            'Content-Disposition' => "attachment; filename=\"{$filename}\"",
+        ];
+
+        $callback = function () use ($allRecords) {
+            $file = fopen('php://output', 'w');
+            // BOM for Excel compatibility with UTF-8
+            fprintf($file, chr(0xEF).chr(0xBB).chr(0xBF));
+            
+            fputcsv($file, ['日期', '來源', '類別', '項目', '參考單號', '發票號碼', '金額']);
+
+            foreach ($allRecords as $row) {
+                fputcsv($file, $row);
+            }
+            fclose($file);
+        };
+
+        return response()->stream($callback, 200, $headers);
+    }
+}

app/Http/Controllers/UtilityFeeController.php

@@ -0,0 +1,89 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\UtilityFee;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class UtilityFeeController extends Controller
+{
+    public function index(Request $request)
+    {
+        $query = UtilityFee::query();
+
+        // Search
+        if ($request->has('search')) {
+            $search = $request->input('search');
+            $query->where(function($q) use ($search) {
+                $q->where('category', 'like', "%{$search}%")
+                  ->orWhere('invoice_number', 'like', "%{$search}%")
+                  ->orWhere('description', 'like', "%{$search}%");
+            });
+        }
+
+        // Filtering
+        if ($request->filled('category') && $request->input('category') !== 'all') {
+            $query->where('category', $request->input('category'));
+        }
+
+        if ($request->filled('date_start')) {
+            $query->where('transaction_date', '>=', $request->input('date_start'));
+        }
+
+        if ($request->filled('date_end')) {
+            $query->where('transaction_date', '<=', $request->input('date_end'));
+        }
+
+        // Sorting
+        $sortField = $request->input('sort_field', 'transaction_date');
+        $sortDirection = $request->input('sort_direction', 'desc');
+        $query->orderBy($sortField, $sortDirection);
+
+        $fees = $query->paginate($request->input('per_page', 15))->withQueryString();
+
+        $availableCategories = UtilityFee::distinct()->pluck('category');
+
+        return Inertia::render('UtilityFee/Index', [
+            'fees' => $fees,
+            'availableCategories' => $availableCategories,
+            'filters' => $request->only(['search', 'category', 'date_start', 'date_end', 'sort_field', 'sort_direction']),
+        ]);
+    }
+
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            'transaction_date' => 'required|date',
+            'category' => 'required|string|max:255',
+            'amount' => 'required|numeric|min:0',
+            'invoice_number' => 'nullable|string|max:255',
+            'description' => 'nullable|string',
+        ]);
+
+        UtilityFee::create($validated);
+
+        return redirect()->back();
+    }
+
+    public function update(Request $request, UtilityFee $utility_fee)
+    {
+        $validated = $request->validate([
+            'transaction_date' => 'required|date',
+            'category' => 'required|string|max:255',
+            'amount' => 'required|numeric|min:0',
+            'invoice_number' => 'nullable|string|max:255',
+            'description' => 'nullable|string',
+        ]);
+
+        $utility_fee->update($validated);
+
+        return redirect()->back();
+    }
+
+    public function destroy(UtilityFee $utility_fee)
+    {
+        $utility_fee->delete();
+        return redirect()->back();
+    }
+}

app/Models/UtilityFee.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Spatie\Activitylog\Traits\LogsActivity;
+use Spatie\Activitylog\LogOptions;
+
+class UtilityFee extends Model
+{
+    use HasFactory, LogsActivity;
+
+    protected $fillable = [
+        'transaction_date',
+        'category',
+        'amount',
+        'invoice_number',
+        'description',
+    ];
+
+    protected $casts = [
+        'transaction_date' => 'date',
+        'amount' => 'decimal:2',
+    ];
+
+    public function getActivitylogOptions(): LogOptions
+    {
+        return LogOptions::defaults()
+            ->logAll()
+            ->logOnlyDirty()
+            ->dontSubmitEmptyLogs();
+    }
+}

database/migrations/tenant/2026_01_20_093627_create_utility_fees_table.php

@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('utility_fees', function (Blueprint $table) {
+            $table->id();
+            $table->date('transaction_date')->comment('費用日期');
+            $table->string('category')->comment('費用類別 (例如：電費、水費、瓦斯費)');
+            $table->decimal('amount', 12, 2)->comment('金額');
+            $table->string('invoice_number', 20)->nullable()->comment('發票號碼');
+            $table->text('description')->nullable()->comment('說明/備註');
+            $table->timestamps();
+
+            // 常用查詢索引
+            $table->index(['transaction_date', 'category']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('utility_fees');
+    }
+};

database/seeders/FinancePermissionSeeder.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use Spatie\Permission\Models\Role;
+use Spatie\Permission\Models\Permission;
+
+class FinancePermissionSeeder extends Seeder
+{
+    public function run(): void
+    {
+        // 建立新權限
+        $permissions = [
+            'utility_fees.view',
+            'utility_fees.create',
+            'utility_fees.edit',
+            'utility_fees.delete',
+            'accounting.view',
+        ];
+
+        foreach ($permissions as $permission) {
+            Permission::firstOrCreate(['name' => $permission]);
+        }
+
+        // 分配權限給現有角色
+        
+        // Super Admin 獲得所有
+        $superAdmin = Role::where('name', 'super-admin')->first();
+        if ($superAdmin) {
+            $superAdmin->givePermissionTo($permissions);
+        }
+
+        // Admin 獲得所有
+        $admin = Role::where('name', 'admin')->first();
+        if ($admin) {
+            $admin->givePermissionTo($permissions);
+        }
+
+        // Viewer 獲得檢視權限
+        $viewer = Role::where('name', 'viewer')->first();
+        if ($viewer) {
+            $viewer->givePermissionTo([
+                'utility_fees.view',
+                'accounting.view',
+            ]);
+        }
+    }
+}

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>
+    );
+}

routes/web.php

@@ -18,6 +18,8 @@ use App\Http\Controllers\Admin\RoleController;
 use App\Http\Controllers\Admin\UserController;
 use App\Http\Controllers\Admin\ActivityLogController;
 use App\Http\Controllers\ProfileController;
+use App\Http\Controllers\UtilityFeeController;
+use App\Http\Controllers\AccountingReportController;
 use Stancl\Tenancy\Middleware\InitializeTenancyByDomainOrSubdomain;
 
 // 登入/登出路由
@@ -119,6 +121,21 @@ Route::middleware('auth')->group(function () {
         Route::delete('/purchase-orders/{id}', [PurchaseOrderController::class, 'destroy'])->middleware('permission:purchase_orders.delete')->name('purchase-orders.destroy');
     });
 
+    // 公共事業費管理 (TODO: 添加權限控制)
+        // 公共事業費
+        Route::middleware('permission:utility_fees.view')->group(function () {
+            Route::get('/utility-fees', [UtilityFeeController::class, 'index'])->name('utility-fees.index');
+        });
+        Route::middleware('permission:utility_fees.create')->group(function () {
+            Route::post('/utility-fees', [UtilityFeeController::class, 'store'])->name('utility-fees.store');
+        });
+        Route::middleware('permission:utility_fees.edit')->group(function () {
+            Route::put('/utility-fees/{utility_fee}', [UtilityFeeController::class, 'update'])->name('utility-fees.update');
+        });
+        Route::middleware('permission:utility_fees.delete')->group(function () {
+            Route::delete('/utility-fees/{utility_fee}', [UtilityFeeController::class, 'destroy'])->name('utility-fees.destroy');
+        });
+
     // 撥補單 (在庫存調撥時使用)
     Route::middleware('permission:inventory.transfer')->group(function () {
         Route::post('/transfer-orders', [TransferOrderController::class, 'store'])->name('transfer-orders.store');
@@ -148,14 +165,17 @@ Route::middleware('auth')->group(function () {
             });
             Route::get('/users/{user}/edit', [UserController::class, 'edit'])->middleware('permission:users.edit')->name('users.edit');
             Route::put('/users/{user}', [UserController::class, 'update'])->middleware('permission:users.edit')->name('users.update');
-            Route::put('/users/{user}', [UserController::class, 'update'])->middleware('permission:users.edit')->name('users.update');
             Route::delete('/users/{user}', [UserController::class, 'destroy'])->middleware('permission:users.delete')->name('users.destroy');
         });
 
         Route::middleware('permission:system.view_logs')->group(function () {
             Route::get('/activity-logs', [ActivityLogController::class, 'index'])->name('activity-logs.index');
         });
+        // 會計報表
+        Route::middleware('permission:accounting.view')->group(function () {
+            Route::get('/accounting/report', [AccountingReportController::class, 'index'])->name('accounting.report');
+            Route::get('/accounting/report/export', [AccountingReportController::class, 'export'])->name('accounting.export');
+        });
     });
 
 }); // End of auth middleware group
-