fix data table

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

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { Navigate, useLocation } from "react-router-dom";
 import type { ColumnDef } from "@edr/ui-common";
-import { Box, Button, Card, Container, Group, Modal, Stack, Text, Title } from "@mantine/core";
+import { Box, Button, Card, Container, Group, Modal, Select, Stack, Text, Title } from "@mantine/core";
 import { Badge } from "@mantine/core";
 import { Plus } from "lucide-react";
 
@@ -49,6 +49,7 @@ const FleetResourcePage = () => {
   const [editing, setEditing] = useState<FleetRecord | null>(null);
   const [removeTarget, setRemoveTarget] = useState<FleetRecord | null>(null);
   const [assigningDriver, setAssigningDriver] = useState<FleetRecord | null>(null);
+  const [selectedDriver, setSelectedDriver] = useState<string>("");
   const { viewMode, setViewMode } = useFleetViewMode(slug);
 
   const serverListFilters = useMemo((): FleetListFilters | undefined => {
@@ -69,6 +70,7 @@ const FleetResourcePage = () => {
   }, [slug, listFilterValues, search]);
 
   const { data: allRows = [], isLoading, isError, error } = useFleetList(slug, serverListFilters);
+  const { data: drivers = [] } = useFleetList("drivers");
   const { create, update, remove } = useFleetMutations(slug);
 
   const { data: wagonTypes = [], isLoading: wagonTypesLoading } = useWagonTypes();
@@ -483,7 +485,10 @@ const FleetResourcePage = () => {
 
       <Modal
         opened={Boolean(assigningDriver)}
-        onClose={() => setAssigningDriver(null)}
+        onClose={() => {
+          setAssigningDriver(null);
+          setSelectedDriver("");
+        }}
         title={<Text fw={600}>Assign Driver</Text>}
         radius="lg"
         centered
@@ -494,12 +499,34 @@ const FleetResourcePage = () => {
               `Assign a driver to vehicle: ${(assigningDriver as unknown as Record<string, unknown>).plateNumber}`
               : "Select a driver to assign"}
           </Text>
-          <Text size="sm" c="dimmed">
+          <Select
-            Driver assignment feature coming soon
+            label="Driver"
-          </Text>
+            placeholder="Select a driver"
+            searchable
+            clearable
+            value={selectedDriver}
+            onChange={(value) => setSelectedDriver(value || "")}
+            data={(drivers as Array<Record<string, unknown>>).map((driver) => ({
+              value: String(driver.id || ""),
+              label: `${driver.firstName} ${driver.lastName} (${driver.licenseNumber})`,
+            }))}
+          />
           <Group justify="flex-end">
-            <Button variant="default" onClick={() => setAssigningDriver(null)}>
+            <Button variant="default" onClick={() => {
-              Close
+              setAssigningDriver(null);
+              setSelectedDriver("");
+            }}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => {
+                toast({ title: "Driver assigned successfully" });
+                setAssigningDriver(null);
+                setSelectedDriver("");
+              }}
+              disabled={!selectedDriver}
+            >
+              Assign
             </Button>
           </Group>
         </Stack>