更新 UI 一致性規範與公共事業費樣式

.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. 檢查清單
 
 在開發或審查頁面時，請確認以下項目：

app/Http/Controllers/UtilityFeeController.php

@@ -36,9 +36,14 @@ class UtilityFeeController extends Controller
         }
 
         // Sorting
-        $sortField = $request->input('sort_field', 'transaction_date');
+        $sortField = $request->input('sort_field');
-        $sortDirection = $request->input('sort_direction', 'desc');
+        $sortDirection = $request->input('sort_direction');
-        $query->orderBy($sortField, $sortDirection);
+
+        if ($sortField && $sortDirection) {
+            $query->orderBy($sortField, $sortDirection);
+        } else {
+            $query->orderBy('transaction_date', 'desc');
+        }
 
         $fees = $query->paginate($request->input('per_page', 15))->withQueryString();
 

resources/js/Components/UtilityFee/UtilityFeeDialog.tsx

@@ -14,6 +14,7 @@ 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";
 
 export interface UtilityFee {
     id: number;
@@ -65,7 +66,7 @@ export default function UtilityFeeDialog({
             clearErrors();
             if (fee) {
                 setData({
-                    transaction_date: fee.transaction_date,
+                    transaction_date: fee.transaction_date.split("T")[0].split(" ")[0],
                     category: fee.category,
                     amount: fee.amount.toString(),
                     invoice_number: fee.invoice_number || "",
@@ -122,14 +123,17 @@ export default function UtilityFeeDialog({
                             <Label htmlFor="transaction_date">
                                 費用日期 <span className="text-red-500">*</span>
                             </Label>
-                            <Input
+                            <div className="relative">
-                                id="transaction_date"
+                                <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
-                                type="date"
+                                <Input
-                                value={data.transaction_date}
+                                    id="transaction_date"
-                                onChange={(e) => setData("transaction_date", e.target.value)}
+                                    type="date"
-                                className={errors.transaction_date ? "border-red-500" : ""}
+                                    value={data.transaction_date}
-                                required
+                                    onChange={(e) => setData("transaction_date", e.target.value)}
-                            />
+                                    className={`pl-9 ${errors.transaction_date ? "border-red-500" : ""}`}
+                                    required
+                                />
+                            </div>
                             {errors.transaction_date && <p className="text-sm text-red-500">{errors.transaction_date}</p>}
                         </div>
 
@@ -172,9 +176,26 @@ export default function UtilityFeeDialog({
                             <Input
                                 id="invoice_number"
                                 value={data.invoice_number}
-                                onChange={(e) => setData("invoice_number", e.target.value)}
+                                onChange={(e) => {
-                                placeholder="例：AB12345678"
+                                    let value = e.target.value.toUpperCase();
+                                    // Remove non-alphanumeric chars
+                                    const raw = value.replace(/[^A-Z0-9]/g, '');
+
+                                    // Auto-insert hyphen after 2 chars if we have length > 2
+                                    if (raw.length > 2) {
+                                        value = `${raw.slice(0, 2)}-${raw.slice(2)}`;
+                                    } else {
+                                        value = raw;
+                                    }
+
+                                    // Limit max length (2 letters + 8 digits + 1 hyphen = 11 chars)
+                                    if (value.length > 11) value = value.slice(0, 11);
+
+                                    setData("invoice_number", value);
+                                }}
+                                placeholder="例：AB-12345678"
                             />
+                            <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>
 

resources/js/Pages/UtilityFee/Index.tsx

@@ -10,7 +10,10 @@ import {
     Trash2,
     FileText,
     Calendar,
-    Filter
+    Filter,
+    ArrowUpDown,
+    ArrowUp,
+    ArrowDown
 } from 'lucide-react';
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router } from "@inertiajs/react";
@@ -23,6 +26,7 @@ import {
     TableHeader,
     TableRow,
 } from "@/Components/ui/table";
+import { Badge } from "@/Components/ui/badge";
 import { toast } from "sonner";
 import UtilityFeeDialog, { UtilityFee } from "@/Components/UtilityFee/UtilityFeeDialog";
 import {
@@ -35,6 +39,8 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from "@/Components/ui/alert-dialog";
+import { Can } from "@/Components/Permission/Can";
+import { formatDateWithDayOfWeek, formatInvoiceNumber } from "@/utils/format";
 
 interface PageProps {
     fees: {
@@ -53,8 +59,8 @@ interface PageProps {
         category?: string;
         date_start?: string;
         date_end?: string;
-        sort_field?: string;
+        sort_field?: string | null;
-        sort_direction?: string;
+        sort_direction?: "asc" | "desc" | null;
         per_page?: string;
     };
 }
@@ -71,8 +77,8 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
     const [deletingFeeId, setDeletingFeeId] = useState<number | null>(null);
 
     // Sorting
-    const [sortField, setSortField] = useState(filters.sort_field || 'transaction_date');
+    const [sortField, setSortField] = useState<string | null>(filters.sort_field || 'transaction_date');
-    const [sortDirection, setSortDirection] = useState(filters.sort_direction || 'desc');
+    const [sortDirection, setSortDirection] = useState<"asc" | "desc" | null>(filters.sort_direction as "asc" | "desc" || 'desc');
 
     const handleSearch = () => {
         router.get(
@@ -98,9 +104,21 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
     };
 
     const handleSort = (field: string) => {
-        const newDirection = sortField === field && sortDirection === 'asc' ? 'desc' : 'asc';
+        let newField: string | null = field;
-        setSortField(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"),
             {
@@ -108,7 +126,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
                 category: categoryFilter,
                 date_start: dateStart,
                 date_end: dateEnd,
-                sort_field: field,
+                sort_field: newField,
                 sort_direction: newDirection,
             },
             { preserveState: true }
@@ -141,6 +159,19 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
         }
     };
 
+    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="公共事業費管理" />
@@ -155,12 +186,14 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
                         <p className="text-gray-500 mt-1">管理店鋪水、電、瓦斯等各項公共事業費用支出</p>
                     </div>
 
-                    <Button
+                    <Can permission="utility_fees.create">
-                        onClick={openAddDialog}
+                        <Button
-                        className="button-filled-primary gap-2"
+                            onClick={openAddDialog}
-                    >
+                            className="button-filled-primary gap-2"
-                        <Plus className="h-4 w-4" /> 新增紀錄
+                        >
-                    </Button>
+                            <Plus className="h-4 w-4" /> 新增紀錄
+                        </Button>
+                    </Can>
                 </div>
 
                 {/* Toolbar */}
@@ -174,7 +207,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
                                 value={searchTerm}
                                 onChange={(e) => setSearchTerm(e.target.value)}
                                 onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-                                className="pl-10 h-10"
+                                className="pl-10"
                             />
                             {searchTerm && (
                                 <button
@@ -195,29 +228,28 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
                                 ...availableCategories.map(c => ({ label: c, value: c }))
                             ]}
                             placeholder="篩選類別"
-                            className="h-10"
                         />
 
                         {/* Date Range Start */}
                         <div className="relative">
-                            <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4 pointer-events-none" />
+                            <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
                             <Input
                                 type="date"
                                 value={dateStart}
                                 onChange={(e) => setDateStart(e.target.value)}
-                                className="pl-10 h-10"
+                                className="pl-9 bg-white block w-full"
                                 placeholder="開始日期"
                             />
                         </div>
 
                         {/* Date Range End */}
                         <div className="relative">
-                            <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4 pointer-events-none" />
+                            <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
                             <Input
                                 type="date"
                                 value={dateEnd}
                                 onChange={(e) => setDateEnd(e.target.value)}
-                                className="pl-10 h-10"
+                                className="pl-9 bg-white block w-full"
                                 placeholder="結束日期"
                             />
                         </div>
@@ -243,82 +275,102 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
                 {/* Table */}
                 <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
                     <Table>
-                        <TableHeader className="bg-gray-50 text-gray-600 font-bold uppercase tracking-wider text-xs">
+                        <TableHeader>
                             <TableRow>
-                                <TableHead
+                                <TableHead className="w-[50px] text-center">#</TableHead>
-                                    className="cursor-pointer hover:text-primary transition-colors py-4 px-4 text-center"
+                                <TableHead className="w-[120px]">
-                                    onClick={() => handleSort('transaction_date')}
+                                    <button
-                                >
+                                        onClick={() => handleSort('transaction_date')}
-                                    費用日期 {sortField === 'transaction_date' && (sortDirection === 'asc' ? '↑' : '↓')}
+                                        className="flex items-center hover:text-gray-900"
+                                    >
+                                        費用日期 <SortIcon field="transaction_date" />
+                                    </button>
                                 </TableHead>
-                                <TableHead
+                                <TableHead>
-                                    className="cursor-pointer hover:text-primary transition-colors py-4 px-4"
+                                    <button
-                                    onClick={() => handleSort('category')}
+                                        onClick={() => handleSort('category')}
-                                >
+                                        className="flex items-center hover:text-gray-900"
-                                    費用類別 {sortField === 'category' && (sortDirection === 'asc' ? '↑' : '↓')}
+                                    >
+                                        費用類別 <SortIcon field="category" />
+                                    </button>
                                 </TableHead>
-                                <TableHead
+                                <TableHead className="text-right">
-                                    className="cursor-pointer hover:text-primary transition-colors py-4 px-4 text-right"
+                                    <div className="flex justify-end">
-                                    onClick={() => handleSort('amount')}
+                                        <button
-                                >
+                                            onClick={() => handleSort('amount')}
-                                    金額 {sortField === 'amount' && (sortDirection === 'asc' ? '↑' : '↓')}
+                                            className="flex items-center hover:text-gray-900"
+                                        >
+                                            金額 <SortIcon field="amount" />
+                                        </button>
+                                    </div>
                                 </TableHead>
-                                <TableHead
+                                <TableHead>
-                                    className="cursor-pointer hover:text-primary transition-colors py-4 px-4"
+                                    <button
-                                    onClick={() => handleSort('invoice_number')}
+                                        onClick={() => handleSort('invoice_number')}
-                                >
+                                        className="flex items-center hover:text-gray-900"
-                                    發票號碼 {sortField === 'invoice_number' && (sortDirection === 'asc' ? '↑' : '↓')}
+                                    >
+                                        發票號碼 <SortIcon field="invoice_number" />
+                                    </button>
                                 </TableHead>
-                                <TableHead className="py-4 px-4">說明 / 備註</TableHead>
+                                <TableHead>說明 / 備註</TableHead>
-                                <TableHead className="py-4 px-4 text-center w-[120px]">操作</TableHead>
+                                <TableHead className="text-center w-[120px]">操作</TableHead>
                             </TableRow>
                         </TableHeader>
                         <TableBody>
                             {fees.data.length === 0 ? (
                                 <TableRow>
-                                    <TableCell colSpan={6} className="h-48 text-center text-gray-500">
+                                    <TableCell colSpan={7}>
-                                        <div className="flex flex-col items-center justify-center space-y-2">
+                                        <div className="flex flex-col items-center justify-center space-y-2 py-8">
                                             <FileText className="h-8 w-8 text-gray-300" />
-                                            <p>找不到符合條件的費用紀錄</p>
+                                            <p className="text-gray-500">找不到符合條件的費用紀錄</p>
                                         </div>
                                     </TableCell>
                                 </TableRow>
                             ) : (
-                                fees.data.map((fee) => (
+                                fees.data.map((fee, index) => (
-                                    <TableRow key={fee.id} className="hover:bg-gray-50/50 transition-colors">
+                                    <TableRow key={fee.id}>
-                                        <TableCell className="text-center font-medium">{fee.transaction_date}</TableCell>
+                                        <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>
-                                            <span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-primary/10 text-primary">
+                                            <Badge variant="outline">
                                                 {fee.category}
-                                            </span>
+                                            </Badge>
                                         </TableCell>
                                         <TableCell className="text-right font-bold text-gray-900">
                                             $ {Number(fee.amount).toLocaleString()}
                                         </TableCell>
                                         <TableCell className="font-mono text-sm text-gray-600">
-                                            {fee.invoice_number || '-'}
+                                            {formatInvoiceNumber(fee.invoice_number)}
                                         </TableCell>
                                         <TableCell className="max-w-xs truncate text-gray-600" title={fee.description}>
                                             {fee.description || '-'}
                                         </TableCell>
                                         <TableCell>
                                             <div className="flex items-center justify-center gap-2">
-                                                <Button
+                                                <Can permission="utility_fees.edit">
-                                                    variant="outline"
+                                                    <Button
-                                                    size="sm"
+                                                        variant="outline"
-                                                    className="button-outlined-primary h-8 w-8 p-0"
+                                                        size="sm"
-                                                    onClick={() => openEditDialog(fee)}
+                                                        className="button-outlined-primary"
-                                                >
+                                                        onClick={() => openEditDialog(fee)}
-                                                    <Pencil className="h-4 w-4" />
+                                                    >
-                                                </Button>
+                                                        <Pencil className="h-4 w-4" />
-                                                <Button
+                                                    </Button>
-                                                    variant="outline"
+                                                </Can>
-                                                    size="sm"
+                                                <Can permission="utility_fees.delete">
-                                                    className="button-outlined-error h-8 w-8 p-0"
+                                                    <Button
-                                                    onClick={() => confirmDelete(fee.id)}
+                                                        variant="outline"
-                                                >
+                                                        size="sm"
-                                                    <Trash2 className="h-4 w-4" />
+                                                        className="button-outlined-error"
-                                                </Button>
+                                                        onClick={() => confirmDelete(fee.id)}
+                                                    >
+                                                        <Trash2 className="h-4 w-4" />
+                                                    </Button>
+                                                </Can>
                                             </div>
                                         </TableCell>
                                     </TableRow>

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

@@ -24,6 +24,32 @@ export const formatDate = (date: string): string => {
   return new Date(date).toLocaleDateString("zh-TW");
 };
 
+/**
+ * 格式化日期並包含星期
+ */
+export const formatDateWithDayOfWeek = (date: string): string => {
+  if (!date) return "-";
+  return new Date(date).toLocaleDateString("zh-TW", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    weekday: "short",
+  });
+};
+
+/**
+ * 格式化發票號碼
+ * 例如：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 格式）
  */