mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +00:00
feat(cargo-types): add CargoTypesPage for managing freight cargo categories and types
This commit is contained in:
Marshal
@@ -44,6 +44,7 @@ import DropdownSettingsPage from "./pages/dropdown_settings/DropdownSettingsPage
|
||||
import FileUploadSettingsPage from "./pages/documents/FileUploadSettingsPage";
|
||||
import RuleEngineLegacyRedirect from "./pages/ruleEngine/RuleEngineLegacyRedirect";
|
||||
import RuleEngineResourcePage from "./pages/ruleEngine/RuleEngineResourcePage";
|
||||
import CargoTypesPage from "./pages/ruleEngine/CargoTypesPage";
|
||||
import TrainScheduleV2ListPage from "./pages/trainScheduling/TrainScheduleV2ListPage";
|
||||
import BatchBoardPage from "./pages/trainScheduling/BatchBoardPage";
|
||||
import BatchScheduleDetailPage from "./pages/trainScheduling/BatchScheduleDetailPage";
|
||||
@@ -525,6 +526,7 @@ const App = () => {
|
||||
</RequirePermission>
|
||||
}
|
||||
/>
|
||||
<Route path="configuration/cargo-types" element={<CargoTypesPage />} />
|
||||
<Route path="configuration/:resource" element={<RuleEngineResourcePage />} />
|
||||
|
||||
<Route
|
||||
|
||||
@@ -0,0 +1,600 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { Navigate } from "react-router-dom";
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Collapse,
|
||||
Group,
|
||||
Loader,
|
||||
Modal,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
ThemeIcon,
|
||||
Tooltip,
|
||||
UnstyledButton,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
Boxes,
|
||||
ChevronRight,
|
||||
CornerDownRight,
|
||||
FileText,
|
||||
Package,
|
||||
Pencil,
|
||||
Plus,
|
||||
Search,
|
||||
ShieldCheck,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
|
||||
import { useAuth } from "@/auth/useAuth";
|
||||
import { canAccessRuleEngineResource } from "@/lib/permissions";
|
||||
import RuleEngineFormDialog from "@/components/ruleEngine/RuleEngineFormDialog";
|
||||
import {
|
||||
RULE_ENGINE_SELECT_NONE,
|
||||
getRuleEngineResource,
|
||||
type FormFieldDef,
|
||||
} from "@/pages/ruleEngine/config/resources";
|
||||
import {
|
||||
useRuleEngineList,
|
||||
useRuleEngineMutations,
|
||||
} from "@/hooks/rule-engine/useRuleEngine";
|
||||
import type { RuleEngineRecord } from "@/types/rule-engine";
|
||||
|
||||
const CARGO_SLUG = "cargo-types";
|
||||
|
||||
/** A cargo type with its (already-resolved) child cargo types. */
|
||||
interface CargoNode extends RuleEngineRecord {
|
||||
cargoTypeName?: string;
|
||||
code?: string;
|
||||
parentGroupId?: string | null;
|
||||
showFreeTextBox?: boolean;
|
||||
requiresDirectorApproval?: boolean;
|
||||
isActive?: boolean;
|
||||
displayOrder?: number;
|
||||
}
|
||||
|
||||
const str = (v: unknown): string => (v == null ? "" : String(v));
|
||||
const orderOf = (n: CargoNode): number => Number(n.displayOrder ?? 0);
|
||||
|
||||
/** Fields for the create/edit form. Parent-group select is added contextually. */
|
||||
const PARENT_FORM_FIELDS: FormFieldDef[] = [
|
||||
{ name: "cargoTypeName", label: "Cargo type name", type: "text", required: true },
|
||||
{ name: "showFreeTextBox", label: "Show free text box", type: "boolean" },
|
||||
{ name: "requiresDirectorApproval", label: "Requires director approval", type: "boolean" },
|
||||
{ name: "isActive", label: "Active", type: "boolean" },
|
||||
];
|
||||
|
||||
type FormMode =
|
||||
| { kind: "create-parent" }
|
||||
| { kind: "create-child"; parent: CargoNode }
|
||||
| { kind: "edit"; record: CargoNode };
|
||||
|
||||
const CargoTypesPage = () => {
|
||||
const { user } = useAuth();
|
||||
const config = getRuleEngineResource(CARGO_SLUG);
|
||||
|
||||
const canView = canAccessRuleEngineResource(user, CARGO_SLUG, "view");
|
||||
const canManage = canAccessRuleEngineResource(user, CARGO_SLUG, "manage");
|
||||
|
||||
// Pull the whole set once and build the tree on the client — cargo types are a
|
||||
// small, slow-changing config set, so a single fetch keeps the UX instant.
|
||||
const { data, isLoading, isError } = useRuleEngineList(CARGO_SLUG, {
|
||||
page: 1,
|
||||
pageSize: 500,
|
||||
sortBy: "displayOrder",
|
||||
sortOrder: "ASC",
|
||||
});
|
||||
|
||||
const { create, update, remove } = useRuleEngineMutations(CARGO_SLUG);
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [expanded, setExpanded] = useState<Set<string>>(new Set());
|
||||
const [formMode, setFormMode] = useState<FormMode | null>(null);
|
||||
const [deleteTarget, setDeleteTarget] = useState<CargoNode | null>(null);
|
||||
|
||||
const all = (data?.data ?? []) as CargoNode[];
|
||||
|
||||
// Group children under their parents; anything without a (known) parent is a root.
|
||||
const { roots, childrenByParent } = useMemo(() => {
|
||||
const byId = new Map(all.map((n) => [n.id, n]));
|
||||
const childrenByParent = new Map<string, CargoNode[]>();
|
||||
const roots: CargoNode[] = [];
|
||||
for (const node of all) {
|
||||
const parentId = node.parentGroupId ?? null;
|
||||
if (parentId && byId.has(parentId)) {
|
||||
const list = childrenByParent.get(parentId) ?? [];
|
||||
list.push(node);
|
||||
childrenByParent.set(parentId, list);
|
||||
} else {
|
||||
roots.push(node);
|
||||
}
|
||||
}
|
||||
for (const list of childrenByParent.values()) {
|
||||
list.sort((a, b) => orderOf(a) - orderOf(b) || str(a.cargoTypeName).localeCompare(str(b.cargoTypeName)));
|
||||
}
|
||||
roots.sort((a, b) => orderOf(a) - orderOf(b) || str(a.cargoTypeName).localeCompare(str(b.cargoTypeName)));
|
||||
return { roots, childrenByParent };
|
||||
}, [all]);
|
||||
|
||||
// Search matches a parent directly, or surfaces a parent because a child matches.
|
||||
const term = search.trim().toLowerCase();
|
||||
const matches = (n: CargoNode) =>
|
||||
!term ||
|
||||
str(n.cargoTypeName).toLowerCase().includes(term) ||
|
||||
str(n.code).toLowerCase().includes(term);
|
||||
|
||||
const visibleRoots = useMemo(() => {
|
||||
if (!term) return roots;
|
||||
return roots.filter(
|
||||
(p) => matches(p) || (childrenByParent.get(p.id) ?? []).some(matches),
|
||||
);
|
||||
}, [roots, childrenByParent, term]);
|
||||
|
||||
if (!config) return <Navigate to="/dashboard/overview" replace />;
|
||||
if (!canView) return <Navigate to="/dashboard/overview" replace />;
|
||||
|
||||
const toggle = (id: string) =>
|
||||
setExpanded((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.has(id) ? next.delete(id) : next.add(id);
|
||||
return next;
|
||||
});
|
||||
|
||||
const parentCount = roots.length;
|
||||
const childCount = all.length - roots.length;
|
||||
|
||||
// ── form wiring ──────────────────────────────────────────────────────────
|
||||
const formFields: FormFieldDef[] =
|
||||
formMode?.kind === "edit" && !formMode.record.parentGroupId
|
||||
? // editing a parent → allow re-parenting via a select of OTHER roots
|
||||
[
|
||||
PARENT_FORM_FIELDS[0],
|
||||
{
|
||||
name: "parentGroupId",
|
||||
label: "Parent group",
|
||||
type: "select",
|
||||
optional: true,
|
||||
placeholder: "Top-level (no parent)",
|
||||
options: [
|
||||
{ label: "None (top level)", value: RULE_ENGINE_SELECT_NONE },
|
||||
...roots
|
||||
.filter((r) => r.id !== formMode.record.id)
|
||||
.map((r) => ({ label: str(r.cargoTypeName), value: r.id })),
|
||||
],
|
||||
},
|
||||
...PARENT_FORM_FIELDS.slice(1),
|
||||
]
|
||||
: // creating a parent, creating a child, or editing a child → no parent picker
|
||||
PARENT_FORM_FIELDS;
|
||||
|
||||
const initialRecord: RuleEngineRecord | null =
|
||||
formMode?.kind === "edit" ? formMode.record : null;
|
||||
|
||||
const formTitle =
|
||||
formMode?.kind === "create-parent"
|
||||
? "Add cargo type"
|
||||
: formMode?.kind === "create-child"
|
||||
? `Add cargo under “${str(formMode.parent.cargoTypeName)}”`
|
||||
: formMode?.kind === "edit"
|
||||
? `Edit ${str(formMode.record.cargoTypeName)}`
|
||||
: "";
|
||||
|
||||
const formDescription =
|
||||
formMode?.kind === "create-parent"
|
||||
? "Create a top-level cargo category. You can add cargo types under it afterwards."
|
||||
: formMode?.kind === "create-child"
|
||||
? "Create a cargo type inside this category."
|
||||
: "Update this cargo type.";
|
||||
|
||||
const handleSubmit = (values: Record<string, unknown>) => {
|
||||
// Force the parent context for child creates; the form has no parent picker.
|
||||
const payload: Record<string, unknown> = { ...values };
|
||||
if (formMode?.kind === "create-child") {
|
||||
payload.parentGroupId = formMode.parent.id;
|
||||
}
|
||||
|
||||
const done = () => setFormMode(null);
|
||||
if (formMode?.kind === "edit") {
|
||||
update.mutate({ id: formMode.record.id, payload }, { onSuccess: done });
|
||||
} else {
|
||||
create.mutate(payload, { onSuccess: done });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
{/* ── Header ─────────────────────────────────────────────── */}
|
||||
<Card
|
||||
p="lg"
|
||||
radius="lg"
|
||||
withBorder
|
||||
style={{ background: "white", boxShadow: "0 1px 3px rgba(0,0,0,0.05)" }}
|
||||
>
|
||||
<Group justify="space-between" align="flex-start" wrap="wrap" gap="md">
|
||||
<Group gap="md" wrap="nowrap">
|
||||
<ThemeIcon size={48} radius="md" variant="light" color="teal">
|
||||
<Boxes size={26} />
|
||||
</ThemeIcon>
|
||||
<Box>
|
||||
<Text fw={800} fz={22} c="dark.8">
|
||||
Cargo Types
|
||||
</Text>
|
||||
<Text fz={13} c="dimmed" mt={2}>
|
||||
Organise freight cargo into categories and the cargo types within them.
|
||||
</Text>
|
||||
<Group gap="xs" mt={8}>
|
||||
<Badge variant="light" color="teal" radius="sm">
|
||||
{parentCount} categor{parentCount === 1 ? "y" : "ies"}
|
||||
</Badge>
|
||||
<Badge variant="light" color="gray" radius="sm">
|
||||
{childCount} cargo type{childCount === 1 ? "" : "s"}
|
||||
</Badge>
|
||||
</Group>
|
||||
</Box>
|
||||
</Group>
|
||||
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
<TextInput
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
placeholder="Search categories or cargo…"
|
||||
leftSection={<Search size={16} />}
|
||||
w={260}
|
||||
/>
|
||||
{canManage && (
|
||||
<Button
|
||||
color="teal"
|
||||
leftSection={<Plus size={16} />}
|
||||
onClick={() => setFormMode({ kind: "create-parent" })}
|
||||
>
|
||||
Add category
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
</Group>
|
||||
</Card>
|
||||
|
||||
{/* ── Tree ───────────────────────────────────────────────── */}
|
||||
<Card
|
||||
p={0}
|
||||
radius="lg"
|
||||
withBorder
|
||||
style={{ background: "white", boxShadow: "0 1px 3px rgba(0,0,0,0.05)", overflow: "hidden" }}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Group justify="center" p="xl">
|
||||
<Loader color="teal" />
|
||||
</Group>
|
||||
) : isError ? (
|
||||
<Text p="xl" c="red" ta="center">
|
||||
Failed to load cargo types.
|
||||
</Text>
|
||||
) : visibleRoots.length === 0 ? (
|
||||
<Stack align="center" gap="sm" py={56}>
|
||||
<ThemeIcon size={52} radius="xl" variant="light" color="gray">
|
||||
<Package size={26} />
|
||||
</ThemeIcon>
|
||||
<Text fw={600} c="dark.6">
|
||||
{term ? "No cargo types match your search" : "No cargo categories yet"}
|
||||
</Text>
|
||||
{!term && canManage && (
|
||||
<Button
|
||||
variant="light"
|
||||
color="teal"
|
||||
leftSection={<Plus size={16} />}
|
||||
onClick={() => setFormMode({ kind: "create-parent" })}
|
||||
>
|
||||
Add your first category
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
) : (
|
||||
<Stack gap={0}>
|
||||
{visibleRoots.map((parent, i) => {
|
||||
const kids = childrenByParent.get(parent.id) ?? [];
|
||||
const isOpen = expanded.has(parent.id) || Boolean(term);
|
||||
const shownKids = term ? kids.filter(matches) : kids;
|
||||
return (
|
||||
<ParentRow
|
||||
key={parent.id}
|
||||
parent={parent}
|
||||
childCount={kids.length}
|
||||
open={isOpen}
|
||||
topBorder={i > 0}
|
||||
canManage={canManage}
|
||||
onToggle={() => toggle(parent.id)}
|
||||
onEdit={() => setFormMode({ kind: "edit", record: parent })}
|
||||
onDelete={() => setDeleteTarget(parent)}
|
||||
onAddChild={() => {
|
||||
setExpanded((prev) => new Set(prev).add(parent.id));
|
||||
setFormMode({ kind: "create-child", parent });
|
||||
}}
|
||||
>
|
||||
{shownKids.length === 0 ? (
|
||||
<Text fz={13} c="dimmed" pl={56} py="sm">
|
||||
No cargo types in this category yet.
|
||||
</Text>
|
||||
) : (
|
||||
<Stack gap={0}>
|
||||
{shownKids.map((child) => (
|
||||
<ChildRow
|
||||
key={child.id}
|
||||
child={child}
|
||||
canManage={canManage}
|
||||
onEdit={() => setFormMode({ kind: "edit", record: child })}
|
||||
onDelete={() => setDeleteTarget(child)}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</ParentRow>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* ── Create / edit dialog ───────────────────────────────── */}
|
||||
<RuleEngineFormDialog
|
||||
open={Boolean(formMode)}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setFormMode(null);
|
||||
}}
|
||||
title={formTitle}
|
||||
description={formDescription}
|
||||
fields={formFields}
|
||||
initialRecord={initialRecord}
|
||||
isSubmitting={create.isPending || update.isPending}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
|
||||
{/* ── Delete confirm ─────────────────────────────────────── */}
|
||||
<Modal
|
||||
opened={Boolean(deleteTarget)}
|
||||
onClose={() => setDeleteTarget(null)}
|
||||
title="Delete cargo type?"
|
||||
centered
|
||||
size="sm"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text size="sm">
|
||||
{deleteTarget && (childrenByParent.get(deleteTarget.id)?.length ?? 0) > 0 ? (
|
||||
<>
|
||||
<Text span fw={600}>
|
||||
{str(deleteTarget?.cargoTypeName)}
|
||||
</Text>{" "}
|
||||
has {childrenByParent.get(deleteTarget!.id)?.length} cargo type(s) under it.
|
||||
Deleting it leaves them without a category. Continue?
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
This will delete{" "}
|
||||
<Text span fw={600}>
|
||||
{str(deleteTarget?.cargoTypeName)}
|
||||
</Text>
|
||||
.
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
<Group justify="flex-end" gap="sm">
|
||||
<Button variant="default" onClick={() => setDeleteTarget(null)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
color="red"
|
||||
loading={remove.isPending}
|
||||
onClick={() => {
|
||||
if (!deleteTarget) return;
|
||||
remove.mutate(deleteTarget.id, {
|
||||
onSuccess: () => setDeleteTarget(null),
|
||||
});
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
// ── Parent (category) row ──────────────────────────────────────────────────
|
||||
interface ParentRowProps {
|
||||
parent: CargoNode;
|
||||
childCount: number;
|
||||
open: boolean;
|
||||
topBorder: boolean;
|
||||
canManage: boolean;
|
||||
onToggle: () => void;
|
||||
onEdit: () => void;
|
||||
onDelete: () => void;
|
||||
onAddChild: () => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
function ParentRow({
|
||||
parent,
|
||||
childCount,
|
||||
open,
|
||||
topBorder,
|
||||
canManage,
|
||||
onToggle,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onAddChild,
|
||||
children,
|
||||
}: ParentRowProps) {
|
||||
const inactive = parent.isActive === false;
|
||||
return (
|
||||
<Box style={topBorder ? { borderTop: "1px solid var(--mantine-color-gray-2)" } : undefined}>
|
||||
<Group
|
||||
justify="space-between"
|
||||
wrap="nowrap"
|
||||
px="lg"
|
||||
py="md"
|
||||
style={{ background: open ? "var(--mantine-color-teal-0)" : undefined }}
|
||||
>
|
||||
<UnstyledButton
|
||||
onClick={onToggle}
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
aria-expanded={open}
|
||||
>
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
<ChevronRight
|
||||
size={18}
|
||||
style={{
|
||||
color: "var(--mantine-color-gray-6)",
|
||||
transition: "transform 150ms ease",
|
||||
transform: open ? "rotate(90deg)" : "none",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
<ThemeIcon size={36} radius="md" variant="light" color={inactive ? "gray" : "teal"}>
|
||||
<Boxes size={18} />
|
||||
</ThemeIcon>
|
||||
<Box style={{ minWidth: 0 }}>
|
||||
<Group gap={8} wrap="nowrap">
|
||||
<Text fw={700} fz={15} c="dark.8" truncate>
|
||||
{str(parent.cargoTypeName) || "Untitled"}
|
||||
</Text>
|
||||
{parent.code ? (
|
||||
<Badge size="xs" variant="default" radius="sm">
|
||||
{str(parent.code)}
|
||||
</Badge>
|
||||
) : null}
|
||||
{inactive ? (
|
||||
<Badge size="xs" variant="light" color="gray" radius="sm">
|
||||
Inactive
|
||||
</Badge>
|
||||
) : null}
|
||||
</Group>
|
||||
<Text fz={12.5} c="dimmed" mt={2}>
|
||||
{childCount} cargo type{childCount === 1 ? "" : "s"}
|
||||
</Text>
|
||||
</Box>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
|
||||
<Group gap={4} wrap="nowrap">
|
||||
{canManage && (
|
||||
<Tooltip label="Add cargo type" withArrow>
|
||||
<Button
|
||||
size="compact-sm"
|
||||
variant="light"
|
||||
color="teal"
|
||||
leftSection={<Plus size={14} />}
|
||||
onClick={onAddChild}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
{canManage && (
|
||||
<>
|
||||
<Tooltip label="Edit category" withArrow>
|
||||
<Button size="compact-sm" variant="subtle" color="gray" onClick={onEdit} px={8}>
|
||||
<Pencil size={15} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip label="Delete category" withArrow>
|
||||
<Button size="compact-sm" variant="subtle" color="red" onClick={onDelete} px={8}>
|
||||
<Trash2 size={15} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
<Collapse in={open}>
|
||||
<Box pb={open ? "xs" : 0}>{children}</Box>
|
||||
</Collapse>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Child (cargo type) row ─────────────────────────────────────────────────
|
||||
interface ChildRowProps {
|
||||
child: CargoNode;
|
||||
canManage: boolean;
|
||||
onEdit: () => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
function ChildRow({ child, canManage, onEdit, onDelete }: ChildRowProps) {
|
||||
const inactive = child.isActive === false;
|
||||
return (
|
||||
<Group
|
||||
justify="space-between"
|
||||
wrap="nowrap"
|
||||
pl={56}
|
||||
pr="lg"
|
||||
py="xs"
|
||||
style={{ borderTop: "1px solid var(--mantine-color-gray-1)" }}
|
||||
>
|
||||
<Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
|
||||
<CornerDownRight size={15} style={{ color: "var(--mantine-color-gray-5)", flexShrink: 0 }} />
|
||||
<Text fw={500} fz={14} c={inactive ? "dimmed" : "dark.7"} truncate>
|
||||
{str(child.cargoTypeName) || "Untitled"}
|
||||
</Text>
|
||||
{child.code ? (
|
||||
<Badge size="xs" variant="default" radius="sm">
|
||||
{str(child.code)}
|
||||
</Badge>
|
||||
) : null}
|
||||
{child.requiresDirectorApproval ? (
|
||||
<Tooltip label="Requires director approval" withArrow>
|
||||
<Badge
|
||||
size="xs"
|
||||
variant="light"
|
||||
color="orange"
|
||||
radius="sm"
|
||||
leftSection={<ShieldCheck size={11} />}
|
||||
>
|
||||
Approval
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
{child.showFreeTextBox ? (
|
||||
<Tooltip label="Shows a free-text box on booking" withArrow>
|
||||
<Badge
|
||||
size="xs"
|
||||
variant="light"
|
||||
color="blue"
|
||||
radius="sm"
|
||||
leftSection={<FileText size={11} />}
|
||||
>
|
||||
Free text
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
{inactive ? (
|
||||
<Badge size="xs" variant="light" color="gray" radius="sm">
|
||||
Inactive
|
||||
</Badge>
|
||||
) : null}
|
||||
</Group>
|
||||
|
||||
{canManage && (
|
||||
<Group gap={4} wrap="nowrap">
|
||||
<Tooltip label="Edit" withArrow>
|
||||
<Button size="compact-sm" variant="subtle" color="gray" onClick={onEdit} px={8}>
|
||||
<Pencil size={14} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip label="Delete" withArrow>
|
||||
<Button size="compact-sm" variant="subtle" color="red" onClick={onDelete} px={8}>
|
||||
<Trash2 size={14} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
)}
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
export default CargoTypesPage;
|
||||
Reference in New Issue
Block a user