vehicle

apps/edr-freight-web/backoffice/src/components/fleet/FleetFormDialog.tsx

@@ -12,6 +12,7 @@ import {
   Textarea,
   TextInput,
 } from "@mantine/core";
+import { DatePicker } from "@mantine/dates";
 
 import { FLEET_SELECT_NONE, type FleetFormFieldDef } from "@/pages/fleet/config/resources";
 import type { FleetRecord } from "@/services/fleet/fleet.service";
@@ -83,9 +84,25 @@ const FleetFormDialog = ({
       const value = values[field.name];
       const stringValue =
         typeof value === "string" ? value.trim() : String(value ?? "");
+
       if (field.required && (stringValue === "" || stringValue === FLEET_SELECT_NONE)) {
         next[field.name] = `${field.label} is required`;
       }
+
+      // Validate date format (YYYY-MM-DD) - DatePicker ensures this
+      if (field.type === "date" && stringValue && stringValue !== FLEET_SELECT_NONE) {
+        const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+        if (!dateRegex.test(stringValue)) {
+          next[field.name] = `${field.label} must be a valid date`;
+        } else {
+          const date = new Date(stringValue + "T00:00:00Z");
+          if (isNaN(date.getTime())) {
+            next[field.name] = `${field.label} is not a valid date`;
+          } else if (date > new Date()) {
+            next[field.name] = `${field.label} cannot be in the future`;
+          }
+        }
+      }
     });
     setErrors(next);
     return Object.keys(next).length === 0;
@@ -163,21 +180,32 @@ const FleetFormDialog = ({
     }
 
     if (field.type === "date") {
+      const dateValue = value && typeof value === "string" && value.length === 10
+        ? new Date(value + "T00:00:00Z")
+        : null;
+
       return (
-        <TextInput
+        <DatePicker
           key={field.name}
-          type="date"
           label={field.label}
-          placeholder={field.placeholder}
-          value={typeof value === "string" ? value.slice(0, 10) : ""}
-          onChange={(e) =>
-            setValues((current) => ({
-              ...current,
-              [field.name]: e.currentTarget?.value ?? "",
-            }))
-          }
+          placeholder={field.placeholder || "Click to select a date"}
+          value={dateValue}
+          onChange={(date) => {
+            if (!date) {
+              setValues((current) => ({ ...current, [field.name]: "" }));
+            } else {
+              const isoDate = date.toISOString().split("T")[0];
+              setValues((current) => ({ ...current, [field.name]: isoDate }));
+            }
+          }}
           error={error}
           disabled={field.disabled}
+          minDate={new Date(1900, 0, 1)}
+          maxDate={new Date()}
+          clearable
+          valueFormat="YYYY-MM-DD"
+          firstDayOfWeek={0}
+          description={field.description || "Select a date"}
         />
       );
     }