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 4dfd39b0c..6b90d6c8a 100644 --- a/apps/edr-freight-web/backoffice/src/components/page/KpiStrip.tsx +++ b/apps/edr-freight-web/backoffice/src/components/page/KpiStrip.tsx @@ -1,6 +1,7 @@ import { Card, Skeleton, Text } from "@mantine/core"; import type { LucideIcon } from "lucide-react"; -import type { ReactNode } from "react"; +import type { ElementType, ReactNode } from "react"; +import { Link } from "react-router-dom"; import { cn } from "@/lib/utils"; @@ -22,6 +23,11 @@ export interface KpiItem { * (green up, red down, muted zero). E.g. today's count minus yesterday's. */ delta?: number; + /** + * Optional route the cell links to — its detail view. When set the cell + * becomes clickable (pointer, hover tint); when absent it stays static. + */ + href?: string; } export interface KpiStripProps { @@ -47,13 +53,22 @@ export function KpiStrip({ items, loading = false }: KpiStripProps) { {cells.map((item, index) => { const Icon = item.icon; const color = item.color ?? "edr-green"; + // A cell with an href becomes a link to its detail; without one it + // stays a plain div. Same layout classes either way. + const Cell: ElementType = item.href ? Link : "div"; + const linkProps = item.href + ? { to: item.href, "aria-label": `${item.label} — view detail` } + : {}; return ( -
)} className={cn( "flex flex-1 items-center gap-3 px-5 py-4", index > 0 && "border-t border-edr-border sm:border-l sm:border-t-0", + item.href && + "cursor-pointer no-underline transition-colors hover:bg-gray-50 focus-visible:bg-gray-50", )} > {Icon ? ( @@ -102,7 +117,7 @@ export function KpiStrip({ items, loading = false }: KpiStripProps) { {item.hint ? ` · ${item.hint}` : ""}
- + ); })} diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseOpsKpiStrip.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseOpsKpiStrip.tsx index 88a60bbb4..4e2fdcf15 100644 --- a/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseOpsKpiStrip.tsx +++ b/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseOpsKpiStrip.tsx @@ -23,18 +23,23 @@ export function WarehouseOpsKpiStrip() { delta: data != null ? data.receivedToday - data.receivedYesterday : undefined, hint: "vs yesterday", + // The received cargo itself, on the inventory board. + href: "/dashboard/warehouse-inventory?status=RECEIVED", }, { label: "Pending inspection", value: data?.pendingInspection ?? 0, icon: ClipboardCheck, color: "yellow", + // Received cargo still awaiting inspection lives in the RECEIVED bucket. + href: "/dashboard/warehouse-inventory?status=RECEIVED", }, { label: "Trucks on-site", value: data?.trucksOnSite ?? 0, icon: Truck, color: "blue", + href: "/dashboard/trucks-on-site", }, { label: "Items aging (>7d)", @@ -42,6 +47,8 @@ export function WarehouseOpsKpiStrip() { icon: AlertTriangle, color: (data?.itemsAging ?? 0) > 0 ? "red" : "edr-green", hint: "In warehouse over 7 days", + // No aging filter on the board; the inventory list is the landing. + href: "/dashboard/warehouse-inventory", }, ]} />