更新 README.md：新增財務管理與公共事業費選單說明

.agent/skills/ui-consistency/SKILL.md

@@ -732,6 +732,51 @@ import { SearchableSelect } from "@/Components/ui/searchable-select";
 
 ---
 
+## 11.5 輸入框尺寸 (Input Sizes)
+
+為確保介面整齊與統一，所有表單輸入元件標準高度應為 **`h-9`** (36px)，與標準按鈕尺寸對齊。
+
+- **Input**: 預設即為 `h-9` (由 `py-1` 與 `text-sm` 組合而成)
+- **Select / SearchableSelect**: 必須確保 Trigger 按鈕高度為 `h-9`
+- **禁止使用**: 除非有特殊設計需求，否則避免使用 `h-10` (40px) 或其他非標準高度。
+
+## 11.6 日期輸入框樣式 (Date Input Style)
+
+日期輸入框應採用「**左側裝飾圖示 + 右側原生操作**」的配置，以保持視覺一致性並保留瀏覽器原生便利性。
+
+**樣式規格**：
+1.  **容器**: 使用 `relative` 定位。
+2.  **圖標**: 使用 `Calendar` 圖標，放置於絕對位置 `absolute left-2.5 top-2.5`，顏色 `text-gray-400`，並設定 `pointer-events-none` 避免干擾點擊。
+3.  **輸入框**: 設定 `pl-9` (左內距) 以避開圖示，並使用原生 `type="date"` 或 `type="datetime-local"`。
+
+```tsx
+import { Calendar } from "lucide-react";
+import { Input } from "@/Components/ui/input";
+
+<div className="relative">
+  <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400 pointer-events-none" />
+  <Input
+    type="date"
+    className="pl-9 block w-full"
+    value={date}
+    onChange={(e) => setDate(e.target.value)}
+  />
+</div>
+```
+
+## 11.7 搜尋選單樣式 (SearchableSelect Style)
+
+`SearchableSelect` 元件在表單或篩選列中使用時，高度必須設定為 `h-9` 以與輸入框對齊。
+
+```tsx
+<SearchableSelect
+  className="h-9" // 確保高度一致
+  // ...other props
+/>
+```
+
+---
+
 ## 12. 檢查清單
 
 在開發或審查頁面時，請確認以下項目：

README.md

@@ -23,6 +23,8 @@ Star ERP 是一個基於 **Laravel 12**、**Inertia.js (React)** 與 **Tailwind
   - 👥 **廠商資料管理** (`/vendors`) - `vendors.view`
 - 🛒 **採購管理**
   - 📝 **採購單管理** (`/purchase-orders`) - `purchase_orders.view`
