edr-platform/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseOpsKpiStrip.tsx

import { AlertTriangle, ClipboardCheck, PackageCheck, Truck } from "lucide-react";

import { KpiStrip } from "@/components/page";
import { useWarehouseOpsStats } from "@/hooks/useWarehouses";

/**
 * At-a-glance warehouse ops KPIs (received today, pending inspection, trucks
 * on-site, items aging). Drop-in for any warehouse ops page header.
 */
export function WarehouseOpsKpiStrip() {
  const { data, isLoading } = useWarehouseOpsStats();

  return (
    <KpiStrip
      loading={isLoading}
      items={[
        {
          label: "Received today",
          value: data?.receivedToday ?? 0,
          icon: PackageCheck,
          color: "edr-green",
          // Live signal: change vs yesterday's received count.
          delta:
            data != null ? data.receivedToday - data.receivedYesterday : undefined,
          hint: "vs yesterday",
          // Exactly the items behind the counter: received today.
          href: "/dashboard/warehouse-inventory?receivedToday=1",
        },
        {
          label: "Pending inspection",
          value: data?.pendingInspection ?? 0,
          icon: ClipboardCheck,
          color: "yellow",
          // RECEIVED items with no inspection recorded yet.
          href: "/dashboard/warehouse-inventory?pendingInspection=1",
        },
        {
          label: "Trucks on-site",
          value: data?.trucksOnSite ?? 0,
          icon: Truck,
          color: "blue",
          // Land on the On-site tab — the counter excludes inbound trucks.
          href: "/dashboard/trucks-on-site?scope=ON_SITE",
        },
        {
          label: "Items aging (>7d)",
          value: data?.itemsAging ?? 0,
          icon: AlertTriangle,
          color: (data?.itemsAging ?? 0) > 0 ? "red" : "edr-green",
          hint: "In warehouse over 7 days",
          href: "/dashboard/warehouse-inventory?agingOverDays=7",
        },
      ]}
    />
  );
}