修正日期時區偏移導致顯示少一天的問題

resources/js/Components/UtilityFee/UtilityFeeDialog.tsx

@@ -15,6 +15,7 @@ import { SearchableSelect } from "@/Components/ui/searchable-select";
 import { useForm } from "@inertiajs/react";
 import { toast } from "sonner";
 import { Calendar } from "lucide-react";
+import { getCurrentDate } from "@/utils/format";
 
 export interface UtilityFee {
     id: number;
@@ -51,7 +52,7 @@ export default function UtilityFeeDialog({
     availableCategories,
 }: UtilityFeeDialogProps) {
     const { data, setData, post, put, processing, errors, reset, clearErrors } = useForm({
-        transaction_date: new Date().toISOString().split("T")[0],
+        transaction_date: getCurrentDate(),
         category: "",
         amount: "",
         invoice_number: "",
@@ -74,7 +75,7 @@ export default function UtilityFeeDialog({
                 });
             } else {
                 reset();
-                setData("transaction_date", new Date().toISOString().split("T")[0]);
+                setData("transaction_date", getCurrentDate());
             }
         }
     }, [open, fee]);
@@ -83,6 +84,12 @@ 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");
+                return;
+            }
+
             put(route("utility-fees.update", fee.id), {
                 onSuccess: () => {
                     toast.success("紀錄已更新");
@@ -94,6 +101,12 @@ 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");
+                return;
+            }
+
             post(route("utility-fees.store"), {
                 onSuccess: () => {
                     toast.success("公共事業費已記錄");
@@ -124,13 +137,13 @@ export default function UtilityFeeDialog({
                                 費用日期 <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" />
+                                <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400 pointer-events-none" />
                                 <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" : ""}`}
+                                    className={`pl-9 block w-full ${errors.transaction_date ? "border-red-500" : ""}`}
                                     required
                                 />
                             </div>
@@ -176,26 +189,10 @@ export default function UtilityFeeDialog({
                             <Input
                                 id="invoice_number"
                                 value={data.invoice_number}
-                                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);
-                                }}
+                                onChange={(e) => setData("invoice_number", e.target.value)}
                                 placeholder="例：AB-12345678"
                             />
-                            <p className="text-xs text-gray-500">格式：AB-12345678 (系統自動格式化)</p>
+                            <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>