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",
        },
        {
          label: "Pending inspection",
          value: data?.pendingInspection ?? 0,
          icon: ClipboardCheck,
          color: "yellow",
        },
        {
          label: "Trucks on-site",
          value: data?.trucksOnSite ?? 0,
          icon: Truck,
          color: "blue",
        },
        {
          label: "Items aging (>7d)",
          value: data?.itemsAging ?? 0,
          icon: AlertTriangle,
          color: (data?.itemsAging ?? 0) > 0 ? "red" : "edr-green",
          hint: "In warehouse over 7 days",
        },
      ]}
    />
  );
}