優化公共事業費：修正日期顯示、改善發票號碼輸入UX與調整介面欄位順序

resources/js/Components/UtilityFee/UtilityFeeDialog.tsx

@@ -16,6 +16,7 @@ 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;
@@ -84,9 +85,9 @@ export default function UtilityFeeDialog({
         e.preventDefault();
 
         if (fee) {
-            // Validate invoice number format if present
-            if (data.invoice_number && !/^[A-Z]{2}-\d{8}$/.test(data.invoice_number)) {
-                toast.error("發票號碼格式錯誤，應為：AB-12345678");
+            const validation = validateInvoiceNumber(data.invoice_number);
+            if (!validation.isValid) {
+                toast.error(validation.error);
                 return;
             }
 
@@ -101,9 +102,9 @@ export default function UtilityFeeDialog({
                 }
             });
         } else {
-            // Validate invoice number format if present
-            if (data.invoice_number && !/^[A-Z]{2}-\d{8}$/.test(data.invoice_number)) {
-                toast.error("發票號碼格式錯誤，應為：AB-12345678");
+            const validation = validateInvoiceNumber(data.invoice_number);
+            if (!validation.isValid) {
+                toast.error(validation.error);
                 return;
             }
 
@@ -189,8 +190,9 @@ export default function UtilityFeeDialog({
                             <Input
                                 id="invoice_number"
                                 value={data.invoice_number}
-                                onChange={(e) => setData("invoice_number", e.target.value)}
+                                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>}