mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-30 09:58:12 +00:00
refactor: remove gate pass granting logic from clearance services and UI
- Removed the gate pass granting functionality from the BookingClearanceService and ContractClearanceService, replacing it with a new method to retrieve gate pass status from train schedules. - Updated the ContractsController to eliminate endpoints related to gate pass granting. - Refactored the UI components (ExportClearanceStepper and PhasedClearanceActionPanel) to reflect the new gate pass securing process, linking to the train scheduling interface instead. - Cleaned up related constants and query hooks, removing unused code and references to the gate pass functionality. - Adjusted types in the contracts to accommodate changes in the gate pass handling logic.
This commit is contained in:
Marshal
@@ -1,326 +1,65 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Loader,
|
||||
Modal,
|
||||
Stack,
|
||||
Tabs,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { DateTimePicker } from "@mantine/dates";
|
||||
import { ChevronRight, Ship, Train, Truck } from "lucide-react";
|
||||
import { DataTable, type ColumnDef } from "@edr/ui-common";
|
||||
import type { Freight } from "@edr/types";
|
||||
import toast from "react-hot-toast";
|
||||
import { Badge, Card, Group, Loader, Stack, Text } from "@mantine/core";
|
||||
import { ChevronRight, Ship } from "lucide-react";
|
||||
|
||||
import { PageContainer } from "@/components/page/PageContainer";
|
||||
import { PageHeader } from "@/components/page/PageHeader";
|
||||
import {
|
||||
useDjClearanceQueue,
|
||||
useDjClearanceSchedules,
|
||||
} from "@/hooks/contracts/useContracts";
|
||||
import { contractsService } from "@/services/contracts.service";
|
||||
import { useDjClearanceQueue } from "@/hooks/contracts/useContracts";
|
||||
|
||||
export default function GlDjiboutiClearanceListPage() {
|
||||
const navigate = useNavigate();
|
||||
const { data: contractQueue, isLoading: contractsLoading } = useDjClearanceQueue();
|
||||
const schedulesQuery = useDjClearanceSchedules();
|
||||
|
||||
const contractItems = contractQueue?.items ?? [];
|
||||
const scheduleItems = schedulesQuery.data ?? [];
|
||||
|
||||
const [gatepassTarget, setGatepassTarget] =
|
||||
useState<Freight.DjClearanceSchedule | null>(null);
|
||||
const [gatepassAt, setGatepassAt] = useState<Date | null>(new Date());
|
||||
const [granting, setGranting] = useState(false);
|
||||
|
||||
const columns = useMemo<ColumnDef<Freight.DjClearanceSchedule>[]>(
|
||||
() => [
|
||||
{
|
||||
header: "Train",
|
||||
accessorKey: "trainNumber",
|
||||
cell: ({ row }) => (
|
||||
<Text size="sm" fw={700}>
|
||||
{row.original.trainNumber ?? "—"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: "Route",
|
||||
id: "route",
|
||||
cell: ({ row }) => (
|
||||
<Text size="sm">
|
||||
{row.original.origin ?? "—"} → {row.original.destination ?? "—"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: "Scheduled departure",
|
||||
id: "scheduled",
|
||||
cell: ({ row }) => (
|
||||
<Text size="sm">
|
||||
{row.original.scheduledDepartureDate
|
||||
? new Date(row.original.scheduledDepartureDate).toLocaleDateString()
|
||||
: "—"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: "Departed",
|
||||
id: "departed",
|
||||
cell: ({ row }) => (
|
||||
<Text size="sm">
|
||||
{row.original.actualDepartureAt
|
||||
? new Date(row.original.actualDepartureAt).toLocaleString()
|
||||
: "—"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: "Arrived",
|
||||
id: "arrived",
|
||||
cell: ({ row }) => (
|
||||
<Text size="sm">
|
||||
{row.original.actualArrivalAt
|
||||
? new Date(row.original.actualArrivalAt).toLocaleString()
|
||||
: "—"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: "Status",
|
||||
accessorKey: "status",
|
||||
cell: ({ row }) => (
|
||||
<Badge variant="light" color={statusColor(row.original.status)} radius="sm">
|
||||
{row.original.status}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: "Customs bookings",
|
||||
id: "customs",
|
||||
cell: ({ row }) => {
|
||||
const bookings = row.original.customsBookings;
|
||||
const directions = [...new Set(bookings.map((b) => b.tradeDirection))];
|
||||
return (
|
||||
<Group gap={6} wrap="nowrap">
|
||||
<Badge variant="light" color="edr-green" radius="sm">
|
||||
{bookings.length}
|
||||
</Badge>
|
||||
{directions.map((d) => (
|
||||
<Badge key={d} variant="outline" color={d === "IMPORT" ? "edr-green" : "blue"} radius="sm">
|
||||
{d}
|
||||
</Badge>
|
||||
))}
|
||||
</Group>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: "Gate pass",
|
||||
id: "gatepass",
|
||||
cell: ({ row }) => {
|
||||
const bookings = row.original.customsBookings;
|
||||
const allGranted =
|
||||
bookings.length > 0 && bookings.every((b) => b.gatepassGranted);
|
||||
const grantedAt = bookings.find((b) => b.gatepassAt)?.gatepassAt ?? null;
|
||||
if (allGranted) {
|
||||
return (
|
||||
<Badge variant="light" color="edr-green" radius="sm">
|
||||
Granted{grantedAt ? ` · ${new Date(grantedAt).toLocaleString()}` : ""}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
size="xs"
|
||||
color="edr-green"
|
||||
leftSection={<Truck size={14} />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setGatepassAt(new Date());
|
||||
setGatepassTarget(row.original);
|
||||
}}
|
||||
>
|
||||
Gate pass
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<PageHeader
|
||||
title="GL Djibouti — Clearance"
|
||||
subtitle="Customs contracts handed off to Djibouti GL, plus train schedules for gate-pass control."
|
||||
subtitle="Customs contracts handed off to Djibouti GL."
|
||||
/>
|
||||
<Tabs defaultValue="contracts" keepMounted={false}>
|
||||
<Tabs.List mb="md">
|
||||
<Tabs.Tab value="contracts">Contracts ({contractItems.length})</Tabs.Tab>
|
||||
<Tabs.Tab value="schedules" leftSection={<Train size={14} />}>
|
||||
Schedules ({scheduleItems.length})
|
||||
</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Panel value="contracts">
|
||||
{contractsLoading ? (
|
||||
<Group justify="center" py={60}>
|
||||
<Loader color="edr-green" />
|
||||
</Group>
|
||||
) : (
|
||||
<Stack gap="sm">
|
||||
{contractItems.length === 0 ? (
|
||||
<Text c="dimmed" ta="center" py="xl">
|
||||
No Djibouti customs contracts yet.
|
||||
</Text>
|
||||
) : (
|
||||
contractItems.map((c) => (
|
||||
<Card
|
||||
key={c.id}
|
||||
withBorder
|
||||
radius="md"
|
||||
padding="md"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => navigate(`/dashboard/gl-djibouti/clearance/${c.id}`)}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group gap="sm">
|
||||
<Ship size={18} className="text-[color:var(--freight-brand)]" />
|
||||
<div>
|
||||
<Text fw={700}>{c.reference}</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
{c.tradeDirection} · {c.status}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<Badge variant="light" color="edr-green">
|
||||
Contract
|
||||
</Badge>
|
||||
<ChevronRight size={18} className="text-muted-foreground" />
|
||||
</Group>
|
||||
</Group>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</Stack>
|
||||
)}
|
||||
</Tabs.Panel>
|
||||
|
||||
<Tabs.Panel value="schedules">
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={scheduleItems}
|
||||
status={
|
||||
schedulesQuery.isLoading
|
||||
? "loading"
|
||||
: schedulesQuery.isError
|
||||
? "error"
|
||||
: "success"
|
||||
}
|
||||
error={
|
||||
schedulesQuery.isError
|
||||
? {
|
||||
message: "Failed to load train schedules.",
|
||||
onRetry: () => void schedulesQuery.refetch(),
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
emptyMessage="No train schedules carry customs bookings yet."
|
||||
/>
|
||||
</Tabs.Panel>
|
||||
</Tabs>
|
||||
|
||||
<Modal
|
||||
opened={gatepassTarget != null}
|
||||
onClose={() => setGatepassTarget(null)}
|
||||
title={
|
||||
<Group gap={8}>
|
||||
<Truck size={18} />
|
||||
<Text fw={700}>
|
||||
Gate pass — train {gatepassTarget?.trainNumber ?? ""}
|
||||
{contractsLoading ? (
|
||||
<Group justify="center" py={60}>
|
||||
<Loader color="edr-green" />
|
||||
</Group>
|
||||
) : (
|
||||
<Stack gap="sm">
|
||||
{contractItems.length === 0 ? (
|
||||
<Text c="dimmed" ta="center" py="xl">
|
||||
No Djibouti customs contracts yet.
|
||||
</Text>
|
||||
</Group>
|
||||
}
|
||||
radius="md"
|
||||
size="sm"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text size="sm" c="dimmed">
|
||||
Grants the gate pass for all{" "}
|
||||
{gatepassTarget?.customsBookings.length ?? 0} customs booking
|
||||
{(gatepassTarget?.customsBookings.length ?? 0) === 1 ? "" : "s"} on this
|
||||
train.
|
||||
</Text>
|
||||
<DateTimePicker
|
||||
label="Gate pass time"
|
||||
value={gatepassAt}
|
||||
onChange={(v) => setGatepassAt(v ? new Date(v) : null)}
|
||||
required
|
||||
/>
|
||||
<Group justify="flex-end">
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={() => setGatepassTarget(null)}
|
||||
disabled={granting}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
color="edr-green"
|
||||
loading={granting}
|
||||
leftSection={<Truck size={16} />}
|
||||
onClick={async () => {
|
||||
if (!gatepassTarget) return;
|
||||
setGranting(true);
|
||||
try {
|
||||
const result = await contractsService.grantScheduleGatepass(
|
||||
gatepassTarget.id,
|
||||
(gatepassAt ?? new Date()).toISOString(),
|
||||
);
|
||||
if (result.skipped.length > 0) {
|
||||
toast.error(
|
||||
`${result.granted} granted, ${result.skipped.length} skipped: ${result.skipped[0]?.error ?? ""}`,
|
||||
);
|
||||
} else {
|
||||
toast.success(
|
||||
`Gate pass granted for ${result.granted} booking${result.granted === 1 ? "" : "s"}`,
|
||||
);
|
||||
}
|
||||
setGatepassTarget(null);
|
||||
void schedulesQuery.refetch();
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : "Failed");
|
||||
} finally {
|
||||
setGranting(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Grant gate pass
|
||||
</Button>
|
||||
</Group>
|
||||
) : (
|
||||
contractItems.map((c) => (
|
||||
<Card
|
||||
key={c.id}
|
||||
withBorder
|
||||
radius="md"
|
||||
padding="md"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => navigate(`/dashboard/gl-djibouti/clearance/${c.id}`)}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group gap="sm">
|
||||
<Ship size={18} className="text-[color:var(--freight-brand)]" />
|
||||
<div>
|
||||
<Text fw={700}>{c.reference}</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
{c.tradeDirection} · {c.status}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<Badge variant="light" color="edr-green">
|
||||
Contract
|
||||
</Badge>
|
||||
<ChevronRight size={18} className="text-muted-foreground" />
|
||||
</Group>
|
||||
</Group>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</Stack>
|
||||
</Modal>
|
||||
)}
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function statusColor(status: string): string {
|
||||
switch (status) {
|
||||
case "SCHEDULED":
|
||||
return "blue";
|
||||
case "DISPATCHED":
|
||||
return "yellow";
|
||||
case "ARRIVED":
|
||||
return "edr-green";
|
||||
default:
|
||||
return "gray";
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user