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