+- 💰 **財務管理**
+  - 🧾 **公共事業費** (`/utility-fees`) - `utility_fees.view`
 - ⚙️ **系統管理**
   - 👤 **使用者管理** (`/admin/users`) - `users.view`
   - 🛡️ **角色與權限** (`/admin/roles`) - `roles.view`

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,94 @@
+<?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');
+        $sortDirection = $request->input('sort_direction');
+
+        if ($sortField && $sortDirection) {
+            $query->orderBy($sortField, $sortDirection);
+        } else {
+            $query->orderBy('transaction_date', 'desc');
+        }
+
+        $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:Y-m-d',
+        '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,231 @@
+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";
+import { Calendar } from "lucide-react";
+import { getCurrentDate } from "@/utils/format";
+import { validateInvoiceNumber } from "@/utils/validation";
+
+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: getCurrentDate(),
+        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.split("T")[0].split(" ")[0],
+                    category: fee.category,
+                    amount: fee.amount.toString(),
+                    invoice_number: fee.invoice_number || "",
+                    description: fee.description || "",
+                });
+            } else {
+                reset();
+                setData("transaction_date", getCurrentDate());
+            }
+        }
+    }, [open, fee]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+
+        if (fee) {
+            const validation = validateInvoiceNumber(data.invoice_number);
+            if (!validation.isValid) {
+                toast.error(validation.error);
+                return;
+            }
+
+            put(route("utility-fees.update", fee.id), {
+                onSuccess: () => {
+                    toast.success("紀錄已更新");
+                    onOpenChange(false);
+                    reset();
+                },
+                onError: () => {
+                    toast.error("更新失敗，請檢查輸入資料");
+                }
+            });
+        } else {
+            const validation = validateInvoiceNumber(data.invoice_number);
+            if (!validation.isValid) {
+                toast.error(validation.error);
+                return;
+            }
+
+            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>
+                            <div className="relative">
+                                <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400 pointer-events-none" />
+                                <Input
+                                    id="transaction_date"
+                                    type="date"
+                                    value={data.transaction_date}
+                                    onChange={(e) => setData("transaction_date", e.target.value)}
+                                    className={`pl-9 block w-full ${errors.transaction_date ? "border-red-500" : ""}`}
+                                    required
+                                />
+                            </div>
+                            {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.toUpperCase())}
+                                placeholder="例：AB-12345678"
+                                maxLength={11}
+                            />
+                            <p className="text-xs text-gray-500">格式範例：AB-12345678</p>
+                            {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,429 @@
+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,
+    ArrowUpDown,
+    ArrowUp,
+    ArrowDown
+} from 'lucide-react';
+import { Label } from "@/Components/ui/label";
+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 { Badge } from "@/Components/ui/badge";
+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";
+import { Can } from "@/Components/Permission/Can";
+import { formatDateWithDayOfWeek, formatInvoiceNumber } from "@/utils/format";
+
+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 | null;
+        sort_direction?: "asc" | "desc" | null;
+        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<string | null>(filters.sort_field || 'transaction_date');
+    const [sortDirection, setSortDirection] = useState<"asc" | "desc" | null>(filters.sort_direction as "asc" | "desc" || '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) => {
+        let newField: string | null = field;
+        let newDirection: "asc" | "desc" | null = "asc";
+
+        if (sortField === field) {
+            if (sortDirection === "asc") {
+                newDirection = "desc";
+            } else {
+                newDirection = null;
+                newField = null;
+            }
+        }
+
+        setSortField(newField);
+        setSortDirection(newDirection);
+
+        router.get(
+            route("utility-fees.index"),
+            {
+                search: searchTerm,
+                category: categoryFilter,
+                date_start: dateStart,
+                date_end: dateEnd,
+                sort_field: newField,
+                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);
+                },
+            });
+        }
+    };
+
+    const SortIcon = ({ field }: { field: string }) => {
+        if (sortField !== field) {
+            return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
+        }
+        if (sortDirection === "asc") {
+            return <ArrowUp className="h-4 w-4 text-primary ml-1" />;
+        }
+        if (sortDirection === "desc") {
+            return <ArrowDown className="h-4 w-4 text-primary ml-1" />;
+        }
+        return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
+    };
+
+    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>
+
+                    <Can permission="utility_fees.create">
+                        <Button
+                            onClick={openAddDialog}
+                            className="button-filled-primary gap-2"
+                        >
+                            <Plus className="h-4 w-4" /> 新增紀錄
+                        </Button>
+                    </Can>
+                </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="space-y-1">
+                            <Label className="text-xs text-gray-500">關鍵字搜尋</Label>
+                            <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"
+                                />
+                                {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>
+                        </div>
+
+                        {/* Date Range Start */}
+                        <div className="space-y-1">
+                            <Label className="text-xs text-gray-500">開始日期</Label>
+                            <div className="relative">
+                                <Calendar className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
+                                <Input
+                                    type="date"
+                                    value={dateStart}
+                                    onChange={(e) => setDateStart(e.target.value)}
+                                    className="pl-9 bg-white block w-full"
+                                    placeholder="開始日期"
+                                />
+                            </div>
+                        </div>
+
+                        {/* Date Range End */}
+                        <div className="space-y-1">
+                            <Label className="text-xs text-gray-500">結束日期</Label>
+                            <div className="relative">
+                                <Calendar className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
+                                <Input
+                                    type="date"
+                                    value={dateEnd}
+                                    onChange={(e) => setDateEnd(e.target.value)}
+                                    className="pl-9 bg-white block w-full"
+                                    placeholder="結束日期"
+                                />
+                            </div>
+                        </div>
+
+                        {/* Category Filter */}
+                        <div className="space-y-1">
+                            <Label className="text-xs text-gray-500">費用類別</Label>
+                            <SearchableSelect
+                                value={categoryFilter}
+                                onValueChange={setCategoryFilter}
+                                options={[
+                                    { label: "所有類別", value: "all" },
+                                    ...availableCategories.map(c => ({ label: c, value: c }))
+                                ]}
+                                placeholder="篩選類別"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="mt-4 flex justify-end gap-2">
+                        <Button
+                            variant="outline"
+                            onClick={handleClearFilters}
+                            className="button-outlined-primary h-9 mt-auto"
+                        >
+                            清除所有
+                        </Button>
+                        <Button
+                            onClick={handleSearch}
+                            className="button-filled-primary h-9 gap-2 mt-auto"
+                        >
+                            <Filter className="h-4 w-4" /> 執行篩選
+                        </Button>
+                    </div>
+                </div>
+
+                {/* Table */}
+                <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
+                    <Table>
+                        <TableHeader>
+                            <TableRow>
+                                <TableHead className="w-[50px] text-center">#</TableHead>
+                                <TableHead className="w-[120px]">
+                                    <button
+                                        onClick={() => handleSort('transaction_date')}
+                                        className="flex items-center hover:text-gray-900"
+                                    >
+                                        費用日期 <SortIcon field="transaction_date" />
+                                    </button>
+                                </TableHead>
+                                <TableHead>
+                                    <button
+                                        onClick={() => handleSort('category')}
+                                        className="flex items-center hover:text-gray-900"
+                                    >
+                                        費用類別 <SortIcon field="category" />
+                                    </button>
+                                </TableHead>
+                                <TableHead>
+                                    <button
+                                        onClick={() => handleSort('invoice_number')}
+                                        className="flex items-center hover:text-gray-900"
+                                    >
+                                        發票號碼 <SortIcon field="invoice_number" />
+                                    </button>
+                                </TableHead>
+                                <TableHead className="text-right">
+                                    <div className="flex justify-end">
+                                        <button
+                                            onClick={() => handleSort('amount')}
+                                            className="flex items-center hover:text-gray-900"
+                                        >
+                                            金額 <SortIcon field="amount" />
+                                        </button>
+                                    </div>
+                                </TableHead>
+                                <TableHead>說明 / 備註</TableHead>
+                                <TableHead className="text-center w-[120px]">操作</TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {fees.data.length === 0 ? (
+                                <TableRow>
+                                    <TableCell colSpan={7}>
+                                        <div className="flex flex-col items-center justify-center space-y-2 py-8">
+                                            <FileText className="h-8 w-8 text-gray-300" />
+                                            <p className="text-gray-500">找不到符合條件的費用紀錄</p>
+                                        </div>
+                                    </TableCell>
+                                </TableRow>
+                            ) : (
+                                fees.data.map((fee, index) => (
+                                    <TableRow key={fee.id}>
+                                        <TableCell className="text-gray-500 font-medium text-center">
+                                            {fees.from + index}
+                                        </TableCell>
+                                        <TableCell className="font-medium text-gray-700">
+                                            {formatDateWithDayOfWeek(fee.transaction_date)}
+                                        </TableCell>
+                                        <TableCell>
+                                            <Badge variant="outline">
+                                                {fee.category}
+                                            </Badge>
+                                        </TableCell>
+                                        <TableCell className="font-mono text-sm text-gray-600">
+                                            {formatInvoiceNumber(fee.invoice_number)}
+                                        </TableCell>
+                                        <TableCell className="text-right font-bold text-gray-900">
+                                            $ {Number(fee.amount).toLocaleString()}
+                                        </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">
+                                                <Can permission="utility_fees.edit">
+                                                    <Button
+                                                        variant="outline"
+                                                        size="sm"
+                                                        className="button-outlined-primary"
+                                                        onClick={() => openEditDialog(fee)}
+                                                    >
+                                                        <Pencil className="h-4 w-4" />
+                                                    </Button>
+                                                </Can>
+                                                <Can permission="utility_fees.delete">
+                                                    <Button
+                                                        variant="outline"
+                                                        size="sm"
+                                                        className="button-outlined-error"
+                                                        onClick={() => confirmDelete(fee.id)}
+                                                    >
+                                                        <Trash2 className="h-4 w-4" />
+                                                    </Button>
+                                                </Can>
+                                            </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>
+    );
+}

resources/js/Pages/Warehouse/AddInventory.tsx

@@ -223,14 +223,14 @@ export default function AddInventoryPage({ warehouse, products }: Props) {
                                     入庫日期 <span className="text-red-500">*</span>
                                 </Label>
                                 <div className="relative">
+                                    <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400 pointer-events-none" />
                                     <Input
                                         id="inbound-date"
                                         type="datetime-local"
                                         value={inboundDate}
                                         onChange={(e) => setInboundDate(e.target.value)}
-                                        className="border-gray-300 pr-10"
+                                        className="border-gray-300 pl-9"
                                     />
-                                    <Calendar className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
                                 </div>
                             </div>
 

resources/js/utils/format.ts

@@ -21,14 +21,60 @@ export const formatCurrency = (num: number): string => {
  */
 export const formatDate = (date: string): string => {
   if (!date) return "-";
-  return new Date(date).toLocaleDateString("zh-TW");
+  // Assume date format is YYYY-MM-DD or YYYY-MM-DD HH:mm:ss
+  const datePart = date.split("T")[0].split(" ")[0];
+  // Directly return the parsed string components to guarantee no timezone shift
+  const parts = datePart.split("-");
+  if (parts.length === 3) {
+    return `${parts[0]}/${parts[1]}/${parts[2]}`;
+  }
+  // Fallback for unexpected formats
+  return datePart.replace(/-/g, "/");
+};
+
+/**
+ * 格式化日期並包含星期
+ */
+export const formatDateWithDayOfWeek = (date: string): string => {
+  if (!date) return "-";
+  const datePart = date.split("T")[0].split(" ")[0];
+  const parts = datePart.split("-");
+
+  if (parts.length === 3) {
+    const [y, m, d] = parts.map(Number);
+    // Use noon to safely calculate the day of week
+    const dt = new Date(y, m - 1, d, 12, 0, 0);
+    const weekDay = dt.toLocaleDateString("zh-TW", { weekday: "short" });
+
+    // Return original string parts + calculated weekday
+    return `${parts[0]}/${parts[1]}/${parts[2]} (${weekDay})`;
+  }
+
+  return datePart.replace(/-/g, "/");
+};
+
+/**
+ * 格式化發票號碼
+ * 例如：AB12345678 -> AB-12345678
+ */
+export const formatInvoiceNumber = (invoice: string | null | undefined): string => {
+  if (!invoice) return "-";
+  const cleanInvoice = invoice.replace(/-/g, "");
+  if (/^[a-zA-Z]{2}\d+$/.test(cleanInvoice)) {
+    return `${cleanInvoice.slice(0, 2).toUpperCase()}-${cleanInvoice.slice(2)}`;
+  }
+  return invoice;
 };
 
 /**
  * 獲取當前日期（YYYY-MM-DD 格式）
  */
 export const getCurrentDate = (): string => {
-  return new Date().toISOString().split("T")[0];
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const day = String(now.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
 };
 
 /**

resources/js/utils/validation.ts

@@ -70,3 +70,20 @@ export const validateWarehouse = (formData: {
 
   return { isValid: true };
 };
+
+/**
+ * 驗證發票號碼格式 (AA-12345678)
+ */
+export const validateInvoiceNumber = (invoiceNumber?: string): { isValid: boolean; error?: string } => {
+  if (!invoiceNumber) return { isValid: true };
+
+  const regex = /^[A-Z]{2}-\d{8}$/;
+  if (!regex.test(invoiceNumber)) {
+    return {
+      isValid: false,
+      error: "發票號碼格式錯誤，應為：AB-12345678",
+    };
+  }
+
+  return { isValid: true };
+};

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
-