fix data table

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

@@ -1,5 +1,5 @@
-import { MoreHorizontal, Pencil, Trash2, Eye, Copy } from "lucide-react";
-import { ActionIcon, Button, Group, Menu, Tooltip } from "@mantine/core";
+import { Edit2, Trash2, Eye, Users } from "lucide-react";
+import { ActionIcon, Group, Tooltip } from "@mantine/core";
 import { useNavigate } from "react-router-dom";
 
 import type { FleetResourceConfig } from "@/pages/fleet/config/resources";
@@ -10,6 +10,7 @@ export interface FleetRecordActionsProps {
   config: FleetResourceConfig;
   onEdit: (record: FleetRecord) => void;
   onRemove: (record: FleetRecord) => void;
+  onAssignDriver?: (record: FleetRecord) => void;
   layout?: "row" | "compact";
 }
 
@@ -18,11 +19,13 @@ const FleetRecordActions = ({
   config,
   onEdit,
   onRemove,
+  onAssignDriver,
   layout = "row",
 }: FleetRecordActionsProps) => {
   const navigate = useNavigate();
   const removeLabel = config.removeActionLabel ?? "Delete";
   const showDetail = Boolean(config.detailPath && "id" in record);
+  const isVehicle = config.slug === "vehicles";
 
   const handleDetail = () => {
     if (!config.detailPath || !("id" in record)) return;
@@ -31,14 +34,25 @@ const FleetRecordActions = ({
 
   if (layout === "compact") {
     return (
-      <Group gap={6} wrap="nowrap" justify="flex-end">
-        {showDetail ? (
-          <Tooltip label="View details">
+      <Group gap={4} wrap="nowrap" justify="flex-end">
+        {isVehicle && onAssignDriver ? (
+          <Tooltip label="Assign Driver">
             <ActionIcon
-              variant="light"
-              color="green"
-              size="md"
-              radius="md"
+              variant="subtle"
+              color="blue"
+              size="sm"
+              onClick={() => onAssignDriver(record)}
+            >
+              <Users size={16} />
+            </ActionIcon>
+          </Tooltip>
+        ) : null}
+        {showDetail ? (
+          <Tooltip label="View">
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="sm"
               onClick={handleDetail}
             >
               <Eye size={16} />
@@ -47,21 +61,19 @@ const FleetRecordActions = ({
         ) : null}
         <Tooltip label="Edit">
           <ActionIcon
-            variant="light"
-            color="teal"
-            size="md"
-            radius="md"
+            variant="subtle"
+            color="blue"
+            size="sm"
             onClick={() => onEdit(record)}
           >
-            <Pencil size={16} />
+            <Edit2 size={16} />
           </ActionIcon>
         </Tooltip>
         <Tooltip label={removeLabel}>
           <ActionIcon
-            variant="light"
+            variant="subtle"
             color="red"
-            size="md"
-            radius="md"
+            size="sm"
             onClick={() => onRemove(record)}
           >
             <Trash2 size={16} />
@@ -73,32 +85,30 @@ const FleetRecordActions = ({
 
   return (
     <Group gap={4} wrap="nowrap" justify="flex-end">
+      {isVehicle && onAssignDriver ? (
+        <Tooltip label="Assign Driver">
+          <ActionIcon variant="subtle" color="blue" size="sm" onClick={() => onAssignDriver(record)}>
+            <Users size={16} />
+          </ActionIcon>
+        </Tooltip>
+      ) : null}
       {showDetail ? (
-        <Tooltip label="View details">
-          <ActionIcon variant="light" color="green" size="md" radius="md" onClick={handleDetail}>
+        <Tooltip label="View">
+          <ActionIcon variant="subtle" color="gray" size="sm" onClick={handleDetail}>
             <Eye size={16} />
           </ActionIcon>
         </Tooltip>
       ) : null}
       <Tooltip label="Edit">
-        <ActionIcon variant="light" color="teal" size="md" radius="md" onClick={() => onEdit(record)}>
-          <Pencil size={16} />
+        <ActionIcon variant="subtle" color="blue" size="sm" onClick={() => onEdit(record)}>
+          <Edit2 size={16} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label={removeLabel}>
+        <ActionIcon variant="subtle" color="red" size="sm" onClick={() => onRemove(record)}>
+          <Trash2 size={16} />
         </ActionIcon>
       </Tooltip>
-      <Menu position="bottom-end" withinPortal>
-        <Menu.Target>
-          <Tooltip label="More actions">
-            <ActionIcon variant="light" color="green" size="md" radius="md">
-              <MoreHorizontal size={16} />
-            </ActionIcon>
-          </Tooltip>
-        </Menu.Target>
-        <Menu.Dropdown>
-          <Menu.Item color="red" leftSection={<Trash2 size={14} />} onClick={() => onRemove(record)}>
-            {removeLabel}
-          </Menu.Item>
-        </Menu.Dropdown>
-      </Menu>
     </Group>
   );
 };

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

@@ -48,6 +48,7 @@ const FleetResourcePage = () => {
   const [formOpen, setFormOpen] = useState(false);
   const [editing, setEditing] = useState<FleetRecord | null>(null);
   const [removeTarget, setRemoveTarget] = useState<FleetRecord | null>(null);
+  const [assigningDriver, setAssigningDriver] = useState<FleetRecord | null>(null);
   const { viewMode, setViewMode } = useFleetViewMode(slug);
 
   const serverListFilters = useMemo((): FleetListFilters | undefined => {
@@ -246,6 +247,7 @@ const FleetResourcePage = () => {
               setFormOpen(true);
             }}
             onRemove={setRemoveTarget}
+            onAssignDriver={setAssigningDriver}
           />
         </div>
       ),
@@ -478,6 +480,30 @@ const FleetResourcePage = () => {
           </Group>
         </Stack>
       </Modal>
+
+      <Modal
+        opened={Boolean(assigningDriver)}
+        onClose={() => setAssigningDriver(null)}
+        title={<Text fw={600}>Assign Driver</Text>}
+        radius="lg"
+        centered
+      >
+        <Stack gap="md">
+          <Text size="sm">
+            {assigningDriver && "id" in assigningDriver ?
+              `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>
+          <Group justify="flex-end">
+            <Button variant="default" onClick={() => setAssigningDriver(null)}>
+              Close
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
     </Container>
   );
 };