Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-30 11:08:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #962 from Tria-plc/freight_feature/usermanagement

Browse Source 
Freight feature/usermanagement
This commit is contained in:
marshal
2026-07-26 11:12:23 +03:00
committed by GitHub
parent 083899d912 9a1c8e5603
commit 48873890a4
95 changed files with 3521 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,132 @@
import { Alert, Button, Group, Paper, Stack, Text } from "@mantine/core";
import { DateInput } from "@mantine/dates";
import { AlertTriangle, Send } from "lucide-react";
import { useState } from "react";
import { Link } from "react-router-dom";
import toast from "react-hot-toast";
import { bookingsService } from "@/services/bookings.service";
export interface BookingChangesRequestedAlertProps {
bookingId: string;
reference?: string | null;
/** Operations' note — what has to change before this can go back to them. */
note?: string | null;
/** Shipment day the booking currently holds; the resubmit default. */
scheduledDate?: string | null;
/** GL Ethiopia owns customs bookings, so only they get the resubmit control. */
canResubmit: boolean;
onResubmitted?: () => void;
}
/**
* Operations sent a GL-created booking back for changes.
*
* The customer cannot act on this — GL created the booking on their behalf — so
* the note and the way out both live here, on the page GL works from. Resubmit
* re-requests operation on the chosen shipment day; the server re-checks the day
* has a departure that can carry the cargo and refuses with the reason if not.
*/
export function BookingChangesRequestedAlert({
bookingId,
reference,
note,
scheduledDate,
canResubmit,
onResubmitted,
}: BookingChangesRequestedAlertProps) {
const [day, setDay] = useState<Date | null>(
scheduledDate ? new Date(scheduledDate) : null,
);
const [sending, setSending] = useState(false);
const resubmit = async () => {
if (!day) return;
setSending(true);
try {
await bookingsService.proceedToOperation(bookingId, day.toISOString());
toast.success("Sent back to Operations for review");
onResubmitted?.();
} catch {
// The http interceptor already toasts the server's own reason (no
// departure that day, no wagon that can carry the cargo, export train
// full…) — a second toast here would just duplicate it.
} finally {
setSending(false);
}
};
return (
<Alert
color="red"
radius="md"
icon={<AlertTriangle size={16} />}
title={`Operations returned booking ${reference ?? ""} for changes`.trim()}
>
<Stack gap="sm" align="flex-start">
{note ? (
<Paper
withBorder
radius="md"
p="sm"
bg="red.0"
style={{ borderColor: "var(--mantine-color-red-3)", width: "100%" }}
>
<Text size="xs" fw={700} c="red.9" tt="uppercase" mb={4}>
What Operations asked for
</Text>
<Text size="sm" style={{ whiteSpace: "pre-wrap" }}>
{note}
</Text>
</Paper>
) : (
<Text size="sm">
Operations returned this booking without a note — contact them for
the detail before resubmitting.
</Text>
)}
<Text size="sm">
This booking was created by GL Ethiopia, so the customer cannot fix it.
Make the correction Operations asked for, then send it back for review.{" "}
<Text
component={Link}
to={`/dashboard/bookings/${bookingId}/clearance`}
inherit
fw={600}
c="red.8"
>
Open the booking →
</Text>
</Text>
{canResubmit ? (
<Group gap="sm" align="flex-end" wrap="wrap">
<DateInput
label="Shipment day"
description="Keep the day or pick another with an open departure"
value={day}
onChange={(v) => setDay(v ? new Date(v) : null)}
minDate={new Date()}
size="sm"
w={230}
/>
<Button
color="red"
radius="md"
size="sm"
loading={sending}
disabled={!day}
leftSection={<Send size={15} />}
onClick={() => void resubmit()}
>
Resubmit to Operations
</Button>
</Group>
) : null}
</Stack>
</Alert>
);
}
export default BookingChangesRequestedAlert;

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

