Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-09-07 17:45:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
marshal
2026-07-01 20:55:17 +03:00
parent 612df8daff
commit 9c18d086d7
112 changed files with 5654 additions and 1370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
apps/edr-freight-web/backoffice/src/App.tsx
View File

@@ -4,7 +4,6 @@ import {
Container,
FileSignature,
FileText,
Flag,
LayoutDashboard,
LayoutGrid,
Network,
@@ -15,14 +14,21 @@ import {
Send,
Settings,
ShieldCheck,
Ship,
SlidersHorizontal,
Train,
Truck,
Users,
Wallet,
} from "lucide-react";
import { Navigate, Outlet, Route, Routes, useLocation, useNavigate } from "react-router-dom";
import {
Navigate,
Outlet,
Route,
Routes,
useLocation,
useNavigate,
useParams,
} from "react-router-dom";
import { FreightDashboardLayout, type SidebarItem, type SidebarSection } from "@/components/layout";
import { useAuth } from "./auth/useAuth";
@@ -37,11 +43,11 @@ import ContractRequestDetailPage from "./pages/contracts/ContractRequestDetailPa
import ContractViewPage from "./pages/contracts/ContractViewPage";
import ContractClearanceListPage from "./pages/contracts/ContractClearanceListPage";
import ContractClearanceDetailPage from "./pages/contracts/ContractClearanceDetailPage";
import GlEthiopiaClearanceListPage from "./pages/contracts/GlEthiopiaClearanceListPage";
import GlDjiboutiClearanceListPage from "./pages/contracts/GlDjiboutiClearanceListPage";
import GlClearanceDetailPage from "./pages/contracts/GlClearanceDetailPage";
import ShipmentRequestsPage from "./pages/contracts/ShipmentRequestsPage";
import ShipmentRequestDetailPage from "./pages/contracts/ShipmentRequestDetailPage";
import GlCreateBookingForm from "./components/contracts/GlCreateBookingForm";
import BookingMilestonesPage from "./pages/contracts/BookingMilestonesPage";
import DocumentClearanceDetailPage from "./pages/bookings/DocumentClearanceDetailPage";
import CustomerDetailPage from "./pages/customers/CustomerDetailPage";
import CustomersPage from "./pages/customers/CustomersPage";
import DemoUser1Page from "./pages/dashboard/demo/DemoUser1Page";
@@ -139,19 +145,17 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
label: "Document Clearance",
href: "/dashboard/contracts/clearance",
icon: <ShieldCheck />,
permission: FREIGHT_PERMS.contracts.clearanceReview,
permission: [
FREIGHT_PERMS.contracts.clearanceReview,
FREIGHT_PERMS.contracts.clearanceEtActions,
FREIGHT_PERMS.contracts.clearanceDjActions,
],
},
{
label: "GL Ethiopia Clearance",
href: "/dashboard/gl-ethiopia/clearance",
icon: <Flag />,
permission: FREIGHT_PERMS.contracts.clearanceEtActions,
},
{
label: "GL Djibouti Clearance",
href: "/dashboard/gl-djibouti/clearance",
icon: <Ship />,
permission: FREIGHT_PERMS.contracts.clearanceDjActions,
label: "Shipment Requests",
href: "/dashboard/shipment-requests",
icon: <Send />,
permission: FREIGHT_PERMS.contracts.createBooking,
},
{
label: "Train Schedules",
@@ -481,7 +485,11 @@ const App = () => {
/>
<Route
path="clearance/:id"
element={<Navigate to="/dashboard/contracts/clearance" replace />}
element={
<RequirePermission permission={FREIGHT_PERMS.bookings.clearanceView}>
<DocumentClearanceDetailPage />
</RequirePermission>
}
/>
{/* Contracts (Path A/B) */}
@@ -509,11 +517,41 @@ const App = () => {
</RequirePermission>
}
/>
<Route
path="bookings/:bookingId/clearance"
element={
<RequirePermission permission={FREIGHT_PERMS.bookings.clearanceView}>
<DocumentClearanceDetailPage />
</RequirePermission>
}
/>
<Route
path="shipment-requests"
element={
<RequirePermission permission={FREIGHT_PERMS.contracts.createBooking}>
<ShipmentRequestsPage />
</RequirePermission>
}
/>
<Route
path="shipment-requests/:id"
element={
<RequirePermission permission={FREIGHT_PERMS.contracts.createBooking}>
<ShipmentRequestDetailPage />
</RequirePermission>
}
/>
{/* GL (Path B) contract clearance review hub */}
<Route
path="contracts/clearance"
element={
<RequirePermission permission={FREIGHT_PERMS.contracts.clearanceReview}>
<RequirePermission
permission={[
FREIGHT_PERMS.contracts.clearanceReview,
FREIGHT_PERMS.contracts.clearanceEtActions,
FREIGHT_PERMS.contracts.clearanceDjActions,
]}
>
<ContractClearanceListPage />
</RequirePermission>
}
@@ -521,51 +559,21 @@ const App = () => {
<Route
path="contracts/clearance/:id"
element={
<RequirePermission permission={FREIGHT_PERMS.contracts.clearanceReview}>
<RequirePermission
permission={[
FREIGHT_PERMS.contracts.clearanceReview,
FREIGHT_PERMS.contracts.clearanceEtActions,
FREIGHT_PERMS.contracts.clearanceDjActions,
]}
>
<ContractClearanceDetailPage />
</RequirePermission>
}
/>
<Route
path="gl-ethiopia/clearance"
element={
<RequirePermission permission={FREIGHT_PERMS.contracts.clearanceEtActions}>
<GlEthiopiaClearanceListPage />
</RequirePermission>
}
/>
<Route
path="gl-ethiopia/clearance/:id"
element={
<RequirePermission permission={FREIGHT_PERMS.contracts.clearanceEtActions}>
<GlClearanceDetailPage
backTo="/dashboard/gl-ethiopia/clearance"
breadcrumbsLabel="GL Ethiopia Clearance"
roleMode="ET"
/>
</RequirePermission>
}
/>
<Route
path="gl-djibouti/clearance"
element={
<RequirePermission permission={FREIGHT_PERMS.contracts.clearanceDjActions}>
<GlDjiboutiClearanceListPage />
</RequirePermission>
}
/>
<Route
path="gl-djibouti/clearance/:id"
element={
<RequirePermission permission={FREIGHT_PERMS.contracts.clearanceDjActions}>
<GlClearanceDetailPage
backTo="/dashboard/gl-djibouti/clearance"
breadcrumbsLabel="GL Djibouti Clearance"
roleMode="DJ"
/>
</RequirePermission>
}
/>
<Route path="gl-ethiopia/clearance" element={<LegacyGlClearanceRedirect />} />
<Route path="gl-ethiopia/clearance/:id" element={<LegacyGlClearanceRedirect />} />
<Route path="gl-djibouti/clearance" element={<LegacyGlClearanceRedirect />} />
<Route path="gl-djibouti/clearance/:id" element={<LegacyGlClearanceRedirect />} />
{/* Path A ops queue out of scope for now → fold into the GL hub. */}
<Route
path="contracts/ops-clearance"
@@ -909,4 +917,13 @@ const App = () => {
);
};
/** Redirect legacy GL Ethiopia/Djibouti clearance URLs to the unified hub. */
function LegacyGlClearanceRedirect() {
const { id } = useParams();
if (id) {
return <Navigate to={`/dashboard/contracts/clearance/${id}`} replace />;
}
return <Navigate to="/dashboard/contracts/clearance" replace />;
}
export default App;

24
apps/edr-freight-web/backoffice/src/components/contracts/ClearancePhaseStepper.tsx
View File

@@ -4,17 +4,6 @@ import type { Freight } from "@edr/types";
const BRAND_GREEN = "var(--freight-brand, #0A6F4D)";
const PHASE_LABELS: Record<string, string> = {
CUSTOMER_INTAKE: "Customer docs",
GL_ET_REVIEW: "GL ET review",
GL_DJ_COLLECTION: "GL Djibouti",
GL_ET_OUTPUT: "Declaration",
CUSTOMER_DUTY: "Duty / tax",
GL_ET_POST_CLEARANCE: "ET clearance",
GL_DJ_LOADING: "Loading",
POST_TRANSIT: "Transit",
};
const IMPORT_PHASES = [
"CUSTOMER_INTAKE",
"GL_ET_REVIEW",
@@ -24,6 +13,17 @@ const IMPORT_PHASES = [
"GL_DJ_COLLECTION",
] as const;
const PHASE_LABELS: Record<string, string> = {
CUSTOMER_INTAKE: "Customer docs",
GL_ET_REVIEW: "GL ET review",
GL_DJ_COLLECTION: "GL Djibouti DO",
GL_ET_OUTPUT: "Declaration",
CUSTOMER_DUTY: "Duty / customer pays",
GL_ET_POST_CLEARANCE: "Transit & finalize",
GL_DJ_LOADING: "Loading",
POST_TRANSIT: "Transit",
};
const EXPORT_PHASES = [
"CUSTOMER_INTAKE",
"GL_ET_REVIEW",
@@ -43,7 +43,7 @@ export function ClearancePhaseStepper({
tradeDirection,
compact = false,
}: {
clearance?: Freight.ContractClearanceView | null;
clearance?: Freight.ContractClearanceView | Freight.ClearanceView | null;
tradeDirection?: string;
compact?: boolean;
}) {

155
apps/edr-freight-web/backoffice/src/components/contracts/ClearanceWorkflowFilesPanel.tsx Normal file
View File

@@ -0,0 +1,155 @@
import {
Badge,
Box,
Button,
Group,
Paper,
Stack,
Text,
ThemeIcon,
Tooltip,
} from "@mantine/core";
import { Download, Eye, FileText } from "lucide-react";
import type { Freight } from "@edr/types";
import { isViewable } from "@edr/ui-common";
import { SectionCard } from "@/components/bookings/detail/SectionCard";
import { fileViewUrl } from "@/constants/apiConfig";
const CATEGORY_LABELS: Record<
Freight.ClearanceWorkflowFileCategory,
string
> = {
declaration: "Declaration",
duty: "Duty & taxes",
transit: "Transit",
djibouti: "Djibouti",
};
const CATEGORY_ORDER: Freight.ClearanceWorkflowFileCategory[] = [
"declaration",
"duty",
"transit",
"djibouti",
];
const OWNER_LABELS: Record<Freight.ClearanceWorkflowFileOwner, string> = {
customer: "Customer",
gl_et: "GL Ethiopia",
gl_dj: "GL Djibouti",
};
export interface ClearanceWorkflowFilesPanelProps {
files: Freight.ClearanceWorkflowFile[];
onView: (file: { name: string; url: string }) => void;
onDownload?: (file: { id: string; name: string }) => void;
title?: string;
}
export function ClearanceWorkflowFilesPanel({
files,
onView,
onDownload,
title = "Customs workflow documents",
}: ClearanceWorkflowFilesPanelProps) {
if (files.length === 0) return null;
const grouped = CATEGORY_ORDER.map((category) => ({
category,
label: CATEGORY_LABELS[category],
items: files.filter((f) => f.category === category),
})).filter((g) => g.items.length > 0);
return (
<SectionCard icon={FileText} title={title} accent="edr-green">
<Stack gap="md">
{grouped.map((group) => (
<Box key={group.category}>
<Text size="xs" fw={700} c="dimmed" tt="uppercase" mb={8}>
{group.label}
</Text>
<Stack gap={8}>
{group.items.map((item) => (
<WorkflowFileRow
key={item.code}
item={item}
onView={onView}
onDownload={onDownload}
/>
))}
</Stack>
</Box>
))}
</Stack>
</SectionCard>
);
}
function WorkflowFileRow({
item,
onView,
onDownload,
}: {
item: Freight.ClearanceWorkflowFile;
onView: (file: { name: string; url: string }) => void;
onDownload?: (file: { id: string; name: string }) => void;
}) {
const file = item.file;
if (!file) return null;
const viewUrl = fileViewUrl(file.id);
const canPreview = isViewable({ name: file.name, url: viewUrl });
return (
<Paper withBorder radius="md" p="sm">
<Group justify="space-between" wrap="nowrap" align="center">
<Group gap={10} wrap="nowrap" style={{ minWidth: 0 }}>
<ThemeIcon variant="light" color="edr-green" radius="md" size={36}>
<FileText size={17} />
</ThemeIcon>
<Box style={{ minWidth: 0 }}>
<Text size="sm" fw={600} truncate>
{item.label}
</Text>
<Group gap={6} wrap="nowrap" mt={2}>
<Badge size="xs" variant="light" color="gray" radius="sm" tt="none">
{OWNER_LABELS[item.uploadedBy]}
</Badge>
<Text size="xs" c="dimmed" truncate>
{file.name}
</Text>
</Group>
</Box>
</Group>
<Group gap={6} wrap="nowrap">
{canPreview ? (
<Tooltip label="Preview">
<Button
size="compact-xs"
variant="default"
radius="md"
leftSection={<Eye size={13} />}
onClick={() => onView({ name: file.name, url: viewUrl })}
>
View
</Button>
</Tooltip>
) : null}
{onDownload ? (
<Tooltip label="Download">
<Button
size="compact-xs"
variant="light"
radius="md"
leftSection={<Download size={13} />}
onClick={() => onDownload({ id: file.id, name: file.name })}
>
Download
</Button>
</Tooltip>
) : null}
</Group>
</Group>
</Paper>
);
}

159
apps/edr-freight-web/backoffice/src/components/contracts/ContractApprovalStepsCard.tsx
View File

@@ -1,6 +1,14 @@
import { useMemo } from "react";
import { useMemo, useState } from "react";
import { Check, ShieldCheck } from "lucide-react";
import { Stack, Group, Text, Badge, Button, Box } from "@mantine/core";
import {
Stack,
Group,
Text,
Badge,
Button,
Box,
Modal,
} from "@mantine/core";
import type { Freight } from "@edr/types";
import { formatContractApprovalProgress } from "@/features/contracts/contract-approval-progress";
@@ -19,6 +27,10 @@ export function ContractApprovalStepsCard({
contract,
mutations,
}: ContractApprovalStepsCardProps) {
const [confirmOpen, setConfirmOpen] = useState(false);
const [pendingStep, setPendingStep] =
useState<Freight.IContractApprovalStep | null>(null);
const steps = useMemo(
() =>
[...(contract.approvalSteps ?? [])].sort(
@@ -30,6 +42,24 @@ export function ContractApprovalStepsCard({
const nextPending = steps.find((s) => s.status === "PENDING");
const summary = formatContractApprovalProgress(contract.status, steps);
const openApprove = (step: Freight.IContractApprovalStep) => {
setPendingStep(step);
setConfirmOpen(true);
};
const closeApprove = () => {
setConfirmOpen(false);
setPendingStep(null);
};
const runApprove = () => {
if (!pendingStep) return;
mutations.approveStep.mutate(
{ stepId: pendingStep.id, requiredRole: pendingStep.requiredRole },
{ onSuccess: () => closeApprove() },
);
};
const subtitle =
summary.detail ||
(nextPending
@@ -39,54 +69,87 @@ export function ContractApprovalStepsCard({
: "Accept submission to begin");
return (
<SectionCard
icon={ShieldCheck}
title="Approval chain"
extra={
<Badge color="edr-green" variant="light" radius="sm">
{steps.filter((s) => s.status === "APPROVED").length}/{steps.length}
</Badge>
}
>
<Text size="xs" c="dimmed" mb="sm">
{subtitle}
</Text>
{steps.length === 0 ? (
<Text
size="sm"
c="dimmed"
ta="center"
py="lg"
px="md"
style={{
borderRadius: 8,
border: "1px dashed var(--mantine-color-gray-3)",
background: "var(--mantine-color-gray-0)",
}}
>
Use <strong>Accept for approval</strong> in staff actions to
instantiate steps.
<>
<SectionCard
icon={ShieldCheck}
title="Approval chain"
extra={
<Badge color="edr-green" variant="light" radius="sm">
{steps.filter((s) => s.status === "APPROVED").length}/{steps.length}
</Badge>
}
>
<Text size="xs" c="dimmed" mb="sm">
{subtitle}
</Text>
) : (
<Stack gap="xs">
{steps.map((step) => (
<StepRow
key={step.id}
step={step}
isNext={nextPending?.id === step.id}
isPending={mutations.approveStep.isPending}
onApprove={() =>
mutations.approveStep.mutate({
stepId: step.id,
requiredRole: step.requiredRole,
})
}
/>
))}
{steps.length === 0 ? (
<Text
size="sm"
c="dimmed"
ta="center"
py="lg"
px="md"
style={{
borderRadius: 8,
border: "1px dashed var(--mantine-color-gray-3)",
background: "var(--mantine-color-gray-0)",
}}
>
Use <strong>Accept for approval</strong> in staff actions to
instantiate steps.
</Text>
) : (
<Stack gap="xs">
{steps.map((step) => (
<StepRow
key={step.id}
step={step}
isNext={nextPending?.id === step.id}
isPending={mutations.approveStep.isPending}
onApprove={() => openApprove(step)}
/>
))}
</Stack>
)}
</SectionCard>
<Modal
opened={confirmOpen}
onClose={closeApprove}
title="Approve this step?"
radius="md"
centered
>
<Stack gap="md">
<Text size="sm" c="dimmed">
You are about to approve the{" "}
<Text span fw={600} c="dark">
{pendingStep?.requiredRole}
</Text>{" "}
step for contract{" "}
<Text span fw={600} c="dark">
{contract.reference}
</Text>
. This action cannot be undone from this screen.
</Text>
<Group justify="flex-end" gap="sm">
<Button variant="default" radius="md" onClick={closeApprove}>
Cancel
</Button>
<Button
color="edr-green"
radius="md"
leftSection={<Check size={16} />}
loading={mutations.approveStep.isPending}
onClick={runApprove}
>
Confirm approval
</Button>
</Group>
</Stack>
)}
</SectionCard>
</Modal>
</>
);
}

61
apps/edr-freight-web/backoffice/src/components/contracts/ContractClearanceReviewSection.tsx
View File

@@ -54,6 +54,17 @@ export interface ContractClearanceReviewSectionProps {
* by whom, when) but hide all approve / query / finalize actions.
*/
readOnly?: boolean;
/**
* Document approvals are locked (e.g. after all docs approved in phased flow)
* but queries remain available until {@link readOnly}.
*/
approvalsLocked?: boolean;
/**
* ONE_TIME customs contracts use the phased milestone workflow. Hides the
* legacy "Finalize clearance" shortcut; booking readiness follows delivery
* order (import) or export release.
*/
phasedCustoms?: boolean;
}
const STATUS_META: Record<
@@ -89,6 +100,8 @@ export function ContractClearanceReviewSection({
hideSummary,
selfClear = false,
readOnly = false,
phasedCustoms = false,
approvalsLocked = false,
}: ContractClearanceReviewSectionProps) {
const [queryNotes, setQueryNotes] = useState<Record<string, string>>({});
const [openQuery, setOpenQuery] = useState<Record<string, boolean>>({});
@@ -170,14 +183,16 @@ export function ContractClearanceReviewSection({
subtitle={
readOnly
? `Reviewed by the ${reviewerTeam} team.`
: "Approve each document, or open a query to tell the customer what to fix."
: approvalsLocked
? "Documents are approved — you can still open a query if something needs fixing."
: "Approve each document, or open a query to tell the customer what to fix."
}
extra={
<Group gap={10} wrap="nowrap" align="center">
<Text size="xs" c="dimmed" fw={600}>
{stats.approved}/{stats.total} approved
</Text>
{!readOnly && approvableKeys.length > 0 && (
{!readOnly && !approvalsLocked && approvableKeys.length > 0 && (
<Button
size="compact-sm"
color="edr-green"
@@ -221,6 +236,7 @@ export function ContractClearanceReviewSection({
doc={doc}
reviewerTeam={reviewerTeam}
readOnly={readOnly}
approvalsLocked={approvalsLocked}
note={queryNotes[doc.fileKey] ?? ""}
queryOpen={openQuery[doc.fileKey] ?? false}
onToggleQuery={(open) =>
@@ -241,7 +257,7 @@ export function ContractClearanceReviewSection({
</Stack>
</SectionCard>
{glDocs.length > 0 && (
{glDocs.length > 0 && !phasedCustoms && (
<SectionCard
icon={Upload}
title="GL output documents"
@@ -372,8 +388,39 @@ export function ContractClearanceReviewSection({
<CheckCircle2 size={15} />
</ThemeIcon>
<Text fz="12.5px" c="dimmed">
Clearance was finalized by the {reviewerTeam} team. This is a
read-only record of the approved documents.
{phasedCustoms
? "Document review is complete. Continue customs milestones in the action panel."
: `Clearance was finalized by the ${reviewerTeam} team. This is a read-only record of the approved documents.`}
</Text>
</Group>
</Paper>
) : phasedCustoms && approvalsLocked ? (
<Paper withBorder radius="md" p="md">
<Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
<ThemeIcon variant="light" color="edr-green" radius="md" size={28}>
<CheckCircle2 size={15} />
</ThemeIcon>
<Text fz="12.5px" c="dimmed">
Document review is complete. Use the action panel for declaration, duty, and
transit steps — or open a query above if a customer document needs correction.
</Text>
</Group>
</Paper>
) : phasedCustoms ? (
<Paper withBorder radius="md" p="md">
<Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
<ThemeIcon
variant="light"
color={clearance.allApproved ? "edr-green" : "gray"}
radius="md"
size={28}
>
<FileCheck2 size={15} />
</ThemeIcon>
<Text fz="12.5px" c="dimmed">
{clearance.allApproved
? "All required documents are approved. Upload declaration, duty, transit permit, and delivery order in the action panel."
: "Approve every required document to unlock the customs milestone steps."}
</Text>
</Group>
</Paper>
@@ -450,6 +497,7 @@ function DocReviewCard({
doc,
reviewerTeam,
readOnly,
approvalsLocked,
note,
queryOpen,
onToggleQuery,
@@ -462,6 +510,7 @@ function DocReviewCard({
doc: Freight.ContractClearanceDocument;
reviewerTeam: string;
readOnly: boolean;
approvalsLocked: boolean;
note: string;
queryOpen: boolean;
onToggleQuery: (open: boolean) => void;
@@ -598,7 +647,7 @@ function DocReviewCard({
>
Open query
</Button>
{!isApproved && (
{!isApproved && !approvalsLocked && (
<Button
size="sm"
color="edr-green"

2
apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx
View File

@@ -382,7 +382,7 @@ export default function GlCreateBookingForm() {
} catch {
// Non-fatal — the booking exists; the request link can be retried.
}
navigate(`/dashboard/clearance/${booking.id}`);
navigate(`/dashboard/bookings/${booking.id}/clearance`);
} else {
navigate(`/dashboard/bookings/${booking.id}/milestones`);
}

858
apps/edr-freight-web/backoffice/src/components/contracts/PhasedClearanceActionPanel.tsx
View File

File diff suppressed because it is too large Load Diff

8
apps/edr-freight-web/backoffice/src/components/contracts/detail/ContractDetailTabCards.tsx
View File

@@ -26,6 +26,7 @@ import {
} from "@mantine/core";
import { useQuery } from "@tanstack/react-query";
import type { Freight } from "@edr/types";
import { clearanceWorkflowFileLabel } from "@edr/types";
import { SectionCard } from "@/components/bookings/detail/SectionCard";
import { detailStyles } from "@/components/bookings/detail/booking-detail.styles";
@@ -199,9 +200,10 @@ function formatBytes(bytes?: number | null): string {
/** Human label for a file's `code` (e.g. "business_license" → "Business license"). */
function codeLabel(code?: string | null): string | null {
if (!code) return null;
return code
.replace(/[_-]+/g, " ")
.replace(/\b\w/g, (c) => c.toUpperCase());
return (
clearanceWorkflowFileLabel(code) ??
code.replace(/[_-]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
);
}
export interface ContractDocumentsCardProps {

9
apps/edr-freight-web/backoffice/src/components/trainScheduling/AllocateBookingWizard.tsx
View File

@@ -34,6 +34,7 @@ import {
import { useMutation, useQuery } from "@tanstack/react-query";
import { api } from "@/services/api";
import { formatRouteLabel } from "@/services/routes.service";
import { useToast } from "@/hooks/use-toast";
import { trainSchedulingService } from "@/services/trainScheduling.service";
import type { BookingDetail } from "@/types/booking";
@@ -138,7 +139,9 @@ export function AllocateBookingWizard({
const schedulesQuery = useQuery(
api.trainScheduling.scheduleList.queryOptions({ input: {} }),
);
const routesQuery = useQuery(api.routes.list.queryOptions());
const routesQuery = useQuery(
api.routes.list.queryOptions({ input: { status: "AVAILABLE" } }),
);
const locomotivesQuery = useQuery(
api.trainScheduling.availableLocomotives.queryOptions({
input: {
@@ -244,7 +247,7 @@ export function AllocateBookingWizard({
}, [containerUnits, containerSlots, savedPlacementsFromSchedule]);
const activeRoutes = useMemo(
() => (routesQuery.data ?? []).filter((r) => r.isActive),
() => routesQuery.data ?? [],
[routesQuery.data],
);
@@ -522,7 +525,7 @@ export function AllocateBookingWizard({
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="sm">
<Select
label="Route"
data={activeRoutes.map((r) => ({ value: r.id, label: r.name }))}
data={activeRoutes.map((r) => ({ value: r.id, label: formatRouteLabel(r) }))}
value={routeId || null}
onChange={(v) => setRouteId(v ?? "")}
searchable

2
apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts
View File

@@ -44,6 +44,8 @@ export const QUERY_KEYS = {
listSummary: (filter?: BookingListFilter) =>
["bookings", "list-summary", filter ?? {}] as const,
byId: (id: string) => ["bookings", "detail", id] as const,
clearanceQueue: (region?: string) =>
["bookings", "clearance-queue", region ?? "ET"] as const,
},
CONTRACTS: {

14
apps/edr-freight-web/backoffice/src/constants/URLS.ts
View File

@@ -123,6 +123,18 @@ export const URL_CONSTANTS = {
COMPLETE: (id: string) => `/bookings/${id}/operations/complete`,
CANCEL: (id: string) => `/bookings/${id}/cancel`,
CONSOLIDATION: (id: string) => `/bookings/${id}/consolidation`,
CLEARANCE: (id: string) => `/bookings/${id}/clearance`,
CLEARANCE_DECLARATION: (id: string) => `/bookings/${id}/clearance/declaration`,
CLEARANCE_DUTY: (id: string) => `/bookings/${id}/clearance/duty`,
CLEARANCE_FINALIZE_PRE: (id: string) =>
`/bookings/${id}/clearance/finalize-pre-clearance`,
CLEARANCE_TRANSIT_PERMIT: (id: string) => `/bookings/${id}/clearance/transit-permit`,
CLEARANCE_DELIVERY_ORDER: (id: string) => `/bookings/${id}/clearance/delivery-order`,
CLEARANCE_RELEASE_ORDER: (id: string) => `/bookings/${id}/clearance/release-order`,
CLEARANCE_RO_AMENDMENT: (id: string) => `/bookings/${id}/clearance/ro-amendment`,
CLEARANCE_EXPORT_RELEASE: (id: string) => `/bookings/${id}/clearance/export-release`,
CLEARANCE_ET_QUEUE: "/bookings/clearance/et-queue",
CLEARANCE_DJ_QUEUE: "/bookings/clearance/dj-queue",
},
CONTRACTS: {
@@ -148,6 +160,8 @@ export const URL_CONSTANTS = {
CLEARANCE_DECLARATION: (id: string) => `/contracts/${id}/clearance/declaration`,
CLEARANCE_DUTY: (id: string) => `/contracts/${id}/clearance/duty`,
CLEARANCE_DUTY_SLIP: (id: string) => `/contracts/${id}/clearance/duty-slip`,
CLEARANCE_FINALIZE_PRE: (id: string) =>
`/contracts/${id}/clearance/finalize-pre-clearance`,
CLEARANCE_TRANSIT_PERMIT: (id: string) =>
`/contracts/${id}/clearance/transit-permit`,
CLEARANCE_DELIVERY_ORDER: (id: string) =>

64
apps/edr-freight-web/backoffice/src/features/contracts/mapShipmentListRow.ts Normal file
View File

@@ -0,0 +1,64 @@
import type { Freight } from "@edr/types";
export interface ShipmentListRow {
id: string;
reference: string;
contractId: string;
contractReference: string;
scheduledDate?: string | null;
summary: string;
status: Freight.BookingRequestStatus;
createdBookingId?: string | null;
}
export type ShipmentRowAction =
| {
kind: "navigate";
label: string;
to: (row: ShipmentListRow) => string;
variant: "filled" | "light" | "default";
}
| {
kind: "reject";
label: string;
variant: "light";
};
/** Primary staff action for a shipment request list row. */
export function getShipmentStaffRowAction(
row: Pick<
ShipmentListRow,
"status" | "contractId" | "id" | "createdBookingId"
>,
): ShipmentRowAction {
if (row.status === "PENDING") {
return {
kind: "navigate",
label: "Accept",
to: (r) =>
`/dashboard/contracts/${r.contractId}/create-booking?requestId=${r.id}`,
variant: "filled",
};
}
if (row.status === "ACCEPTED" && row.createdBookingId) {
return {
kind: "navigate",
label: "View clearance",
to: (r) => `/dashboard/clearance/${r.createdBookingId}`,
variant: "light",
};
}
return {
kind: "navigate",
label: "Review",
to: (r) => `/dashboard/shipment-requests/${r.id}`,
variant: "default",
};
}
export function getShipmentRejectAction(
row: Pick<ShipmentListRow, "status">,
): ShipmentRowAction | null {
if (row.status !== "PENDING") return null;
return { kind: "reject", label: "Reject", variant: "light" };
}

16
apps/edr-freight-web/backoffice/src/hooks/bookings/useBookings.ts
View File

@@ -188,3 +188,19 @@ export function useBookingMutations(bookingId: string) {
downloadContract: () => bookingsService.downloadContract(bookingId),
};
}
export function useBookingEtClearanceQueue(enabled = true) {
return useQuery({
queryKey: QUERY_KEYS.BOOKINGS.clearanceQueue("ET"),
queryFn: () => bookingsService.getEtClearanceQueue(),
enabled,
});
}
export function useBookingDjClearanceQueue(enabled = true) {
return useQuery({
queryKey: QUERY_KEYS.BOOKINGS.clearanceQueue("DJ"),
queryFn: () => bookingsService.getDjClearanceQueue(),
enabled,
});
}

5
apps/edr-freight-web/backoffice/src/hooks/contracts/useContracts.ts
View File

@@ -264,7 +264,10 @@ export function useContractClearanceMutations(
);
refresh();
},
onError: () => toast.error("Could not update document"),
onError: (e) =>
toast.error(
e instanceof Error ? e.message : "Could not update document",
),
});
// Approve every still-pending customer document in one click. There is no

49
apps/edr-freight-web/backoffice/src/pages/bookings/DocumentClearanceDetailPage.tsx
View File

@@ -29,17 +29,22 @@ import { PageContainer } from "@/components/page/PageContainer";
import { PageHeader } from "@/components/page/PageHeader";
import { SectionCard } from "@/components/bookings/detail";
import { ClearanceReviewSection } from "@/components/bookings/detail/ClearanceReviewSection";
import { ClearancePhaseStepper } from "@/components/contracts/ClearancePhaseStepper";
import { PhasedClearanceActionPanel } from "@/components/contracts/PhasedClearanceActionPanel";
import { ClearanceMilestoneTimeline } from "@/components/contracts/ClearanceMilestoneTimeline";
import { bookingsService } from "@/services/bookings.service";
import { useBookingDetail } from "@/hooks/bookings/useBookings";
export default function DocumentClearanceDetailPage() {
const { id } = useParams<{ id: string }>();
const params = useParams<{ id?: string; bookingId?: string }>();
const id = params.id ?? params.bookingId;
const { data: booking } = useBookingDetail(id);
const {
data: clearance,
isLoading,
isError,
refetch,
} = useQuery({
queryKey: ["clearance", id],
queryFn: () => bookingsService.getClearance(id!),
@@ -59,6 +64,10 @@ export default function DocumentClearanceDetailPage() {
}, [clearance]);
const reference = booking?.reference ?? "Clearance";
const isPhasedGeneral =
Boolean(booking?.customsClearingEnabled) &&
booking?.contractKind === "GENERAL" &&
Boolean(clearance?.phase);
if (isLoading) {
return (
@@ -124,15 +133,30 @@ export default function DocumentClearanceDetailPage() {
<ClearanceHero booking={booking} clearance={clearance} stats={stats} />
{isPhasedGeneral ? (
<Paper withBorder radius="md" p="lg">
<ClearancePhaseStepper
clearance={clearance as Freight.ContractClearanceView}
tradeDirection={booking?.tradeDirection ?? "IMPORT"}
/>
</Paper>
) : null}
<Grid gap="lg">
{/* LEFT — document review (shared with the Marketing booking detail) */}
<Grid.Col span={{ base: 12, lg: 8 }}>
<Grid.Col span={{ base: 12, lg: isPhasedGeneral ? 7 : 8 }}>
<ClearanceReviewSection bookingId={id!} hideSummary />
</Grid.Col>
{/* RIGHT — sticky progress gauge */}
<Grid.Col span={{ base: 12, lg: 4 }}>
<Box style={{ position: "sticky", top: 24 }}>
<Grid.Col span={{ base: 12, lg: isPhasedGeneral ? 5 : 4 }}>
{isPhasedGeneral ? (
<PhasedClearanceActionPanel
bookingId={id!}
clearance={clearance}
tradeDirection={booking?.tradeDirection ?? "IMPORT"}
onChanged={() => void refetch()}
/>
) : (
<Box style={{ position: "sticky", top: 24 }}>
<SectionCard
icon={PackageCheck}
title="Review progress"
@@ -174,9 +198,20 @@ export default function DocumentClearanceDetailPage() {
</Group>
</Stack>
</SectionCard>
</Box>
</Box>
)}
</Grid.Col>
</Grid>
{isPhasedGeneral && clearance.milestones && clearance.milestones.length > 0 ? (
<ClearanceMilestoneTimeline
milestones={
clearance.milestones as Parameters<
typeof ClearanceMilestoneTimeline
>[0]["milestones"]
}
/>
) : null}
</Stack>
</PageContainer>
);

11
apps/edr-freight-web/backoffice/src/pages/bookings/NewBookingPage.tsx
View File

@@ -70,7 +70,6 @@ interface RefCargoChild {
id: string;
name: string;
code: string;
show_free_text_box?: boolean;
}
interface RefCargoGroup {
id: string;
@@ -307,20 +306,18 @@ export default function NewBookingPage() {
[refData?.containers],
);
const { cargoData, freeTextById } = useMemo(() => {
const { cargoData } = useMemo(() => {
const groups = refData?.cargo_type ?? [];
const freeText = new Map<string, boolean>();
const data = groups.map((g) => {
if (g.children?.length) {
g.children.forEach((c) => freeText.set(c.id, Boolean(c.show_free_text_box)));
return { group: g.name, items: g.children.map((c) => ({ value: c.id, label: c.name })) };
}
return { value: g.id, label: g.name };
});
return { cargoData: data, freeTextById: freeText };
return { cargoData: data };
}, [refData?.cargo_type]);
const showFreeText = cargoTypeId ? freeTextById.get(cargoTypeId) : false;
const showFreeText = freightType === "BULK" && Boolean(cargoTypeId);
// ---- derived totals ----
const totalContainers = lines.reduce((s, l) => s + (l.quantity || 0), 0);
@@ -376,7 +373,7 @@ export default function NewBookingPage() {
lastMileDeliveryAddress: lastMileDeliveryAddress.trim() || undefined,
cargoTotalWeightVgm,
cargoTypeId: freightType === "BULK" ? cargoTypeId : undefined,
cargoFreeText: freightType === "BULK" && showFreeText ? cargoFreeText.trim() || undefined : undefined,
cargoFreeText: freightType === "BULK" ? cargoFreeText.trim() || undefined : undefined,
containers:
freightType === "CONTAINER"
? lines.map((l) => ({

135
apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceDetailPage.tsx
View File

@@ -19,24 +19,50 @@ import {
AlertCircle,
ArrowRight,
CheckCircle2,
ClipboardList,
Clock,
PackageCheck,
ShieldCheck,
} from "lucide-react";
import { useAuth } from "@/auth/useAuth";
import { PageContainer } from "@/components/page/PageContainer";
import { PageHeader } from "@/components/page/PageHeader";
import { SectionCard } from "@/components/bookings/detail/SectionCard";
import { ContractClearanceReviewSection } from "@/components/contracts/ContractClearanceReviewSection";
import { ClearancePhaseStepper } from "@/components/contracts/ClearancePhaseStepper";
import { ClearanceWorkflowFilesPanel } from "@/components/contracts/ClearanceWorkflowFilesPanel";
import { PhasedClearanceActionPanel } from "@/components/contracts/PhasedClearanceActionPanel";
import { ClearanceMilestoneTimeline } from "@/components/contracts/ClearanceMilestoneTimeline";
import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
import { useFileViewer } from "@/hooks/useFileViewer";
import { contractsService } from "@/services/contracts.service";
import { downloadBookingFile } from "@/services/files.service";
import { useContractDetail } from "@/hooks/contracts/useContracts";
import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
type RoleMode = "ET" | "DJ" | "ALL";
function resolveRoleMode(
canReview: boolean,
canEt: boolean,
canDj: boolean,
): RoleMode {
if (canReview || (canEt && canDj)) return "ALL";
if (canEt) return "ET";
if (canDj) return "DJ";
return "ALL";
}
export default function ContractClearanceDetailPage() {
const { id } = useParams<{ id: string }>();
const { user } = useAuth();
const { view, viewer } = useFileViewer();
const canReview = hasPermission(user, FREIGHT_PERMS.contracts.clearanceReview);
const canEt =
hasPermission(user, FREIGHT_PERMS.contracts.clearanceEtActions) || canReview;
const canDj =
hasPermission(user, FREIGHT_PERMS.contracts.clearanceDjActions) || canReview;
const roleMode = resolveRoleMode(canReview, canEt, canDj);
const { data: contract } = useContractDetail(id);
const {
@@ -63,10 +89,17 @@ export default function ContractClearanceDetailPage() {
}, [clearance]);
const reference = contract?.reference ?? "Clearance";
// Customs (Path B) hub. The customer always creates the booking in the portal
// after GL finalizes clearance — there is no GL "Create booking" action here.
const ready = clearance?.bookingReady ?? clearance?.clearanceStatus === "CLEARANCE_READY_FOR_BOOKING";
const clearanceReadOnly = Boolean(
const phasedCustoms =
contract?.contractKind === "ONE_TIME" && Boolean(contract.customsClearingEnabled);
const docsPhaseComplete =
clearance?.milestones?.some(
(m) => m.milestoneCode === "DOCUMENTS_APPROVED" && m.status === "COMPLETED",
) ?? false;
const ready = clearance?.bookingReady === true;
const docReviewLocked = phasedCustoms
? docsPhaseComplete
: clearance?.clearanceStatus === "CLEARANCE_READY_FOR_BOOKING";
const shipmentLocked = Boolean(
contract?.status &&
[
"ACTIVE_SHIPMENT_IN_PROGRESS",
@@ -76,6 +109,14 @@ export default function ContractClearanceDetailPage() {
"EXPIRED",
].includes(contract.status),
);
const reviewReadOnly =
roleMode === "DJ" ? true : shipmentLocked;
const reviewColSpan = roleMode === "DJ" ? 12 : 7;
const actionColSpan = roleMode === "DJ" ? 12 : 5;
const bookingHref =
roleMode === "ET" || roleMode === "ALL"
? `/dashboard/contracts/${id}/create-booking`
: undefined;
if (isLoading) {
return (
@@ -109,6 +150,8 @@ export default function ContractClearanceDetailPage() {
);
}
const workflowFiles = clearance.workflowFiles ?? [];
return (
<PageContainer>
<Stack gap="lg">
@@ -156,15 +199,6 @@ export default function ContractClearanceDetailPage() {
<ClearanceHero contract={contract} stats={stats} />
{contract?.contractKind === "ONE_TIME" && contract.customsClearingEnabled ? (
<Paper withBorder radius="md" p="lg">
<ClearancePhaseStepper
clearance={clearance}
tradeDirection={contract.tradeDirection}
/>
</Paper>
) : null}
{ready ? (
<Alert
color="edr-green"
@@ -176,29 +210,57 @@ export default function ContractClearanceDetailPage() {
</Alert>
) : null}
<Grid gap="lg">
<Grid.Col span={{ base: 12, lg: 8 }}>
<ContractClearanceReviewSection
contractId={id!}
hideSummary
selfClear={false}
readOnly={clearanceReadOnly}
onChanged={() => void refetch()}
/>
<Grid>
<Grid.Col span={{ base: 12, lg: reviewColSpan }}>
{roleMode === "DJ" ? (
<SectionCard
icon={ClipboardList}
title="Contract context"
accent="edr-green"
>
<Text size="sm" c="dimmed" mb="sm">
Review upstream status before uploading Djibouti documents.
</Text>
<ContractClearanceReviewSection
contractId={id!}
hideSummary
selfClear={false}
readOnly
phasedCustoms={phasedCustoms}
/>
</SectionCard>
) : (
<ContractClearanceReviewSection
contractId={id!}
hideSummary
selfClear={false}
readOnly={reviewReadOnly}
approvalsLocked={phasedCustoms && docReviewLocked}
phasedCustoms={phasedCustoms}
onChanged={() => void refetch()}
/>
)}
{workflowFiles.length > 0 ? (
<Box mt="lg">
<ClearanceWorkflowFilesPanel
files={workflowFiles}
onView={view}
onDownload={(f) => void downloadBookingFile(f.id, f.name)}
/>
</Box>
) : null}
</Grid.Col>
<Grid.Col span={{ base: 12, lg: 4 }}>
<Grid.Col span={{ base: 12, lg: actionColSpan }}>
<Stack gap="md">
{contract?.contractKind === "ONE_TIME" && contract.customsClearingEnabled ? (
{phasedCustoms ? (
<PhasedClearanceActionPanel
contractId={id!}
clearance={clearance}
tradeDirection={contract.tradeDirection}
roleMode="ALL"
tradeDirection={contract?.tradeDirection ?? "IMPORT"}
roleMode={roleMode}
onChanged={() => void refetch()}
bookingCreateHref={
ready ? `/dashboard/contracts/${id}/create-booking` : undefined
}
bookingCreateHref={ready ? bookingHref : undefined}
/>
) : (
<Box style={{ position: "sticky", top: 24 }}>
@@ -248,17 +310,8 @@ export default function ContractClearanceDetailPage() {
</Stack>
</Grid.Col>
</Grid>
{clearance.milestones && clearance.milestones.length > 0 ? (
<ClearanceMilestoneTimeline
milestones={
clearance.milestones as Parameters<
typeof ClearanceMilestoneTimeline
>[0]["milestones"]
}
/>
) : null}
</Stack>
{viewer}
</PageContainer>
);
}

100
apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceListPage.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback, useMemo, useState } from "react";
import { useCallback, useMemo, useState, type ReactNode } from "react";
import { useNavigate } from "react-router-dom";
import {
ActionIcon,
@@ -18,6 +18,7 @@ import {
ArrowRight,
ChevronRight,
FileText,
Flag,
Inbox,
LayoutGrid,
PackageCheck,
@@ -25,6 +26,7 @@ import {
RefreshCw,
Search,
ShieldCheck,
Ship,
ShipWheel,
Table as TableIcon,
Truck,
@@ -43,9 +45,16 @@ import { PageContainer } from "@/components/page/PageContainer";
import { PageHeader } from "@/components/page/PageHeader";
import { KpiStrip } from "@/components/page/KpiStrip";
import { bookingTable } from "@/components/bookings/booking-ui.styles";
import { useContractClearanceQueue } from "@/hooks/contracts/useContracts";
import { useAuth } from "@/auth/useAuth";
import {
useContractClearanceQueue,
useDjClearanceQueue,
useEtClearanceQueue,
} from "@/hooks/contracts/useContracts";
import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
type ViewMode = "table" | "cards";
type QueueTab = "all" | "et" | "dj";
interface ClearanceRow {
id: string;
@@ -167,12 +176,81 @@ function StatusBadge({ row }: { row: ClearanceRow }) {
*/
export default function ContractClearanceListPage() {
const navigate = useNavigate();
const { user } = useAuth();
const canReview = hasPermission(user, FREIGHT_PERMS.contracts.clearanceReview);
const canEt = hasPermission(user, FREIGHT_PERMS.contracts.clearanceEtActions);
const canDj = hasPermission(user, FREIGHT_PERMS.contracts.clearanceDjActions);
const defaultQueue: QueueTab = canReview
? "all"
: canEt
? "et"
: canDj
? "dj"
: "all";
const [queueTab, setQueueTab] = useState<QueueTab>(defaultQueue);
const [query, setQuery] = useState("");
const [view, setView] = useState<ViewMode>("table");
const { pagination, setPagination } = usePagination({ pageSize: 10 });
const { data, isLoading, isError, isFetching, refetch } =
useContractClearanceQueue(true);
const { data: allData, isLoading: allLoading, isError: allError, isFetching: allFetching, refetch: refetchAll } =
useContractClearanceQueue(queueTab === "all");
const { data: etData, isLoading: etLoading, isError: etError, isFetching: etFetching, refetch: refetchEt } =
useEtClearanceQueue(queueTab === "et");
const { data: djData, isLoading: djLoading, isError: djError, isFetching: djFetching, refetch: refetchDj } =
useDjClearanceQueue(queueTab === "dj");
const data =
queueTab === "et" ? etData : queueTab === "dj" ? djData : allData;
const isLoading =
queueTab === "et" ? etLoading : queueTab === "dj" ? djLoading : allLoading;
const isError =
queueTab === "et" ? etError : queueTab === "dj" ? djError : allError;
const isFetching =
queueTab === "et" ? etFetching : queueTab === "dj" ? djFetching : allFetching;
const refetch = () => {
if (queueTab === "et") void refetchEt();
else if (queueTab === "dj") void refetchDj();
else void refetchAll();
};
const queueTabOptions = useMemo(() => {
const opts: { value: QueueTab; label: ReactNode }[] = [];
if (canReview || (canEt && canDj)) {
opts.push({
value: "all",
label: (
<Group gap={6} wrap="nowrap">
<ShieldCheck size={15} />
<Box visibleFrom="sm">All</Box>
</Group>
),
});
}
if (canEt) {
opts.push({
value: "et",
label: (
<Group gap={6} wrap="nowrap">
<Flag size={15} />
<Box visibleFrom="sm">ET queue</Box>
</Group>
),
});
}
if (canDj) {
opts.push({
value: "dj",
label: (
<Group gap={6} wrap="nowrap">
<Ship size={15} />
<Box visibleFrom="sm">DJ queue</Box>
</Group>
),
});
}
return opts;
}, [canReview, canEt, canDj]);
const allRows = useMemo(
() => (data?.items ?? []).map(toClearanceRow),
@@ -380,6 +458,20 @@ export default function ContractClearanceListPage() {
<Card p={0} withBorder shadow="sm" radius="lg">
<Stack gap={0}>
{queueTabOptions.length > 1 ? (
<Box px="md" pt="md">
<SegmentedControl
size="sm"
radius="md"
value={queueTab}
onChange={(v) => {
setQueueTab(v as QueueTab);
setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
}}
data={queueTabOptions}
/>
</Box>
) : null}
<Box px="md" pt="md" pb="sm">
<Group justify="space-between" gap="md" wrap="wrap">
<TextInput

62
apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx
View File

@@ -1,4 +1,5 @@
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import {
ArrowLeft,
ArrowRight,
@@ -48,6 +49,7 @@ import { ContractWorkflowStepper } from "@/components/contracts/ContractWorkflow
import { ContractActionsToolbar } from "@/components/contracts/ContractActionsToolbar";
import { ContractApprovalStepsCard } from "@/components/contracts/ContractApprovalStepsCard";
import { ContractClearanceReviewSection } from "@/components/contracts/ContractClearanceReviewSection";
import { ClearanceWorkflowFilesPanel } from "@/components/contracts/ClearanceWorkflowFilesPanel";
import {
ContractCustomerCard,
ContractDocumentsCard,
@@ -59,6 +61,7 @@ import {
useContractMutations,
} from "@/hooks/contracts/useContracts";
import { contractsService } from "@/services/contracts.service";
import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
import { fileViewUrl } from "@/constants/apiConfig";
import { downloadBookingFile } from "@/services/files.service";
import type { Freight } from "@edr/types";
@@ -140,6 +143,15 @@ export default function ContractRequestDetailPage() {
}
};
const showClearanceTabQuery = Boolean(
contract && CLEARANCE_REVIEW_STATUSES.includes(contract.status),
);
const { data: clearanceView } = useQuery({
queryKey: QUERY_KEYS.CONTRACTS.clearance(id ?? ""),
queryFn: () => contractsService.getClearance(id!),
enabled: Boolean(id) && showClearanceTabQuery,
});
const downloadContractPdf = async () => {
if (!contract?.id) return;
try {
@@ -222,6 +234,13 @@ export default function ContractRequestDetailPage() {
contract.status === "APPROVED_PENDING_SIGNATURE";
const showClearanceTab = CLEARANCE_REVIEW_STATUSES.includes(contract.status);
const phasedCustoms =
contract.contractKind === "ONE_TIME" && Boolean(contract.customsClearingEnabled);
const docsPhaseComplete =
clearanceView?.milestones?.some(
(m) => m.milestoneCode === "DOCUMENTS_APPROVED" && m.status === "COMPLETED",
) ?? false;
const clearanceApprovalsLocked = phasedCustoms && docsPhaseComplete;
// Once clearance is finalized the tab is informational only — no approve/query.
const clearanceReadOnly = CLEARANCE_DONE_STATUSES.includes(contract.status);
// Path A (no customs) → Operations reviews; Path B (customs) → GL reviews.
@@ -414,18 +433,39 @@ export default function ContractRequestDetailPage() {
{/* LEFT — primary content */}
<Grid.Col span={{ base: 12, lg: 8 }}>
{currentTab === "clearance" ? (
<ContractClearanceReviewSection
contractId={id!}
selfClear={selfClear}
readOnly={clearanceReadOnly}
onChanged={() => refetch()}
/>
<Stack gap="lg">
<ContractClearanceReviewSection
contractId={id!}
selfClear={selfClear}
readOnly={clearanceReadOnly}
phasedCustoms={phasedCustoms}
approvalsLocked={clearanceApprovalsLocked}
onChanged={() => refetch()}
/>
{(clearanceView?.workflowFiles?.length ?? 0) > 0 ? (
<ClearanceWorkflowFilesPanel
files={clearanceView!.workflowFiles!}
onView={view}
onDownload={(f) => void handleDownloadFile({ id: f.id, name: f.name } as never)}
/>
) : null}
</Stack>
) : currentTab === "documents" ? (
<ContractDocumentsCard
files={files}
onView={handleViewFile}
onDownload={handleDownloadFile}
/>
<Stack gap="lg">
<ContractDocumentsCard
files={files}
onView={handleViewFile}
onDownload={handleDownloadFile}
/>
{(clearanceView?.workflowFiles?.length ?? 0) > 0 ? (
<ClearanceWorkflowFilesPanel
files={clearanceView!.workflowFiles!}
title="Customs workflow documents"
onView={view}
onDownload={(f) => void handleDownloadFile({ id: f.id, name: f.name } as never)}
/>
) : null}
</Stack>
) : currentTab === "customer" ? (
<ContractCustomerCard contract={contract} />
) : (

126
apps/edr-freight-web/backoffice/src/pages/contracts/GlClearanceDetailPage.tsx
View File

@@ -1,126 +0,0 @@
import { useQuery } from "@tanstack/react-query";
import { useParams } from "react-router-dom";
import { Alert, Grid, Loader, Paper, Stack, Text } from "@mantine/core";
import { AlertCircle } from "lucide-react";
import { PageContainer } from "@/components/page/PageContainer";
import { PageHeader } from "@/components/page/PageHeader";
import { SectionCard } from "@/components/bookings/detail/SectionCard";
import { ContractClearanceReviewSection } from "@/components/contracts/ContractClearanceReviewSection";
import { ClearancePhaseStepper } from "@/components/contracts/ClearancePhaseStepper";
import { PhasedClearanceActionPanel } from "@/components/contracts/PhasedClearanceActionPanel";
import { ClearanceMilestoneTimeline } from "@/components/contracts/ClearanceMilestoneTimeline";
import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
import { contractsService } from "@/services/contracts.service";
import { useContractDetail } from "@/hooks/contracts/useContracts";
export default function GlClearanceDetailPage({
backTo,
breadcrumbsLabel,
roleMode,
}: {
backTo: string;
breadcrumbsLabel: string;
roleMode: "ET" | "DJ";
}) {
const { id } = useParams<{ id: string }>();
const { data: contract } = useContractDetail(id);
const {
data: clearance,
isLoading,
isError,
refetch,
} = useQuery({
queryKey: QUERY_KEYS.CONTRACTS.clearance(id ?? ""),
queryFn: () => contractsService.getClearance(id!),
enabled: Boolean(id),
});
if (isLoading) {
return (
<PageContainer>
<Stack align="center" py={80}>
<Loader color="edr-green" />
<Text c="dimmed">Loading clearance…</Text>
</Stack>
</PageContainer>
);
}
if (isError || !clearance || !contract) {
return (
<PageContainer>
<Alert color="red" icon={<AlertCircle size={16} />}>
Could not load clearance for this contract.
</Alert>
</PageContainer>
);
}
const bookingHref =
roleMode === "ET" ? `/dashboard/contracts/${id}/create-booking` : undefined;
return (
<PageContainer>
<Stack gap="lg">
<PageHeader
title={contract.reference}
backTo={backTo}
breadcrumbs={[
{ label: breadcrumbsLabel, href: backTo },
{ label: contract.reference },
]}
/>
<Paper withBorder radius="md" p="lg">
<ClearancePhaseStepper
clearance={clearance}
tradeDirection={contract.tradeDirection}
/>
</Paper>
<Grid>
<Grid.Col span={{ base: 12, lg: roleMode === "DJ" ? 12 : 7 }}>
{roleMode === "ET" ? (
<ContractClearanceReviewSection
contractId={id!}
hideSummary
selfClear={false}
readOnly={false}
onChanged={() => void refetch()}
/>
) : (
<SectionCard title="Contract context" accent="edr-green">
<Text size="sm" c="dimmed" mb="sm">
Review upstream status before uploading Djibouti documents.
</Text>
<ContractClearanceReviewSection
contractId={id!}
hideSummary
selfClear={false}
readOnly
/>
</SectionCard>
)}
</Grid.Col>
<Grid.Col span={{ base: 12, lg: roleMode === "DJ" ? 12 : 5 }}>
<PhasedClearanceActionPanel
contractId={id!}
clearance={clearance}
tradeDirection={contract.tradeDirection}
roleMode={roleMode}
onChanged={() => void refetch()}
bookingCreateHref={bookingHref}
/>
</Grid.Col>
</Grid>
{clearance.milestones && clearance.milestones.length > 0 ? (
<ClearanceMilestoneTimeline
milestones={clearance.milestones as Parameters<typeof ClearanceMilestoneTimeline>[0]["milestones"]}
/>
) : null}
</Stack>
</PageContainer>
);
}

63
apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx
View File

@@ -1,63 +0,0 @@
import { useNavigate } from "react-router-dom";
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 } from "@/hooks/contracts/useContracts";
export default function GlDjiboutiClearanceListPage() {
const navigate = useNavigate();
const { data, isLoading } = useDjClearanceQueue();
return (
<PageContainer>
<PageHeader
title="GL Djibouti — Clearance"
subtitle="Contracts awaiting Djibouti GL action (DO / RO)."
/>
{isLoading ? (
<Group justify="center" py={60}>
<Loader color="edr-green" />
</Group>
) : (
<Stack gap="sm">
{(data?.items ?? []).length === 0 ? (
<Text c="dimmed" ta="center" py="xl">
No contracts need Djibouti GL action right now.
</Text>
) : (
(data?.items ?? []).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="cyan">
{c.tradeDirection}
</Badge>
<ChevronRight size={18} className="text-muted-foreground" />
</Group>
</Group>
</Card>
))
)}
</Stack>
)}
</PageContainer>
);
}

63
apps/edr-freight-web/backoffice/src/pages/contracts/GlEthiopiaClearanceListPage.tsx
View File

@@ -1,63 +0,0 @@
import { useNavigate } from "react-router-dom";
import { Badge, Card, Group, Loader, Stack, Text } from "@mantine/core";
import { ChevronRight, Flag } from "lucide-react";
import { PageContainer } from "@/components/page/PageContainer";
import { PageHeader } from "@/components/page/PageHeader";
import { useEtClearanceQueue } from "@/hooks/contracts/useContracts";
export default function GlEthiopiaClearanceListPage() {
const navigate = useNavigate();
const { data, isLoading } = useEtClearanceQueue();
return (
<PageContainer>
<PageHeader
title="GL Ethiopia — Clearance"
subtitle="Contracts awaiting Ethiopia GL action in the phased clearance workflow."
/>
{isLoading ? (
<Group justify="center" py={60}>
<Loader color="edr-green" />
</Group>
) : (
<Stack gap="sm">
{(data?.items ?? []).length === 0 ? (
<Text c="dimmed" ta="center" py="xl">
No contracts need ET GL action right now.
</Text>
) : (
(data?.items ?? []).map((c) => (
<Card
key={c.id}
withBorder
radius="md"
padding="md"
style={{ cursor: "pointer" }}
onClick={() => navigate(`/dashboard/gl-ethiopia/clearance/${c.id}`)}
>
<Group justify="space-between" wrap="nowrap">
<Group gap="sm">
<Flag 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">
{c.tradeDirection}
</Badge>
<ChevronRight size={18} className="text-muted-foreground" />
</Group>
</Group>
</Card>
))
)}
</Stack>
)}
</PageContainer>
);
}

186
apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx
View File

@@ -1,22 +1,30 @@
import { useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
ActionIcon,
Badge,
Box,
Button,
Group,
Modal,
Stack,
Text,
Textarea,
TextInput,
} from "@mantine/core";
import { ChevronRight, Inbox, PackageSearch, RefreshCw, Search } from "lucide-react";
import { Inbox, PackageSearch, RefreshCw, Search } from "lucide-react";
import { DataTable, type ColumnDef } from "@edr/ui-common";
import type { Freight } from "@edr/types";
import { PageContainer } from "@/components/page/PageContainer";
import { PageHeader } from "@/components/page/PageHeader";
import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
import {
getShipmentRejectAction,
getShipmentStaffRowAction,
type ShipmentListRow,
} from "@/features/contracts/mapShipmentListRow";
import { contractsService } from "@/services/contracts.service";
const cellMeta = {
@@ -33,7 +41,6 @@ const fmtDate = (iso?: string | null) =>
}).format(new Date(iso))
: "—";
/** Summarize requested quantities for the list row. */
function summarizeLines(lines: Freight.RequestedShipmentLines): string {
if (lines.containers?.length) {
return lines.containers
@@ -49,17 +56,13 @@ function summarizeLines(lines: Freight.RequestedShipmentLines): string {
return "—";
}
interface RequestRow {
id: string;
reference: string;
contractReference: string;
scheduledDate?: string | null;
summary: string;
}
export default function ShipmentRequestsPage() {
const navigate = useNavigate();
const queryClient = useQueryClient();
const [query, setQuery] = useState("");
const [rejectTarget, setRejectTarget] = useState<ShipmentListRow | null>(null);
const [rejectNote, setRejectNote] = useState("");
const [acceptTarget, setAcceptTarget] = useState<ShipmentListRow | null>(null);
const { data, isLoading, isError, isFetching, refetch } = useQuery({
queryKey: ["shipment-request-queue"],
@@ -67,13 +70,26 @@ export default function ShipmentRequestsPage() {
refetchInterval: 30_000,
});
const rows = useMemo<RequestRow[]>(() => {
const reject = useMutation({
mutationFn: () =>
contractsService.rejectBookingRequest(rejectTarget!.id, rejectNote),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["shipment-request-queue"] });
setRejectTarget(null);
setRejectNote("");
},
});
const rows = useMemo<ShipmentListRow[]>(() => {
const all = (data ?? []).map((r) => ({
id: r.id,
reference: r.reference || r.id.slice(0, 8),
contractId: r.contractId,
contractReference: r.contract?.reference ?? r.contractId,
scheduledDate: r.scheduledDate,
summary: summarizeLines(r.requestedLines ?? {}),
status: r.status,
createdBookingId: r.createdBookingId,
}));
const q = query.trim().toLowerCase();
if (!q) return all;
@@ -85,7 +101,7 @@ export default function ShipmentRequestsPage() {
);
}, [data, query]);
const columns = useMemo<ColumnDef<RequestRow>[]>(
const columns = useMemo<ColumnDef<ShipmentListRow>[]>(
() => [
{
id: "reference",
@@ -126,16 +142,55 @@ export default function ShipmentRequestsPage() {
),
},
{
id: "go",
size: 56,
cell: () => (
<Group justify="flex-end" pr="xs">
<ChevronRight size={16} className="text-muted-foreground" />
</Group>
),
id: "actions",
header: () => <span className={ruleEngineTable.headerCell}>Action</span>,
meta: cellMeta,
cell: ({ row }) => {
const primary = getShipmentStaffRowAction(row.original);
const rejectAction = getShipmentRejectAction(row.original);
return (
<Group gap={6} wrap="nowrap" justify="flex-end">
{rejectAction ? (
<Button
size="compact-sm"
radius="md"
variant="light"
color="red"
onClick={(e) => {
e.stopPropagation();
setRejectTarget(row.original);
}}
>
{rejectAction.label}
</Button>
) : null}
{primary.kind === "navigate" ? (
<Button
size="compact-sm"
radius="md"
variant={primary.variant === "filled" ? "filled" : primary.variant}
color="edr-green"
onClick={(e) => {
e.stopPropagation();
if (
primary.label === "Accept" &&
row.original.status === "PENDING"
) {
setAcceptTarget(row.original);
} else {
navigate(primary.to(row.original));
}
}}
>
{primary.label}
</Button>
) : null}
</Group>
);
},
},
],
[],
[navigate],
);
return (
@@ -203,6 +258,95 @@ export default function ShipmentRequestsPage() {
/>
)}
</Stack>
<Modal
opened={rejectTarget !== null}
onClose={() => {
if (!reject.isPending) {
setRejectTarget(null);
setRejectNote("");
}
}}
title="Reject shipment request"
radius="md"
centered
>
<Stack gap="md">
<Text size="sm" c="dimmed">
Reject request{" "}
<Text span fw={600}>
{rejectTarget?.reference}
</Text>
? The customer will be notified.
</Text>
<Textarea
label="Reason"
placeholder="Explain why this request cannot be accepted…"
value={rejectNote}
onChange={(e) => setRejectNote(e.currentTarget.value)}
minRows={3}
radius="md"
/>
<Group justify="flex-end" gap="sm">
<Button
variant="default"
radius="md"
onClick={() => {
setRejectTarget(null);
setRejectNote("");
}}
>
Cancel
</Button>
<Button
color="red"
radius="md"
loading={reject.isPending}
disabled={!rejectNote.trim()}
onClick={() => reject.mutate()}
>
Reject request
</Button>
</Group>
</Stack>
</Modal>
<Modal
opened={acceptTarget !== null}
onClose={() => setAcceptTarget(null)}
title="Accept shipment request"
radius="md"
centered
>
<Stack gap="md">
<Text size="sm" c="dimmed">
Proceed to create a booking for request{" "}
<Text span fw={600}>
{acceptTarget?.reference}
</Text>
? You will confirm the shipment price before submitting.
</Text>
<Group justify="flex-end" gap="sm">
<Button variant="default" radius="md" onClick={() => setAcceptTarget(null)}>
Cancel
</Button>
<Button
color="edr-green"
radius="md"
onClick={() => {
if (!acceptTarget) return;
const to = getShipmentStaffRowAction(acceptTarget);
if (to.kind === "navigate") {
navigate(to.to(acceptTarget));
}
setAcceptTarget(null);
}}
>
Continue
</Button>
</Group>
</Stack>
</Modal>
</PageContainer>
);
}

370
apps/edr-freight-web/backoffice/src/pages/fleet/RoutesPage.tsx
View File

@@ -1,5 +1,14 @@
import { FormEvent, useMemo, useState } from "react";
import { Ban, CircleCheck, Edit, Eye, Plus, Route as RouteIcon, Trash2 } from "lucide-react";
import {
ArrowRight,
Ban,
CircleCheck,
Edit,
Eye,
Plus,
Route as RouteIcon,
Trash2,
} from "lucide-react";
import type { ColumnDef } from "@edr/ui-common";
import {
ActionIcon,
@@ -7,13 +16,16 @@ import {
Box,
Button,
Card,
Divider,
Group,
Modal,
NumberInput,
Select,
SimpleGrid,
Stack,
Text,
TextInput,
ThemeIcon,
Tooltip,
} from "@mantine/core";
@@ -26,22 +38,51 @@ import RuleEngineListFooter from "@/components/ruleEngine/RuleEngineListFooter";
import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
import { api } from "@/services/api";
import { useToast } from "@/hooks/use-toast";
import type { RouteRecord, YardRef } from "@/services/routes.service";
import {
formatRouteLabel,
ROUTE_STATUS_OPTIONS,
totalRouteDistanceKm,
type RouteRecord,
type RouteStatus,
type YardRef,
} from "@/services/routes.service";
import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
type MilestoneFormRow = { yardId: string; distanceKm: string };
type RouteFormState = {
name: string;
milestones: string[];
status: RouteStatus;
milestones: MilestoneFormRow[];
};
const emptyForm = (): RouteFormState => ({ name: "", milestones: ["", ""] });
const emptyForm = (): RouteFormState => ({
status: "AVAILABLE",
milestones: [
{ yardId: "", distanceKm: "0" },
{ yardId: "", distanceKm: "" },
],
});
const yardLabel = (yard?: YardRef | null) => (yard ? `${yard.label} (${yard.code})` : "—");
const yardLabel = (yard?: YardRef | null) =>
yard ? `${yard.label} (${yard.code})` : "—";
const routeStops = (route: RouteRecord) =>
(route.milestones ?? [])
.sort((left, right) => left.sequenceNo - right.sequenceNo)
.map((milestone) => milestone.yard?.label ?? milestone.yard?.code ?? milestone.yardId);
const statusColor = (status: RouteStatus) => {
switch (status) {
case "AVAILABLE":
return "edr-green";
case "MAINTENANCE":
return "yellow";
case "DAMAGED":
return "red";
case "STOP_WORKING":
return "gray";
default:
return "gray";
}
};
const statusLabel = (status: RouteStatus) =>
ROUTE_STATUS_OPTIONS.find((o) => o.value === status)?.label ?? status;
const normalizeRouteError = (error: unknown) => {
const responseData = (error as { response?: { data?: unknown } })?.response?.data;
@@ -57,6 +98,60 @@ const normalizeRouteError = (error: unknown) => {
: "Save failed";
};
function RouteTimeline({ route }: { route: RouteRecord }) {
const stops = [...(route.milestones ?? [])].sort(
(a, b) => a.sequenceNo - b.sequenceNo,
);
const total = totalRouteDistanceKm(route);
return (
<Stack gap="sm">
{stops.map((milestone, index) => {
const label =
milestone.yard?.label ?? milestone.yard?.code ?? milestone.yardId;
const role =
index === 0
? "Origin"
: index === stops.length - 1
? "Destination"
: `Milestone ${index}`;
const km = Number(milestone.distanceKm ?? 0);
return (
<Box key={milestone.id ?? `${milestone.yardId}-${index}`}>
{index > 0 && (
<Group gap={8} pl={18} py={6}>
<ThemeIcon size={22} radius="xl" variant="light" color="gray">
<ArrowRight size={12} />
</ThemeIcon>
<Text size="xs" c="dimmed" fw={600}>
{km} km
</Text>
</Group>
)}
<Group gap="sm" wrap="nowrap">
<Badge size="sm" variant="light" color={index === 0 ? "teal" : "gray"}>
{role}
</Badge>
<Text size="sm" fw={500}>
{label}
</Text>
</Group>
</Box>
);
})}
<Divider />
<Group justify="space-between">
<Text size="sm" fw={600}>
Total distance
</Text>
<Text size="sm" fw={700}>
{total} km
</Text>
</Group>
</Stack>
);
}
export default function RoutesPage() {
const [search, setSearch] = useState("");
const [formOpen, setFormOpen] = useState(false);
@@ -78,12 +173,14 @@ export default function RoutesPage() {
if (!query) return routesQuery.data ?? [];
return (routesQuery.data ?? []).filter((route) => {
const searchable = [
route.name,
formatRouteLabel(route),
route.originYard?.label,
route.originYard?.code,
route.destinationYard?.label,
route.destinationYard?.code,
...routeStops(route),
...(route.milestones ?? []).map(
(m) => m.yard?.label ?? m.yard?.code ?? m.yardId,
),
]
.filter(Boolean)
.join(" ")
@@ -99,7 +196,7 @@ export default function RoutesPage() {
}, [filteredRoutes, pagination.pageIndex, pagination.pageSize]);
const allRoutes = routesQuery.data ?? [];
const activeCount = allRoutes.filter((route) => route.isActive).length;
const availableCount = allRoutes.filter((r) => r.status === "AVAILABLE").length;
const yardOptions = useMemo(
() =>
@@ -110,6 +207,16 @@ export default function RoutesPage() {
[yardsQuery.data],
);
const formTotalKm = useMemo(
() =>
form.milestones.reduce(
(sum, row, index) =>
index === 0 ? sum : sum + Number(row.distanceKm || 0),
0,
),
[form.milestones],
);
const resetForm = () => {
setFormOpen(false);
setEditing(null);
@@ -125,41 +232,52 @@ export default function RoutesPage() {
const openEdit = (route: RouteRecord) => {
setEditing(route);
setForm({
name: route.name,
milestones: (route.milestones ?? [])
.sort((left, right) => left.sequenceNo - right.sequenceNo)
.map((milestone) => milestone.yardId),
status: route.status,
milestones: [...(route.milestones ?? [])]
.sort((a, b) => a.sequenceNo - b.sequenceNo)
.map((m, index) => ({
yardId: m.yardId,
distanceKm: String(index === 0 ? 0 : (m.distanceKm ?? "")),
})),
});
setFormOpen(true);
};
const setMilestone = (index: number, yardId: string) => {
const setMilestone = (index: number, patch: Partial<MilestoneFormRow>) => {
setForm((current) => ({
...current,
milestones: current.milestones.map((value, currentIndex) =>
currentIndex === index ? yardId : value,
milestones: current.milestones.map((row, i) =>
i === index ? { ...row, ...patch } : row,
),
}));
};
const addMilestone = () => {
setForm((current) => ({ ...current, milestones: [...current.milestones, ""] }));
setForm((current) => ({
...current,
milestones: [...current.milestones, { yardId: "", distanceKm: "" }],
}));
};
const removeMilestone = (index: number) => {
setForm((current) => ({
...current,
milestones: current.milestones.filter((_, currentIndex) => currentIndex !== index),
milestones: current.milestones.filter((_, i) => i !== index),
}));
};
const buildPayload = () => ({
status: form.status,
milestones: form.milestones.map((row, index) => ({
yardId: row.yardId,
distanceKm:
index === 0 ? 0 : row.distanceKm ? Number(row.distanceKm) : undefined,
})),
});
const handleSubmit = async (event: FormEvent) => {
event.preventDefault();
if (!form.name.trim()) {
toast({ title: "Save failed", description: "Route name is required", variant: "destructive" });
return;
}
if (form.milestones.length < 2 || form.milestones.some((yardId) => !yardId)) {
if (form.milestones.length < 2 || form.milestones.some((row) => !row.yardId)) {
toast({
title: "Save failed",
description: "Select at least an origin and destination yard",
@@ -167,13 +285,20 @@ export default function RoutesPage() {
});
return;
}
for (let i = 1; i < form.milestones.length; i++) {
const km = Number(form.milestones[i].distanceKm);
if (!form.milestones[i].distanceKm || Number.isNaN(km) || km < 0) {
toast({
title: "Save failed",
description: `Enter segment KM for stop ${i + 1}`,
variant: "destructive",
});
return;
}
}
try {
const payload = {
name: form.name.trim(),
milestones: form.milestones.map((yardId) => ({ yardId })),
isActive: editing?.isActive ?? true,
};
const payload = buildPayload();
if (editing) {
await updateMutation.mutateAsync({ id: editing.id, data: payload });
toast({ title: "Route updated" });
@@ -190,9 +315,19 @@ export default function RoutesPage() {
const handleDeactivate = async (route: RouteRecord) => {
try {
await deactivateMutation.mutateAsync(route.id);
toast({ title: "Route deactivated" });
toast({ title: "Route marked stop working" });
} catch {
toast({ title: "Deactivate failed", description: "Could not deactivate route", variant: "destructive" });
toast({ title: "Update failed", description: "Could not update route status", variant: "destructive" });
}
};
const handleStatusChange = async (route: RouteRecord, status: RouteStatus) => {
try {
await updateMutation.mutateAsync({ id: route.id, data: { status } });
setViewing((current) => (current?.id === route.id ? { ...current, status } : current));
toast({ title: "Status updated" });
} catch (error) {
toast({ title: "Update failed", description: normalizeRouteError(error), variant: "destructive" });
}
};
@@ -200,10 +335,14 @@ export default function RoutesPage() {
const availableOptionsForIndex = (index: number) => {
const selectedByOthers = new Set(
form.milestones.filter((value, currentIndex) => currentIndex !== index && value),
form.milestones
.filter((row, i) => i !== index && row.yardId)
.map((row) => row.yardId),
);
return yardOptions.filter(
(option) => option.value === form.milestones[index] || !selectedByOthers.has(option.value),
(option) =>
option.value === form.milestones[index]?.yardId ||
!selectedByOthers.has(option.value),
);
};
@@ -217,7 +356,16 @@ export default function RoutesPage() {
const headerClassName = ruleEngineTable.headerCell;
const cellClassName = ruleEngineTable.bodyCell;
return [
{ id: "name", header: "Name", meta: { headerClassName, cellClassName }, cell: ({ row }) => row.original.name },
{
id: "corridor",
header: "Corridor",
meta: { headerClassName, cellClassName },
cell: ({ row }) => (
<Text fw={600} size="sm">
{formatRouteLabel(row.original)}
</Text>
),
},
{
id: "origin",
header: "Origin",
@@ -231,18 +379,24 @@ export default function RoutesPage() {
cell: ({ row }) => yardLabel(row.original.destinationYard),
},
{
id: "milestones",
header: "Milestones",
id: "distance",
header: "Total KM",
meta: { headerClassName, cellClassName },
cell: ({ row }) => Math.max((row.original.milestones?.length ?? 0) - 2, 0),
cell: ({ row }) => `${totalRouteDistanceKm(row.original)} km`,
},
{
id: "milestones",
header: "Stops",
meta: { headerClassName, cellClassName },
cell: ({ row }) => row.original.milestones?.length ?? 0,
},
{
id: "status",
header: "Status",
meta: { headerClassName, cellClassName },
cell: ({ row }) => (
<Badge color={row.original.isActive ? "edr-green" : "gray"} variant="light" size="sm">
{row.original.isActive ? "Active" : "Inactive"}
<Badge color={statusColor(row.original.status)} variant="light" size="sm">
{statusLabel(row.original.status)}
</Badge>
),
},
@@ -262,11 +416,11 @@ export default function RoutesPage() {
<Edit size={16} />
</ActionIcon>
</Tooltip>
<Tooltip label="Deactivate">
<Tooltip label="Mark stop working">
<ActionIcon
variant="subtle"
color="red"
disabled={!row.original.isActive || deactivateMutation.isPending}
disabled={row.original.status === "STOP_WORKING" || deactivateMutation.isPending}
onClick={() => handleDeactivate(row.original)}
>
<Trash2 size={16} />
@@ -282,7 +436,7 @@ export default function RoutesPage() {
<PageContainer>
<PageHeader
title="Routes"
subtitle="Define rail corridors and their ordered yard stops used by train scheduling."
subtitle="Define rail corridors, segment distances, and operational status for train scheduling."
action={
<Button leftSection={<Plus size={18} />} onClick={openCreate}>
Add route
@@ -294,10 +448,10 @@ export default function RoutesPage() {
loading={routesQuery.isLoading}
items={[
{ label: "Total routes", value: allRoutes.length, icon: RouteIcon },
{ label: "Active", value: activeCount, icon: CircleCheck, color: "edr-green" },
{ label: "Available", value: availableCount, icon: CircleCheck, color: "edr-green" },
{
label: "Inactive",
value: allRoutes.length - activeCount,
label: "Unavailable",
value: allRoutes.length - availableCount,
icon: Ban,
color: "gray",
},
@@ -310,7 +464,7 @@ export default function RoutesPage() {
<FleetToolbar
search={search}
onSearchChange={setSearch}
searchPlaceholder="Search routes…"
searchPlaceholder="Search corridors…"
viewMode={viewMode}
onViewModeChange={setViewMode}
/>
@@ -359,16 +513,13 @@ export default function RoutesPage() {
<Card key={route.id} radius="lg" padding="lg" withBorder>
<Stack gap="sm">
<Group justify="space-between">
<Text fw={600}>{route.name}</Text>
<Badge color={route.isActive ? "edr-green" : "gray"} variant="light" size="sm">
{route.isActive ? "Active" : "Inactive"}
<Text fw={600}>{formatRouteLabel(route)}</Text>
<Badge color={statusColor(route.status)} variant="light" size="sm">
{statusLabel(route.status)}
</Badge>
</Group>
<Text size="sm" c="dimmed">
{yardLabel(route.originYard)} → {yardLabel(route.destinationYard)}
</Text>
<Text size="xs" c="dimmed">
{Math.max((route.milestones?.length ?? 0) - 2, 0)} intermediate milestones
{totalRouteDistanceKm(route)} km · {route.milestones?.length ?? 0} stops
</Text>
<Group gap={6} justify="flex-end">
<Button variant="light" size="compact-sm" onClick={() => setViewing(route)}>
@@ -405,26 +556,25 @@ export default function RoutesPage() {
>
<form onSubmit={handleSubmit}>
<Stack gap="md">
<TextInput
label="Name"
value={form.name}
onChange={(e) => {
// Capture the value before the state updater runs — React may
// recycle the synthetic event, nulling currentTarget by the time
// the updater executes ("Cannot read properties of null").
const name = e.currentTarget.value;
setForm((current) => ({ ...current, name }));
}}
/>
{editing && (
<Select
label="Status"
data={ROUTE_STATUS_OPTIONS}
value={form.status}
onChange={(value) =>
value && setForm((current) => ({ ...current, status: value as RouteStatus }))
}
/>
)}
<Group justify="space-between">
<Text size="sm" fw={500}>
Stops
Stops & segment distances
</Text>
<Button type="button" variant="light" size="compact-sm" onClick={addMilestone}>
Add milestone
</Button>
</Group>
{form.milestones.map((yardId, index) => {
{form.milestones.map((row, index) => {
const role =
index === 0
? "Origin"
@@ -432,18 +582,32 @@ export default function RoutesPage() {
? "Destination"
: "Milestone";
return (
<Group key={`${role}-${index}`} align="flex-end" wrap="nowrap">
<Text w={100} size="sm" fw={500}>
<Group key={`${role}-${index}`} align="flex-end" wrap="nowrap" gap="sm">
<Text w={90} size="sm" fw={500}>
{role}
</Text>
<Select
style={{ flex: 1 }}
data={availableOptionsForIndex(index)}
value={yardId || null}
onChange={(value) => value && setMilestone(index, value)}
value={row.yardId || null}
onChange={(value) => value && setMilestone(index, { yardId: value })}
placeholder="Select yard"
searchable
/>
{index > 0 ? (
<NumberInput
w={120}
label="KM"
min={0}
decimalScale={2}
value={row.distanceKm ? Number(row.distanceKm) : ""}
onChange={(value) =>
setMilestone(index, { distanceKm: String(value ?? "") })
}
/>
) : (
<Box w={120} />
)}
<ActionIcon
variant="subtle"
color="red"
@@ -455,6 +619,9 @@ export default function RoutesPage() {
</Group>
);
})}
<Text size="sm" c="dimmed">
Total route distance: <strong>{formTotalKm} km</strong>
</Text>
<Group justify="flex-end">
<Button variant="default" type="button" onClick={resetForm}>
Cancel
@@ -470,44 +637,37 @@ export default function RoutesPage() {
<Modal
opened={Boolean(viewing)}
onClose={() => setViewing(null)}
title={<Text fw={600}>Route details</Text>}
title={<Text fw={600}>{viewing ? formatRouteLabel(viewing) : "Route details"}</Text>}
radius="lg"
centered
size="md"
>
{viewing ? (
<Stack gap="sm">
<Stack gap="md">
<Group justify="space-between" align="flex-end">
<div>
<Text size="sm" fw={500}>
Status
</Text>
<Badge mt={4} color={statusColor(viewing.status)} variant="light">
{statusLabel(viewing.status)}
</Badge>
</div>
<Select
w={200}
label="Update status"
data={ROUTE_STATUS_OPTIONS}
value={viewing.status}
onChange={(value) =>
value && handleStatusChange(viewing, value as RouteStatus)
}
/>
</Group>
<div>
<Text size="sm" fw={500}>
Name
<Text size="sm" fw={500} mb={8}>
Road timeline
</Text>
<Text size="sm" c="dimmed">
{viewing.name}
</Text>
</div>
<div>
<Text size="sm" fw={500}>
Status
</Text>
<Text size="sm" c="dimmed">
{viewing.isActive ? "Active" : "Inactive"}
</Text>
</div>
<div>
<Text size="sm" fw={500}>
Stops
</Text>
<Stack gap={6} mt={6}>
{routeStops(viewing).map((stop, index, stops) => (
<Text key={`${stop}-${index}`} size="sm" c="dimmed">
{index === 0
? "Origin"
: index === stops.length - 1
? "Destination"
: `Milestone ${index}`}
: {stop}
</Text>
))}
</Stack>
<RouteTimeline route={viewing} />
</div>
</Stack>
) : null}

15
apps/edr-freight-web/backoffice/src/pages/ruleEngine/CargoTypesPage.tsx
View File

@@ -51,7 +51,6 @@ interface CargoNode extends RuleEngineRecord {
cargoTypeName?: string;
code?: string;
parentGroupId?: string | null;
showFreeTextBox?: boolean;
requiresDirectorApproval?: boolean;
/** How this cargo is measured (PER_TON / PER_ITEM); null for groups/unset. */
unitOfMeasure?: string | null;
@@ -80,7 +79,6 @@ const FORM_FIELDS: FormFieldDef[] = [
{ label: "Per item (break-bulk)", value: "PER_ITEM" },
],
},
{ name: "showFreeTextBox", label: "Show free text box", type: "boolean" },
{ name: "requiresDirectorApproval", label: "Requires director approval", type: "boolean" },
{ name: "isActive", label: "Active", type: "boolean" },
];
@@ -474,19 +472,6 @@ function CargoRow({
</Badge>
</Tooltip>
) : null}
{node.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}
{node.unitOfMeasure ? (
<Tooltip label="How bookings measure this cargo" withArrow>
<Badge size="xs" variant="light" color="teal" radius="sm">

1
apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
View File

@@ -177,7 +177,6 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
optional: true,
placeholder: "Select parent cargo type (optional)",
},
{ name: "showFreeTextBox", label: "Show free text box", type: "boolean" },
{ name: "requiresDirectorApproval", label: "Requires director approval", type: "boolean" },
{ name: "isActive", label: "Active", type: "boolean" },
],

12
apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2ListPage.tsx
View File

@@ -42,6 +42,7 @@ import {
} from "@/components/trainScheduling/scheduleVisuals";
import { useMutation, useQuery } from "@tanstack/react-query";
import { api } from "@/services/api";
import { formatRouteLabel } from "@/services/routes.service";
import { useToast } from "@/hooks/use-toast";
import type { TrainScheduleListItem } from "@/types/trainScheduling";
import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
@@ -88,7 +89,9 @@ export default function TrainScheduleV2ListPage() {
const schedulesQuery = useQuery(
api.trainScheduling.scheduleList.queryOptions({ input: {} }),
);
const routesQuery = useQuery(api.routes.list.queryOptions());
const routesQuery = useQuery(
api.routes.list.queryOptions({ input: { status: "AVAILABLE" } }),
);
const locomotivesQuery = useQuery(
api.trainScheduling.availableLocomotives.queryOptions({
input: { routeId: routeId || undefined },
@@ -97,10 +100,7 @@ export default function TrainScheduleV2ListPage() {
const create = useMutation(api.trainScheduling.createSchedule.mutationOptions());
const cancel = useMutation(api.trainScheduling.cancelSchedule.mutationOptions());
const activeRoutes = useMemo(
() => (routesQuery.data ?? []).filter((r) => r.isActive),
[routesQuery.data],
);
const activeRoutes = useMemo(() => routesQuery.data ?? [], [routesQuery.data]);
const selectedRoute = activeRoutes.find((r) => r.id === routeId);
@@ -529,7 +529,7 @@ export default function TrainScheduleV2ListPage() {
<Select
label="Route"
placeholder="Select route"
data={activeRoutes.map((r) => ({ value: r.id, label: r.name }))}
data={activeRoutes.map((r) => ({ value: r.id, label: formatRouteLabel(r) }))}
value={routeId || null}
onChange={(v) => setRouteId(v ?? "")}
searchable

10
apps/edr-freight-web/backoffice/src/services/api.ts
View File

@@ -1122,8 +1122,14 @@ export const api = {
},
routes: {
list: endpoint<void, RouteRecord[]>("routes", "list", () =>
routesService.getAll().then((r) => r.data),
list: endpoint<{ status?: import("./routes.service").RouteStatus } | void, RouteRecord[]>(
"routes",
"list",
(input) =>
routesService
.getAll(input?.status ? { status: input.status } : undefined)
.then((r) => r.data),
(input) => ["routes", input?.status ?? "all"],
),
yards: endpoint<void, YardRef[]>(

94
apps/edr-freight-web/backoffice/src/services/bookings.service.ts
View File

@@ -301,6 +301,100 @@ export const bookingsService = {
governmentExpedite: (id: string) =>
postBooking<BookingDetail>(B.GOVERNMENT_EXPEDITE(id)),
getClearance: async (id: string): Promise<Freight.ClearanceView> => {
const response = await client.get(B.CLEARANCE(id));
return unwrap(response.data) as Freight.ClearanceView;
},
uploadDeclaration: async (
id: string,
files: Record<string, File | null>,
): Promise<BookingDetail> => {
const form = new FormData();
for (const [key, file] of Object.entries(files)) {
if (file) form.append(key, file);
}
const response = await client.post(B.CLEARANCE_DECLARATION(id), form, {
headers: { "Content-Type": "multipart/form-data" },
});
return unwrap(response.data) as BookingDetail;
},
adviseDuty: async (
id: string,
payload: {
dutyRequired: boolean;
amount?: number;
currency?: string;
declarationSerial?: string;
attachment?: File | null;
},
): Promise<BookingDetail> => {
const form = new FormData();
form.append("dutyRequired", String(payload.dutyRequired));
if (payload.amount != null) form.append("amount", String(payload.amount));
if (payload.currency) form.append("currency", payload.currency);
if (payload.declarationSerial) {
form.append("declarationSerial", payload.declarationSerial);
}
if (payload.attachment) form.append("attachment", payload.attachment);
const response = await client.post(B.CLEARANCE_DUTY(id), form, {
headers: { "Content-Type": "multipart/form-data" },
});
return unwrap(response.data) as BookingDetail;
},
finalizePreClearance: (id: string) =>
postBooking<BookingDetail>(B.CLEARANCE_FINALIZE_PRE(id)),
uploadTransitPermit: async (id: string, file: File): Promise<BookingDetail> => {
const form = new FormData();
form.append("file", file);
const response = await client.post(B.CLEARANCE_TRANSIT_PERMIT(id), form, {
headers: { "Content-Type": "multipart/form-data" },
});
return unwrap(response.data) as BookingDetail;
},
uploadDeliveryOrder: async (id: string, file: File): Promise<BookingDetail> => {
const form = new FormData();
form.append("file", file);
const response = await client.post(B.CLEARANCE_DELIVERY_ORDER(id), form, {
headers: { "Content-Type": "multipart/form-data" },
});
return unwrap(response.data) as BookingDetail;
},
uploadReleaseOrder: async (
id: string,
file: File,
vesselDepartureDate: string,
): Promise<{ hold?: boolean; holdReason?: string }> => {
const form = new FormData();
form.append("file", file);
form.append("vesselDepartureDate", vesselDepartureDate);
const response = await client.post(B.CLEARANCE_RELEASE_ORDER(id), form, {
headers: { "Content-Type": "multipart/form-data" },
});
return unwrap(response.data) as { hold?: boolean; holdReason?: string };
},
requestRoAmendment: (id: string, note?: string) =>
postBooking<BookingDetail>(B.CLEARANCE_RO_AMENDMENT(id), { note }),
confirmExportRelease: (id: string) =>
postBooking<BookingDetail>(B.CLEARANCE_EXPORT_RELEASE(id), {}),
getEtClearanceQueue: async (): Promise<BookingDetail[]> => {
const response = await client.get(B.CLEARANCE_ET_QUEUE);
return (unwrap(response.data) ?? []) as BookingDetail[];
},
getDjClearanceQueue: async (): Promise<BookingDetail[]> => {
const response = await client.get(B.CLEARANCE_DJ_QUEUE);
return (unwrap(response.data) ?? []) as BookingDetail[];
},
};
async function ensurePdfBlob(blob: Blob): Promise<Blob> {

21
apps/edr-freight-web/backoffice/src/services/contracts.service.ts
View File

@@ -239,15 +239,32 @@ export const contractsService = {
return unwrap(response.data) as Freight.IContract;
},
adviseContractDuty: (
adviseContractDuty: async (
id: string,
payload: {
dutyRequired: boolean;
amount?: number;
currency?: string;
declarationSerial?: string;
attachment?: File | null;
},
) => postContract<Freight.IContract>(C.CLEARANCE_DUTY(id), payload),
): Promise<Freight.IContract> => {
const form = new FormData();
form.append("dutyRequired", String(payload.dutyRequired));
if (payload.amount != null) form.append("amount", String(payload.amount));
if (payload.currency) form.append("currency", payload.currency);
if (payload.declarationSerial) {
form.append("declarationSerial", payload.declarationSerial);
}
if (payload.attachment) form.append("attachment", payload.attachment);
const response = await client.post(C.CLEARANCE_DUTY(id), form, {
headers: { "Content-Type": "multipart/form-data" },
});
return unwrap(response.data) as Freight.IContract;
},
finalizePreClearance: (id: string) =>
postContract<Freight.IContract>(C.CLEARANCE_FINALIZE_PRE(id)),
uploadContractTransitPermit: async (
id: string,

36
apps/edr-freight-web/backoffice/src/services/routes.service.ts
View File

@@ -2,6 +2,8 @@ import { api as apiClient } from '../auth/http';
import { URL_CONSTANTS } from '@/constants/URLS';
export type RouteStatus = 'AVAILABLE' | 'MAINTENANCE' | 'DAMAGED' | 'STOP_WORKING';
export interface YardRef {
id: string;
code: string;
@@ -14,32 +16,54 @@ export interface RouteMilestone {
routeId: string;
yardId: string;
sequenceNo: number;
distanceKm?: number | null;
yard?: YardRef | null;
}
export interface RouteRecord {
id: string;
name: string;
status: RouteStatus;
originYardId: string;
destinationYardId: string;
isActive: boolean;
originYard?: YardRef | null;
destinationYard?: YardRef | null;
milestones?: RouteMilestone[];
}
export interface SaveRoutePayload {
name: string;
milestones: Array<{ yardId: string }>;
isActive?: boolean;
milestones: Array<{ yardId: string; distanceKm?: number }>;
status?: RouteStatus;
}
export function formatRouteLabel(route: RouteRecord): string {
const origin =
route.originYard?.code ?? route.originYard?.label ?? 'Origin';
const dest =
route.destinationYard?.code ?? route.destinationYard?.label ?? 'Destination';
return `${origin} → ${dest}`;
}
export function totalRouteDistanceKm(route: RouteRecord): number {
return (route.milestones ?? []).reduce(
(sum, m) => sum + Number(m.distanceKm ?? 0),
0,
);
}
export const ROUTE_STATUS_OPTIONS: Array<{ value: RouteStatus; label: string }> = [
{ value: 'AVAILABLE', label: 'Available' },
{ value: 'MAINTENANCE', label: 'Maintenance' },
{ value: 'DAMAGED', label: 'Damaged' },
{ value: 'STOP_WORKING', label: 'Stop working' },
];
interface YardListResponse {
data: YardRef[];
}
export const routesService = {
getAll: () => apiClient.get<RouteRecord[]>(URL_CONSTANTS.ROUTES.BASE),
getAll: (params?: { status?: RouteStatus; search?: string }) =>
apiClient.get<RouteRecord[]>(URL_CONSTANTS.ROUTES.BASE, { params }),
getById: (id: string) => apiClient.get<RouteRecord>(URL_CONSTANTS.ROUTES.BY_ID(id)),
create: (data: SaveRoutePayload) => apiClient.post(URL_CONSTANTS.ROUTES.BASE, data),
update: (id: string, data: Partial<SaveRoutePayload>) =>

5
apps/edr-freight-web/portal/src/App.tsx
View File

@@ -42,6 +42,7 @@ import ContractViewPage from "./pages/contracts/ContractViewPage";
import ContractsList from "./pages/contracts/ContractsList";
import NewContractPage from "./pages/contracts/NewContractPage";
import NewShipmentPage from "./pages/contracts/NewShipmentPage";
import NewShipmentRequestPage from "./pages/contracts/NewShipmentRequestPage";
import CheckPaymentPage from "./pages/payments/CheckPaymentPage";
import PaymentFailurePage from "./pages/payments/PaymentFailurePage";
import PaymentSuccessPage from "./pages/payments/PaymentSuccessPage";
@@ -276,6 +277,10 @@ const App = () => {
path="/contracts/:id/edit"
element={<NewContractPage mode="edit" />}
/>
<Route
path="/contracts/:id/shipment-requests/new"
element={<NewShipmentRequestPage />}
/>
<Route
path="/contracts/:id/bookings/new"
element={<NewShipmentPage />}

133
apps/edr-freight-web/portal/src/components/contracts/ClearanceWorkflowFilesSection.tsx Normal file
View File

@@ -0,0 +1,133 @@
import {
Badge,
Box,
Button,
Group,
Paper,
Stack,
Text,
ThemeIcon,
Tooltip,
} from "@mantine/core";
import { Download, Eye, FileText } from "lucide-react";
import type { Freight } from "@edr/types";
import { isViewable } from "@edr/ui-common";
const CATEGORY_LABELS: Record<
Freight.ClearanceWorkflowFileCategory,
string
> = {
declaration: "Declaration",
duty: "Duty & taxes",
transit: "Transit",
djibouti: "Djibouti",
};
const CATEGORY_ORDER: Freight.ClearanceWorkflowFileCategory[] = [
"declaration",
"duty",
"transit",
"djibouti",
];
const OWNER_LABELS: Record<Freight.ClearanceWorkflowFileOwner, string> = {
customer: "You",
gl_et: "GL Ethiopia",
gl_dj: "GL Djibouti",
};
export function ClearanceWorkflowFilesSection({
files,
onView,
onDownload,
title = "Customs documents",
}: {
files: Freight.ClearanceWorkflowFile[];
onView: (file: { name: string; url: string; mimeType?: string }) => void;
onDownload?: (file: { id: string; name: string }) => void;
title?: string;
}) {
if (files.length === 0) return null;
const grouped = CATEGORY_ORDER.map((category) => ({
category,
label: CATEGORY_LABELS[category],
items: files.filter((f) => f.category === category),
})).filter((g) => g.items.length > 0);
return (
<Paper withBorder radius="lg" p="lg">
<Text fw={700} size="sm" mb="md">
{title}
</Text>
<Stack gap="md">
{grouped.map((group) => (
<Box key={group.category}>
<Text size="xs" fw={700} c="dimmed" tt="uppercase" mb={8}>
{group.label}
</Text>
<Stack gap={8}>
{group.items.map((item) => {
const file = item.file;
if (!file) return null;
const canPreview = isViewable({ name: file.name, url: file.url });
return (
<Paper key={item.code} withBorder radius="md" p="sm">
<Group justify="space-between" wrap="nowrap">
<Group gap={10} wrap="nowrap" style={{ minWidth: 0 }}>
<ThemeIcon variant="light" color="edr-green" radius="md" size={36}>
<FileText size={17} />
</ThemeIcon>
<Box style={{ minWidth: 0 }}>
<Text size="sm" fw={600} truncate>
{item.label}
</Text>
<Group gap={6} wrap="nowrap" mt={2}>
<Badge size="xs" variant="light" color="gray" radius="sm" tt="none">
{OWNER_LABELS[item.uploadedBy]}
</Badge>
<Text size="xs" c="dimmed" truncate>
{file.name}
</Text>
</Group>
</Box>
</Group>
<Group gap={6} wrap="nowrap">
{canPreview ? (
<Tooltip label="Preview">
<Button
size="compact-xs"
variant="default"
radius="md"
leftSection={<Eye size={13} />}
onClick={() =>
onView({ name: file.name, url: file.url })
}
>
View
</Button>
</Tooltip>
) : null}
{onDownload ? (
<Button
size="compact-xs"
variant="light"
radius="md"
leftSection={<Download size={13} />}
onClick={() => onDownload({ id: file.id, name: file.name })}
>
Download
</Button>
) : null}
</Group>
</Group>
</Paper>
);
})}
</Stack>
</Box>
))}
</Stack>
</Paper>
);
}

77
apps/edr-freight-web/portal/src/components/customer-actions/ContractClearanceAction.tsx Normal file
View File

@@ -0,0 +1,77 @@
import { useMemo } from "react";
import { useQuery } from "@tanstack/react-query";
import { Button, Modal, Text, type ButtonProps } from "@mantine/core";
import { AlertCircle, Upload } from "lucide-react";
import { api } from "@/services/api";
import { ContractClearancePanel } from "@/pages/contracts/ContractClearancePanel";
import { ModalSafeWrapper } from "./ModalSafeWrapper";
import { useDisclosure } from "@mantine/hooks";
interface ContractClearanceActionProps {
contractId: string;
label?: string;
size?: ButtonProps["size"];
urgent?: boolean;
}
export function ContractClearanceAction({
contractId,
label: labelProp,
size = "xs",
urgent = false,
}: ContractClearanceActionProps) {
const [opened, { open, close }] = useDisclosure(false);
const { data: clearance } = useQuery({
...api.contracts.getClearance.queryOptions({ input: { id: contractId } }),
enabled: opened,
});
const label = useMemo(() => {
if (labelProp) return labelProp;
const docs = clearance?.documents ?? [];
const queried = docs.filter(
(d) => d.uploadedBy === "customer" && d.reviewStatus === "QUERIED",
).length;
if (queried > 0) return "Update clearance";
return urgent ? "Upload clearance" : "Manage clearance";
}, [labelProp, clearance, urgent]);
const Icon = urgent || label.includes("Update") ? AlertCircle : Upload;
return (
<ModalSafeWrapper>
<Button
size={size}
radius="md"
fw={700}
fz={13}
color="edr-green"
leftSection={<Icon size={14} />}
onClick={(e) => {
e.stopPropagation();
open();
}}
>
{label}
</Button>
<Modal
opened={opened}
onClose={close}
title={
<Text fw={700} fz={16}>
Clearance documents
</Text>
}
size="xl"
radius="md"
centered
overlayProps={{ blur: 2, backgroundOpacity: 0.55 }}
>
<ContractClearancePanel contractId={contractId} bare />
</Modal>
</ModalSafeWrapper>
);
}

97
apps/edr-freight-web/portal/src/components/customer-actions/ContractCustomerAction.tsx Normal file
View File

@@ -0,0 +1,97 @@
import { Button, Group, type ButtonProps } from "@mantine/core";
import type { ReactNode } from "react";
import { useNavigate } from "react-router-dom";
import type { Freight } from "@edr/types";
import { PayNowButton } from "@/pages/bookings/payments/PayNowButton";
import { ContractClearanceAction } from "./ContractClearanceAction";
import { deriveContractCustomerAction } from "./deriveContractCustomerAction";
interface ContractCustomerActionProps {
contract: Freight.IContract;
bookings: Freight.IBooking[];
size?: ButtonProps["size"];
/** Extra props for list-row button styling (ContractsList). */
listStyle?: boolean;
}
export function ContractCustomerAction({
contract,
bookings,
size = "xs",
listStyle = false,
}: ContractCustomerActionProps) {
const navigate = useNavigate();
const action = deriveContractCustomerAction(contract, bookings);
const buttonStyles = listStyle
? {
root: {
fontWeight: 600,
fontSize: 13,
paddingInline: 14,
whiteSpace: "nowrap" as const,
boxShadow: action.primary
? "0 1px 2px rgba(14,163,113,0.25)"
: "none",
},
}
: undefined;
if (action.type === "clearance") {
return (
<ContractClearanceAction
contractId={action.contractId}
label={action.label}
size={size}
urgent={action.urgent}
/>
);
}
if (action.type === "pay") {
return <PayNowButton booking={action.booking} label={action.label} size={size} />;
}
const Icon = action.icon;
const variant = action.primary ? "filled" : "light";
return (
<Button
size={size}
radius="md"
h={listStyle ? 34 : undefined}
variant={variant}
color="edr-green"
leftSection={<Icon size={15} />}
onClick={(e) => {
e.stopPropagation();
navigate(action.to);
}}
styles={buttonStyles}
fw={listStyle ? undefined : 700}
fz={listStyle ? undefined : 13}
>
{action.label}
</Button>
);
}
/** Action column cell: doc button + primary customer action. */
export function ContractCustomerActionCell({
contract,
bookings,
docButton,
}: {
contract: Freight.IContract;
bookings: Freight.IBooking[];
docButton: ReactNode;
}) {
return (
<Group gap={8} wrap="nowrap" justify="flex-end">
{docButton}
<ContractCustomerAction contract={contract} bookings={bookings} size="sm" listStyle />
</Group>
);
}

15
apps/edr-freight-web/portal/src/components/customer-actions/ModalSafeWrapper.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { Box } from "@mantine/core";
import type { ReactNode } from "react";
/**
* Wrap inline row actions that open Mantine modals. Modals portal to document
* body but React synthetic events still bubble through the component tree —
* without this, clicks inside the modal can trigger a parent row's navigate.
*/
export function ModalSafeWrapper({ children }: { children: ReactNode }) {
return (
<Box component="span" onClick={(e) => e.stopPropagation()}>
{children}
</Box>
);
}

190
apps/edr-freight-web/portal/src/components/customer-actions/deriveContractCustomerAction.ts Normal file
View File

@@ -0,0 +1,190 @@
import type { Freight } from "@edr/types";
import type { LucideIcon } from "lucide-react";
import {
CreditCard,
Eye,
FileSignature,
PackagePlus,
PencilLine,
RotateCcw,
Upload,
} from "lucide-react";
import { getContractBookingAction } from "@/pages/contracts/contract-booking-action";
const CLEARANCE_IN_PROGRESS_STATUSES = [
"AWAITING_CLEARANCE_DOCUMENTS",
"CLEARANCE_UNDER_REVIEW",
];
export function contractNeedsClearanceAction(c: Freight.IContract): {
show: boolean;
urgent: boolean;
} {
const clearance = (c as { clearanceStatus?: string }).clearanceStatus;
const ready =
clearance === "CLEARANCE_READY_FOR_BOOKING" ||
clearance === "SELF_CLEARED" ||
clearance === "ACTIVE_SHIPMENT_IN_PROGRESS";
if (ready) return { show: false, urgent: false };
const awaiting =
c.status === "AWAITING_CLEARANCE_DOCUMENTS" ||
clearance === "AWAITING_DOCUMENTS";
const inProgress =
CLEARANCE_IN_PROGRESS_STATUSES.includes(c.status) ||
clearance === "AWAITING_DOCUMENTS" ||
clearance === "DOCUMENTS_UNDER_REVIEW";
return { show: inProgress, urgent: awaiting };
}
export type ContractCustomerAction =
| {
type: "sign";
label: string;
to: string;
primary: boolean;
icon: LucideIcon;
}
| {
type: "navigate";
label: string;
to: string;
primary: boolean;
icon: LucideIcon;
}
| {
type: "clearance";
contractId: string;
label: string;
primary: boolean;
icon: LucideIcon;
urgent: boolean;
}
| {
type: "pay";
booking: Freight.IBooking;
label: string;
primary: boolean;
icon: LucideIcon;
};
function findPayableBookingForContract(
contractId: string,
bookings: Freight.IBooking[],
): Freight.IBooking | null {
return (
bookings.find((b) => {
if (b.contractId !== contractId) return false;
if (b.paymentStatus === "PAID") return false;
const isGeneral = b.bookingType === "GENERAL_CONTRACT";
return isGeneral
? b.status === "FULLY_EXECUTED"
: b.status === "SELECTED_FOR_BATCH";
}) ?? null
);
}
/** Single best customer action for a contract row (list / home). */
export function deriveContractCustomerAction(
contract: Freight.IContract,
bookings: Freight.IBooking[],
): ContractCustomerAction {
const id = contract.id;
if (contract.status === "CONTRACT_READY") {
return {
type: "sign",
label: "View & sign",
to: `/contracts/${id}/view`,
primary: true,
icon: FileSignature,
};
}
if (contract.status === "CHANGES_REQUESTED") {
return {
type: "navigate",
label: "Edit & resubmit",
to: `/contracts/${id}`,
primary: true,
icon: PencilLine,
};
}
const payable = findPayableBookingForContract(id, bookings);
if (payable) {
return {
type: "pay",
booking: payable,
label: "Pay now",
primary: true,
icon: CreditCard,
};
}
const clr = contractNeedsClearanceAction(contract);
if (clr.show) {
return {
type: "clearance",
contractId: id,
label: clr.urgent ? "Upload clearance" : "Update clearance",
primary: true,
icon: Upload,
urgent: clr.urgent,
};
}
if (
contract.customsClearingEnabled &&
["CLEARANCE_READY_FOR_BOOKING", "ACTIVE_SHIPMENT_IN_PROGRESS"].includes(
contract.status,
)
) {
return {
type: "navigate",
label: "View",
to: `/contracts/${id}`,
primary: false,
icon: Eye,
};
}
const bookingAction = getContractBookingAction(contract, bookings);
if (bookingAction.kind === "book") {
return {
type: "navigate",
label: "Book shipment",
to: bookingAction.to,
primary: true,
icon: PackagePlus,
};
}
if (bookingAction.kind === "rebook") {
return {
type: "navigate",
label: "Re-book shipment",
to: bookingAction.to,
primary: true,
icon: RotateCcw,
};
}
if (bookingAction.kind === "request") {
return {
type: "navigate",
label: "Request shipment",
to: bookingAction.to,
primary: true,
icon: PackagePlus,
};
}
return {
type: "navigate",
label: "View",
to: `/contracts/${id}`,
primary: false,
icon: Eye,
};
}

3
apps/edr-freight-web/portal/src/constants/URLS.ts
View File

@@ -132,6 +132,9 @@ export const URL_CONSTANTS = {
BOOKING_DUTY_SLIP: (bookingId: string) =>
`/api/contracts/bookings/${bookingId}/duty-slip`,
CAPACITY: (id: string) => `/api/contracts/${id}/capacity`,
BOOKING_REQUESTS: (id: string) => `/api/contracts/${id}/booking-requests`,
BOOKING_REQUEST_CANCEL: (reqId: string) =>
`/api/contracts/booking-requests/${reqId}/cancel`,
},
TRAIN_SCHEDULING: {

8
apps/edr-freight-web/portal/src/pages/MyPortalPage/MyPortalPage.tsx
View File

@@ -5,6 +5,7 @@ import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { PROFILE_TYPE_LABELS } from "@/constants/profileMode";
import {
ActionNeededSection,
FreightVolumeSection,
HelloSection,
InvoicesSection,
@@ -13,6 +14,7 @@ import {
ShipmentsSection,
StatsSection,
} from "./components";
import { deriveActionItems } from "./actions";
import { useMyPortalData } from "./hooks";
export default function MyPortalPage() {
@@ -28,6 +30,7 @@ export default function MyPortalPage() {
recentContracts,
activeContractsCount,
allBookings,
allContracts,
activeBookings,
newActiveThisWeek,
outstandingInvoices,
@@ -90,6 +93,11 @@ export default function MyPortalPage() {
dashboardLoading={dashboardQuery.isPending}
/>
{/* <ActionNeededSection
items={deriveActionItems(allContracts, allBookings)}
contracts={allContracts}
/> */}
{/* Contracts + shipments side by side — the two primary tables. */}
<Grid align="stretch">
<Grid.Col span={{ base: 12, lg: 6 }}>

41
apps/edr-freight-web/portal/src/pages/MyPortalPage/actions.ts
View File

@@ -1,5 +1,7 @@
import type { Freight } from "@edr/types";
import { contractNeedsClearanceAction } from "@/components/customer-actions/deriveContractCustomerAction";
/** A pending customer action surfaced on the home "needs attention" card. */
export interface ActionItem {
id: string;
@@ -15,46 +17,11 @@ export interface ActionItem {
urgent?: boolean;
}
// Contract statuses that mean clearance is in progress (Path A or B). A queried
// document flips the contract back to AWAITING_CLEARANCE_DOCUMENTS, but the panel
// also allows re-upload while UNDER_REVIEW — so surface both as actionable.
const CLEARANCE_IN_PROGRESS_STATUSES = [
"AWAITING_CLEARANCE_DOCUMENTS",
"CLEARANCE_UNDER_REVIEW",
];
/**
* Whether a contract has a clearance step that needs the customer to upload /
* re-upload documents. Uses contract status AND clearanceStatus so a query is
* caught even if only one field reflects it. Excludes the ready / completed gates.
*/
function contractNeedsClearance(c: Freight.IContract): {
show: boolean;
urgent: boolean;
} {
const clearance = (c as { clearanceStatus?: string }).clearanceStatus;
const ready =
clearance === "CLEARANCE_READY_FOR_BOOKING" ||
clearance === "SELF_CLEARED" ||
clearance === "ACTIVE_SHIPMENT_IN_PROGRESS";
if (ready) return { show: false, urgent: false };
const awaiting =
c.status === "AWAITING_CLEARANCE_DOCUMENTS" ||
clearance === "AWAITING_DOCUMENTS";
const inProgress =
CLEARANCE_IN_PROGRESS_STATUSES.includes(c.status) ||
clearance === "AWAITING_DOCUMENTS" ||
clearance === "DOCUMENTS_UNDER_REVIEW";
return { show: inProgress, urgent: awaiting };
}
/**
* Derive the list of pending customer actions from the customer's contracts and
* bookings. A contract in AWAITING_CLEARANCE_DOCUMENTS (initial upload or a
* re-upload after a query) is flagged urgent so the home card shows an upload
* button. See {@link contractNeedsClearance}.
* button. See {@link contractNeedsClearanceAction}.
*/
export function deriveActionItems(
contracts: Freight.IContract[],
@@ -73,7 +40,7 @@ export function deriveActionItems(
});
continue;
}
const clr = contractNeedsClearance(c);
const clr = contractNeedsClearanceAction(c);
if (clr.show) {
items.push({
id: `clearance-${c.id}`,

75
apps/edr-freight-web/portal/src/pages/MyPortalPage/components/ActionNeededSection.tsx
View File

@@ -13,6 +13,7 @@ import {
import type { Freight } from "@edr/types";
import { api } from "@/services/api";
import { ModalSafeWrapper } from "@/components/customer-actions/ModalSafeWrapper";
import { paymentsService, type PaymentMethod } from "@/services/payments.service";
import { ContractClearancePanel } from "@/pages/contracts/ContractClearancePanel";
import { PaymentMethodModal } from "@/pages/bookings/BookingDetailPage/components/PaymentMethodModal";
@@ -246,43 +247,45 @@ export function ActionNeededSection({
})}
</Stack>
<Modal
opened={clearanceId !== null}
onClose={() => setClearanceId(null)}
title={
<Text fw={700} fz={16}>
Clearance documents
</Text>
}
size="xl"
radius="md"
centered
overlayProps={{ blur: 2, backgroundOpacity: 0.55 }}
>
{clearanceId && (
<ContractClearancePanel contractId={clearanceId} bare />
)}
</Modal>
<PaymentMethodModal
opened={payItem !== null}
onClose={() => {
if (!payMutation.isPending) {
setPayItem(null);
payMutation.reset();
<ModalSafeWrapper>
<Modal
opened={clearanceId !== null}
onClose={() => setClearanceId(null)}
title={
<Text fw={700} fz={16}>
Clearance documents
</Text>
}
}}
currency={undefined}
processing={payMutation.isPending}
error={
payMutation.isError
? payMutation.error instanceof Error
? payMutation.error.message
: "Could not start payment. Please try again."
: null
}
onConfirm={(method) => payMutation.mutate(method)}
/>
size="xl"
radius="md"
centered
overlayProps={{ blur: 2, backgroundOpacity: 0.55 }}
>
{clearanceId && (
<ContractClearancePanel contractId={clearanceId} bare />
)}
</Modal>
<PaymentMethodModal
opened={payItem !== null}
onClose={() => {
if (!payMutation.isPending) {
setPayItem(null);
payMutation.reset();
}
}}
currency={undefined}
processing={payMutation.isPending}
error={
payMutation.isError
? payMutation.error instanceof Error
? payMutation.error.message
: "Could not start payment. Please try again."
: null
}
onConfirm={(method) => payMutation.mutate(method)}
/>
</ModalSafeWrapper>
</Card>
);
}

57
apps/edr-freight-web/portal/src/pages/MyPortalPage/components/RecentContractsSection.tsx
View File

@@ -1,13 +1,13 @@
import { Box, Button, Group, Skeleton, Stack, Text } from "@mantine/core";
import { memo } from "react";
import { useNavigate } from "react-router-dom";
import { ArrowRight, FileSignature, Package, Plus, RefreshCw } from "lucide-react";
import { Plus } from "lucide-react";
import type { Freight } from "@edr/types";
import { ContractCustomerAction } from "@/components/customer-actions/ContractCustomerAction";
import {
ContractDocButton,
ContractStatusBadge,
} from "@/pages/contracts/contract-ui";
import { getContractBookingAction } from "@/pages/contracts/contract-booking-action";
import { Card } from "./Card";
import { EmptyState } from "./EmptyState";
@@ -64,8 +64,6 @@ export const RecentContractsSection = memo(function RecentContractsSection({
{contracts.map((c) => {
const isGeneral = c.contractKind === "GENERAL";
const isContainer = c.freightType === "CONTAINER";
const canSign = c.status === "CONTRACT_READY";
const bookingAction = getContractBookingAction(c, bookings);
return (
<Group
key={c.id}
@@ -96,52 +94,11 @@ export const RecentContractsSection = memo(function RecentContractsSection({
onClick={(e) => e.stopPropagation()}
/>
<ContractStatusBadge status={c.status} />
{canSign ? (
<Button
size="xs"
radius="md"
color="edr-green"
leftSection={<FileSignature size={13} />}
onClick={(e) => {
e.stopPropagation();
navigate(`/contracts/${c.id}`);
}}
>
Sign
</Button>
) : bookingAction.kind !== "none" ? (
<Button
size="xs"
radius="md"
color="edr-green"
leftSection={
bookingAction.kind === "rebook" ? (
<RefreshCw size={13} />
) : (
<Package size={13} />
)
}
onClick={(e) => {
e.stopPropagation();
navigate(bookingAction.to);
}}
>
{bookingAction.kind === "rebook" ? "Re-book" : "Book"}
</Button>
) : (
<Button
size="xs"
radius="md"
variant="default"
rightSection={<ArrowRight size={13} />}
onClick={(e) => {
e.stopPropagation();
navigate(`/contracts/${c.id}`);
}}
>
Open
</Button>
)}
<ContractCustomerAction
contract={c}
bookings={bookings}
size="xs"
/>
</Group>
</Group>
);

158
apps/edr-freight-web/portal/src/pages/bookings/BookingClearanceWorkflowBanner.tsx Normal file
View File

@@ -0,0 +1,158 @@
import { useState } from "react";
import { Alert, Anchor, Button, FileInput, Group, Paper, Stack, Text } from "@mantine/core";
import { AlertTriangle, Download, Receipt, Upload } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import toast from "react-hot-toast";
import type { Freight } from "@edr/types";
import { bookingsService } from "@/services/bookings.service";
import { fileViewUrl } from "@/constants/apiConfig";
import { ClearancePhaseStepper } from "../contracts/ClearancePhaseStepper";
const BORDER = "#E6ECF2";
export function BookingClearanceWorkflowBanner({
booking,
}: {
booking: Freight.IBooking;
}) {
const isPhased =
booking.customsClearingEnabled &&
booking.contractKind === "GENERAL";
const { data: clearance, refetch } = useQuery({
queryKey: ["booking-clearance", booking.id],
queryFn: () => bookingsService.getClearance(booking.id),
enabled: isPhased,
});
if (!isPhased || !clearance) return null;
const dutyPaid = clearance.milestones?.some(
(m) => m.milestoneCode === "DUTY_TAX_PAID" && m.status === "COMPLETED",
);
const dutyPending =
clearance.dutyRequired &&
clearance.dutyAdvice &&
!dutyPaid;
return (
<Paper withBorder radius="lg" p="lg" style={{ borderColor: BORDER }}>
<Stack gap="md">
<Text fw={700} size="sm">
Clearance progress
</Text>
<ClearancePhaseStepper
clearance={clearance as Freight.ContractClearanceView}
tradeDirection={booking.tradeDirection}
compact
/>
{clearance.roHold && clearance.roHoldReason ? (
<Alert color="orange" icon={<AlertTriangle size={16} />} title="Release Order on hold">
{clearance.roHoldReason}
</Alert>
) : null}
{clearance.nextAction?.actor === "CUSTOMER" ? (
<Alert color="blue" variant="light">
{clearance.nextAction.action}
</Alert>
) : null}
{dutyPending && clearance.dutyAdvice ? (
<DutyAdvicePanel
dutyAdvice={clearance.dutyAdvice}
bookingId={booking.id}
onUploaded={() => void refetch()}
/>
) : null}
{clearance.operationReady ? (
<Alert color="green" variant="light">
Clearance is complete. You may proceed to request your operation date.
</Alert>
) : null}
</Stack>
</Paper>
);
}
function DutyAdvicePanel({
dutyAdvice,
bookingId,
onUploaded,
}: {
dutyAdvice: NonNullable<Freight.ClearanceView["dutyAdvice"]>;
bookingId: string;
onUploaded: () => void;
}) {
const [file, setFile] = useState<File | null>(null);
const [loading, setLoading] = useState(false);
return (
<Paper withBorder radius="md" p="md" bg="#FFFBF0">
<Stack gap="sm">
<GroupLabel icon={Receipt} text="Duty / tax payment" />
<Text size="sm">
Amount due:{" "}
<strong>
{dutyAdvice.amount.toLocaleString()} {dutyAdvice.currency}
</strong>
{dutyAdvice.declarationSerial
? ` · Payment code: ${dutyAdvice.declarationSerial}`
: null}
</Text>
{dutyAdvice.noticeFile ? (
<Anchor
href={fileViewUrl(dutyAdvice.noticeFile.id, true)}
target="_blank"
rel="noopener noreferrer"
size="sm"
>
<Group gap={6} wrap="nowrap">
<Download size={14} />
Download duty notice ({dutyAdvice.noticeFile.name})
</Group>
</Anchor>
) : null}
<Text size="sm" c="dimmed">
Pay the amount above, then upload your payment slip so clearance can continue.
</Text>
<FileInput label="Payment slip" value={file} onChange={setFile} size="sm" />
<Button
color="orange"
loading={loading}
disabled={!file}
leftSection={<Upload size={16} />}
onClick={async () => {
if (!file) return;
setLoading(true);
try {
await bookingsService.uploadBookingClearanceDutySlip(bookingId, file);
toast.success("Payment slip uploaded");
onUploaded();
} catch (e) {
toast.error(e instanceof Error ? e.message : "Upload failed");
} finally {
setLoading(false);
}
}}
>
Submit payment slip
</Button>
</Stack>
</Paper>
);
}
function GroupLabel({ icon: Icon, text }: { icon: typeof Receipt; text: string }) {
return (
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<Icon size={16} />
<Text fw={600} size="sm">
{text}
</Text>
</div>
);
}

4
apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/ClearanceCard.tsx
View File

@@ -6,6 +6,7 @@ import type { Freight } from "@edr/types";
import { ClearanceFlow } from "@/pages/bookings/clearance/ClearanceFlow";
import { useClearanceFlow } from "@/pages/bookings/clearance/useClearanceFlow";
import { BookingClearanceWorkflowBanner } from "@/pages/bookings/BookingClearanceWorkflowBanner";
import { CardTitle, SectionCard } from "./layout";
@@ -43,7 +44,8 @@ export function ClearanceCard({ booking }: { booking: Freight.IBooking }) {
return (
<SectionCard>
<Group justify="space-between" align="center" mb="md">
<BookingClearanceWorkflowBanner booking={booking} />
<Group justify="space-between" align="center" mb="md" mt="md">
<CardTitle>Clearance documents</CardTitle>
</Group>

15
apps/edr-freight-web/portal/src/pages/bookings/EditBookingPage.tsx
View File

@@ -46,6 +46,7 @@ import {
BOOKING_DOCS_SETTING,
BookingFormInputValues,
bookingFormSchema,
filterBookableServices,
getRouteDirection,
initialBookingFormValues,
type BookingDocuments,
@@ -355,6 +356,7 @@ export default function EditBookingPage() {
const originYard = form.watch("originYard");
const destinationYard = form.watch("destinationYard");
const serviceTypeId = form.watch("serviceTypeId");
const operationType = form.watch("operationType");
const firstMileEnabled = form.watch("firstMile.enabled");
const lastMileEnabled = form.watch("lastMile.enabled");
const customsClearingEnabled = form.watch("customsClearingEnabled");
@@ -364,6 +366,12 @@ export default function EditBookingPage() {
() => referenceData?.service.find((s) => s.id === serviceTypeId),
[serviceTypeId, referenceData],
);
const bookableServices = useMemo(
() => filterBookableServices(referenceData?.service, operationType),
[referenceData, operationType],
);
const showFirstMile = Boolean(
selectedService?.includesFirstMile && firstMileEnabled,
);
@@ -636,9 +644,10 @@ export default function EditBookingPage() {
error={fieldState.error}
label="Service Type *"
placeholder="Select service type..."
data={(referenceData?.service ?? [])
.filter((s) => s.canBeBookedAlone)
.map((s) => ({ value: s.id, label: s.serviceName }))}
data={bookableServices.map((s) => ({
value: s.id,
label: s.serviceName,
}))}
/>
)}
/>

5
apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
View File

@@ -422,9 +422,8 @@ export default function NewBookingPage() {
const cargoTypeId = data.cargoType === "bulk" ? childId : undefined;
const cargoFreeText = bulkChild?.show_free_text_box
? data.cargoFreeText
: undefined;
const cargoFreeText =
data.cargoType === "bulk" ? data.cargoFreeText : undefined;
const serviceType = referenceData?.service.find(
(s) => s.id === data.serviceTypeId,

18
apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
View File

@@ -582,6 +582,24 @@ export function operationToProfileType(
return "freight_forwarder";
}
export type BookableService = Freight.BookingReferenceData["service"][number];
/**
* Services the customer may pick in the wizard. Intercity (domestic) corridors
* have no customs clearance, so customs-bundled services are excluded.
*/
export function filterBookableServices(
services: BookableService[] | undefined,
operationType: OperationType | undefined,
): BookableService[] {
if (!services) return [];
return services.filter((s) => {
if (!s.canBeBookedAlone) return false;
if (operationType === "intercity" && s.includesCustoms) return false;
return true;
});
}
export function calcWagons(containers: ContainerConfig[]) {
const Ft20Wagons = containers
.filter((c) => c.type === "20ft")

21
apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx
View File

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
import { Check, FileText, Info, Layers, Train, Truck } from "lucide-react";
import { useEffect, useRef } from "react";
import { Controller, type UseFormReturn } from "react-hook-form";
import { BookingFormInputValues, type BookingFormValues } from "./schema";
import { BookingFormInputValues, type BookingFormValues, filterBookableServices } from "./schema";
import {
fieldStyles,
OptionFieldError,
@@ -31,6 +31,7 @@ export function Step2ServiceType({
referenceData?: Freight.BookingReferenceData;
}) {
const serviceTypeId = form.watch("serviceTypeId");
const operationType = form.watch("operationType");
const serviceType = referenceData?.service.find(
(s) => s.id === serviceTypeId,
);
@@ -74,6 +75,20 @@ export function Step2ServiceType({
const showServiceSections =
serviceType != null || includesFirstMile || includesLastMile;
const bookableServices = filterBookableServices(
referenceData?.service,
operationType,
);
useEffect(() => {
const currentId = form.getValues("serviceTypeId");
if (!currentId) return;
if (!bookableServices.some((s) => s.id === currentId)) {
form.setValue("serviceTypeId", "", { shouldValidate: true });
}
}, [operationType, bookableServices, form]);
return (
<StepCard>
<StepHeader
@@ -88,9 +103,7 @@ export function Step2ServiceType({
render={({ field, fieldState }) => (
<div>
<div className="grid gap-3 sm:grid-cols-2">
{referenceData?.service
.filter((s) => s.canBeBookedAlone)
.map((s) => (
{bookableServices.map((s) => (
<ServiceTypeCard
key={s.id}
selected={field.value === s.id}

2
apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx
View File

@@ -277,7 +277,7 @@ export function Step5CargoDetails({
/>
)}
{selectedCommodity?.show_free_text_box && (
{selectedCommodity && (
<Controller
name="cargoFreeText"
control={form.control}

5
apps/edr-freight-web/portal/src/pages/bookings/payments/PayNowButton.tsx
View File

@@ -3,6 +3,7 @@ import { CreditCard } from "lucide-react";
import { Freight } from "@edr/types";
import { ModalSafeWrapper } from "@/components/customer-actions/ModalSafeWrapper";
import { PaymentMethodModal } from "../BookingDetailPage/components/PaymentMethodModal";
import { priceTotal } from "../BookingDetailPage/utils";
import { useBookingPayment } from "./useBookingPayment";
@@ -29,7 +30,7 @@ export function PayNowButton({
const pricing = booking.pricingBreakdown;
return (
<>
<ModalSafeWrapper>
<Button
size={size}
radius="md"
@@ -56,6 +57,6 @@ export function PayNowButton({
error={pay.error}
onConfirm={pay.confirm}
/>
</>
</ModalSafeWrapper>
);
}

6
apps/edr-freight-web/portal/src/pages/contracts/ClearancePhaseStepper.tsx
View File

@@ -7,10 +7,10 @@ const BRAND_GREEN = "var(--freight-brand, #0A6F4D)";
const PHASE_LABELS: Record<string, string> = {
CUSTOMER_INTAKE: "Customer docs",
GL_ET_REVIEW: "GL ET review",
GL_DJ_COLLECTION: "GL Djibouti",
GL_DJ_COLLECTION: "GL Djibouti DO",
GL_ET_OUTPUT: "Declaration",
CUSTOMER_DUTY: "Duty / tax",
GL_ET_POST_CLEARANCE: "ET clearance",
CUSTOMER_DUTY: "Duty / customer pays",
GL_ET_POST_CLEARANCE: "Transit & finalize",
GL_DJ_LOADING: "Loading",
POST_TRANSIT: "Transit",
};

11
apps/edr-freight-web/portal/src/pages/contracts/ContractClearancePanel.tsx
View File

@@ -28,6 +28,7 @@ import type { Freight } from "@edr/types";
import { isViewable } from "@edr/ui-common";
import { api } from "@/services/api";
import { fileViewUrl } from "@/constants/apiConfig";
import { ClearanceWorkflowFilesSection } from "@/components/contracts/ClearanceWorkflowFilesSection";
import { useFileViewer } from "@/hooks/useFileViewer";
import { IconSquare } from "@/pages/bookings/BookingDetailPage/components/Documents";
@@ -360,6 +361,16 @@ export function ContractClearancePanel({
</>
)}
{(clearance?.workflowFiles?.length ?? 0) > 0 ? (
<Box mt="lg">
<ClearanceWorkflowFilesSection
files={clearance!.workflowFiles!}
title="Customs workflow documents"
onView={(f) => view(f)}
/>
</Box>
) : null}
{/* Ad-hoc / additional documents. */}
{canUpload && (
<Box mt="lg">

61
apps/edr-freight-web/portal/src/pages/contracts/ContractClearanceWorkflowBanner.tsx
View File

@@ -1,11 +1,13 @@
import { useState } from "react";
import { Alert, Button, FileInput, Paper, Stack, Text } from "@mantine/core";
import { AlertTriangle, Receipt, Upload } from "lucide-react";
import { Alert, Anchor, Button, FileInput, Group, Paper, Stack, Text } from "@mantine/core";
import { AlertTriangle, Download, Receipt, Upload } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import toast from "react-hot-toast";
import type { Freight } from "@edr/types";
import { contractsService } from "@/services/contracts.service";
import { fileViewUrl } from "@/constants/apiConfig";
import { ClearanceWorkflowFilesSection } from "@/components/contracts/ClearanceWorkflowFilesSection";
import { ClearancePhaseStepper } from "./ClearancePhaseStepper";
const BORDER = "#E6ECF2";
@@ -26,14 +28,13 @@ export function ContractClearanceWorkflowBanner({
if (!isPhased || !clearance) return null;
const dutyPaid = clearance.milestones?.some(
(m) => m.milestoneCode === "DUTY_TAX_PAID" && m.status === "COMPLETED",
);
const dutyPending =
clearance.dutyRequired &&
clearance.milestones?.some(
(m) => m.milestoneCode === "DUTY_TAXES_ADVISED" && m.status === "COMPLETED",
) &&
!clearance.milestones?.some(
(m) => m.milestoneCode === "DUTY_TAX_PAID" && m.status === "COMPLETED",
);
clearance.dutyAdvice &&
!dutyPaid;
return (
<Paper withBorder radius="lg" p="lg" style={{ borderColor: BORDER }}>
@@ -59,8 +60,20 @@ export function ContractClearanceWorkflowBanner({
</Alert>
) : null}
{dutyPending ? (
<DutySlipUpload contractId={contract.id} onUploaded={() => void refetch()} />
{dutyPending && clearance.dutyAdvice ? (
<DutyAdvicePanel
dutyAdvice={clearance.dutyAdvice}
contractId={contract.id}
onUploaded={() => void refetch()}
/>
) : null}
{(clearance.workflowFiles?.length ?? 0) > 0 ? (
<ClearanceWorkflowFilesSection
files={clearance.workflowFiles!}
title="Uploaded customs documents"
onView={({ name, url }) => window.open(url, "_blank", "noopener")}
/>
) : null}
{clearance.bookingReady ? (
@@ -73,10 +86,12 @@ export function ContractClearanceWorkflowBanner({
);
}
function DutySlipUpload({
function DutyAdvicePanel({
dutyAdvice,
contractId,
onUploaded,
}: {
dutyAdvice: NonNullable<Freight.ContractClearanceView["dutyAdvice"]>;
contractId: string;
onUploaded: () => void;
}) {
@@ -87,8 +102,30 @@ function DutySlipUpload({
<Paper withBorder radius="md" p="md" bg="#FFFBF0">
<Stack gap="sm">
<GroupLabel icon={Receipt} text="Duty / tax payment" />
<Text size="sm">
Amount due:{" "}
<strong>
{dutyAdvice.amount.toLocaleString()} {dutyAdvice.currency}
</strong>
{dutyAdvice.declarationSerial
? ` · Payment code: ${dutyAdvice.declarationSerial}`
: null}
</Text>
{dutyAdvice.noticeFile ? (
<Anchor
href={fileViewUrl(dutyAdvice.noticeFile.id, true)}
target="_blank"
rel="noopener noreferrer"
size="sm"
>
<Group gap={6} wrap="nowrap">
<Download size={14} />
Download duty notice ({dutyAdvice.noticeFile.name})
</Group>
</Anchor>
) : null}
<Text size="sm" c="dimmed">
Upload your duty/tax payment slip so clearance can continue.
Pay the amount above, then upload your payment slip so clearance can continue.
</Text>
<FileInput
label="Payment slip"

141
apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx
View File

@@ -26,6 +26,7 @@ import {
ArrowLeft,
CalendarClock,
CheckCircle2,
ChevronRight,
Download,
Eye,
FileBadge,
@@ -47,6 +48,7 @@ import { Modal } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { isViewable, type ViewableFile } from "@edr/ui-common";
import type { Freight } from "@edr/types";
import { clearanceWorkflowFileLabel } from "@edr/types";
import { api } from "@/services/api";
import { contractsService } from "@/services/contracts.service";
import { fileViewUrl } from "@/constants/apiConfig";
@@ -55,7 +57,9 @@ import toast from "react-hot-toast";
import { labelForDocCode } from "@/pages/bookings/resubmit";
import { ContractClearancePanel } from "./ContractClearancePanel";
import { ContractClearanceWorkflowBanner } from "./ContractClearanceWorkflowBanner";
import { ClearanceWorkflowFilesSection } from "@/components/contracts/ClearanceWorkflowFilesSection";
import { formatRateUnit } from "./new-contract-form/unit-rates";
import { getContractBookingAction } from "./contract-booking-action";
import {
BORDER,
ContractStatusBadge,
@@ -174,6 +178,19 @@ export default function ContractDetailPage() {
(d) => d.uploadedBy === "customer" && d.reviewStatus === "QUERIED",
).length;
const showShipmentRequests =
!!contract &&
contract.contractKind === "GENERAL" &&
contract.customsClearingEnabled;
const { data: shipmentRequests = [] } = useQuery({
queryKey: ["contract-booking-requests", id],
queryFn: () => contractsService.listBookingRequests(id!),
enabled: !!id && showShipmentRequests,
});
const activeShipmentRequests = shipmentRequests.filter(
(r) => r.status === "PENDING" || r.status === "ACCEPTED",
);
const contractBookings = useMemo(
() =>
(bookingsPage?.items ?? []).filter(
@@ -254,6 +271,8 @@ export default function ContractDetailPage() {
contract.status === "CLEARANCE_READY_FOR_BOOKING";
const canBookShipment =
!customsPath && PATH_A_BOOKABLE.includes(contract.status);
const bookingAction = getContractBookingAction(contract, contractBookings);
const canRequestShipment = bookingAction.kind === "request";
// Customs + clearance finalized: GL is preparing the booking — surface a
// status notice instead of any action.
const glPreparingBooking = customsPath && clearanceFinalized;
@@ -333,6 +352,17 @@ export default function ContractDetailPage() {
Download PDF
</Button>
)}
{canRequestShipment && (
<Button
color="edr-green"
radius="md"
size="md"
leftSection={<PackagePlus size={16} />}
onClick={() => navigate(bookingAction.to)}
>
Request shipment
</Button>
)}
{canBookShipment && (
<Button
color="edr-green"
@@ -893,6 +923,22 @@ export default function ContractDetailPage() {
</Stack>
);
})}
{(clearanceView?.workflowFiles?.length ?? 0) > 0 ? (
<ClearanceWorkflowFilesSection
files={clearanceView!.workflowFiles!}
onView={view}
onDownload={async (f) => {
try {
const a = document.createElement("a");
a.href = fileViewUrl(f.id, true);
a.download = f.name;
a.click();
} catch {
toast.error("Could not download file.");
}
}}
/>
) : null}
</Stack>
)}
</Card>
@@ -900,6 +946,98 @@ export default function ContractDetailPage() {
{/* ── Bookings tab ──────────────────────────────────────────── */}
<Tabs.Panel value="bookings">
{showShipmentRequests && (
<Card
withBorder
radius="lg"
p="lg"
mb="md"
style={{ borderColor: BORDER, boxShadow: CARD_SHADOW }}
>
<Group justify="space-between" align="center" mb="md">
<SectionLabel>Shipment requests</SectionLabel>
{canRequestShipment && (
<Button
color="edr-green"
radius="md"
size="xs"
leftSection={<PackagePlus size={14} />}
onClick={() => navigate(bookingAction.to)}
>
New request
</Button>
)}
</Group>
{activeShipmentRequests.length === 0 ? (
<Text fz={13} c="dimmed">
{canRequestShipment
? "No pending shipment requests. Submit a request when you are ready to ship."
: "Shipment requests appear here once the contract is active."}
</Text>
) : (
<Stack gap={10}>
{activeShipmentRequests.map((req) => (
<Group
key={req.id}
justify="space-between"
wrap="nowrap"
p="sm"
style={{
borderRadius: 12,
border: `1px solid ${BORDER}`,
cursor: req.createdBookingId ? "pointer" : "default",
}}
onClick={() => {
if (req.createdBookingId) {
navigate(`/bookings/${req.createdBookingId}`);
}
}}
>
<Group gap={12} wrap="nowrap" style={{ minWidth: 0 }}>
<CalendarClock
size={16}
color={MUTED}
style={{ flexShrink: 0 }}
/>
<Box style={{ minWidth: 0 }}>
<Text fz={14} fw={700} style={{ color: INK }} truncate>
{req.reference}
</Text>
<Text fz={12} c="dimmed">
{req.scheduledDate
? `Preferred date: ${req.scheduledDate}`
: "No preferred date"}
{req.notes ? ` · ${req.notes}` : ""}
</Text>
</Box>
</Group>
<Group gap="xs" wrap="nowrap">
<Badge
size="sm"
radius="md"
variant="light"
color={
req.status === "ACCEPTED"
? "teal"
: req.status === "REJECTED"
? "red"
: "yellow"
}
>
{req.status === "ACCEPTED" && req.createdBookingId
? "Booking created"
: req.status}
</Badge>
{req.createdBookingId ? (
<ChevronRight size={16} color={MUTED} />
) : null}
</Group>
</Group>
))}
</Stack>
)}
</Card>
)}
<Card
withBorder
radius="lg"
@@ -1142,7 +1280,8 @@ function DocFileRow({
file: ContractFile;
onView: (f: ViewableFile) => void;
}) {
const kind = labelForDocCode(file.code);
const kind =
clearanceWorkflowFileLabel(file.code) ?? labelForDocCode(file.code);
const { ext, color } = fileTypeChip(file.name, file.mimeType);
const viewable = isViewable({
name: file.name,

122
apps/edr-freight-web/portal/src/pages/contracts/ContractsList.tsx
View File

@@ -19,27 +19,20 @@ import {
CheckCircle2,
ChevronLeft,
ChevronRight,
Eye,
FileSignature,
FileStack,
Inbox,
Package,
PackagePlus,
PencilLine,
Plus,
RotateCcw,
Search,
Timer,
Upload,
Weight,
X,
type LucideIcon,
} from "lucide-react";
import { api } from "@/services/api";
import { ContractCustomerAction } from "@/components/customer-actions/ContractCustomerAction";
import type { ContractListFilter } from "@/services/contracts.service";
import type { Freight } from "@edr/types";
import { getContractBookingAction } from "./contract-booking-action";
import { usePagination } from "@edr/ui-common";
import {
BORDER,
@@ -60,89 +53,6 @@ function primaryRoute(contract: Freight.IContract) {
};
}
// Customs (Path B) statuses where the customer still needs to upload / manage
// clearance docs. Once finalized (CLEARANCE_READY_FOR_BOOKING) the row falls
// through to the Book action instead.
const PATH_B_CLEARANCE_STATUSES = [
"AWAITING_CLEARANCE_DOCUMENTS",
"CLEARANCE_UNDER_REVIEW",
];
interface RowAction {
label: string;
to: string;
primary: boolean;
icon: LucideIcon;
}
/** The single most relevant next action for a customer's contract row. */
function getCustomerRowAction(
contract: Freight.IContract,
bookings: Freight.IBooking[],
): RowAction {
const id = contract.id;
if (contract.status === "CONTRACT_READY") {
return {
label: "View & sign",
to: `/contracts/${id}/view`,
primary: true,
icon: FileSignature,
};
}
if (contract.status === "CHANGES_REQUESTED") {
return {
label: "Edit & resubmit",
to: `/contracts/${id}`,
primary: true,
icon: PencilLine,
};
}
if (
contract.customsClearingEnabled &&
PATH_B_CLEARANCE_STATUSES.includes(contract.status)
) {
return {
label: "Upload clearance",
to: `/contracts/${id}/clearance`,
primary: true,
icon: Upload,
};
}
// Customs (Path B), clearance finalized: Global Logistics creates the booking
// on the customer's behalf — the customer only views the contract.
if (
contract.customsClearingEnabled &&
["CLEARANCE_READY_FOR_BOOKING", "ACTIVE_SHIPMENT_IN_PROGRESS"].includes(
contract.status,
)
) {
return {
label: "View",
to: `/contracts/${id}`,
primary: false,
icon: Eye,
};
}
const booking = getContractBookingAction(contract, bookings);
if (booking.kind === "book") {
return {
label: "Book shipment",
to: booking.to,
primary: true,
icon: PackagePlus,
};
}
if (booking.kind === "rebook") {
return {
label: "Re-book shipment",
to: booking.to,
primary: true,
icon: RotateCcw,
};
}
return { label: "View", to: `/contracts/${id}`, primary: false, icon: Eye };
}
export default function ContractsList() {
const navigate = useNavigate();
const { pagination, setPagination } = usePagination({ pageSize: 10 });
@@ -473,7 +383,6 @@ export default function ContractsList() {
const tradeLabel = dir
? dir.charAt(0) + dir.slice(1).toLowerCase()
: "—";
const action = getCustomerRowAction(c, bookings);
return (
<Table.Tr
key={c.id}
@@ -565,31 +474,12 @@ export default function ContractsList() {
contract={c}
onClick={(e) => e.stopPropagation()}
/>
<Button
<ContractCustomerAction
contract={c}
bookings={bookings}
size="sm"
radius="md"
h={34}
variant={action.primary ? "filled" : "light"}
color="edr-green"
leftSection={<action.icon size={15} />}
onClick={(e) => {
e.stopPropagation();
navigate(action.to);
}}
styles={{
root: {
fontWeight: 600,
fontSize: 13,
paddingInline: 14,
whiteSpace: "nowrap",
boxShadow: action.primary
? "0 1px 2px rgba(14,163,113,0.25)"
: "none",
},
}}
>
{action.label}
</Button>
listStyle
/>
</Group>
</Table.Td>
</Table.Tr>

114
apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx
View File

@@ -45,8 +45,8 @@ import { formatRateUnit } from "./new-contract-form/unit-rates";
import {
ShipmentFormInputValues,
ShipmentFormValues,
createShipmentFormSchema,
initialShipmentFormValues,
shipmentFormSchema,
} from "./new-shipment-form/schema";
import { computeShipmentTotal } from "./new-shipment-form/total";
import { ContractCapacityNotice } from "./new-shipment-form/ContractCapacityNotice";
@@ -58,37 +58,11 @@ type ShipmentForm = ReturnType<
export default function NewShipmentPage() {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const queryClient = useQueryClient();
// Holds the validated values awaiting price confirmation. When set, the price
// modal is open. The customer confirms (books) or rejects (back to the form
// to edit and re-book).
const [pendingValues, setPendingValues] = useState<ShipmentFormValues | null>(
null,
);
const { data: contract, isLoading } = useQuery(
api.contracts.get.queryOptions({ input: { id: id! }, enabled: !!id }),
);
const form = useForm<ShipmentFormInputValues, any, ShipmentFormValues>({
defaultValues: initialShipmentFormValues,
resolver: zodResolver(shipmentFormSchema),
mode: "onChange",
});
const submitMutation = useMutation({
mutationFn: (dto: Freight.CreateBookingUnderContractDto) =>
api.contracts.createBookingUnderContract.call({ id: id!, dto }),
onSuccess: (booking) => {
queryClient.invalidateQueries({ queryKey: api.bookings.list.queryKey() });
queryClient.invalidateQueries({
queryKey: api.contracts.get.queryKey({ id: id! }),
});
navigate(`/bookings/${booking.id}`);
},
});
if (isLoading) {
return (
<Center mih={400} p="xl">
@@ -112,9 +86,6 @@ export default function NewShipmentPage() {
);
}
// Customs (Path B) contracts are booked by Global Logistics on behalf of the
// customer — the customer never books one himself. Block the form entirely and
// point back to the clearance workspace.
if (contract.customsClearingEnabled) {
return (
<Box p="xl">
@@ -140,10 +111,60 @@ export default function NewShipmentPage() {
);
}
return <NewShipmentBookingForm contract={contract} contractId={id!} />;
}
function bulkUnitOfMeasure(
contract: Freight.IContract,
): "PER_TON" | "PER_ITEM" {
const hasPerItem = contract.pricingBreakdown?.lineItems?.some(
(li) => li.unit === "per_item",
);
return hasPerItem ? "PER_ITEM" : "PER_TON";
}
function NewShipmentBookingForm({
contract,
contractId,
}: {
contract: Freight.IContract;
contractId: string;
}) {
const navigate = useNavigate();
const queryClient = useQueryClient();
const [pendingValues, setPendingValues] = useState<ShipmentFormValues | null>(
null,
);
const form = useForm<ShipmentFormInputValues, any, ShipmentFormValues>({
defaultValues: initialShipmentFormValues,
resolver: zodResolver(
createShipmentFormSchema({
isContainer: contract.freightType === "CONTAINER",
isHazardous: contract.isHazardous ?? false,
isReefer: contract.isReefer ?? false,
unitOfMeasure: bulkUnitOfMeasure(contract),
}),
),
mode: "onChange",
});
const submitMutation = useMutation({
mutationFn: (dto: Freight.CreateBookingUnderContractDto) =>
api.contracts.createBookingUnderContract.call({ id: contractId, dto }),
onSuccess: (booking) => {
queryClient.invalidateQueries({ queryKey: api.bookings.list.queryKey() });
queryClient.invalidateQueries({
queryKey: api.contracts.get.queryKey({ id: contractId }),
});
navigate(`/bookings/${booking.id}`);
},
});
function buildDto(
values: ShipmentFormValues,
): Freight.CreateBookingUnderContractDto {
const isContainer = contract!.freightType === "CONTAINER";
const isContainer = contract.freightType === "CONTAINER";
return {
...(values.contractRouteId
? { contractRouteId: values.contractRouteId }
@@ -168,7 +189,7 @@ export default function NewShipmentPage() {
: {
bulkLines: [
{
cargoTypeId: contract!.cargoScope?.[0]?.cargoTypeId ?? null,
cargoTypeId: contract.cargoScope?.[0]?.cargoTypeId ?? null,
cargoWeightTons: values.cargoWeightTons
? Number(values.cargoWeightTons)
: undefined,
@@ -177,6 +198,8 @@ export default function NewShipmentPage() {
: undefined,
hazardousQuantity:
Number(values.bulkHazardousQuantity || 0) || undefined,
reeferQuantity:
Number(values.bulkReeferQuantity || 0) || undefined,
},
],
}),
@@ -568,8 +591,9 @@ function ScheduleStep({
render={({ field, fieldState }) => (
<Box>
<StepLabel>Shipment day *</StepLabel>
<Box mt={10}>
<Box mt={10} w="100%">
<OperationDatePicker
fullWidth
availableDays={availableDays ?? []}
isLoading={isLoading}
value={field.value ?? ""}
@@ -721,6 +745,24 @@ function CargoStep({
)}
/>
)}
{contract.isReefer && (
<Controller
name="bulkReeferQuantity"
control={form.control}
render={({ field, fieldState }) => (
<TextInput
{...field}
type="number"
label="Refrigerated quantity"
min={0}
step={1}
error={fieldState.error?.message}
radius={10}
styles={fieldStyles}
/>
)}
/>
)}
</Stack>
</StepCard>
);
@@ -805,12 +847,13 @@ function ContainerLineEditor({
<Controller
name={`containers.${index}.hazardousQuantity`}
control={form.control}
render={({ field }) => (
render={({ field, fieldState }) => (
<TextInput
{...field}
type="number"
label="Hazardous qty"
min={0}
error={fieldState.error?.message}
radius={10}
styles={fieldStyles}
/>
@@ -821,12 +864,13 @@ function ContainerLineEditor({
<Controller
name={`containers.${index}.reeferQuantity`}
control={form.control}
render={({ field }) => (
render={({ field, fieldState }) => (
<TextInput
{...field}
type="number"
label="Reefer qty"
min={0}
error={fieldState.error?.message}
radius={10}
styles={fieldStyles}
/>

146
apps/edr-freight-web/portal/src/pages/contracts/NewShipmentRequestPage.tsx Normal file
View File

@@ -0,0 +1,146 @@
import { useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useMutation, useQuery } from "@tanstack/react-query";
import {
Box,
Button,
Group,
Loader,
NumberInput,
Paper,
Stack,
Text,
Textarea,
Title,
} from "@mantine/core";
import { ArrowLeft, Send } from "lucide-react";
import toast from "react-hot-toast";
import type { Freight } from "@edr/types";
import { contractsService } from "@/services/contracts.service";
import { OperationDatePicker } from "@edr/ui-common";
const BORDER = "#E6ECF2";
export default function NewShipmentRequestPage() {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const [scheduledDate, setScheduledDate] = useState<Date | null>(null);
const [quantity, setQuantity] = useState<number | string>(1);
const [notes, setNotes] = useState("");
const { data: contract, isLoading } = useQuery({
queryKey: ["contract", id],
queryFn: () => contractsService.get(id!),
enabled: Boolean(id),
});
const { data: capacity } = useQuery({
queryKey: ["contract-capacity", id],
queryFn: () => contractsService.getCapacity(id!),
enabled: Boolean(id) && contract?.contractKind === "GENERAL",
});
const submit = useMutation({
mutationFn: (dto: Freight.CreateBookingRequestDto) =>
contractsService.submitBookingRequest(id!, dto),
onSuccess: () => {
toast.success("Shipment request submitted");
navigate(`/contracts/${id}`);
},
onError: (e: Error) => toast.error(e.message || "Could not submit request"),
});
if (isLoading || !contract) {
return (
<Group justify="center" py={80}>
<Loader color="teal" />
</Group>
);
}
const isContainer = contract.freightType === "CONTAINER";
const route = contract.routes?.[0];
const handleSubmit = () => {
const dto: Freight.CreateBookingRequestDto = {
contractRouteId: route?.id,
scheduledDate: scheduledDate?.toISOString(),
notes: notes.trim() || undefined,
};
if (isContainer) {
const size = contract.cargoScope?.[0]?.containerSize ?? "20FT";
dto.containers = [
{
containerSize: size,
quantity: Number(quantity) || 1,
},
];
} else {
dto.bulk = {
cargoTypeId: contract.cargoScope?.[0]?.cargoTypeId ?? null,
cargoWeightTons: Number(quantity) || undefined,
};
}
submit.mutate(dto);
};
return (
<Box style={{ padding: "28px 32px 40px", maxWidth: 720, margin: "0 auto" }}>
<Stack gap="lg">
<Group gap="md">
<Button variant="subtle" color="gray" onClick={() => navigate(`/contracts/${id}`)}>
<ArrowLeft size={18} />
</Button>
<div>
<Title order={3}>Request shipment</Title>
<Text size="sm" c="dimmed">
{contract.reference} — Global Logistics will review and create your booking.
</Text>
</div>
</Group>
<Paper withBorder radius="lg" p="xl" style={{ borderColor: BORDER }}>
<Stack gap="md">
<OperationDatePicker
label="Preferred shipment date"
value={scheduledDate}
onChange={setScheduledDate}
/>
<NumberInput
label={isContainer ? "Number of containers" : "Cargo weight (tons)"}
value={quantity}
onChange={setQuantity}
min={1}
/>
{capacity?.length ? (
<Text size="xs" c="dimmed">
Remaining capacity is shown on the contract — GL will validate your request.
</Text>
) : null}
<Textarea
label="Notes (optional)"
value={notes}
onChange={(e) => setNotes(e.currentTarget.value)}
minRows={2}
/>
<Button
color="teal"
leftSection={<Send size={16} />}
loading={submit.isPending}
onClick={handleSubmit}
>
Submit shipment request
</Button>
</Stack>
</Paper>
</Stack>
</Box>
);
}

17
apps/edr-freight-web/portal/src/pages/contracts/contract-booking-action.ts
View File

@@ -15,7 +15,7 @@ export const TERMINAL_BOOKING_STATUSES = [
/** Path A statuses where a customer (no customs) may book against the contract. */
const PATH_A_BOOKABLE = ["FULLY_EXECUTED", "CONTRACT_ACTIVE"];
export type ContractBookingActionKind = "book" | "rebook" | "none";
export type ContractBookingActionKind = "book" | "rebook" | "request" | "none";
export interface ContractBookingAction {
kind: ContractBookingActionKind;
@@ -35,8 +35,19 @@ export function getContractBookingAction(
contract: Freight.IContract,
bookings: Freight.IBooking[],
): ContractBookingAction {
// Customs (Path B) contracts are booked by Global Logistics on behalf of the
// customer — the customer never gets a Book button for them.
// GENERAL + customs: customer submits a shipment request; GL creates the booking.
if (
contract.customsClearingEnabled &&
contract.contractKind === "GENERAL" &&
contract.status === "CONTRACT_ACTIVE"
) {
return {
kind: "request",
to: `/contracts/${contract.id}/shipment-requests/new`,
};
}
// Other customs (ONE_TIME): booked by GL — no customer action.
if (contract.customsClearingEnabled) return { kind: "none", to: "" };
if (!PATH_A_BOOKABLE.includes(contract.status)) return { kind: "none", to: "" };

1
apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/helpers.ts
View File

@@ -6,4 +6,5 @@ export {
operationToTradeDirection,
operationToProfileType,
getRouteDirection,
filterBookableServices,
} from "@/pages/bookings/new-booking-form/schema";

6
apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/schema.ts
View File

@@ -252,6 +252,12 @@ export const contractFormSchema = z
path: ["cargoTypePath"],
message: "Select a commodity.",
});
} else if (!data.cargoFreeText?.trim()) {
ctx.addIssue({
code: "custom",
path: ["cargoFreeText"],
message: "Describe the cargo.",
});
}
}
});

14
apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/step2-service-type.tsx
View File

@@ -14,6 +14,7 @@ import {
import { useEffect, useMemo, useRef } from "react";
import { Controller, type UseFormReturn } from "react-hook-form";
import { ContractFormInputValues, type ContractFormValues } from "./schema";
import { filterBookableServices } from "./helpers";
import { fieldStyles, StepLabel } from "./shared";
import { PaymentCurrencyField } from "./payment-currency-field";
import { LocationPicker } from "@/pages/bookings/new-booking-form/LocationPicker";
@@ -235,6 +236,7 @@ export function Step2ServiceType({
referenceData?: Freight.BookingReferenceData;
}) {
const serviceTypeId = form.watch("serviceTypeId");
const operationType = form.watch("operationType");
const serviceType = referenceData?.service.find(
(s) => s.id === serviceTypeId,
);
@@ -292,10 +294,18 @@ export function Step2ServiceType({
serviceType != null || includesFirstMile || includesLastMile;
const standaloneServices = useMemo(
() => (referenceData?.service ?? []).filter((s) => s.canBeBookedAlone),
[referenceData],
() => filterBookableServices(referenceData?.service, operationType),
[referenceData, operationType],
);
useEffect(() => {
const currentId = form.getValues("serviceTypeId");
if (!currentId) return;
if (!standaloneServices.some((s) => s.id === currentId)) {
form.setValue("serviceTypeId", "", { shouldValidate: true });
}
}, [operationType, standaloneServices, form]);
return (
<Stack gap={18}>
<Controller

18
apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/step3-cargo-scope.tsx
View File

@@ -11,6 +11,7 @@ import {
Stack,
Switch,
Text,
TextInput,
} from "@mantine/core";
import type { Freight } from "@edr/types";
import {
@@ -203,6 +204,23 @@ export function Step3CargoScope({
)}
/>
)}
{parentId && commodityOptions.length > 0 && (
<Controller
name="cargoFreeText"
control={form.control}
render={({ field, fieldState }) => (
<TextInput
{...field}
label="Cargo description *"
placeholder="e.g. Charcoal, Wheat, etc."
error={fieldState.error?.message}
radius={10}
styles={fieldStyles}
/>
)}
/>
)}
</Stack>
)}

5
apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/step8-review.tsx
View File

@@ -353,6 +353,11 @@ export function Step8Review({
value={
<>
{cargoValue || "—"}
{values.cargoType === "bulk" && values.cargoFreeText?.trim() && (
<Text fz="sm" c="dimmed" mt={4}>
{values.cargoFreeText}
</Text>
)}
{values.cargoType === "container" &&
(values.enabledContainerSizes ?? []).length > 0 && (
<Group gap={6} mt={6}>

137
apps/edr-freight-web/portal/src/pages/contracts/new-shipment-form/schema.ts
View File

@@ -14,6 +14,13 @@ export const SHIPMENT_STEPS = [
{ id: 3, label: "Review", short: "Review" },
] as const;
export interface ShipmentValidationContext {
isContainer: boolean;
isHazardous: boolean;
isReefer: boolean;
unitOfMeasure?: "PER_TON" | "PER_ITEM";
}
const containerUnitSchema = z.object({
containerNumber: z.string().min(1, "Container number is required."),
sealNumber: z.string().default(""),
@@ -34,38 +41,109 @@ const containerLineSchema = z.object({
units: z.array(containerUnitSchema).default([]),
});
export const shipmentFormSchema = z
.object({
contractRouteId: z.string().default(""),
scheduledDate: z.string().default(""),
// Container shipment lines (one per size). Empty for bulk contracts.
containers: z.array(containerLineSchema).default([]),
// Bulk shipment amount — tons or item count depending on the commodity.
cargoWeightTons: z.string().default(""),
itemCount: z.string().default(""),
bulkHazardousQuantity: z.string().default("0"),
notes: z.string().default(""),
})
.superRefine((data, ctx) => {
const shipmentFormBase = z.object({
contractRouteId: z.string().default(""),
scheduledDate: z.string().default(""),
containers: z.array(containerLineSchema).default([]),
cargoWeightTons: z.string().default(""),
itemCount: z.string().default(""),
bulkHazardousQuantity: z.string().default("0"),
bulkReeferQuantity: z.string().default("0"),
notes: z.string().default(""),
});
export function createShipmentFormSchema(ctx: ShipmentValidationContext) {
return shipmentFormBase.superRefine((data, refineCtx) => {
if (!data.scheduledDate.trim()) {
ctx.addIssue({
refineCtx.addIssue({
code: "custom",
path: ["scheduledDate"],
message: "Select a shipment date.",
});
}
data.containers.forEach((line, i) => {
const qty = Number(line.quantity || 0);
// Each container must have one unit with a number + VGM.
if (qty >= 1 && line.units.length < qty) {
ctx.addIssue({
code: "custom",
path: ["containers", i, "units"],
message: `Enter details for all ${qty} container(s).`,
});
}
});
if (ctx.isContainer) {
data.containers.forEach((line, i) => {
const qty = Number(line.quantity || 0);
if (qty >= 1 && line.units.length < qty) {
refineCtx.addIssue({
code: "custom",
path: ["containers", i, "units"],
message: `Enter details for all ${qty} container(s).`,
});
}
if (ctx.isHazardous) {
const h = Number(line.hazardousQuantity || 0);
if (h > qty) {
refineCtx.addIssue({
code: "custom",
path: ["containers", i, "hazardousQuantity"],
message: `Can't exceed the ${qty} container(s) in this line.`,
});
}
}
if (ctx.isReefer) {
const r = Number(line.reeferQuantity || 0);
if (r > qty) {
refineCtx.addIssue({
code: "custom",
path: ["containers", i, "reeferQuantity"],
message: `Can't exceed the ${qty} container(s) in this line.`,
});
}
}
});
} else {
const bulkCap =
ctx.unitOfMeasure === "PER_ITEM"
? Number(data.itemCount || 0)
: Number(data.cargoWeightTons || 0);
const boundBulkPortion = (
on: boolean,
raw: string,
path: "bulkHazardousQuantity" | "bulkReeferQuantity",
noun: string,
) => {
if (!on) return;
const v = Number(raw || 0);
if (raw && !Number.isNaN(v) && bulkCap > 0 && v > bulkCap) {
refineCtx.addIssue({
code: "custom",
path: [path],
message: `Can't exceed the cargo quantity (${bulkCap}).`,
});
} else if (on && raw && !Number.isNaN(v) && v < 0) {
refineCtx.addIssue({
code: "custom",
path: [path],
message: `Enter a valid ${noun} quantity.`,
});
}
};
boundBulkPortion(
ctx.isHazardous,
data.bulkHazardousQuantity,
"bulkHazardousQuantity",
"hazardous",
);
boundBulkPortion(
ctx.isReefer,
data.bulkReeferQuantity,
"bulkReeferQuantity",
"refrigerated",
);
}
});
}
/** Default schema for type inference; runtime uses createShipmentFormSchema. */
export const shipmentFormSchema = createShipmentFormSchema({
isContainer: false,
isHazardous: false,
isReefer: false,
});
export type ShipmentFormValues = z.infer<typeof shipmentFormSchema>;
export type ShipmentFormInputValues = z.input<typeof shipmentFormSchema>;
@@ -77,6 +155,7 @@ export const initialShipmentFormValues: DeepPartial<ShipmentFormValues> = {
cargoWeightTons: "",
itemCount: "",
bulkHazardousQuantity: "0",
bulkReeferQuantity: "0",
notes: "",
};
@@ -85,7 +164,13 @@ export const shipmentStepFields: Record<
Array<Path<ShipmentFormValues>>
> = {
0: ["contractRouteId"],
1: ["containers", "cargoWeightTons", "itemCount", "bulkHazardousQuantity"],
1: [
"containers",
"cargoWeightTons",
"itemCount",
"bulkHazardousQuantity",
"bulkReeferQuantity",
],
2: ["scheduledDate"],
3: ["notes"],
};

26
apps/edr-freight-web/portal/src/pages/contracts/new-shipment-form/total.ts
View File

@@ -99,6 +99,32 @@ export function computeShipmentTotal(
amount: rate.unitPrice * qty,
});
}
const hazardQty = Number(values.bulkHazardousQuantity || 0);
const reeferQty = Number(values.bulkReeferQuantity || 0);
if (contract.isHazardous && hazardQty > 0) {
const hz = rateFor((i) => i.conditionalOn === "is_hazardous");
if (hz) {
lines.push({
label: hz.label,
unitPrice: hz.unitPrice,
unit: hz.unit,
quantity: hazardQty,
amount: hz.unitPrice * hazardQty,
});
}
}
if (contract.isReefer && reeferQty > 0) {
const rf = rateFor((i) => i.conditionalOn === "is_reefer");
if (rf) {
lines.push({
label: rf.label,
unitPrice: rf.unitPrice,
unit: rf.unit,
quantity: reeferQty,
amount: rf.unitPrice * reeferQty,
});
}
}
}
const total = lines.reduce((s, l) => s + l.amount, 0);

12
apps/edr-freight-web/portal/src/services/bookings.service.ts
View File

@@ -224,6 +224,18 @@ export const bookingsService = {
return data.data;
},
uploadBookingClearanceDutySlip: async (
id: string,
file: File,
): Promise<Freight.IBooking> => {
const form = new FormData();
form.append("file", file);
const { data } = await client.post(`/api/bookings/${id}/clearance/duty-slip`, form, {
headers: { "Content-Type": "multipart/form-data" },
});
return data.data ?? data;
},
getContractView: async (id: string): Promise<ContractView> => {
const { data } = await client.get(B.CONTRACT_VIEW(id));
return data.data ?? data;

18
apps/edr-freight-web/portal/src/services/contracts.service.ts
View File

@@ -258,6 +258,24 @@ export const contractsService = {
return data.data ?? data;
},
listBookingRequests: async (id: string): Promise<Freight.IBookingRequest[]> => {
const { data } = await client.get(C.BOOKING_REQUESTS(id));
return data.data ?? data;
},
submitBookingRequest: async (
id: string,
dto: Freight.CreateBookingRequestDto,
): Promise<Freight.IBookingRequest> => {
const { data } = await client.post(C.BOOKING_REQUESTS(id), dto);
return data.data ?? data;
},
cancelBookingRequest: async (reqId: string): Promise<Freight.IBookingRequest> => {
const { data } = await client.post(C.BOOKING_REQUEST_CANCEL(reqId), {});
return data.data ?? data;
},
// ── Booking under contract (Path A customer) ──
createBookingUnderContract: async (
id: string,