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

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>