vehicle

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

@@ -181,38 +181,29 @@ const FleetFormDialog = ({
     }
 
     if (field.type === "date") {
-      const dateValue = value && typeof value === "string" && value.length === 10
-        ? new Date(value + "T00:00:00Z")
-        : null;
-
       return (
-        <DatePicker
+        <TextInput
           key={field.name}
+          type="date"
           label={field.label}
           placeholder={field.placeholder || "YYYY-MM-DD"}
-          value={dateValue}
-          onChange={(date: Date | null) => {
-            if (!date || !(date instanceof Date)) {
-              setValues((current) => ({ ...current, [field.name]: "" }));
-            } else {
-              const isoDate = date.toISOString().split("T")[0];
-              setValues((current) => ({ ...current, [field.name]: isoDate }));
-            }
-          }}
+          value={typeof value === "string" ? value.slice(0, 10) : ""}
+          onChange={(e) =>
+            setValues((current) => ({
+              ...current,
+              [field.name]: e.currentTarget?.value ?? "",
+            }))
+          }
           error={error}
           disabled={field.disabled}
-          minDate={new Date(1900, 0, 1)}
-          maxDate={new Date()}
-          firstDayOfWeek={0}
           description={field.description || "Select a date"}
           rightSection={
-            <ActionIcon size="sm" variant="subtle" color="green">
+            <ActionIcon size="sm" variant="subtle" color="green" pointer={false}>
               <Calendar size={16} />
             </ActionIcon>
           }
           size="sm"
           radius="md"
-          popoverProps={{ shadow: "md", radius: "lg" }}
           styles={{
             input: {
               borderColor: "var(--mantine-color-gray-3)",
@@ -223,30 +214,6 @@ const FleetFormDialog = ({
                 backgroundColor: "var(--mantine-color-gray-1)",
               },
             },
-            calendar: {
-              padding: "md",
-            },
-            calendarHeaderControl: {
-              "&:hover": {
-                backgroundColor: "var(--mantine-color-green-0)",
-              },
-            },
-            day: {
-              "&[data-selected]": {
-                backgroundColor: "var(--mantine-color-green-6)",
-                color: "white",
-                fontWeight: 600,
-              },
-              "&[data-in-range]": {
-                backgroundColor: "var(--mantine-color-green-1)",
-              },
-              "&:hover": {
-                backgroundColor: "var(--mantine-color-green-2)",
-              },
-            },
-            monthRow: {
-              marginBottom: "0.5rem",
-            },
           }}
         />
       );