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"}
         />
       );
     }

apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx

@@ -374,40 +374,44 @@ const FleetResourcePage = () => {
           </Box>
 
           {viewMode === "table" ? (
-            <DataTable
-              columns={columns}
-              data={pagedRows}
-              status={tableStatus}
-              error={
-                isError
-                  ? {
-                      message: "Failed to load data",
-                      description: error instanceof Error ? error.message : "Unknown error",
-                    }
-                  : undefined
-              }
-              emptyMessage={`No ${itemLabel} found`}
-              pagination={{
-                pageIndex: pagination.pageIndex,
-                pageSize: pagination.pageSize,
-                pageCount,
-                totalCount: filteredRows.length,
-              }}
-              tableOptions={{
-                manualPagination: true,
-                pageCount,
-                state: { pagination },
-                onPaginationChange: setPagination,
-              }}
-              containerClassName="border-0 shadow-none bg-transparent"
-              footer={({ table, pagination: footerPagination }) => (
-                <DataTableFooter
-                  table={table}
-                  pagination={footerPagination}
-                  options={{ labels: { items: itemLabel } }}
-                />
-              )}
-            />
+            <Box style={{ overflowX: "auto", width: "100%", minWidth: 0 }}>
+              <div style={{ minWidth: "max-content" }}>
+                <DataTable
+                columns={columns}
+                data={pagedRows}
+                status={tableStatus}
+                error={
+                  isError
+                    ? {
+                        message: "Failed to load data",
+                        description: error instanceof Error ? error.message : "Unknown error",
+                      }
+                    : undefined
+                }
+                emptyMessage={`No ${itemLabel} found`}
+                pagination={{
+                  pageIndex: pagination.pageIndex,
+                  pageSize: pagination.pageSize,
+                  pageCount,
+                  totalCount: filteredRows.length,
+                }}
+                tableOptions={{
+                  manualPagination: true,
+                  pageCount,
+                  state: { pagination },
+                  onPaginationChange: setPagination,
+                }}
+                containerClassName="border-0 shadow-none bg-transparent"
+                footer={({ table, pagination: footerPagination }) => (
+                  <DataTableFooter
+                    table={table}
+                    pagination={footerPagination}
+                    options={{ labels: { items: itemLabel } }}
+                  />
+                )}
+              />
+              </div>
+            </Box>
           ) : (
             <FleetCardGrid
               config={config}

apps/edr-freight-web/backoffice/src/pages/fleet/config/resources.ts

@@ -468,11 +468,12 @@ export const FLEET_RESOURCES: FleetResourceConfig[] = [
       { name: "licenseNumber", label: "License Number", type: "text", required: true },
       { name: "firstName", label: "First Name", type: "text", required: true },
       { name: "lastName", label: "Last Name", type: "text", required: true },
-      { name: "email", label: "Email", type: "text", required: true },
+      { name: "email", label: "Email", type: "email", required: true },
       { name: "phoneNumber", label: "Phone Number", type: "text", required: true },
-      { name: "dateOfBirth", label: "Date of Birth", type: "text", required: true },
-      { name: "licenseExpiryDate", label: "License Expiry Date", type: "text", required: true },
+      { name: "dateOfBirth", label: "Date of Birth", type: "date", required: true },
+      { name: "licenseExpiryDate", label: "License Expiry Date", type: "date", required: true },
       { name: "status", label: "Status", type: "select", required: true, options: DRIVER_STATUS_OPTIONS },
+      { name: "vehicleTypesAuthorized", label: "Authorized Vehicle Types", type: "text" },
       { name: "address", label: "Address", type: "textarea" },
       { name: "emergencyContact", label: "Emergency Contact", type: "text" },
       { name: "notes", label: "Notes", type: "textarea" },