feat(accounting): 優化會計報表與公共事業費 UI，並統一全域日期處理格式

app/Http/Controllers/AccountingReportController.php

@@ -7,13 +7,14 @@ use App\Models\UtilityFee;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
 use Illuminate\Support\Carbon;
+use Illuminate\Pagination\LengthAwarePaginator;
 
 class AccountingReportController extends Controller
 {
     public function index(Request $request)
     {
-        $dateStart = $request->input('date_start', Carbon::now()->startOfMonth()->toDateString());
+        $dateStart = $request->input('date_start', Carbon::now()->toDateString());
-        $dateEnd = $request->input('date_end', Carbon::now()->endOfMonth()->toDateString());
+        $dateEnd = $request->input('date_end', Carbon::now()->toDateString());
 
         // 1. Get Purchase Orders (Completed or Received that are ready for accounting)
         $purchaseOrders = PurchaseOrder::with(['vendor'])
@@ -23,7 +24,7 @@ class AccountingReportController extends Controller
             ->map(function ($po) {
                 return [
                     'id' => 'PO-' . $po->id,
-                    'date' => $po->created_at->toDateString(),
+                    'date' => Carbon::parse($po->created_at)->timezone(config('app.timezone'))->toDateString(),
                     'source' => '採購單',
                     'category' => '進貨支出',
                     'item' => $po->vendor->name ?? '未知廠商',
@@ -39,7 +40,7 @@ class AccountingReportController extends Controller
             ->map(function ($fee) {
                 return [
                     'id' => 'UF-' . $fee->id,
-                    'date' => $fee->transaction_date,
+                    'date' => $fee->transaction_date->format('Y-m-d'),
                     'source' => '公共事業費',
                     'category' => $fee->category,
                     'item' => $fee->description ?: $fee->category,
@@ -54,6 +55,19 @@ class AccountingReportController extends Controller
             ->sortByDesc('date')
             ->values();
 
+        // 3. Manual Pagination
+        $perPage = $request->input('per_page', 10);
+        $page = $request->input('page', 1);
+        $offset = ($page - 1) * $perPage;
+
+        $paginatedRecords = new LengthAwarePaginator(
+            $allRecords->slice($offset, $perPage)->values(),
+            $allRecords->count(),
+            $perPage,
+            $page,
+            ['path' => $request->url(), 'query' => $request->query()]
+        );
+
         $summary = [
             'total_amount' => $allRecords->sum('amount'),
             'purchase_total' => $purchaseOrders->sum('amount'),
@@ -62,19 +76,20 @@ class AccountingReportController extends Controller
         ];
 
         return Inertia::render('Accounting/Report', [
-            'records' => $allRecords,
+            'records' => $paginatedRecords,
             'summary' => $summary,
             'filters' => [
                 'date_start' => $dateStart,
                 'date_end' => $dateEnd,
+                'per_page' => (int)$perPage,
             ],
         ]);
     }
 
     public function export(Request $request)
     {
-        $dateStart = $request->input('date_start', Carbon::now()->startOfMonth()->toDateString());
+        $dateStart = $request->input('date_start', Carbon::now()->toDateString());
-        $dateEnd = $request->input('date_end', Carbon::now()->endOfMonth()->toDateString());
+        $dateEnd = $request->input('date_end', Carbon::now()->toDateString());
 
         $purchaseOrders = PurchaseOrder::with(['vendor'])
             ->whereIn('status', ['received', 'completed'])

app/Models/PurchaseOrder.php

@@ -30,8 +30,8 @@ class PurchaseOrder extends Model
     ];
 
     protected $casts = [
-        'expected_delivery_date' => 'date',
+        'expected_delivery_date' => 'date:Y-m-d',
-        'invoice_date' => 'date',
+        'invoice_date' => 'date:Y-m-d',
         'total_amount' => 'decimal:2',
         'tax_amount' => 'decimal:2',
         'grand_total' => 'decimal:2',
@@ -76,7 +76,7 @@ class PurchaseOrder extends Model
 
     public function getExpectedDateAttribute(): ?string
     {
-        return $this->expected_delivery_date ? $this->expected_delivery_date->format('Y-m-d') : null;
+        return $this->attributes['expected_delivery_date'] ?? null;
     }
 
     public function getTotalAmountAttribute(): float
@@ -111,8 +111,7 @@ class PurchaseOrder extends Model
 
     public function getInvoiceDateAttribute(): ?string
     {
-        $date = $this->attributes['invoice_date'] ?? null;
+        return $this->attributes['invoice_date'] ?? null;
-        return $date ? \Illuminate\Support\Carbon::parse($date)->format('Y-m-d') : null;
     }
 
     public function getInvoiceAmountAttribute(): ?float

resources/js/Components/Product/ProductTable.tsx

@@ -71,7 +71,7 @@ export default function ProductTable({
     <>
       <div className="bg-white rounded-lg shadow-sm border">
         <Table>
-          <TableHeader>
+          <TableHeader className="bg-gray-50">
             <TableRow>
               <TableHead className="w-[50px] text-center">#</TableHead>
               <TableHead>

resources/js/Components/UtilityFee/UtilityFeeDialog.tsx

@@ -68,7 +68,7 @@ export default function UtilityFeeDialog({
             clearErrors();
             if (fee) {
                 setData({
-                    transaction_date: fee.transaction_date.split("T")[0].split(" ")[0],
+                    transaction_date: fee.transaction_date,
                     category: fee.category,
                     amount: fee.amount.toString(),
                     invoice_number: fee.invoice_number || "",

resources/js/Components/Vendor/VendorTable.tsx

@@ -57,7 +57,7 @@ export default function VendorTable({
     return (
         <div className="bg-white rounded-lg shadow-sm border">
             <Table>
-                <TableHeader>
+                <TableHeader className="bg-gray-50">
                     <TableRow>
                         <TableHead className="w-[50px] text-center">#</TableHead>
                         <TableHead>

resources/js/Layouts/AuthenticatedLayout.tsx

@@ -154,7 +154,7 @@ export default function AuthenticatedLayout({
                     id: "accounting-report",
                     label: "會計報表",
                     icon: <FileSpreadsheet className="h-4 w-4" />,
-                    route: "/accounting/report",
+                    route: "/accounting-report",
                     permission: "accounting.view",
                 },
             ],

resources/js/Pages/Accounting/Report.tsx

@@ -1,16 +1,17 @@
 import { useState } from "react";
 import { Button } from "@/Components/ui/button";
 import { Input } from "@/Components/ui/input";
+import { Label } from "@/Components/ui/label";
 import {
     BarChart3,
     Download,
     Calendar,
     Filter,
-    ArrowUpRight,
     TrendingDown,
-    FileSpreadsheet,
     Package,
-    Pocket
+    Pocket,
+    RotateCcw,
+    FileText
 } from 'lucide-react';
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router } from "@inertiajs/react";
@@ -22,12 +23,10 @@ import {
     TableHeader,
     TableRow,
 } from "@/Components/ui/table";
-import {
+import { getDateRange, formatDateWithDayOfWeek } from "@/utils/format";
-    Card,
+import { Badge } from "@/Components/ui/badge";
-    CardContent,
+import Pagination from "@/Components/shared/Pagination";
-    CardHeader,
+import { SearchableSelect } from "@/Components/ui/searchable-select";
-    CardTitle,
-} from "@/Components/ui/card";
 
 interface Record {
     id: string;
@@ -41,7 +40,14 @@ interface Record {
 }
 
 interface PageProps {
-    records: Record[];
+    records: {
+        data: Record[];
+        links: any[];
+        total: number;
+        from: number;
+        to: number;
+        current_page: number;
+    };
     summary: {
         total_amount: number;
         purchase_total: number;
@@ -51,6 +57,7 @@ interface PageProps {
     filters: {
         date_start: string;
         date_end: string;
+        per_page?: number;
     };
 }
 
@@ -58,17 +65,54 @@ export default function AccountingReport({ records, summary, filters }: PageProp
     const [dateStart, setDateStart] = useState(filters.date_start);
     const [dateEnd, setDateEnd] = useState(filters.date_end);
 
+    // Determine initial range type
+    const today = new Date().toISOString().split('T')[0];
+    const initialRangeType = (filters.date_start === today && filters.date_end === today) ? "today" : "custom";
+    const [dateRangeType, setDateRangeType] = useState(initialRangeType);
+    const [perPage, setPerPage] = useState(filters.per_page?.toString() || "10");
+
+    const handleDateRangeChange = (type: string) => {
+        setDateRangeType(type);
+        if (type === "custom") return;
+
+        const { start, end } = getDateRange(type);
+        setDateStart(start);
+        setDateEnd(end);
+    };
+
+
     const handleFilter = () => {
         router.get(
             route("accounting.report"),
             {
                 date_start: dateStart,
                 date_end: dateEnd,
+                per_page: perPage,
             },
             { preserveState: true }
         );
     };
 
+    const handlePerPageChange = (value: string) => {
+        setPerPage(value);
+        router.get(
+            route("accounting.report"),
+            {
+                date_start: dateStart,
+                date_end: dateEnd,
+                per_page: value,
+            },
+            { preserveState: true }
+        );
+    };
+
+    const handleClearFilters = () => {
+        setDateStart("");
+        setDateEnd("");
+        setPerPage("10");
+        router.get(route("accounting.report"), {}, { preserveState: false });
+    };
+
     const handleExport = () => {
         window.location.href = route("accounting.export", {
             date_start: dateStart,
@@ -77,15 +121,16 @@ export default function AccountingReport({ records, summary, filters }: PageProp
     };
 
     return (
-        <AuthenticatedLayout breadcrumbs={[{ label: "報表管理", href: "#" }, { label: "會計報表", href: route("accounting.report") }]}>
+        <AuthenticatedLayout breadcrumbs={[{ label: "報表管理", href: "#" }, { label: "會計報表", href: route("accounting.report"), isPage: true }]}>
             <Head title="會計報表" />
 
             <div className="container mx-auto p-6 max-w-7xl">
+                {/* Header */}
                 <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>
@@ -99,111 +144,161 @@ export default function AccountingReport({ records, summary, filters }: PageProp
                     </Button>
                 </div>
 
-                {/* Filters */}
+                {/* Filters with Quick Date Range */}
-                <div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
+                <div className="bg-white rounded-xl shadow-sm border border-grey-4 p-5 mb-6">
-                    <div className="flex flex-wrap items-end gap-4">
+                    <div className="flex flex-col gap-4">
-                        <div className="space-y-2">
+                        <div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-end animate-in fade-in slide-in-from-top-2 duration-200">
-                            <label className="text-sm font-medium text-gray-700">開始日期</label>
+                            <div className="md:col-span-6 space-y-2">
-                            <div className="relative">
+                                <Label className="text-xs font-medium text-grey-2">快速時間區間</Label>
-                                <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4 pointer-events-none" />
+                                <div className="flex flex-wrap gap-2">
-                                <Input
+                                    {[
-                                    type="date"
+                                        { label: "今日", value: "today" },
-                                    value={dateStart}
+                                        { label: "昨日", value: "yesterday" },
-                                    onChange={(e) => setDateStart(e.target.value)}
+                                        { label: "本週", value: "this_week" },
-                                    className="pl-10 h-10 w-48"
+                                        { label: "本月", value: "this_month" },
-                                />
+                                        { label: "上月", value: "last_month" },
+                                    ].map((opt) => (
+                                        <Button
+                                            key={opt.value}
+                                            size="sm"
+                                            onClick={() => handleDateRangeChange(opt.value)}
+                                            className={
+                                                dateRangeType === opt.value
+                                                    ? 'button-filled-primary h-9 px-4 shadow-sm'
+                                                    : 'button-outlined-primary h-9 px-4 bg-white'
+                                            }
+                                        >
+                                            {opt.label}
+                                        </Button>
+                                    ))}
+                                </div>
+                            </div>
+
+                            <div className="md:col-span-6">
+                                <div className="grid grid-cols-2 gap-4 items-end">
+                                    <div className="space-y-1">
+                                        <Label className="text-xs text-grey-2 font-medium">開始日期</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);
+                                                    setDateRangeType('custom');
+                                                }}
+                                                className="pl-9 block w-full h-9 bg-white"
+                                            />
+                                        </div>
+                                    </div>
+                                    <div className="space-y-1">
+                                        <Label className="text-xs text-grey-2 font-medium">結束日期</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);
+                                                    setDateRangeType('custom');
+                                                }}
+                                                className="pl-9 block w-full h-9 bg-white"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
 
-                        <div className="space-y-2">
+                        {/* Action Buttons */}
-                            <label className="text-sm font-medium text-gray-700">結束日期</label>
+                        <div className="flex items-center justify-end border-t border-grey-4 pt-5 gap-3">
-                            <div className="relative">
+                            <Button
-                                <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4 pointer-events-none" />
+                                variant="outline"
-                                <Input
+                                onClick={handleClearFilters}
-                                    type="date"
+                                className="flex items-center gap-2 button-outlined-primary h-9 ml-auto"
-                                    value={dateEnd}
+                            >
-                                    onChange={(e) => setDateEnd(e.target.value)}
+                                <RotateCcw className="h-4 w-4" />
-                                    className="pl-10 h-10 w-48"
+                                重置
-                                />
+                            </Button>
-                            </div>
+                            <Button
+                                onClick={handleFilter}
+                                className="button-filled-primary h-9 px-6 gap-2"
+                            >
+                                <Filter className="h-4 w-4" /> 篩選
+                            </Button>
                         </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 */}
+                {/* Compact Summary - Full Width Grid (Horizontal Style) */}
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-                    <Card className="border-l-4 border-l-red-500 shadow-sm">
+                    <div className="flex items-center gap-3 px-4 py-4 bg-white rounded-xl border-l-4 border-l-red-500 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
-                        <CardHeader className="flex flex-row items-center justify-between pb-2">
+                        <TrendingDown className="h-6 w-6 text-red-500 shrink-0" />
-                            <CardTitle className="text-sm font-medium text-gray-500">總計支出</CardTitle>
+                        <div className="flex flex-1 items-baseline justify-between gap-2 min-w-0">
-                            <TrendingDown className="h-4 w-4 text-red-500" />
+                            <span className="text-sm text-gray-500 font-medium shrink-0">總計支出</span>
-                        </CardHeader>
+                            <span className="text-xl font-bold text-gray-900 truncate">$ {Number(summary.total_amount).toLocaleString()}</span>
-                        <CardContent>
+                        </div>
-                            <div className="text-2xl font-bold text-gray-900">$ {Number(summary.total_amount).toLocaleString()}</div>
+                    </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">
+                    <div className="flex items-center gap-3 px-4 py-4 bg-white rounded-xl border-l-4 border-l-orange-500 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
-                        <CardHeader className="flex flex-row items-center justify-between pb-2">
+                        <Package className="h-6 w-6 text-orange-500 shrink-0" />
-                            <CardTitle className="text-sm font-medium text-gray-500">採購支出</CardTitle>
+                        <div className="flex flex-1 items-baseline justify-between gap-2 min-w-0">
-                            <Package className="h-4 w-4 text-orange-500" />
+                            <span className="text-sm text-gray-500 font-medium shrink-0">採購支出</span>
-                        </CardHeader>
+                            <span className="text-xl font-bold text-gray-900 truncate">$ {Number(summary.purchase_total).toLocaleString()}</span>
-                        <CardContent>
+                        </div>
-                            <div className="text-2xl font-bold text-gray-900">$ {Number(summary.purchase_total).toLocaleString()}</div>
+                    </div>
-                            <p className="text-xs text-gray-400 mt-1">採購單彙整</p>
-                        </CardContent>
-                    </Card>
 
-                    <Card className="border-l-4 border-l-blue-500 shadow-sm">
+                    <div className="flex items-center gap-3 px-4 py-4 bg-white rounded-xl border-l-4 border-l-blue-500 shadow-sm border border-gray-100 transition-all hover:bg-gray-50">
-                        <CardHeader className="flex flex-row items-center justify-between pb-2">
+                        <Pocket className="h-6 w-6 text-blue-500 shrink-0" />
-                            <CardTitle className="text-sm font-medium text-gray-500">公共事業費</CardTitle>
+                        <div className="flex flex-1 items-baseline justify-between gap-2 min-w-0">
-                            <Pocket className="h-4 w-4 text-blue-500" />
+                            <span className="text-sm text-gray-500 font-medium shrink-0">公共事業費</span>
-                        </CardHeader>
+                            <span className="text-xl font-bold text-gray-900 truncate">$ {Number(summary.utility_total).toLocaleString()}</span>
-                        <CardContent>
+                        </div>
-                            <div className="text-2xl font-bold text-gray-900">$ {Number(summary.utility_total).toLocaleString()}</div>
+                    </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">
+                <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                     <Table>
                         <TableHeader className="bg-gray-50">
                             <TableRow>
-                                <TableHead className="w-[120px] py-4 px-4">日期</TableHead>
+                                <TableHead className="w-[140px] text-center">日期</TableHead>
-                                <TableHead className="w-[120px]">來源</TableHead>
+                                <TableHead className="w-[120px] text-center">來源</TableHead>
-                                <TableHead className="w-[120px]">類別</TableHead>
+                                <TableHead className="w-[140px] text-center">類別</TableHead>
-                                <TableHead className="px-4">項目詳細</TableHead>
+                                <TableHead className="px-6">項目詳細</TableHead>
-                                <TableHead className="w-[180px]">憑證 / 單號</TableHead>
+                                <TableHead className="w-[180px] text-right px-6">金額</TableHead>
-                                <TableHead className="w-[150px] text-right px-4">金額</TableHead>
                             </TableRow>
                         </TableHeader>
                         <TableBody>
-                            {records.length === 0 ? (
+                            {records.data.length === 0 ? (
                                 <TableRow>
-                                    <TableCell colSpan={6} className="h-48 text-center text-gray-500">
+                                    <TableCell colSpan={5}>
-                                        此日期區間內無支出紀錄
+                                        <div className="flex flex-col items-center justify-center space-y-2 py-8 text-gray-400">
+                                            <FileText className="h-10 w-10 opacity-20" />
+                                            <p>此日期區間內無支出紀錄</p>
+                                        </div>
                                     </TableCell>
                                 </TableRow>
                             ) : (
-                                records.map((record) => (
+                                records.data.map((record) => (
-                                    <TableRow key={record.id} className="hover:bg-gray-50/50">
+                                    <TableRow key={record.id}>
-                                        <TableCell className="font-medium">{record.date}</TableCell>
+                                        <TableCell className="font-medium text-gray-700 text-center">
-                                        <TableCell>
+                                            {formatDateWithDayOfWeek(record.date)}
-                                            <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'
+                                        </TableCell>
-                                                }`}>
+                                        <TableCell className="text-center">
-                                                {record.source}
+                                            <Badge variant="secondary" className={
-                                            </span>
+                                                record.source === '採購單'
+                                                    ? 'bg-orange-50 text-orange-700 border-orange-100'
+                                                    : 'bg-blue-50 text-blue-700 border-blue-100'
+                                            }>
+                                                {record.source}
+                                            </Badge>
+                                        </TableCell>
+                                        <TableCell className="text-gray-600 text-center">
+                                            <Badge variant="outline" className="font-normal border-gray-200">
+                                                {record.category}
+                                            </Badge>
                                         </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>
@@ -212,9 +307,6 @@ export default function AccountingReport({ records, summary, filters }: PageProp
                                                 )}
                                             </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>
@@ -224,6 +316,29 @@ export default function AccountingReport({ records, summary, filters }: PageProp
                         </TableBody>
                     </Table>
                 </div>
+
+                {/* Pagination Footer */}
+                <div className="mt-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+                    <div className="flex items-center gap-2 text-sm text-gray-500">
+                        <span>每頁顯示</span>
+                        <SearchableSelect
+                            value={perPage}
+                            onValueChange={handlePerPageChange}
+                            options={[
+                                { label: "10", value: "10" },
+                                { label: "20", value: "20" },
+                                { label: "50", value: "50" },
+                                { label: "100", value: "100" }
+                            ]}
+                            className="w-[100px] h-8"
+                            showSearch={false}
+                        />
+                        <span>筆</span>
+                    </div>
+                    <div className="w-full sm:w-auto flex justify-center sm:justify-end">
+                        <Pagination links={records.links} />
+                    </div>
+                </div>
             </div>
         </AuthenticatedLayout>
     );

resources/js/Pages/UtilityFee/Index.tsx

@@ -212,7 +212,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
     };
 
     return (
-        <AuthenticatedLayout breadcrumbs={[{ label: "財務管理", href: "#" }, { label: "公共事業費", href: route("utility-fees.index") }]}>
+        <AuthenticatedLayout breadcrumbs={[{ label: "財務管理", href: "#" }, { label: "公共事業費", href: route("utility-fees.index"), isPage: true }]}>
             <Head title="公共事業費管理" />
 
             <div className="container mx-auto p-6 max-w-7xl">
@@ -385,7 +385,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
                 {/* Table */}
                 <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
                     <Table>
-                        <TableHeader>
+                        <TableHeader className="bg-gray-50">
                             <TableRow>
                                 <TableHead className="w-[50px] text-center">#</TableHead>
                                 <TableHead className="w-[120px]">

routes/web.php

@@ -144,6 +144,12 @@ Route::middleware('auth')->group(function () {
         ->middleware('permission:inventory.view')
         ->name('api.warehouses.inventories');
 
+    // 系統管理
+    Route::middleware('permission:accounting.view')->prefix('accounting-report')->group(function () {
+        Route::get('/', [AccountingReportController::class, 'index'])->name('accounting.report');
+        Route::get('/export', [AccountingReportController::class, 'export'])->name('accounting.export');
+    });
+
     // 系統管理
     Route::prefix('admin')->group(function () {
         Route::middleware('permission:roles.view')->group(function () {
@@ -171,11 +177,7 @@ Route::middleware('auth')->group(function () {
         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