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

style: ui fixes

Browse Source
This commit is contained in:
Nathnael
2026-08-13 13:46:46 +00:00
parent 0df4be1820
commit 89cdc0ad06
46 changed files with 417 additions and 648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsMenu.tsx
View File

@@ -1,5 +1,5 @@
import { useNavigate } from "react-router-dom";
import { ChevronRight, ExternalLink, MoreHorizontal } from "lucide-react";
import { ExternalLink, MoreHorizontal } from "lucide-react";
import { Button, Menu, ActionIcon, Group, Text } from "@mantine/core";
import { BookingConfirmDialog } from "./BookingConfirmDialog";
@@ -64,17 +64,9 @@ export function BookingActionsMenu({
const hasMenu = listRowHasActions(row, user);
// Row click already opens the detail page — no chevron affordance needed.
if (!hasMenu && variant === "table") {
return (
<ActionIcon
variant="subtle"
color="gray"
onClick={() => navigate(`/dashboard/booking-requests/${row.id}`)}
aria-label="View booking"
>
<ChevronRight size={16} />
</ActionIcon>
);
return null;
}
// Toolbar: lay every action out as a button row.

3
apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx
View File

@@ -1,6 +1,7 @@
import { Badge, Group } from "@mantine/core";
import { Link2 } from "lucide-react";
import { BOOKING_STATUS_STYLES } from "@/features/bookings/booking-status.config";
import { humanize } from "@/lib/format";
const statusColorMap: Record<string, string> = {
DRAFT: "gray",
@@ -40,7 +41,7 @@ export function BookingStatusBadge({
partnerReference,
}: BookingStatusBadgeProps) {
const style = BOOKING_STATUS_STYLES[status] ?? {
label: status,
label: humanize(status),
color: "gray",
};
const color = statusColorMap[status] ?? "gray";

34
apps/edr-freight-web/backoffice/src/components/common/FilterToggle.tsx Normal file
View File

@@ -0,0 +1,34 @@
import { ActionIcon, Indicator } from "@mantine/core";
import { Filter } from "lucide-react";
export interface FilterToggleProps {
/** Number of active advanced filters — shown as a badge on the button. */
count: number;
expanded: boolean;
onClick: () => void;
}
/** Toggle for the collapsible advanced-filters row on list pages. */
export function FilterToggle({ count, expanded, onClick }: FilterToggleProps) {
return (
<Indicator
label={count}
size={16}
color="edr-green"
disabled={count === 0}
offset={4}
>
<ActionIcon
variant={expanded ? "filled" : "default"}
color="edr-green"
size="lg"
radius="lg"
aria-label="Toggle advanced filters"
aria-expanded={expanded}
onClick={onClick}
>
<Filter size={16} />
</ActionIcon>
</Indicator>
);
}

5
apps/edr-freight-web/backoffice/src/components/contracts/ContractMilestonesTimeline.tsx
View File

@@ -10,6 +10,7 @@ import {
import { Group, Stack, Text, Timeline, Tooltip } from "@mantine/core";
import type { Freight } from "@edr/types";
import { formatDate } from "@/lib/format";
import {
CONTRACT_APPROVAL_ROLE_LABELS,
HAZARDOUS_APPROVAL_ROLE_PERMISSION,
@@ -54,10 +55,6 @@ function formatAgo(iso: string): string {
return "just now";
}
function formatDate(iso: string): string {
return new Date(iso).toLocaleDateString(undefined, { dateStyle: "medium" });
}
type MilestoneIcon = typeof Send;
interface Milestone {

92
apps/edr-freight-web/backoffice/src/components/contracts/ContractStatusTabs.tsx
View File

@@ -1,92 +0,0 @@
import { Badge, ScrollArea, Tabs } from "@mantine/core";
import {
ClipboardCheck,
FileSignature,
Inbox,
LayoutGrid,
ShieldCheck,
Truck,
XCircle,
} from "lucide-react";
import "@/components/overview/overview.css";
import {
CONTRACT_LIST_TABS,
type ContractStatusTabKey,
} from "@/features/contracts/contract-status.config";
const TAB_ICONS: Record<ContractStatusTabKey, React.ReactNode> = {
all: <LayoutGrid size={17} strokeWidth={1.85} />,
intake: <Inbox size={17} strokeWidth={1.85} />,
in_approval: <ClipboardCheck size={17} strokeWidth={1.85} />,
approved_contract: <FileSignature size={17} strokeWidth={1.85} />,
clearance: <ShieldCheck size={17} strokeWidth={1.85} />,
active: <Truck size={17} strokeWidth={1.85} />,
closed: <XCircle size={17} strokeWidth={1.85} />,
};
interface ContractStatusTabsProps {
active: ContractStatusTabKey;
onChange: (tab: ContractStatusTabKey) => void;
counts?: Partial<Record<ContractStatusTabKey, number>>;
}
export function ContractStatusTabs({
active,
onChange,
counts,
}: ContractStatusTabsProps) {
return (
<Tabs
value={active}
onChange={(value) => onChange((value as ContractStatusTabKey) ?? "all")}
variant="pills"
color="edr-green"
keepMounted={false}
classNames={{ list: "ov-tablist", tab: "ov-tab" }}
>
<ScrollArea type="auto" scrollbarSize={6} offsetScrollbars="x">
<Tabs.List style={{ flexWrap: "nowrap", width: "max-content" }}>
{CONTRACT_LIST_TABS.map((tab) => {
const isActive = active === tab.key;
const count = counts?.[tab.key];
return (
<Tabs.Tab
key={tab.key}
value={tab.key}
leftSection={TAB_ICONS[tab.key]}
size={"sm"}
rightSection={
count !== undefined ? (
<Badge
size="sm"
radius="sm"
variant={isActive ? "white" : "light"}
color={isActive ? "edr-green" : "gray"}
styles={
isActive
? {
root: {
background: "rgba(255,255,255,0.9)",
color: "#15805f",
},
}
: undefined
}
>
{count}
</Badge>
) : undefined
}
>
{tab.label}
</Tabs.Tab>
);
})}
</Tabs.List>
</ScrollArea>
</Tabs>
);
}
export type { ContractStatusTabKey };

10
apps/edr-freight-web/backoffice/src/components/customers/badges.tsx
View File

@@ -116,8 +116,9 @@ export function CompanyNationalityBadge({
/**
* Profile chips for a company row: one chip per role (Importer / Exporter / …)
* carrying its reference code. Caps at three (a company has at most three
* profiles); any extra collapse into a `+N` chip.
* carrying its reference code, colored by the profile's status (green active,
* amber pending, red rejected/blacklisted). Caps at three (a company has at
* most three profiles); any extra collapse into a `+N` chip.
*/
export function ProfileChips({
profiles,
@@ -152,14 +153,15 @@ export function ProfileChips({
withArrow
>
<Badge
color={PROFILE_TYPE_COLOR[profile.type] ?? "gray"}
color={STATUS_COLOR[profile.status] ?? "gray"}
variant="light"
size="sm"
radius="md"
fw={600}
style={badgeStyle}
>
{humanize(profile.type)} · {profile.reference}
{humanize(profile.type)}
{profile.reference ? ` · ${profile.reference}` : ""}
</Badge>
</Tooltip>
))}

40
apps/edr-freight-web/backoffice/src/components/customers/format.ts
View File

@@ -1,38 +1,2 @@
/** Shared formatting helpers for the customer-management pages. */
/** snake_case / SCREAMING_CASE → Title Case. */
export function humanize(value: string): string {
return value
.toLowerCase()
.split(/[_\s]+/)
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
.join(" ");
}
export function formatDate(value: string | null | undefined): string {
if (!value) return "—";
const d = new Date(value);
return Number.isNaN(d.getTime())
? "—"
: d.toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
});
}
export function formatMoney(amount: number, currency: string): string {
return new Intl.NumberFormat(undefined, {
style: "currency",
currency,
maximumFractionDigits: 0,
}).format(amount);
}
export function formatBytes(bytes: number): string {
if (!bytes) return "0 B";
const units = ["B", "KB", "MB", "GB"];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
const value = bytes / Math.pow(1024, i);
return `${value.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
}
/** @deprecated import from "@/lib/format" (or ../../lib/format) instead. */
export { humanize, formatDate, formatDateTime, formatMoney, formatBytes } from "../../lib/format";

2
apps/edr-freight-web/backoffice/src/components/overview/summary/OverviewActivityHeatmap.tsx
View File

@@ -26,7 +26,7 @@ interface OverviewActivityHeatmapProps {
* selected range. The bright cells (and the peak badge) are the hours the
* intake team needs to be staffed for.
*/
export function OverviewActivityHeatmap({ cells }: OverviewActivityHeatmapProps) {
export function OverviewActivityHeatmap({ cells = [] }: OverviewActivityHeatmapProps) {
const countByCell = new Map(cells.map((c) => [`${c.dow}-${c.block}`, c.count]));
const max = Math.max(0, ...cells.map((c) => c.count));
const peak = cells.reduce<IOverviewHeatmapCell | null>(

10
apps/edr-freight-web/backoffice/src/components/overview/summary/OverviewAttentionCard.tsx
View File

@@ -30,35 +30,35 @@ export function OverviewAttentionCard({ bookings, contracts, billing }: Overview
{
key: "needsAction",
label: "Bookings needing action",
count: bookings.needsAction,
count: bookings.needsAction ?? 0,
icon: AlertCircle,
href: "/dashboard/booking-requests",
},
{
key: "urgent",
label: "Urgent bookings",
count: bookings.urgent,
count: bookings.urgent ?? 0,
icon: Clock,
href: "/dashboard/booking-requests",
},
{
key: "contractsApproval",
label: "Contracts in approval",
count: contracts.inApproval,
count: contracts.inApproval ?? 0,
icon: FileSignature,
href: "/dashboard/contract-requests",
},
{
key: "contractsClearance",
label: "Contracts in clearance",
count: contracts.inClearance,
count: contracts.inClearance ?? 0,
icon: ShieldCheck,
href: "/dashboard/contracts/clearance",
},
{
key: "pendingPayments",
label: "Pending payments",
count: billing.pendingPayments,
count: billing.pendingPayments ?? 0,
icon: Banknote,
href: "/dashboard/payments",
},

3
apps/edr-freight-web/backoffice/src/components/overview/summary/OverviewHero.tsx
View File

@@ -2,6 +2,7 @@ import { RefreshCw } from "lucide-react";
import { ActionIcon, Badge, Group, SegmentedControl, Stack, Text } from "@mantine/core";
import { useAuth } from "@/auth/useAuth";
import { formatDateTime } from "@/lib/format";
import { freightBrand } from "@/theme/freight-brand";
import type { OverviewRange } from "@/types/overview";
import "@/components/overview/overview.css";
@@ -20,7 +21,7 @@ function formatRelativeTime(iso: string | undefined) {
if (minutes < 60) return `${minutes}m ago`;
const hours = Math.floor(minutes / 60);
if (hours < 24) return `${hours}h ago`;
return new Date(iso).toLocaleString();
return formatDateTime(iso);
}
function greeting(hour: number) {

36
apps/edr-freight-web/backoffice/src/components/overview/summary/OverviewHeroKpis.tsx
View File

@@ -34,21 +34,27 @@ interface OverviewHeroKpisProps {
*/
export function OverviewHeroKpis({ kpis, current, previous, rangeLabel }: OverviewHeroKpisProps) {
const items: KpiItem[] = [
{
label: `Revenue (${rangeLabel})`,
value: <CountUp value={current.revenueEtb} format={(n) => formatCurrency(n, "ETB")} />,
hint: formatCurrency(current.revenueUsd, "USD"),
icon: Banknote,
color: "yellow",
delta: pctDelta(current.revenueEtb, previous.revenueEtb),
},
{
label: "Cargo moved",
value: <CountUp value={current.tons} format={(n) => `${Math.round(n).toLocaleString()} t`} />,
icon: Package,
color: "edr-green",
delta: pctDelta(current.tons, previous.tons),
},
// An API deployed before the overview revamp omits the period totals —
// drop the two tiles that need them rather than crash (or hide the strip).
...(current
? [
{
label: `Revenue (${rangeLabel})`,
value: <CountUp value={current.revenueEtb} format={(n) => formatCurrency(n, "ETB")} />,
hint: formatCurrency(current.revenueUsd, "USD"),
icon: Banknote,
color: "yellow",
delta: pctDelta(current.revenueEtb, previous?.revenueEtb ?? 0),
},
{
label: "Cargo moved",
value: <CountUp value={current.tons} format={(n) => `${Math.round(n).toLocaleString()} t`} />,
icon: Package,
color: "edr-green",
delta: pctDelta(current.tons, previous?.tons ?? 0),
},
]
: []),
{
label: "Active bookings",
value: <CountUp value={kpis.bookings.totalActive} />,

11
apps/edr-freight-web/backoffice/src/components/overview/summary/OverviewNetworkCard.tsx
View File

@@ -25,7 +25,10 @@ const STATS: Array<{
/** Network snapshot: four operational stats plus real wagon-utilization (available / total), not a decorative gauge. */
export function OverviewNetworkCard({ kpis }: { kpis: IOverviewOperationsKpis }) {
const utilizationPct = kpis.wagonsTotal > 0 ? (kpis.wagonsAvailable / kpis.wagonsTotal) * 100 : null;
// An API deployed before the overview revamp omits the wagon counters.
const wagonsTotal = kpis.wagonsTotal ?? 0;
const wagonsAvailable = kpis.wagonsAvailable ?? 0;
const utilizationPct = wagonsTotal > 0 ? (wagonsAvailable / wagonsTotal) * 100 : null;
return (
<SummaryCard
@@ -52,10 +55,10 @@ export function OverviewNetworkCard({ kpis }: { kpis: IOverviewOperationsKpis })
Wagons available
</Text>
<Text fw={800} fz={22} lh={1.1}>
{kpis.wagonsAvailable.toLocaleString()}
{wagonsAvailable.toLocaleString()}
<Text component="span" fz="sm" fw={600} c="dimmed">
{" "}
/ {kpis.wagonsTotal.toLocaleString()}
/ {wagonsTotal.toLocaleString()}
</Text>
</Text>
</Stack>
@@ -72,7 +75,7 @@ export function OverviewNetworkCard({ kpis }: { kpis: IOverviewOperationsKpis })
/>
<Stack gap={0} style={{ minWidth: 0 }}>
<Text fw={800} fz="lg" lh={1.15}>
<CountUp value={kpis[stat.key]} />
<CountUp value={kpis[stat.key] ?? 0} />
</Text>
<Text size="xs" c="dimmed" truncate>
{stat.label}

2
apps/edr-freight-web/backoffice/src/components/overview/summary/OverviewPipelineFunnel.tsx
View File

@@ -14,7 +14,7 @@ interface OverviewPipelineFunnelProps {
}
/** Booking pipeline by stage, in workflow order. Each row deep-links to the exact statuses it represents. */
export function OverviewPipelineFunnel({ data }: OverviewPipelineFunnelProps) {
export function OverviewPipelineFunnel({ data = [] }: OverviewPipelineFunnelProps) {
const rows = data
.map((item) => ({
...item,

2
apps/edr-freight-web/backoffice/src/components/overview/summary/OverviewRevenueMix.tsx
View File

@@ -111,7 +111,7 @@ interface OverviewRevenueMixProps {
}
/** ETB revenue split two ways — trade direction and freight type — anchored by the range total. */
export function OverviewRevenueMix({ byDirection, byFreightType }: OverviewRevenueMixProps) {
export function OverviewRevenueMix({ byDirection = [], byFreightType = [] }: OverviewRevenueMixProps) {
const total = byDirection.reduce((sum, s) => sum + s.amountEtb, 0);
return (

6
apps/edr-freight-web/backoffice/src/components/overview/summary/OverviewRevenueVolumeChart.tsx
View File

@@ -67,9 +67,9 @@ interface OverviewRevenueVolumeChartProps {
* period" at a glance.
*/
export function OverviewRevenueVolumeChart({
bookingTrend,
paymentTrend,
previousPaymentTrend,
bookingTrend = [],
paymentTrend = [],
previousPaymentTrend = [],
rangeDays,
}: OverviewRevenueVolumeChartProps) {
const data = mergeTrend(bookingTrend, paymentTrend, previousPaymentTrend, rangeDays);

2
apps/edr-freight-web/backoffice/src/components/overview/summary/OverviewSankeyFlow.tsx
View File

@@ -135,7 +135,7 @@ interface OverviewSankeyFlowProps {
* freight type. Ribbon thickness is proportional to revenue, so the biggest
* corridor is unmissable.
*/
export function OverviewSankeyFlow({ flows }: OverviewSankeyFlowProps) {
export function OverviewSankeyFlow({ flows = [] }: OverviewSankeyFlowProps) {
const data = toSankeyData(flows);
return (

14
apps/edr-freight-web/backoffice/src/components/warehouses/options.ts
View File

@@ -99,18 +99,8 @@ export const formatDays = (value: number | null | undefined) => {
return `${rounded} ${rounded === 1 ? 'day' : 'days'}`;
};
export const formatDate = (value: string | null | undefined) => {
if (!value) return '—';
const date = new Date(value);
if (Number.isNaN(date.getTime())) return '—';
return date.toLocaleString(undefined, {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
};
// Despite the name, this has always rendered date + time — hence formatDateTime.
export { formatDateTime as formatDate } from '@/lib/format';
// Name fields (warehouse / fee rule / allocation rule) accept letters and spaces only — no numbers.
export const lettersOnly = (value: string) => value.replace(/[^A-Za-z\s]/g, '');

62
apps/edr-freight-web/backoffice/src/lib/format.ts Normal file
View File

@@ -0,0 +1,62 @@
/** Shared display-formatting helpers for the backoffice. */
/** snake_case / SCREAMING_CASE → Title Case. */
export function humanize(value: string): string {
return value
.toLowerCase()
.split(/[_\s]+/)
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
.join(" ");
}
export function formatDate(value: string | null | undefined): string {
if (!value) return "—";
const d = new Date(value);
return Number.isNaN(d.getTime())
? "—"
: d.toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
});
}
export function formatDateTime(value: string | null | undefined): string {
if (!value) return "—";
const d = new Date(value);
return Number.isNaN(d.getTime())
? "—"
: d.toLocaleString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
});
}
/** Pass `fractionDigits` where cents matter; the default matches the legacy whole-figure display. */
export function formatMoney(
amount: number,
currency: string,
fractionDigits?: number,
): string {
return new Intl.NumberFormat(undefined, {
style: "currency",
currency,
...(fractionDigits === undefined
? { maximumFractionDigits: 0 }
: {
minimumFractionDigits: fractionDigits,
maximumFractionDigits: fractionDigits,
}),
}).format(amount);
}
export function formatBytes(bytes: number): string {
if (!bytes) return "0 B";
const units = ["B", "KB", "MB", "GB"];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
const value = bytes / Math.pow(1024, i);
return `${value.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
}

5
apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
View File

@@ -61,6 +61,7 @@ import {
import { WarehouseInfoCard } from "@/components/warehouses";
import { getStatusMeta } from "@/features/bookings/booking-status.config";
import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
import { formatDateTime, formatMoney } from "@/lib/format";
import { cargoTonsAndItems } from "@/utils/cargoWeight";
import type { BookingDetail } from "@/types/booking";
import {
@@ -186,7 +187,7 @@ export default function BookingRequestDetailPage() {
const kpis: KpiItem[] = [
{
label: "Total value",
value: `${booking.paymentCurrency} ${amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}`,
value: formatMoney(amount, booking.paymentCurrency, 2),
hint: booking.paymentStatus,
icon: Wallet,
color: "edr-green",
@@ -326,7 +327,7 @@ export default function BookingRequestDetailPage() {
{booking.holdExpiresAt && booking.schedulingStatus === "HOLDING" ? (
<Text size="xs" c="orange.7">
Hold expires {new Date(booking.holdExpiresAt).toLocaleString()}
Hold expires {formatDateTime(booking.holdExpiresAt)}
</Text>
) : null}

128
apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
View File

@@ -5,6 +5,7 @@ import {
Button,
Card,
Checkbox,
Collapse,
Group,
Modal,
MultiSelect,
@@ -36,6 +37,8 @@ import { useNavigate, useSearchParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu";
import { FilterToggle } from "@/components/common/FilterToggle";
import { formatDate, humanize } from "@/lib/format";
import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
// BookingStatusTabs / Operations* queues removed — replaced by booking-kind tabs.
@@ -50,7 +53,6 @@ import {
useBookingList,
useBookingListSummary,
} from "@/hooks/bookings/useBookings";
import { ContractReferenceLink } from "@/components/bookings/ContractReferenceLink";
import { api } from "@/services/api";
import type { BookingListFilter } from "@/services/bookings.service";
import { trainSchedulingService } from "@/services/trainScheduling.service";
@@ -116,18 +118,6 @@ function endOfDayIso(d: Date): string {
return x.toISOString();
}
function formatDate(value: string | null | undefined): string {
if (!value) return "—";
const d = new Date(value);
return Number.isNaN(d.getTime())
? "—"
: d.toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
});
}
export default function BookingRequestsPage() {
const navigate = useNavigate();
// Deep links land here pre-filtered (?statuses=A,B&tradeDirection=IMPORT) —
@@ -159,6 +149,11 @@ export default function BookingRequestsPage() {
const [createdTo, setCreatedTo] = useState<Date | null>(null);
const [scheduledFrom, setScheduledFrom] = useState<Date | null>(null);
const [scheduledTo, setScheduledTo] = useState<Date | null>(null);
// Direction is the only deep-linkable advanced filter — open the panel so a
// deep link never hides its own filter.
const [showAdvanced, setShowAdvanced] = useState(() =>
Boolean(paramDirection),
);
const [allocateOpen, setAllocateOpen] = useState(false);
const [allocateIds, setAllocateIds] = useState<string[]>([]);
// Paid bookings with no train attached (staff removed them or a sweep
@@ -185,6 +180,7 @@ export default function BookingRequestsPage() {
const next = paramStatuses.split(",").filter(Boolean);
setStatusFilter((prev) => (prev.join(",") === next.join(",") ? prev : next));
setDirectionFilter(paramDirection);
if (paramDirection) setShowAdvanced(true);
}, [paramStatuses, paramDirection]);
const filter: BookingListFilter = useMemo(() => {
@@ -278,6 +274,10 @@ export default function BookingRequestsPage() {
(createdFrom || createdTo ? 1 : 0) +
(scheduledFrom || scheduledTo ? 1 : 0);
// Badge on the advanced-filters toggle — active filters hidden behind it.
const advancedFilterCount =
activeFilterCount - (kindFilter ? 1 : 0) - (statusFilter.length ? 1 : 0);
const clearFilters = useCallback(() => {
setKindFilter(null);
setStatusFilter([]);
@@ -390,13 +390,22 @@ export default function BookingRequestsPage() {
header: () => <span className={bookingTable.headerCell}>Booking</span>,
cell: ({ row }) => {
const b = row.original;
const isGeneral = b.bookingKind === "GENERAL_CONTRACT";
return (
<div className="flex items-center gap-3 py-1.5">
<div className={bookingTable.rowIcon}>
<Package className="size-4" strokeWidth={1.75} />
</div>
<div className="min-w-0">
<p className="truncate font-medium text-foreground">{b.reference}</p>
<div className="min-w-0 max-w-[220px]">
<div className="flex items-center gap-1.5">
<p className="truncate font-medium text-foreground">{b.reference}</p>
<Badge
variant={isGeneral ? "secondary" : "outline"}
className="h-5 shrink-0 px-1.5 text-[10px] font-medium"
>
{isGeneral ? "General" : "One-time"}
</Badge>
</div>
<p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
<User className="size-3 shrink-0 opacity-70" />
{b.customerLabel}
@@ -406,49 +415,6 @@ export default function BookingRequestsPage() {
);
},
},
{
id: "contract",
header: () => <span className={bookingTable.headerCell}>Contract</span>,
cell: ({ row }) => {
const ref = row.original.contractReference;
return (
<div className="py-1">
{ref ? (
// Fall back to plain text when the id is missing — the reference is
// still worth showing, it just has nowhere to link to.
(row.original.contractId ? (
<ContractReferenceLink
contractId={row.original.contractId}
contractReference={ref}
className="truncate font-mono text-xs text-foreground underline underline-offset-2 hover:text-primary"
/>
) : (
<span className="truncate font-mono text-xs text-foreground">{ref}</span>
))
) : (
<span className="text-xs text-muted-foreground">—</span>
)}
</div>
);
},
},
{
id: "bookingKind",
header: () => <span className={bookingTable.headerCell}>Type</span>,
cell: ({ row }) => {
const isGeneral = row.original.bookingKind === "GENERAL_CONTRACT";
return (
<div className="py-1">
<Badge
variant={isGeneral ? "secondary" : "outline"}
className="h-5 px-1.5 text-[10px] font-medium"
>
{isGeneral ? "General" : "One-time"}
</Badge>
</div>
);
},
},
{
id: "route",
header: () => <span className={bookingTable.headerCell}>Route</span>,
@@ -464,15 +430,15 @@ export default function BookingRequestsPage() {
<div className="flex gap-1.5">
<Badge
variant="outline"
className="h-5 border-border/50 bg-background/50 px-1.5 text-[10px] font-medium uppercase backdrop-blur-sm"
className="h-5 border-border/50 bg-background/50 px-1.5 text-[10px] font-medium backdrop-blur-sm"
>
{b.tradeDirection}
{humanize(b.tradeDirection)}
</Badge>
<Badge
variant="secondary"
className="h-5 bg-muted/40 px-1.5 text-[10px] font-medium"
>
{b.freightType}
{humanize(b.freightType)}
</Badge>
</div>
</div>
@@ -621,7 +587,7 @@ export default function BookingRequestsPage() {
<Stack gap={0}>
<Box px="md" pt="md" pb="sm" w="100%">
<Stack gap="sm">
<Group justify="space-between" gap="md" wrap="wrap">
<Group gap="sm" wrap="wrap">
<TextInput
placeholder="Search booking, contract or customer…"
leftSection={<Search size={18} />}
@@ -649,11 +615,6 @@ export default function BookingRequestsPage() {
style={{ flex: 1, minWidth: "200px" }}
radius="lg"
/>
<Text size="sm" c="dimmed">
{total} record{total !== 1 ? "s" : ""}
</Text>
</Group>
<Group gap="sm" wrap="wrap">
<Select
placeholder="All booking types"
data={BOOKING_KIND_OPTIONS}
@@ -679,6 +640,25 @@ export default function BookingRequestsPage() {
radius="lg"
style={{ minWidth: 220 }}
/>
<FilterToggle
count={advancedFilterCount}
expanded={showAdvanced}
onClick={() => setShowAdvanced((v) => !v)}
/>
{activeFilterCount > 0 ? (
<Button
variant="subtle"
color="gray"
radius="lg"
leftSection={<FilterX size={16} />}
onClick={clearFilters}
>
Clear filters ({activeFilterCount})
</Button>
) : null}
</Group>
<Collapse expanded={showAdvanced}>
<Group gap="sm" wrap="wrap">
<Select
placeholder="All origins"
data={yardOptions}
@@ -729,8 +709,6 @@ export default function BookingRequestsPage() {
radius="lg"
style={{ minWidth: 150 }}
/>
</Group>
<Group gap="sm" wrap="wrap">
<Select
placeholder="All payment statuses"
data={PAYMENT_STATUS_OPTIONS}
@@ -793,18 +771,8 @@ export default function BookingRequestsPage() {
radius="lg"
style={{ minWidth: 230 }}
/>
{activeFilterCount > 0 ? (
<Button
variant="subtle"
color="gray"
radius="lg"
leftSection={<FilterX size={16} />}
onClick={clearFilters}
>
Clear filters ({activeFilterCount})
</Button>
) : null}
</Group>
</Collapse>
</Stack>
</Box>

3
apps/edr-freight-web/backoffice/src/pages/bookings/DocumentClearanceListPage.tsx
View File

@@ -471,9 +471,6 @@ export default function DocumentClearanceListPage({
style={{ flex: 1, minWidth: 220 }}
/>
<Group gap="sm" wrap="nowrap">
<Text size="sm" c="dimmed">
{total} record{total !== 1 ? "s" : ""}
</Text>
<SegmentedControl
size="sm"
radius="md"

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

@@ -42,6 +42,7 @@ import Breadcrumbs from "@/components/ui/Breadcrumbs";
import { api as appApi } from "@/services/api";
import { bookingsService } from "@/services/bookings.service";
import { customersService } from "@/services/customers.service";
import { formatDateTime } from "@/lib/format";
interface RefNamed {
id: string;
@@ -705,7 +706,7 @@ export default function NewBookingPage() {
/>
<SummaryRow
label="Departure"
value={effectiveDepartureIso ? new Date(effectiveDepartureIso).toLocaleString() : "Not set"}
value={effectiveDepartureIso ? formatDateTime(effectiveDepartureIso) : "Not set"}
/>
</Stack>

29
apps/edr-freight-web/backoffice/src/pages/bookings/WagonCancellationsPage.tsx
View File

@@ -24,6 +24,7 @@ import { api } from "@/auth/http";
import { useAuth } from "@/auth/useAuth";
import { PageContainer, PageHeader } from "@/components/page";
import { toDayString } from "@/hooks/useListControls";
import { formatDate, formatMoney } from "@/lib/format";
import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
import {
DataTable,
@@ -96,24 +97,6 @@ function StatusChip({ status }: { status: WagonCancellationStatus }) {
);
}
function formatDate(iso: string | null | undefined): string {
if (!iso) return "—";
const d = new Date(iso);
return Number.isNaN(d.getTime())
? "—"
: d.toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
});
}
function formatAmount(amount: number, currency: string): string {
return `${currency} ${Number(amount).toLocaleString(undefined, {
minimumFractionDigits: 2,
})}`;
}
/**
* Staff view of partial wagon cancellations: every slice of capacity a
* customer gave back, its cancellation fee, and where the credit went
@@ -196,7 +179,9 @@ export default function WagonCancellationsPage() {
id: "company",
header: () => <span>Company</span>,
cell: ({ row }) => (
<Text size="sm">{row.original.booking?.company?.name ?? "—"}</Text>
<Text size="sm" truncate maw={200}>
{row.original.booking?.company?.name ?? "—"}
</Text>
),
},
{
@@ -209,7 +194,7 @@ export default function WagonCancellationsPage() {
header: () => <span>Fee</span>,
cell: ({ row }) => (
<Text size="sm" style={{ fontVariantNumeric: "tabular-nums" }}>
{formatAmount(row.original.feeAmount, row.original.feeCurrency)}
{formatMoney(row.original.feeAmount, row.original.feeCurrency, 2)}
</Text>
),
},
@@ -218,7 +203,7 @@ export default function WagonCancellationsPage() {
header: () => <span>Credit</span>,
cell: ({ row }) => (
<Text size="sm" style={{ fontVariantNumeric: "tabular-nums" }}>
{formatAmount(row.original.creditAmount, row.original.feeCurrency)}
{formatMoney(row.original.creditAmount, row.original.feeCurrency, 2)}
</Text>
),
},
@@ -370,7 +355,7 @@ export default function WagonCancellationsPage() {
<Text size="sm">
{voiding.booking?.reference ?? voiding.bookingId} ·{" "}
{voiding.wagonsCancelled} wagon(s) · fee{" "}
{formatAmount(voiding.feeAmount, voiding.feeCurrency)}
{formatMoney(voiding.feeAmount, voiding.feeCurrency, 2)}
</Text>
<Text size="sm" c="dimmed">
The pending fee is dropped and the wagons stay on the booking.

3
apps/edr-freight-web/backoffice/src/pages/contracts/ClearanceDocumentsPage.tsx
View File

@@ -305,9 +305,6 @@ export default function ClearanceDocumentsPage() {
w={220}
aria-label="Filter by status"
/>
<Text size="sm" c="dimmed">
{total} record{total !== 1 ? "s" : ""}
</Text>
</Group>
<Group gap="sm" mt="sm" wrap="wrap">
<Select

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

@@ -1,3 +1,4 @@
import { formatDate, formatDateTime } from "@/lib/format";
import { directionLabel } from "@/lib/utils";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
@@ -114,33 +115,6 @@ const CLEARANCE_REVIEW_STATUSES = [
...CLEARANCE_DONE_STATUSES,
];
function formatDate(value: string | null | undefined): string {
if (!value) return "—";
const d = new Date(value);
return Number.isNaN(d.getTime())
? "—"
: d.toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
});
}
/** Same, plus the clock — for values the staff pick to the minute. */
function formatDateTime(value: string | null | undefined): string {
if (!value) return "—";
const d = new Date(value);
return Number.isNaN(d.getTime())
? "—"
: d.toLocaleString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
});
}
export default function ContractRequestDetailPage() {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();

323
apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
View File

@@ -5,6 +5,7 @@ import {
Box,
Button,
Card,
Collapse,
Group,
MultiSelect,
Select,
@@ -32,29 +33,25 @@ import {
User,
X,
} from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import { useCallback, useMemo, useState, type ReactNode } from "react";
import { useNavigate } from "react-router-dom";
import { ContractApprovalProgressCell } from "@/components/contracts/ContractApprovalProgressCell";
import {
ContractCourtBadge,
ContractStatusBadge,
} from "@/components/contracts/ContractStatusBadge";
import {
ContractStatusTabs,
type ContractStatusTabKey,
} from "@/components/contracts/ContractStatusTabs";
import { ContractStatusBadge } from "@/components/contracts/ContractStatusBadge";
import { FilterToggle } from "@/components/common/FilterToggle";
import { bookingTable } from "@/components/bookings/booking-ui.styles";
import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
import {
CONTRACT_LIST_TABS,
CONTRACT_STATUS_STYLES,
contractCourt,
} from "@/features/contracts/contract-status.config";
import { formatContractApprovalProgress } from "@/features/contracts/contract-approval-progress";
import {
getStaffRowAction,
toContractListRow,
type ContractListRow,
} from "@/features/contracts/mapContractListRow";
import { formatDate, humanize } from "@/lib/format";
import {
useContractList,
useContractListSummary,
@@ -68,25 +65,13 @@ import {
type ColumnDef,
} from "@edr/ui-common";
function getStatusesForTab(tab: ContractStatusTabKey): string | undefined {
const match = CONTRACT_LIST_TABS.find((t) => t.key === tab);
if (!match?.statuses?.length) return undefined;
return match.statuses.join(",");
}
/** Statuses selectable in the status filter for a given tab ("all" → every tab status). */
function getStatusOptionsForTab(
tab: ContractStatusTabKey,
): { value: string; label: string }[] {
const match = CONTRACT_LIST_TABS.find((t) => t.key === tab);
const statuses = match?.statuses?.length
? match.statuses
: CONTRACT_LIST_TABS.flatMap((t) => t.statuses ?? []);
return statuses.map((s) => ({
/** Every filterable status — the pill tabs are gone, so the select carries them all. */
const STATUS_OPTIONS = CONTRACT_LIST_TABS.flatMap((t) => t.statuses ?? []).map(
(s) => ({
value: s,
label: CONTRACT_STATUS_STYLES[s]?.label ?? s,
}));
}
}),
);
const TRADE_DIRECTION_OPTIONS = [
{ value: "IMPORT", label: "Import" },
@@ -117,8 +102,11 @@ const SORT_OPTIONS = [
{ value: "contractValidUntil:DESC", label: "Expiring latest" },
];
/** Every column is 120px wide and wraps its content instead of truncating. */
const COLUMN_WIDTH = 120;
/**
* Per-column widths — they must sum to the table's min-w (960px, set on the
* containerClassName below) because table-fixed distributes any difference.
*/
const COLUMN_WIDTHS = { contract: 250, route: 270, status: 250, validity: 190 };
const COLUMN_META = {
headerClassName: "whitespace-normal break-words",
cellClassName: "whitespace-normal break-words align-top",
@@ -138,24 +126,11 @@ function endOfDayIso(d: Date): string {
return x.toISOString();
}
function formatDate(value: string | null | undefined): string {
if (!value) return "—";
const d = new Date(value);
return Number.isNaN(d.getTime())
? "—"
: d.toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
});
}
export default function ContractRequestsPage() {
const navigate = useNavigate();
const { pagination, setPagination } = usePagination({ pageSize: 10 });
const [query, setQuery] = useState("");
const [debouncedQuery] = useDebouncedValue(query, 300);
const [activeTab, setActiveTab] = useState<ContractStatusTabKey>("all");
// Filter controls (empty/null = "all").
const [statusFilter, setStatusFilter] = useState<string[]>([]);
const { filterOptions } = useMyTradeAccess();
@@ -168,12 +143,8 @@ export default function ContractRequestsPage() {
const [createdFrom, setCreatedFrom] = useState<Date | null>(null);
const [createdTo, setCreatedTo] = useState<Date | null>(null);
const [sort, setSort] = useState<string>("createdAt:DESC");
const tabStatuses = getStatusesForTab(activeTab);
const statusOptions = useMemo(
() => getStatusOptionsForTab(activeTab),
[activeTab],
);
// All filters start empty (no URL params on this page), so collapsed is safe.
const [showAdvanced, setShowAdvanced] = useState(false);
const resetPage = useCallback(() => {
setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
@@ -186,16 +157,11 @@ export default function ContractRequestsPage() {
pageSize: pagination.pageSize,
sortBy,
sortOrder,
tab: activeTab,
// Kept as the React Query cache-key discriminator (tabs themselves are gone).
tab: "all",
// Server-side free-text search (contract reference, customer name).
...(debouncedQuery.trim() ? { search: debouncedQuery.trim() } : {}),
// Explicit status picks narrow within the tab; otherwise the tab's
// status group applies.
...(statusFilter.length
? { statuses: statusFilter.join(",") }
: tabStatuses
? { statuses: tabStatuses }
: {}),
...(statusFilter.length ? { statuses: statusFilter.join(",") } : {}),
...(directionFilter ? { tradeDirection: directionFilter } : {}),
...(freightTypeFilter ? { freightType: freightTypeFilter } : {}),
...(kindFilter ? { contractKind: kindFilter } : {}),
@@ -206,8 +172,6 @@ export default function ContractRequestsPage() {
}, [
pagination.pageIndex,
pagination.pageSize,
activeTab,
tabStatuses,
debouncedQuery,
statusFilter,
directionFilter,
@@ -227,6 +191,10 @@ export default function ContractRequestsPage() {
(currencyFilter ? 1 : 0) +
(createdFrom || createdTo ? 1 : 0);
// Badge on the advanced-filters toggle — active filters hidden behind it.
const advancedFilterCount =
activeFilterCount - (statusFilter.length ? 1 : 0) - (kindFilter ? 1 : 0);
const clearFilters = useCallback(() => {
setStatusFilter([]);
setDirectionFilter(null);
@@ -273,7 +241,7 @@ export default function ContractRequestsPage() {
const columns: ColumnDef<ContractListRow>[] = [
{
id: "contract",
size: COLUMN_WIDTH,
size: COLUMN_WIDTHS.contract,
meta: COLUMN_META,
header: () => <span className={bookingTable.headerCell}>Customer</span>,
cell: ({ row }) => {
@@ -296,7 +264,7 @@ export default function ContractRequestsPage() {
},
{
id: "route",
size: COLUMN_WIDTH,
size: COLUMN_WIDTHS.route,
meta: COLUMN_META,
header: () => <span className={bookingTable.headerCell}>Route</span>,
cell: ({ row }) => {
@@ -311,7 +279,7 @@ export default function ContractRequestsPage() {
<div className="flex gap-1.5">
<Badge
variant="outline"
className="h-5 border-border/50 bg-background/50 px-1.5 text-[10px] font-medium uppercase backdrop-blur-sm"
className="h-5 border-border/50 bg-background/50 px-1.5 text-[10px] font-medium backdrop-blur-sm"
>
{directionLabel(c.tradeDirection)}
</Badge>
@@ -319,7 +287,7 @@ export default function ContractRequestsPage() {
variant="secondary"
className="h-5 bg-muted/40 px-1.5 text-[10px] font-medium"
>
{c.freightType}
{humanize(c.freightType)}
</Badge>
</div>
</div>
@@ -328,47 +296,77 @@ export default function ContractRequestsPage() {
},
{
id: "status",
size: COLUMN_WIDTH,
size: COLUMN_WIDTHS.status,
meta: COLUMN_META,
header: () => <span className={bookingTable.headerCell}>Status</span>,
cell: ({ row }) => (
<div className="py-1">
<ContractStatusBadge
status={row.original.status}
isRenewal={row.original.isRenewal}
/>
</div>
),
},
{
id: "court",
size: COLUMN_WIDTH,
meta: COLUMN_META,
header: () => (
<span className={bookingTable.headerCell}>Waiting on</span>
),
cell: ({ row }) => (
<div className="py-1">
<ContractCourtBadge status={row.original.status} />
</div>
),
},
{
id: "approval",
size: COLUMN_WIDTH,
meta: COLUMN_META,
header: () => <span className={bookingTable.headerCell}>Approval</span>,
cell: ({ row }) => <ContractApprovalProgressCell row={row.original} />,
cell: ({ row }) => {
const c = row.original;
const court = contractCourt(c.status);
const progress = formatContractApprovalProgress(
c.status,
c.approvalSteps,
);
const action = getStaffRowAction(c);
// One dimmed line: who it's waiting on, the staff verb, and the
// approval chain when one exists. "Open" adds nothing — row click
// already opens the detail page.
const pieces: ReactNode[] = [];
if (court) {
pieces.push(court === "customer" ? "With customer" : "With EDR");
}
if (action && action.variant === "filled") {
pieces.push(
// "View & sign" pointed at the contract-view page, not the
// detail page — keep that deep link as an inline link.
action.to(c.id).endsWith("/view") ? (
<button
type="button"
className="underline underline-offset-2 hover:text-primary"
onClick={(e) => {
e.stopPropagation();
navigate(action.to(c.id));
}}
>
{action.label}
</button>
) : (
action.label
),
);
}
if ((c.approvalSteps ?? []).length > 0) {
pieces.push(progress.label);
if (!progress.complete && progress.detail.startsWith("Next:")) {
pieces.push(progress.detail);
}
}
return (
<div className="space-y-1 py-1">
<ContractStatusBadge status={c.status} isRenewal={c.isRenewal} />
{pieces.length ? (
<div className="text-xs text-muted-foreground">
{pieces.map((piece, i) => (
<span key={i}>
{i > 0 ? " · " : null}
{piece}
</span>
))}
</div>
) : null}
</div>
);
},
},
{
id: "validity",
size: COLUMN_WIDTH,
size: COLUMN_WIDTHS.validity,
meta: COLUMN_META,
header: () => <span className={bookingTable.headerCell}>Validity</span>,
cell: ({ row }) => {
const c = row.original;
const isGeneral = c.contractKind === "GENERAL";
return (
<Stack gap={2}>
<Stack gap={2} align="flex-start">
<span className="inline-flex items-center gap-1.5 text-sm text-muted-foreground">
<CalendarClock className="size-3.5" />
{c.validUntil
@@ -382,58 +380,22 @@ export default function ContractRequestsPage() {
From {formatDate(c.validFrom)}
</Text>
) : null}
<Badge
variant="outline"
className="h-5 border-border/50 bg-background/50 px-1.5 text-[10px] font-medium uppercase"
>
{isGeneral ? (
<span className="inline-flex items-center gap-1">
<Repeat className="size-3" /> General
</span>
) : (
"One-time"
)}
</Badge>
</Stack>
);
},
},
{
id: "kind",
size: COLUMN_WIDTH,
meta: COLUMN_META,
header: () => <span className={bookingTable.headerCell}>Kind</span>,
cell: ({ row }) => {
const isGeneral = row.original.contractKind === "GENERAL";
return (
<Badge
variant="outline"
className="h-5 border-border/50 bg-background/50 px-1.5 text-[10px] font-medium uppercase"
>
{isGeneral ? (
<span className="inline-flex items-center gap-1">
<Repeat className="size-3" /> General
</span>
) : (
"One-time"
)}
</Badge>
);
},
},
{
id: "actions",
size: COLUMN_WIDTH,
meta: COLUMN_META,
header: () => <span className={bookingTable.headerCell}>Action</span>,
cell: ({ row }) => {
const action = getStaffRowAction(row.original);
if (!action) return null;
return (
<Button
size="compact-sm"
radius="md"
variant={action.variant === "filled" ? "filled" : action.variant}
color="edr-green"
onClick={(e) => {
// Don't let the row-click navigation fire as well.
e.stopPropagation();
navigate(action.to(row.original.id));
}}
>
{action.label}
</Button>
);
},
},
];
return (
@@ -486,22 +448,11 @@ export default function ContractRequestsPage() {
]}
/>
<ContractStatusTabs
active={activeTab}
onChange={(tab) => {
setActiveTab(tab);
// Status picks belong to the previous tab's option set — reset.
setStatusFilter([]);
setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
}}
counts={tabCounts}
/>
<Card p={0}>
<Stack gap={0}>
<Box px="md" pt="md" pb="sm" w="100%">
<Stack gap="sm">
<Group justify="space-between" gap="md" wrap="wrap">
<Group gap="sm" wrap="wrap">
<TextInput
placeholder="Search reference or customer…"
leftSection={<Search size={18} />}
@@ -541,16 +492,11 @@ export default function ContractRequestsPage() {
style={{ minWidth: 170 }}
aria-label="Sort contracts"
/>
<Text size="sm" c="dimmed">
{total} record{total !== 1 ? "s" : ""}
</Text>
</Group>
<Group gap="sm" wrap="wrap">
<MultiSelect
placeholder={
statusFilter.length ? undefined : "All statuses"
}
data={statusOptions}
data={STATUS_OPTIONS}
value={statusFilter}
onChange={(v) => {
setStatusFilter(v);
@@ -562,6 +508,38 @@ export default function ContractRequestsPage() {
style={{ minWidth: 220 }}
aria-label="Filter by status"
/>
<Select
placeholder="All kinds"
data={CONTRACT_KIND_OPTIONS}
value={kindFilter}
onChange={(v) => {
setKindFilter(v);
resetPage();
}}
clearable
radius="lg"
style={{ minWidth: 160 }}
aria-label="Filter by contract kind"
/>
<FilterToggle
count={advancedFilterCount}
expanded={showAdvanced}
onClick={() => setShowAdvanced((v) => !v)}
/>
{activeFilterCount > 0 ? (
<Button
variant="subtle"
color="gray"
radius="lg"
leftSection={<FilterX size={16} />}
onClick={clearFilters}
>
Clear filters ({activeFilterCount})
</Button>
) : null}
</Group>
<Collapse expanded={showAdvanced}>
<Group gap="sm" wrap="wrap">
<Select
placeholder="All directions"
data={filterOptions(TRADE_DIRECTION_OPTIONS)}
@@ -588,19 +566,6 @@ export default function ContractRequestsPage() {
style={{ minWidth: 160 }}
aria-label="Filter by freight type"
/>
<Select
placeholder="All kinds"
data={CONTRACT_KIND_OPTIONS}
value={kindFilter}
onChange={(v) => {
setKindFilter(v);
resetPage();
}}
clearable
radius="lg"
style={{ minWidth: 160 }}
aria-label="Filter by contract kind"
/>
<Select
placeholder="All currencies"
data={CURRENCY_OPTIONS}
@@ -629,18 +594,8 @@ export default function ContractRequestsPage() {
style={{ minWidth: 220 }}
aria-label="Created date range"
/>
{activeFilterCount > 0 ? (
<Button
variant="subtle"
color="gray"
radius="lg"
leftSection={<FilterX size={16} />}
onClick={clearFilters}
>
Clear filters ({activeFilterCount})
</Button>
) : null}
</Group>
</Collapse>
</Stack>
</Box>
@@ -672,7 +627,7 @@ export default function ContractRequestsPage() {
manualPagination: true,
pageCount,
}}
// table-fixed makes the per-column 120px widths stick; without
// table-fixed makes the per-column widths stick; without
// it auto-layout re-widens columns once cells wrap.
containerClassName="border-0 shadow-none bg-transparent [&_table]:table-fixed [&_table]:min-w-[960px]"
footer={DataTableFooter}

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

@@ -1,3 +1,4 @@
import { formatDate } from "@/lib/format";
import { directionLabel } from "@/lib/utils";
import { useCallback, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
@@ -51,18 +52,6 @@ const prettyStatus = (s?: string | null) =>
.replace(/_/g, " ")
.replace(/^\w/, (c) => c.toUpperCase());
function formatDate(value?: string | null): string {
if (!value) return "—";
const d = new Date(value);
return Number.isNaN(d.getTime())
? "—"
: d.toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
});
}
function yardLabel(
yard?: { label?: string; code?: string; name?: string } | null,
fallback = "—",
@@ -661,9 +650,6 @@ export default function GlDjiboutiClearanceListPage() {
Clear
</Button>
) : null}
<Text size="sm" c="dimmed" ml="auto">
{total} record{total !== 1 ? "s" : ""}
</Text>
</Group>
</Box>

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

@@ -294,7 +294,7 @@ export default function ShipmentRequestsPage() {
{row.original.contractReference}
</Text>
{row.original.customerName ? (
<Text size="xs" c="dimmed" mt={2}>
<Text size="xs" c="dimmed" mt={2} truncate maw={200}>
{row.original.customerName}
</Text>
) : null}

48
apps/edr-freight-web/backoffice/src/pages/customers/CustomersPage.tsx
View File

@@ -147,7 +147,7 @@ export default function CustomersPage() {
</Box>
<div style={{ minWidth: 0 }}>
<Group gap={8} wrap="nowrap">
<Text fw={600} c="edr-text" truncate>
<Text fw={600} c="edr-text" truncate maw={200}>
{c.name}
</Text>
<CompanyNationalityBadge nationality={c.nationality} />
@@ -156,6 +156,9 @@ export default function CustomersPage() {
TIN {c.tin}
{c.country ? ` · ${c.country}` : ""}
</Text>
<Box mt={4}>
<CompanyStatusBadge status={c.status} />
</Box>
</div>
</Group>
);
@@ -164,16 +167,9 @@ export default function CustomersPage() {
{
id: "profiles",
header: "Profiles",
cell: ({ row }) => (
<ProfileChips profiles={row.original.companyProfiles} />
),
},
{
id: "status",
header: "Status",
cell: ({ row }) => {
// A draft's profiles are all `pending` by construction, so the
// "N pending" review hint would be a lie until they submit.
// A draft's profiles are all `pending` by construction — the
// status-colored chips would be a lie until they submit.
if (isOnboardingDraft(row.original)) {
return (
<Tooltip label="Customer is still filling in the onboarding wizard">
@@ -183,23 +179,7 @@ export default function CustomersPage() {
</Tooltip>
);
}
const pending = (row.original.companyProfiles ?? []).filter(
(p) => p.status === "pending",
).length;
return (
<Group gap={6} wrap="nowrap">
<CompanyStatusBadge status={row.original.status} />
{pending > 0 ? (
<Tooltip
label={`${pending} profile${pending > 1 ? "s" : ""} awaiting approval`}
>
<Badge color="yellow" variant="light" size="sm" radius="sm">
{pending} pending
</Badge>
</Tooltip>
) : null}
</Group>
);
return <ProfileChips profiles={row.original.companyProfiles} />;
},
},
{
@@ -229,6 +209,7 @@ export default function CustomersPage() {
c="dimmed"
className="inline-flex items-center gap-1"
truncate
maw={200}
>
<Mail size={12} /> {c.email}
</Text>
@@ -247,16 +228,6 @@ export default function CustomersPage() {
</Text>
),
},
{
id: "approved",
header: "Approved",
meta: { headerClassName: "text-right", cellClassName: "text-right" },
cell: ({ row }) => (
<Text size="sm" c="dimmed">
{row.original.approvedAt ? formatDate(row.original.approvedAt) : "—"}
</Text>
),
},
],
[],
);
@@ -376,9 +347,6 @@ export default function CustomersPage() {
}}
data={SORT_OPTIONS.map((o) => ({ ...o }))}
/>
<Text size="sm" c="dimmed">
{total} record{total !== 1 ? "s" : ""}
</Text>
</Group>
</Box>

12
apps/edr-freight-web/backoffice/src/pages/fleet/DriverDetailPage.tsx
View File

@@ -43,17 +43,13 @@ import {
fetchViewableFile,
} from "@/services/files.service";
import { useToast } from "@/hooks/use-toast";
import { formatDateTime } from "@/lib/format";
const fmtDate = (iso?: string | null) => {
if (!iso) return "—";
const d = new Date(iso);
return Number.isNaN(d.getTime()) ? "—" : d.toLocaleDateString();
};
const fmtDateTime = (iso?: string | null) => {
if (!iso) return "—";
const d = new Date(iso);
return Number.isNaN(d.getTime()) ? "—" : d.toLocaleString();
};
const meta = (e: FleetHistoryEvent, k: string) => {
const v = e.metadata?.[k];
return typeof v === "string" && v ? v : null;
@@ -400,7 +396,7 @@ const VehiclesTab = ({ driverId }: { driverId: string }) => {
{rows.map((r) => (
<Table.Tr key={r.id}>
<Table.Td>{r.plate}</Table.Td>
<Table.Td>{fmtDateTime(r.at)}</Table.Td>
<Table.Td>{formatDateTime(r.at)}</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
@@ -425,7 +421,7 @@ const HistoryTab = ({ driverId }: { driverId: string }) => {
.join(" · ")}
</Text>
)}
<Text size="xs" c="dimmed" mt={2}>{fmtDateTime(e.createdAt)}</Text>
<Text size="xs" c="dimmed" mt={2}>{formatDateTime(e.createdAt)}</Text>
</Timeline.Item>
))}
</Timeline>
@@ -471,7 +467,7 @@ const TripsTab = ({ driverId }: { driverId: string }) => {
<Table.Td>{t.booking}</Table.Td>
<Table.Td>{t.vehicle}</Table.Td>
<Table.Td>{t.status}</Table.Td>
<Table.Td>{fmtDateTime(t.at)}</Table.Td>
<Table.Td>{formatDateTime(t.at)}</Table.Td>
</Table.Tr>
))}
</Table.Tbody>

10
apps/edr-freight-web/backoffice/src/pages/fleet/TrackingPage.tsx
View File

@@ -35,6 +35,7 @@ import {
type GpsDevice,
} from "@/services/gps-tracking.service";
import { freightBrand } from "@/theme/freight-brand";
import { formatDateTime } from "@/lib/format";
// Maps JavaScript API keys are public client-side keys — lock them down by
// HTTP-referrer in the Google Cloud console. No fallback: a hardcoded default
@@ -51,11 +52,6 @@ const deviceLabel = (d: GpsDevice) =>
? [d.vehicle.code, d.vehicle.plateNumber].filter(Boolean).join(" · ")
: d.name || d.imei;
const fmtTime = (iso?: string | null) => {
if (!iso) return "—";
const d = new Date(iso);
return Number.isNaN(d.getTime()) ? "—" : d.toLocaleString();
};
const StatBox = ({ label, value }: { label: string; value: string }) => (
<Box p="sm" style={{ backgroundColor: "#f8f9fa", borderRadius: 8 }}>
@@ -530,7 +526,7 @@ export function TrackingPage() {
Last fix
</Text>
<Text fw={500} size="sm">
{fmtTime(selected.lastFixAt)}
{formatDateTime(selected.lastFixAt)}
</Text>
</div>
{selected.vehicleId && (
@@ -580,7 +576,7 @@ export function TrackingPage() {
</Text>
<Text size="xs" c="dimmed">
{toNum(d.lastSpeed) ?? 0} km/h ·{" "}
{fmtTime(d.lastFixAt)}
{formatDateTime(d.lastFixAt)}
</Text>
</Stack>
</Table.Td>

10
apps/edr-freight-web/backoffice/src/pages/fleet/VehicleDetailPage.tsx
View File

@@ -42,6 +42,7 @@ import {
} from "@/services/vehicles.service";
import { driversService } from "@/services/drivers.service";
import { fleetHistoryService } from "@/services/fleet-history.service";
import { formatDateTime } from "@/lib/format";
interface MaintenanceCost {
id: string;
@@ -77,11 +78,6 @@ const fmtDate = (iso?: string | null) => {
const d = new Date(iso);
return Number.isNaN(d.getTime()) ? "—" : d.toLocaleDateString();
};
const fmtDateTime = (iso?: string | null) => {
if (!iso) return "—";
const d = new Date(iso);
return Number.isNaN(d.getTime()) ? "—" : d.toLocaleString();
};
const money = (n?: number | null) =>
n == null ? "—" : `ETB ${Number(n).toLocaleString(undefined, { maximumFractionDigits: 2 })}`;
@@ -359,7 +355,7 @@ const DriverTab = ({
{drivers.map((d) => (
<Table.Tr key={d.id}>
<Table.Td>{d.name}</Table.Td>
<Table.Td>{fmtDateTime(d.at)}</Table.Td>
<Table.Td>{formatDateTime(d.at)}</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
@@ -388,7 +384,7 @@ const HistoryTab = ({ vehicleId }: { vehicleId: string }) => {
.join(" · ")}
</Text>
)}
<Text size="xs" c="dimmed" mt={2}>{fmtDateTime(e.createdAt)}</Text>
<Text size="xs" c="dimmed" mt={2}>{formatDateTime(e.createdAt)}</Text>
</Timeline.Item>
))}
</Timeline>

5
apps/edr-freight-web/backoffice/src/pages/invoices/InvoicesPage.tsx
View File

@@ -73,7 +73,7 @@ export default function InvoicesPanel() {
id: "billedTo",
header: "Billed to",
cell: ({ row }) => (
<Text size="sm" c="edr-text">
<Text size="sm" c="edr-text" truncate maw={200}>
{row.original.company?.name ?? "—"}
</Text>
),
@@ -170,9 +170,6 @@ export default function InvoicesPanel() {
{ label: "Overdue", value: "OVERDUE" },
]}
/>
<Text size="sm" c="dimmed">
{total} record{total !== 1 ? "s" : ""}
</Text>
<ActionIcon
variant="default"
size="lg"

5
apps/edr-freight-web/backoffice/src/pages/invoices/UsdPaymentsPage.tsx
View File

@@ -169,7 +169,7 @@ export default function UsdPaymentsPanel() {
id: "billedTo",
header: "Customer",
cell: ({ row }) => (
<Text size="sm" c="edr-text">
<Text size="sm" c="edr-text" truncate maw={200}>
{row.original.company?.name ?? "—"}
</Text>
),
@@ -304,9 +304,6 @@ export default function UsdPaymentsPanel() {
{ label: "Overdue", value: "OVERDUE" },
]}
/>
<Text size="sm" c="dimmed">
{total} record{total !== 1 ? "s" : ""}
</Text>
<ActionIcon
variant="default"
size="lg"

7
apps/edr-freight-web/backoffice/src/pages/operations/EdrTruckExitPapersModal.tsx
View File

@@ -7,6 +7,7 @@ import { warehouseService } from "@/services/warehouse.service";
import type { LastMileRecord } from "@/services/last-mile.service";
import { extractDownloadErrorMessage } from "@/components/warehouses/options";
import { openPdfBlob } from "@/components/warehouses/pdf";
import { formatDateTime } from "@/lib/format";
interface EdrTruckExitPapersModalProps {
opened: boolean;
@@ -14,8 +15,6 @@ interface EdrTruckExitPapersModalProps {
record: LastMileRecord | null;
}
const fmt = (value?: string | null) =>
value ? new Date(value).toLocaleString() : "—";
/**
* Per-truck exit papers for an EDR last-mile delivery. Each assigned truck has
@@ -87,11 +86,11 @@ export function EdrTruckExitPapersModal({ opened, onClose, record }: EdrTruckExi
<Text size="sm">{load}</Text>
</Table.Td>
<Table.Td>
<Text size="sm">{fmt(t.arrivedAt)}</Text>
<Text size="sm">{formatDateTime(t.arrivedAt)}</Text>
</Table.Td>
<Table.Td>
{t.departedAt ? (
<Text size="sm">{fmt(t.departedAt)}</Text>
<Text size="sm">{formatDateTime(t.departedAt)}</Text>
) : (
<Badge size="sm" variant="light" color="gray">
Still on site

8
apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
View File

@@ -1139,7 +1139,11 @@ const FirstMilePage = () => {
id: "customer",
header: "Customer",
meta: { headerClassName, cellClassName },
cell: ({ row }) => customerName(row.original),
cell: ({ row }) => (
<Text size="sm" truncate maw={200}>
{customerName(row.original)}
</Text>
),
},
{
id: "postPayment",
@@ -1189,7 +1193,7 @@ const FirstMilePage = () => {
id: "exactKm",
header: "Actual Distance (KM)",
meta: { headerClassName, cellClassName },
cell: ({ row }) => row.original.exactKm != null ? row.original.exactKm : <Text c="dimmed">—</Text>,
cell: ({ row }) => row.original.exactKm != null ? `${row.original.exactKm} km` : <Text c="dimmed">—</Text>,
},
{
id: "invoice",

8
apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
View File

@@ -1296,7 +1296,11 @@ const LastMilePage = () => {
id: "customer",
header: "Customer",
meta: { headerClassName, cellClassName },
cell: ({ row }) => customerName(row.original),
cell: ({ row }) => (
<Text size="sm" truncate maw={200}>
{customerName(row.original)}
</Text>
),
},
{
id: "postPayment",
@@ -1346,7 +1350,7 @@ const LastMilePage = () => {
id: "exactKm",
header: "Actual Distance (KM)",
meta: { headerClassName, cellClassName },
cell: ({ row }) => row.original.exactKm != null ? row.original.exactKm : <Text c="dimmed">—</Text>,
cell: ({ row }) => row.original.exactKm != null ? `${row.original.exactKm} km` : <Text c="dimmed">—</Text>,
},
{
id: "invoice",

25
apps/edr-freight-web/backoffice/src/pages/payments/PaymentsPage.tsx
View File

@@ -8,7 +8,6 @@ import {
Select,
Stack,
Tabs,
Text,
TextInput,
} from "@mantine/core";
import {
@@ -26,6 +25,7 @@ import { useMemo, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { KpiStrip } from "@/components/page";
import { formatDate, formatMoney } from "@/lib/format";
import { api } from "@/services/api";
import type { PaymentMethod, PaymentRow } from "@/services/payments.service";
import {
@@ -80,24 +80,6 @@ const STATUS_COLORS: Record<string, string> = {
refunded: "indigo",
};
function formatAmount(amount: number, currency: string): string {
return `${currency} ${Number(amount).toLocaleString(undefined, {
minimumFractionDigits: 2,
})}`;
}
function formatDate(iso: string | null): string {
if (!iso) return "—";
const d = new Date(iso);
return Number.isNaN(d.getTime())
? "—"
: d.toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
});
}
const tableHeader =
"text-xs font-semibold uppercase tracking-wide text-muted-foreground";
@@ -166,7 +148,7 @@ export default function PaymentsPanel() {
header: () => <span className={tableHeader}>Amount</span>,
cell: ({ row }) => (
<span className="font-mono text-sm font-semibold tabular-nums text-foreground">
{formatAmount(row.original.amount, row.original.currency)}
{formatMoney(row.original.amount, row.original.currency, 2)}
</span>
),
},
@@ -327,9 +309,6 @@ export default function PaymentsPanel() {
}}
style={{ minWidth: 180 }}
/>
<Text size="sm" c="dimmed">
{total} record{total !== 1 ? "s" : ""}
</Text>
</Group>
</Box>

3
apps/edr-freight-web/backoffice/src/pages/settings/ExchangeRateSettingsCard.tsx
View File

@@ -15,6 +15,7 @@ import {
useSetExchangeFallbackRate,
} from "@/hooks/useExchangeSettings";
import type { ExchangeRateSource } from "@/services/exchangeSettings.service";
import { formatDateTime } from "@/lib/format";
/** Feed health, phrased for an operator rather than a developer. */
function feedLabel(source: ExchangeRateSource | null): {
@@ -35,7 +36,7 @@ function feedLabel(source: ExchangeRateSource | null): {
}
const formatTime = (value: string | null) =>
value ? new Date(value).toLocaleString() : "never";
value ? formatDateTime(value) : "never";
/**
* USD→ETB fallback used when the CBE exchange-rate endpoint is unreachable.

3
apps/edr-freight-web/backoffice/src/pages/warehouses/ContainerReturnsPage.tsx
View File

@@ -37,6 +37,7 @@ import type {
EmptyContainerReturn,
EmptyContainerReturnStatus,
} from "@/types/importOperations";
import { formatDateTime } from "@/lib/format";
type ReturnType = "all" | "edr" | "customer";
@@ -635,7 +636,7 @@ export default function ContainerReturnsPage() {
{(historyRow.statusHistory ?? []).map((entry: any, idx: number) => (
<Group key={idx} justify="space-between">
<Badge size="sm">{RETURN_STATUS_LABEL[entry.status as EmptyContainerReturnStatus] ?? entry.status}</Badge>
<Text size="sm" c="dimmed">{new Date(entry.changedAt).toLocaleString()}</Text>
<Text size="sm" c="dimmed">{formatDateTime(entry.changedAt)}</Text>
</Group>
))}
{!(historyRow.statusHistory ?? []).length && (

7
apps/edr-freight-web/backoffice/src/pages/warehouses/ImportTrucksPage.tsx
View File

@@ -38,6 +38,7 @@ import {
toReleaseInventoryItem,
} from "@/components/warehouses/options";
import { openPdfBlob } from "@/components/warehouses/pdf";
import { formatDateTime } from "@/lib/format";
import { useListControls } from "@/hooks/useListControls";
import { useToast } from "@/hooks/use-toast";
import { api } from "@/services/api";
@@ -79,8 +80,6 @@ const TRUCK_COLUMNS = [
const money = (amount: number, currency: string) =>
`${Number(amount).toLocaleString(undefined, { maximumFractionDigits: 2 })} ${currency === "ETB" ? "ETB" : currency}`;
const formatTime = (iso: string | null | undefined) =>
iso ? new Date(iso).toLocaleString() : "—";
export interface BookingGroup {
bookingId: string;
@@ -376,10 +375,10 @@ export function TruckRows({ group }: { group: BookingGroup }) {
<Text size="sm">{t.containers.length ? t.containers.join(", ") : "Bulk"}</Text>
</Table.Td>
<Table.Td>
<Text size="xs">{formatTime(t.arrivedAt)}</Text>
<Text size="xs">{formatDateTime(t.arrivedAt)}</Text>
</Table.Td>
<Table.Td>
<Text size="xs">{formatTime(t.departedAt)}</Text>
<Text size="xs">{formatDateTime(t.departedAt)}</Text>
</Table.Td>
<Table.Td>{formatNumber(t.weight)}</Table.Td>
<Table.Td>{money(t.demurrage, feeCurrency)}</Table.Td>

3
apps/edr-freight-web/backoffice/src/pages/warehouses/InterchangeDocumentsPage.tsx
View File

@@ -28,6 +28,7 @@ import {
useInterchangeDocuments,
} from '@/hooks/useInterchangeDocuments';
import { useToast } from '@/hooks/use-toast';
import { humanize } from '@/lib/format';
import { interchangeDocumentsService } from '@/services/interchange-documents.service';
import type { InterchangeDocument, InterchangeDocumentStatus } from '@/types/interchangeDocument';
@@ -336,7 +337,7 @@ export default function InterchangeDocumentsPage() {
</Text>
),
},
{ id: 'direction', header: 'Direction', cell: ({ row }) => row.original.direction },
{ id: 'direction', header: 'Direction', cell: ({ row }) => humanize(row.original.direction) },
{ id: 'train', header: 'Train No', cell: ({ row }) => row.original.trainNo ?? '-' },
{ id: 'handoverLocation', header: 'Handover Location', cell: ({ row }) => row.original.handoverLocation },
{ id: 'handoverFrom', header: 'Handover From', cell: ({ row }) => row.original.handoverFrom },

3
apps/edr-freight-web/backoffice/src/pages/warehouses/TrucksOnSitePage.tsx
View File

@@ -18,6 +18,7 @@ import RuleEngineListFooter from "@/components/ruleEngine/RuleEngineListFooter";
import { useListControls } from "@/hooks/useListControls";
import { useTrucksOnSite } from "@/hooks/useWarehouses";
import type { TruckOnSite } from "@/types/warehouse";
import { formatDateTime } from "@/lib/format";
/**
* Every truck inside the yard right now, across all bookings.
@@ -122,7 +123,7 @@ function Rows({ rows }: { rows: TruckOnSite[] }) {
</Text>
) : isLongDwell(row.arrivedAt) ? (
<Tooltip
label={`On site over ${LONG_DWELL_HOURS}h — arrived ${new Date(row.arrivedAt).toLocaleString()}`}
label={`On site over ${LONG_DWELL_HOURS}h — arrived ${formatDateTime(row.arrivedAt)}`}
withArrow
>
<Text size="sm" c="red" fw={600}>

5
apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseInvoicesPage.tsx
View File

@@ -40,6 +40,7 @@ import { buildWarehouseExitPaperPdf } from '@/components/warehouses/warehousePdf
import { extractErrorMessage } from '@/components/warehouses/options';
import { useAuth } from '@/auth/useAuth';
import { FREIGHT_PERMS, hasPermission } from '@/lib/permissions';
import { formatMoney, humanize } from '@/lib/format';
const STATUS_COLOR: Record<WarehouseInvoiceStatus, string> = {
DRAFT: 'gray',
@@ -50,7 +51,7 @@ const STATUS_COLOR: Record<WarehouseInvoiceStatus, string> = {
CANCELLED: 'gray',
};
const fmt = (n: number, c: string) => `${Number(n).toLocaleString()} ${c === 'ETB' ? 'Birr (ETB)' : c}`;
const fmt = (n: number, c: string) => formatMoney(n, c, 2);
const fmtDate = (d?: string | null) => (d ? new Date(d).toLocaleDateString() : '—');
export default function WarehouseInvoicesPage() {
@@ -79,7 +80,7 @@ export default function WarehouseInvoicesPage() {
</Text>
),
},
{ id: 'type', header: 'Type', cell: ({ row }) => row.original.invoiceType.replace(/_/g, ' ') },
{ id: 'type', header: 'Type', cell: ({ row }) => humanize(row.original.invoiceType) },
{ id: 'total', header: 'Total', cell: ({ row }) => fmt(row.original.totalAmount, row.original.currency) },
{ id: 'paid', header: 'Paid', cell: ({ row }) => fmt(row.original.paidAmount, row.original.currency) },
{

11
apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx
View File

@@ -46,6 +46,7 @@ import {
type FeeRuleBasis,
type FeeRuleType,
} from '@/types/warehouse';
import { humanize } from '@/lib/format';
const RULE_TYPE_COLOR: Record<FeeRuleType, string> = {
STORAGE_FEE: 'teal',
@@ -218,8 +219,8 @@ function AllocationRules() {
const allocationColumns: ColumnDef<AllocationRule>[] = [
{ id: 'priority', header: 'Priority', cell: ({ row }) => row.original.priority },
{ id: 'name', header: 'Name', cell: ({ row }) => row.original.name },
{ id: 'freight', header: 'Freight', cell: ({ row }) => row.original.freightType ?? dash },
{ id: 'trade', header: 'Trade', cell: ({ row }) => row.original.tradeDirection ?? dash },
{ id: 'freight', header: 'Freight', cell: ({ row }) => (row.original.freightType ? humanize(row.original.freightType) : dash) },
{ id: 'trade', header: 'Trade', cell: ({ row }) => (row.original.tradeDirection ? humanize(row.original.tradeDirection) : dash) },
{ id: 'cargoCode', header: 'Cargo code', cell: ({ row }) => row.original.cargoTypeCode ?? dash },
{
id: 'targetYard',
@@ -615,10 +616,10 @@ function FeeRules() {
),
},
{ id: 'name', header: 'Name', cell: ({ row }) => row.original.name },
{ id: 'freight', header: 'Freight', cell: ({ row }) => row.original.freightType ?? dash },
{ id: 'trade', header: 'Trade', cell: ({ row }) => row.original.tradeDirection ?? dash },
{ id: 'freight', header: 'Freight', cell: ({ row }) => (row.original.freightType ? humanize(row.original.freightType) : dash) },
{ id: 'trade', header: 'Trade', cell: ({ row }) => (row.original.tradeDirection ? humanize(row.original.tradeDirection) : dash) },
{ id: 'cargo', header: 'Cargo', cell: ({ row }) => row.original.cargoTypeCode ?? dash },
{ id: 'container', header: 'Container', cell: ({ row }) => row.original.containerType ?? dash },
{ id: 'container', header: 'Container', cell: ({ row }) => (row.original.containerType ? humanize(row.original.containerType) : dash) },
{
id: 'scope',
header: 'Location scope',

4
apps/edr-freight-web/backoffice/src/types/overview.ts
View File

@@ -10,6 +10,10 @@ export type {
IOverviewTrendPoint,
IOverviewDirectionTrendPoint,
IOverviewTonnagePoint,
IOverviewPeriodTotals,
IOverviewRevenueSlice,
IOverviewRevenueFlow,
IOverviewHeatmapCell,
IOverviewStatusCount,
IOverviewPipelineCount,
IOverviewPaymentTrendPoint,