vehicle

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

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2, Calendar } from "lucide-react";
 import {
   Button,
   Group,
@@ -11,6 +11,7 @@ import {
   Text,
   Textarea,
   TextInput,
+  ActionIcon,
 } from "@mantine/core";
 import { DatePicker } from "@mantine/dates";
 
@@ -188,7 +189,7 @@ const FleetFormDialog = ({
         <DatePicker
           key={field.name}
           label={field.label}
-          placeholder={field.placeholder || "Click to select a date"}
+          placeholder={field.placeholder || "YYYY-MM-DD"}
           value={dateValue}
           onChange={(date: Date | null) => {
             if (!date || !(date instanceof Date)) {
@@ -204,6 +205,24 @@ const FleetFormDialog = ({
           maxDate={new Date()}
           firstDayOfWeek={0}
           description={field.description || "Select a date"}
+          rightSection={
+            <ActionIcon size="sm" variant="subtle" color="gray">
+              <Calendar size={16} />
+            </ActionIcon>
+          }
+          size="sm"
+          radius="md"
+          styles={{
+            input: {
+              borderColor: "var(--mantine-color-gray-3)",
+              backgroundColor: "var(--mantine-color-gray-0)",
+              transition: "all 200ms ease",
+              "&:focus": {
+                borderColor: "var(--mantine-color-green-5)",
+                backgroundColor: "var(--mantine-color-gray-1)",
+              },
+            },
+          }}
         />
       );
     }