diff --git a/apps/edr-freight-web/backoffice/index.html b/apps/edr-freight-web/backoffice/index.html
index ef6fc82c5..2711aaccf 100644
--- a/apps/edr-freight-web/backoffice/index.html
+++ b/apps/edr-freight-web/backoffice/index.html
@@ -4,6 +4,12 @@
EDR Freight Backoffice
+
+
+
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts b/apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts
index de357fa05..fa1f3e882 100644
--- a/apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts
@@ -53,7 +53,7 @@ export const bookingInput = {
export const bookingTable = {
headerCell:
- "h-11 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground",
+ "whitespace-nowrap text-[10px] font-semibold uppercase tracking-[0.08em] text-edr-muted",
rowHover:
"transition-colors hover:bg-muted/25 data-[state=selected]:bg-muted/30",
rowIcon: `flex size-10 shrink-0 items-center justify-center rounded-xl ${bookingGlass.iconWellGreen}`,
diff --git a/apps/edr-freight-web/backoffice/src/components/contracts/GlUpcomingWindowsSection.tsx b/apps/edr-freight-web/backoffice/src/components/contracts/GlUpcomingWindowsSection.tsx
index df1a66330..0f3443633 100644
--- a/apps/edr-freight-web/backoffice/src/components/contracts/GlUpcomingWindowsSection.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/GlUpcomingWindowsSection.tsx
@@ -122,7 +122,10 @@ function phaseCountdown(w: WindowRow): {
}
/** Badge label + Mantine color per UI state — same state the countdown uses. */
-const KIND_BADGE: Record = {
+const KIND_BADGE: Record<
+ BookingWindowUiKind,
+ { label: string; color: string }
+> = {
OPEN: { label: "Open now", color: "edr-green" },
FULL: { label: "Train full", color: "red" },
PRE_WINDOW: { label: "Opens soon", color: "yellow" },
@@ -301,8 +304,12 @@ export function GlUpcomingWindowsSection({
// Order by the train's dispatch (departure) date, nearest first. Open-now
// breaks ties on the same departure.
return rows.sort((a, b) => {
- const da = a.departureDate ? new Date(a.departureDate).getTime() : Infinity;
- const db = b.departureDate ? new Date(b.departureDate).getTime() : Infinity;
+ const da = a.departureDate
+ ? new Date(a.departureDate).getTime()
+ : Infinity;
+ const db = b.departureDate
+ ? new Date(b.departureDate).getTime()
+ : Infinity;
if (da !== db) return da - db;
return Number(b.isOpenNow) - Number(a.isOpenNow);
});
@@ -319,14 +326,16 @@ export function GlUpcomingWindowsSection({
return (
-
-
-
+
+
+
+
+
-
+
Booking windows
-
+
{contractId
? "Booking windows on this contract's routes (EAT)"
: "Import and export booking windows across all lanes (EAT)"}
@@ -386,7 +395,11 @@ export function GlUpcomingWindowsSection({
))}
) : (
-
+
{visible.map((w) => (
))}
diff --git a/apps/edr-freight-web/backoffice/src/components/page/KpiStrip.tsx b/apps/edr-freight-web/backoffice/src/components/page/KpiStrip.tsx
index 15e2f4425..5aff5afe8 100644
--- a/apps/edr-freight-web/backoffice/src/components/page/KpiStrip.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/page/KpiStrip.tsx
@@ -1,4 +1,5 @@
import { Card, Skeleton, Text } from "@mantine/core";
+import { ArrowUpRight } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import type { ElementType, ReactNode } from "react";
import { Link } from "react-router-dom";
@@ -8,14 +9,14 @@ import { cn } from "@/lib/utils";
export interface KpiItem {
label: string;
value: ReactNode;
- /** Optional leading icon rendered in a tinted chip. */
+ /** Optional leading icon rendered in a tinted chip beside the label. */
icon?: LucideIcon;
- /** Secondary line under the label (e.g. a unit or comparison). */
+ /** Small tinted pill beside the value (e.g. "+6 today"). */
hint?: string;
/**
- * Mantine color name for the icon chip (e.g. "edr-green", "red", "yellow").
- * Defaults to the brand green so a strip reads as uniform unless a page opts
- * into semantic tints.
+ * Mantine color name for the icon chip and sparkline (e.g. "edr-green",
+ * "red", "yellow"). Defaults to the brand green so a strip reads as uniform
+ * unless a page opts into semantic tints.
*/
color?: string;
/**
@@ -28,6 +29,8 @@ export interface KpiItem {
* becomes clickable (pointer, hover tint); when absent it stays static.
*/
href?: string;
+ /** Tiny bar sparkline, oldest → newest, scaled to its own max. */
+ spark?: number[];
}
export interface KpiStripProps {
@@ -36,11 +39,52 @@ export interface KpiStripProps {
loading?: boolean;
}
+function Pill({
+ children,
+ tone,
+}: {
+ children: ReactNode;
+ tone: "green" | "red";
+}) {
+ const c = tone === "green" ? "edr-green" : "red";
+ return (
+
+ {children}
+
+ );
+}
+
+function Spark({ values, color }: { values: number[]; color: string }) {
+ const max = Math.max(1, ...values);
+ return (
+
+ {values.map((v, i) => (
+
+ ))}
+
+ );
+}
+
/**
* A single bordered card divided into up to five KPI cells:
- * `[ kpi | kpi | kpi ]`. Hairline dividers separate cells (vertical on wide
- * screens, horizontal when they wrap). Surface, border and shadow all come from
- * the theme — no per-cell backgrounds, gradients or custom shadows.
+ * `[ kpi | kpi | kpi ]`. Each cell stacks a tinted icon + label over a large
+ * display-font value, with an optional hint/delta pill and a sparkline on the
+ * right. Hairline dividers separate cells (vertical on wide screens,
+ * horizontal when they wrap).
*/
export function KpiStrip({ items, loading = false }: KpiStripProps) {
// The spec caps a strip at five cells; extra items are dropped rather than
@@ -48,7 +92,7 @@ export function KpiStrip({ items, loading = false }: KpiStripProps) {
const cells = items.slice(0, 5);
return (
-
+