@@ -1,5 +1,5 @@
import { useMemo, useState } from "react";
import { Check, ShieldCheck, X } from "lucide-react";
import { Check, Flame, ShieldCheck, X } from "lucide-react";
import {
Stack,
Group,
@@ -14,10 +14,22 @@ import {
import type { Freight } from "@edr/types";
import { formatContractApprovalProgress } from "@/features/contracts/contract-approval-progress";
import { HazardDeclarationPanel } from "./HazardDeclarationPanel";
import { SectionCard } from "@/components/bookings/detail/SectionCard";
import type { useContractMutations } from "@/hooks/contracts/useContracts";
import { useAuth } from "@/auth/useAuth";
import { canApproveContractStep } from "@/lib/permissions";
import {
canApproveContractStep,
CONTRACT_APPROVAL_ROLE_LABELS,
HAZARDOUS_APPROVAL_ROLE_PERMISSION,
} from "@/lib/permissions";
/** Chain roles that exist only because the contract carries dangerous goods. */
const isHazardStep = (requiredRole: string): boolean =>
requiredRole in HAZARDOUS_APPROVAL_ROLE_PERMISSION;
const roleLabel = (requiredRole: string): string =>
CONTRACT_APPROVAL_ROLE_LABELS[requiredRole] ?? requiredRole;
type Mutations = ReturnType<typeof useContractMutations>;
@@ -126,7 +138,7 @@ export function ContractApprovalStepsCard({
const subtitle =
summary.detail ||
(nextPending
? `Next: ${nextPending.requiredRole} · step ${nextPending.stepOrder}`
? `Next: ${roleLabel(nextPending.requiredRole)} · step ${nextPending.stepOrder}`
: steps.length
? "All steps complete"
: "Accept submission to begin");
@@ -196,7 +208,7 @@ export function ContractApprovalStepsCard({
<Text size="sm" c="dimmed">
You are about to approve the{" "}
<Text span fw={600} c="dark">
{pendingStep?.requiredRole}
{roleLabel(pendingStep?.requiredRole ?? "")}
</Text>{" "}
step for contract{" "}
<Text span fw={600} c="dark">
@@ -204,6 +216,9 @@ export function ContractApprovalStepsCard({
</Text>
. This action cannot be undone from this screen.
</Text>
{pendingStep && isHazardStep(pendingStep.requiredRole) && (
<HazardDeclarationPanel contract={contract} />
)}
<Group justify="flex-end" gap="sm">
<Button variant="default" radius="md" onClick={closeApprove}>
Cancel
@@ -241,7 +256,7 @@ export function ContractApprovalStepsCard({
{ value: "CUSTOMER", label: "Customer — must resubmit" },
...returnableSteps.map((s) => ({
value: s.id,
label: `${s.requiredRole} — step ${s.stepOrder} re-approves`,
label: `${roleLabel(s.requiredRole)} — step ${s.stepOrder} re-approves`,
})),
]}
/>
@@ -254,7 +269,7 @@ export function ContractApprovalStepsCard({
</Text>{" "}
will go back to the{" "}
<Text span fw={600} c="dark">
{targetStep?.requiredRole}
{roleLabel(targetStep?.requiredRole ?? "")}
</Text>{" "}
step. That approver fixes the contract and approves again, and
every later step re-approves in order. The customer is not
@@ -264,7 +279,7 @@ export function ContractApprovalStepsCard({
<Text size="sm" c="dimmed">
Rejecting the{" "}
<Text span fw={600} c="dark">
{rejectStepRow?.requiredRole}
{roleLabel(rejectStepRow?.requiredRole ?? "")}
</Text>{" "}
step rejects contract{" "}
<Text span fw={600} c="dark">
@@ -300,7 +315,7 @@ export function ContractApprovalStepsCard({
onClick={runReject}
>
{sendBack
? `Send back to ${targetStep?.requiredRole ?? "step"}`
? `Send back to ${targetStep ? roleLabel(targetStep.requiredRole) : "step"}`
: "Reject contract"}
</Button>
</Group>
@@ -333,6 +348,7 @@ function StepRow({
: isNext
? "edr-green"
: "gray";
const hazard = isHazardStep(step.requiredRole);
return (
<Group
@@ -343,11 +359,19 @@ function StepRow({
py="xs"
style={{
borderRadius: 8,
border: "1px solid var(--mantine-color-gray-2)",
borderLeft: isNext
? "3px solid var(--freight-brand)"
border: hazard
? "1px solid #F3D5D0"
: "1px solid var(--mantine-color-gray-2)",
background: isNext ? "var(--mantine-color-gray-0)" : "white",
borderLeft: isNext
? `3px solid ${hazard ? "#C0392B" : "var(--freight-brand)"}`
: hazard
? "1px solid #F3D5D0"
: "1px solid var(--mantine-color-gray-2)",
background: hazard
? "#FEF7F6"
: isNext
? "var(--mantine-color-gray-0)"
: "white",
}}
>
<Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
@@ -371,9 +395,23 @@ function StepRow({
{step.stepOrder}
</Box>
<Box style={{ minWidth: 0 }}>
<Text size="sm" fw={600}>
{step.requiredRole}
</Text>
<Group gap={6} wrap="nowrap" align="center">
<Text size="sm" fw={600} truncate>
{roleLabel(step.requiredRole)}
</Text>
{hazard && (
<Badge
color="red"
variant="light"
size="xs"
radius="sm"
leftSection={<Flame size={10} />}
style={{ flexShrink: 0 }}
>
Hazmat
</Badge>
)}
</Group>
{step.note && (
<Text size="xs" c="dimmed" truncate>
{step.note}

63
apps/edr-freight-web/backoffice/src/components/contracts/ContractDocumentEditorModal.tsx
View File

@@ -9,7 +9,7 @@ import {
Group,
Loader,
Modal,
Select,
// Select, // ponytail: unused now the validity dropdown below is commented out
Stack,
Text,
Textarea,
@@ -25,6 +25,7 @@ import {
Plus,
Trash2,
} from "lucide-react";
import { DateInput } from "@mantine/dates";
import type { Freight } from "@edr/types";
import { contractsService } from "@/services/contracts.service";
@@ -75,8 +76,10 @@ export function ContractDocumentEditorModal({
onClose,
contractId,
mode,
validityOptions = [],
validityLoading = false,
// ponytail: validityOptions/validityLoading fed the now-commented dropdown
// above — caller still passes them, left unread here for a quick revert.
// validityOptions = [],
// validityLoading = false,
accepting = false,
saving = false,
onAccept,
@@ -93,7 +96,12 @@ export function ContractDocumentEditorModal({
const [documentTitle, setDocumentTitle] = useState("");
const [whereasClauses, setWhereasClauses] = useState<string[]>([]);
const [articles, setArticles] = useState<EditableArticle[]>([]);
const [validityDays, setValidityDays] = useState<string | null>(null);
// const [validityDays, setValidityDays] = useState<string | null>(null);
// ponytail: client keeps flip-flopping the validity requirement — swapped
// the validity dropdown for explicit start/end dates, kept above commented
// instead of deleted so it's a one-line revert if they flip back.
const [validityStart, setValidityStart] = useState<Date | null>(null);
const [validityEnd, setValidityEnd] = useState<Date | null>(null);
// Seed the editor from the loaded draft whenever the dialog (re)opens.
useEffect(() => {
@@ -110,11 +118,11 @@ export function ContractDocumentEditorModal({
}, [opened, draft]);
// Default validity to the first configured option (accept mode).
useEffect(() => {
if (mode === "accept" && !validityDays && validityOptions.length > 0) {
setValidityDays(validityOptions[0].value);
}
}, [mode, validityDays, validityOptions]);
// useEffect(() => {
// if (mode === "accept" && !validityDays && validityOptions.length > 0) {
// setValidityDays(validityOptions[0].value);
// }
// }, [mode, validityDays, validityOptions]);
// Editing rights belong to the approver whose turn it is, so the server
// decides per-caller — the client cannot derive this from the contract alone.
@@ -169,8 +177,13 @@ export function ContractDocumentEditorModal({
const submit = () => {
const snapshot = buildSnapshot();
if (mode === "accept") {
const days = Number(validityDays);
if (!days) return;
// const days = Number(validityDays);
// if (!days) return;
if (!validityStart || !validityEnd) return;
const days = Math.ceil(
(validityEnd.getTime() - validityStart.getTime()) / (24 * 60 * 60 * 1000),
);
if (days <= 0) return;
onAccept?.(days, snapshot);
} else {
onSaveEdit?.(snapshot);
@@ -181,7 +194,8 @@ export function ContractDocumentEditorModal({
const canSubmit =
hasArticles &&
!locked &&
(mode === "edit" || Boolean(validityDays)) &&
// (mode === "edit" || Boolean(validityDays)) &&
(mode === "edit" || Boolean(validityStart && validityEnd)) &&
!submitting;
return (
@@ -375,7 +389,10 @@ export function ContractDocumentEditorModal({
{mode === "accept" && (
<>
{validityOptions.length > 0 ? (
{/* ponytail: client keeps changing this requirement — swapped
the validity-period dropdown for explicit start/end dates,
left the old block commented instead of deleted. */}
{/* {validityOptions.length > 0 ? (
<Select
label="Contract validity"
placeholder="Select a validity period"
@@ -391,7 +408,25 @@ export function ContractDocumentEditorModal({
? "Loading validity periods…"
: "No validity periods are configured yet. Add them under Dropdown Settings."}
</Text>
)}
)} */}
<Group grow align="flex-start">
<DateInput
label="Start date"
placeholder="Contract validity start"
value={validityStart}
onChange={(v) => setValidityStart(v ? new Date(v) : null)}
maxDate={validityEnd ?? undefined}
clearable
/>
<DateInput
label="End date"
placeholder="Contract validity end"
value={validityEnd}
onChange={(v) => setValidityEnd(v ? new Date(v) : null)}
minDate={validityStart ?? undefined}
clearable
/>
</Group>
</>
)}

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

@@ -0,0 +1,65 @@
import { Badge, Box, Group, Stack, Text } from "@mantine/core";
import { Flame } from "lucide-react";
import { hazardClassLabel, type Freight } from "@edr/types";
/**
* The contract's dangerous-goods declaration — the UN/ADR class and UN number
* the customer declared alongside the hazard documents. Shown wherever a
* hazardous contract is reviewed: the cargo-scope card and the two hazardous
* approval confirmations, so no one signs off without seeing what is moving.
*/
export function HazardDeclarationPanel({
contract,
}: {
contract: Pick<Freight.IContract, "hazardClass" | "unNumber">;
}) {
const classLabel = hazardClassLabel(contract.hazardClass);
return (
<Group
gap="sm"
align="flex-start"
wrap="nowrap"
px="md"
py="sm"
style={{
borderRadius: 12,
border: "1px solid #F3D5D0",
background: "#FEF7F6",
}}
>
<Box
style={{
width: 34,
height: 34,
borderRadius: 10,
flexShrink: 0,
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#FBEAE7",
color: "#C0392B",
}}
>
<Flame size={16} />
</Box>
<Stack gap={6} style={{ minWidth: 0 }}>
<Text size="sm" fw={700}>
Dangerous goods declaration
</Text>
<Group gap={6} wrap="wrap">
<Badge color="red" variant="light" radius="sm" size="sm">
{classLabel ?? "Class not declared"}
</Badge>
<Badge color="red" variant="light" radius="sm" size="sm">
{contract.unNumber ? `UN ${contract.unNumber}` : "UN number not declared"}
</Badge>
</Group>
<Text size="xs" c="dimmed">
Check the declaration against the uploaded hazard documents before
approving.
</Text>
</Stack>
</Group>
);
}

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

@@ -0,0 +1,171 @@
import { useRef, useState } from "react";
import { Box, Button, Group, Image, Paper, Stack, Text } from "@mantine/core";
import { RefreshCw, Stamp, X } from "lucide-react";
const MAX_STAMP_MB = 5;
export interface StampUploadProps {
/** Stamp image as a data URL, or null when none is attached yet. */
value: string | null;
onChange: (dataUrl: string | null) => void;
label?: string;
description?: string;
}
/**
* Company stamp/seal attachment for the contract signing modal. Reads the
* picked image straight into a data URL because the signing endpoint takes
* base64 in JSON (same transport as the drawn signature), not multipart.
*/
export function StampUpload({
value,
onChange,
label = "Company stamp",
description = "Attach your official company stamp or seal.",
}: StampUploadProps) {
const inputRef = useRef<HTMLInputElement>(null);
const [dragging, setDragging] = useState(false);
const [error, setError] = useState<string | null>(null);
const [fileName, setFileName] = useState<string | null>(null);
const readFile = (file: File | undefined | null) => {
if (!file) return;
if (!file.type.startsWith("image/")) {
setError("The stamp must be an image file (PNG or JPG).");
return;
}
if (file.size > MAX_STAMP_MB * 1024 * 1024) {
setError(`The stamp image must be under ${MAX_STAMP_MB} MB.`);
return;
}
const reader = new FileReader();
reader.onload = () => {
setError(null);
setFileName(file.name);
onChange(typeof reader.result === "string" ? reader.result : null);
};
reader.onerror = () => setError("Could not read that file. Try another.");
reader.readAsDataURL(file);
};
const openPicker = () => inputRef.current?.click();
const clear = () => {
setFileName(null);
setError(null);
onChange(null);
if (inputRef.current) inputRef.current.value = "";
};
return (
<Stack gap={6}>
<Text size="sm" fw={500}>
{label}
</Text>
<input
ref={inputRef}
type="file"
accept="image/png,image/jpeg,image/webp"
hidden
onChange={(e) => readFile(e.currentTarget.files?.[0])}
/>
{value ? (
<Paper withBorder radius="md" p="sm">
<Group gap="md" wrap="nowrap" align="center">
<Box
style={{
background:
"repeating-conic-gradient(var(--mantine-color-gray-1) 0% 25%, transparent 0% 50%) 50% / 14px 14px",
borderRadius: 8,
flexShrink: 0,
padding: 6,
}}
>
<Image
src={value}
alt="Company stamp"
fit="contain"
h={92}
w={92}
/>
</Box>
<Stack gap={4} style={{ flex: 1, minWidth: 0 }}>
<Text size="sm" fw={500} truncate>
{fileName ?? "Stamp attached"}
</Text>
<Text size="xs" c="dimmed">
This stamp is applied next to your signature on the contract.
</Text>
<Group gap="xs" mt={2}>
<Button
size="compact-xs"
variant="light"
color="edr-green"
leftSection={<RefreshCw size={13} />}
onClick={openPicker}
>
Replace
</Button>
<Button
size="compact-xs"
variant="subtle"
color="red"
leftSection={<X size={13} />}
onClick={clear}
>
Remove
</Button>
</Group>
</Stack>
</Group>
</Paper>
) : (
<Paper
withBorder
radius="md"
p="lg"
onClick={openPicker}
onDragOver={(e) => {
e.preventDefault();
setDragging(true);
}}
onDragLeave={() => setDragging(false)}
onDrop={(e) => {
e.preventDefault();
setDragging(false);
readFile(e.dataTransfer.files?.[0]);
}}
style={{
borderColor: dragging
? "var(--mantine-color-edr-green-6)"
: undefined,
borderStyle: "dashed",
backgroundColor: dragging
? "var(--mantine-color-edr-green-0)"
: undefined,
cursor: "pointer",
}}
>
<Stack gap={6} align="center">
<Stamp size={26} color="var(--mantine-color-edr-green-6)" />
<Text size="sm" fw={500}>
Upload company stamp
</Text>
<Text size="xs" c="dimmed" ta="center">
{description} Drop an image here or click to browse — PNG or JPG,
up to {MAX_STAMP_MB} MB.
</Text>
</Stack>
</Paper>
)}
{error && (
<Text size="xs" c="red.7">
{error}
</Text>
)}
</Stack>
);
}

4
apps/edr-freight-web/backoffice/src/components/contracts/gl-booking-form/total.ts
View File

@@ -172,7 +172,7 @@ export function computeGlShipmentTotal(
// it (the commodity needs lashing). Per-ton scales by tonnage; per-wagon
// depends on the wagon capacity the train stocks — shown at real pricing.
const lashing = items.find((i) => i.conditionalOn === "has_lashing");
if (lashing && lashing.unit === "per_ton") {
if (lashing && (lashing.unit === "per_ton" || lashing.unit === "per_item")) {
const tons = q.bulkQuantity;
if (tons > 0) {
lines.push({
@@ -199,7 +199,7 @@ export function computeGlShipmentTotal(
cl.unit === "per_wagon"
? Math.ceil(boxes * (cl.containerSize === "40ft" ? 1 : 0.5))
: boxes;
} else if (cl.unit === "per_ton") {
} else if (cl.unit === "per_ton" || cl.unit === "per_item") {
qty = q.bulkQuantity;
} else if (cl.unit === "flat") {
qty = 1;

7
apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx
View File

@@ -23,6 +23,7 @@ import {
import { type ReactNode } from "react";
import { useNavigate } from "react-router-dom";
import DocReviewAlertButton from "@/features/bookingWindows/DocReviewAlertButton";
import NotificationBellContainer from "@/features/notifications/NotificationBellContainer";
import type { PageMeta } from "./types";
@@ -114,8 +115,12 @@ const FreightDashboardHeader = ({
</Group>
</Group>
{/* Right: actions + avatar */}
{/* Right: actions + avatar. The doc-review alarm leads the group — it
only renders in the last half of a review phase that still has
undecided requests, so it never competes for space otherwise. */}
<Group gap={10} wrap="nowrap" align="center">
<DocReviewAlertButton />
<Tooltip label="Language" withArrow openDelay={300}>
<UnstyledButton className={ISLAND} aria-label="Language">
<Languages size={17} strokeWidth={1.8} />