fix data table

This commit is contained in:
natib21
2026-06-20 09:13:27 +00:00
parent 3793d2004f
commit b6e0a34ea8

View File

@@ -1,5 +1,5 @@
import { Edit2, Trash2, Eye, Users } from "lucide-react";
import { ActionIcon, Group, Tooltip } from "@mantine/core";
import { Edit2, Trash2, Eye, Users, MoreVertical } from "lucide-react";
import { ActionIcon, Group, Menu, MenuItem, Tooltip } from "@mantine/core";
import { useNavigate } from "react-router-dom";
import type { FleetResourceConfig } from "@/pages/fleet/config/resources";
@@ -34,7 +34,7 @@ const FleetRecordActions = ({
if (layout === "compact") {
return (
<Group gap={4} wrap="nowrap" justify="flex-end">
<Group gap={6} wrap="nowrap" justify="flex-end">
{isVehicle && onAssignDriver ? (
<Tooltip label="Assign Driver">
<ActionIcon
@@ -43,19 +43,7 @@ const FleetRecordActions = ({
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} />
<Users size={16} strokeWidth={2} />
</ActionIcon>
</Tooltip>
) : null}
@@ -66,49 +54,73 @@ const FleetRecordActions = ({
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} />
<Edit2 size={16} strokeWidth={2} />
</ActionIcon>
</Tooltip>
<Menu position="bottom-end" withinPortal shadow="md">
<Menu.Target>
<Tooltip label="More actions">
<ActionIcon
variant="subtle"
color="gray"
size="sm"
>
<MoreVertical size={16} strokeWidth={2} />
</ActionIcon>
</Tooltip>
</Menu.Target>
<Menu.Dropdown>
{showDetail ? (
<MenuItem onClick={handleDetail} leftSection={<Eye size={14} strokeWidth={2} />}>
View details
</MenuItem>
) : null}
<MenuItem color="red" onClick={() => onRemove(record)} leftSection={<Trash2 size={14} strokeWidth={2} />}>
{removeLabel}
</MenuItem>
</Menu.Dropdown>
</Menu>
</Group>
);
}
return (
<Group gap={4} wrap="nowrap" justify="flex-end">
<Group gap={6} 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">
<ActionIcon variant="subtle" color="gray" size="sm" onClick={handleDetail}>
<Eye size={16} />
<Users size={16} strokeWidth={2} />
</ActionIcon>
</Tooltip>
) : null}
<Tooltip label="Edit">
<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} />
<Edit2 size={16} strokeWidth={2} />
</ActionIcon>
</Tooltip>
<Menu position="bottom-end" withinPortal shadow="md">
<Menu.Target>
<Tooltip label="More actions">
<ActionIcon
variant="subtle"
color="gray"
size="sm"
>
<MoreVertical size={16} strokeWidth={2} />
</ActionIcon>
</Tooltip>
</Menu.Target>
<Menu.Dropdown>
{showDetail ? (
<MenuItem onClick={handleDetail} leftSection={<Eye size={14} strokeWidth={2} />}>
View details
</MenuItem>
) : null}
<MenuItem color="red" onClick={() => onRemove(record)} leftSection={<Trash2 size={14} strokeWidth={2} />}>
{removeLabel}
</MenuItem>
</Menu.Dropdown>
</Menu>
</Group>
);
};