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

2026-01-20 10:41:35 +08:00
parent 32c2612a5f
commit c1d302f03e
6 changed files with 233 additions and 84 deletions
--- a/.agent/skills/ui-consistency/SKILL.md
+++ b/.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. 檢查清單

 在開發或審查頁面時，請確認以下項目：
--- a/app/Http/Controllers/UtilityFeeController.php
+++ b/app/Http/Controllers/UtilityFeeController.php
@@ -36,9 +36,14 @@ class UtilityFeeController extends Controller
        }

        // Sorting
-        $sortField = $request->input('sort_field', 'transaction_date');
-        $sortDirection = $request->input('sort_direction', 'desc');
-        $query->orderBy($sortField, $sortDirection);
+        $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();

--- a/resources/js/Components/UtilityFee/UtilityFeeDialog.tsx
+++ b/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
-                                id="transaction_date"
-                                type="date"
-                                value={data.transaction_date}
-                                onChange={(e) => setData("transaction_date", e.target.value)}
-                                className={errors.transaction_date ? "border-red-500" : ""}
-                                required
-                            />
+                            <div className="relative">
+                                <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
+                                <Input
+                                    id="transaction_date"
+                                    type="date"
+                                    value={data.transaction_date}
+                                    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)}
-                                placeholder="例：AB12345678"
+                                onChange={(e) => {
+                                    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>

--- a/resources/js/Pages/UtilityFee/Index.tsx
+++ b/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_direction?: string;
+        sort_field?: string | null;
+        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 [sortDirection, setSortDirection] = useState(filters.sort_direction || 'desc');
+    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(
@@ -98,9 +104,21 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
    };

    const handleSort = (field: string) => {
-        const newDirection = sortField === field && sortDirection === 'asc' ? 'desc' : 'asc';
-        setSortField(field);
+        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"),
            {
@@ -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
-                        onClick={openAddDialog}
-                        className="button-filled-primary gap-2"
-                    >
-                        <Plus className="h-4 w-4" /> 新增紀錄
-                    </Button>
+                    <Can permission="utility_fees.create">
+                        <Button
+                            onClick={openAddDialog}
+                            className="button-filled-primary gap-2"
+                        >
+                            <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
-                                    className="cursor-pointer hover:text-primary transition-colors py-4 px-4 text-center"
-                                    onClick={() => handleSort('transaction_date')}
-                                >
-                                    費用日期 {sortField === 'transaction_date' && (sortDirection === 'asc' ? '↑' : '↓')}
+                                <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
-                                    className="cursor-pointer hover:text-primary transition-colors py-4 px-4"
-                                    onClick={() => handleSort('category')}
-                                >
-                                    費用類別 {sortField === 'category' && (sortDirection === 'asc' ? '↑' : '↓')}
+                                <TableHead>
+                                    <button
+                                        onClick={() => handleSort('category')}
+                                        className="flex items-center hover:text-gray-900"
+                                    >
+                                        費用類別 <SortIcon field="category" />
+                                    </button>
                                </TableHead>
-                                <TableHead
-                                    className="cursor-pointer hover:text-primary transition-colors py-4 px-4 text-right"
-                                    onClick={() => handleSort('amount')}
-                                >
-                                    金額 {sortField === 'amount' && (sortDirection === 'asc' ? '↑' : '↓')}
+                                <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
-                                    className="cursor-pointer hover:text-primary transition-colors py-4 px-4"
-                                    onClick={() => handleSort('invoice_number')}
-                                >
-                                    發票號碼 {sortField === 'invoice_number' && (sortDirection === 'asc' ? '↑' : '↓')}
+                                <TableHead>
+                                    <button
+                                        onClick={() => handleSort('invoice_number')}
+                                        className="flex items-center hover:text-gray-900"
+                                    >
+                                        發票號碼 <SortIcon field="invoice_number" />
+                                    </button>
                                </TableHead>
-                                <TableHead className="py-4 px-4">說明 / 備註</TableHead>
-                                <TableHead className="py-4 px-4 text-center w-[120px]">操作</TableHead>
+                                <TableHead>說明 / 備註</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">
-                                        <div className="flex flex-col items-center justify-center space-y-2">
+                                    <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>找不到符合條件的費用紀錄</p>
+                                            <p className="text-gray-500">找不到符合條件的費用紀錄</p>
                                        </div>
                                    </TableCell>
                                </TableRow>
                            ) : (
-                                fees.data.map((fee) => (
-                                    <TableRow key={fee.id} className="hover:bg-gray-50/50 transition-colors">
-                                        <TableCell className="text-center font-medium">{fee.transaction_date}</TableCell>
+                                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>
-                                            <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
-                                                    variant="outline"
-                                                    size="sm"
-                                                    className="button-outlined-primary h-8 w-8 p-0"
-                                                    onClick={() => openEditDialog(fee)}
-                                                >
-                                                    <Pencil className="h-4 w-4" />
-                                                </Button>
-                                                <Button
-                                                    variant="outline"
-                                                    size="sm"
-                                                    className="button-outlined-error h-8 w-8 p-0"
-                                                    onClick={() => confirmDelete(fee.id)}
-                                                >
-                                                    <Trash2 className="h-4 w-4" />
-                                                </Button>
+                                                <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>
--- a/resources/js/Pages/Warehouse/AddInventory.tsx
+++ b/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>

--- a/resources/js/utils/format.ts
+++ b/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 格式）
 */