From abccdffc389f09f3ca1998c5a75efb9093fa974e Mon Sep 17 00:00:00 2001
From: natib21 <yaschalew10@gmail.com>
Date: Sat, 20 Jun 2026 09:33:04 +0000
Subject: [PATCH] fix data table

---
 .../src/pages/fleet/FleetResourcePage.tsx     | 41 +++++++++++++++----
 1 file changed, 34 insertions(+), 7 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx
index 1bedc2bca..f29a481af 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx
+++ b/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">
-            Driver assignment feature coming soon
-          </Text>
+          <Select
+            label="Driver"
+            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)}>
-              Close
+            <Button variant="default" onClick={() => {
+              setAssigningDriver(null);
+              setSelectedDriver("");
+            }}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => {
+                toast({ title: "Driver assigned successfully" });
+                setAssigningDriver(null);
+                setSelectedDriver("");
+              }}
+              disabled={!selectedDriver}
+            >
+              Assign
             </Button>
           </Group>
         </Stack>