feat(warehouses): make dashboard date range + warehouse filter real

Backs the previously-dead header date-picker and Filters button with an actual scoped query. getDashboard() takes optional dateFrom/dateTo/ warehouseId: received (renamed from receivedToday) is the only activity counter and respects the date range, defaulting to today when omitted; the 10 status-backlog counters respect warehouseId only; totalWarehouses/emptyContainers/importTrains/exportTrains stay global since nothing ties them to a specific warehouse in the schema. Adds a warehouse Select + date-range picker to the dashboard header, with a caption spelling out what is and isn't scoped.
2026-08-29 21:08:12 +00:00 · 2026-08-20 13:29:37 +00:00
parent 572b42343f
commit 7f772efcb3
6 changed files with 155 additions and 57 deletions
--- a/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts
@@ -20,6 +20,7 @@ import type {
  SaveWarehousePayload,
  SaveYardPayload,
  SaveZonePayload,
+  WarehouseDashboardFilter,
  WarehouseFilter,
 } from '@/types/warehouse';

@@ -461,10 +462,10 @@ export function useInventoryActivity(id?: string) {
  });
 }

-export function useWarehouseDashboard() {
+export function useWarehouseDashboard(filter?: WarehouseDashboardFilter) {
  return useQuery({
-    queryKey: ['warehouses', 'dashboard'],
-    queryFn: () => warehouseService.dashboard().then((r) => r.data),
+    queryKey: ['warehouses', 'dashboard', filter ?? {}],
+    queryFn: () => warehouseService.dashboard(filter).then((r) => r.data),
    refetchInterval: DASHBOARD_REFETCH_MS,
  });
 }
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDashboardPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDashboardPage.tsx
@@ -1,5 +1,7 @@
+import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Badge, Card, Center, Divider, Group, Loader, SimpleGrid, Stack, Text, ThemeIcon } from '@mantine/core';
+import { Badge, Card, Center, Divider, Group, Loader, Select, SimpleGrid, Stack, Text, ThemeIcon } from '@mantine/core';
+import { DatePickerInput } from '@mantine/dates';
 import {
  ClipboardList,
  PackageCheck,
@@ -15,6 +17,7 @@ import {
 } from 'lucide-react';

 import { PageContainer, PageHeader } from '@/components/page';
+import { getDateRangePresets } from '@/components/common/dateRangePresets';
 import {
  AccrualDashboard,
  CycleTimeCard,
@@ -24,7 +27,7 @@ import {
  WarehouseOpsKpiStrip,
  ZoneOccupancyHeatmap,
 } from '@/components/warehouses';
-import { useWarehouseDashboard } from '@/hooks/useWarehouses';
+import { useWarehouseDashboard, useWarehouses } from '@/hooks/useWarehouses';
 import type { WarehouseDashboard } from '@/types/warehouse';

 function SectionTitle({ children }: { children: React.ReactNode }) {
@@ -50,7 +53,7 @@ const GREEN = '#084b21';
 const METRICS: Metric[] = [
  { key: 'totalWarehouses', label: 'Total Warehouses', icon: <WarehouseIcon size={22} />, to: '/dashboard/warehouses', theme: ORANGE },
  { key: 'totalInventory', label: 'Total Inventory', icon: <Boxes size={22} />, to: '/dashboard/warehouse-inventory', theme: GREEN },
-  { key: 'receivedToday', label: 'Received Today', icon: <PackagePlus size={22} />, to: '/dashboard/warehouse-inventory?status=RECEIVED', theme: ORANGE },
+  { key: 'received', label: 'Received Today', icon: <PackagePlus size={22} />, to: '/dashboard/warehouse-inventory?status=RECEIVED', theme: ORANGE },
  { key: 'awaitingInspection', label: 'Awaiting Inspection', icon: <ClipboardList size={22} />, to: '/dashboard/warehouse-inventory?status=RECEIVED', theme: GREEN },
  { key: 'emptyContainers', label: 'Empty Containers', icon: <PackageOpen size={22} />, to: '/dashboard/containers', theme: ORANGE },
  { key: 'importTrains', label: 'Import Trains', icon: <Train size={22} />, to: '/dashboard/import-warehouse', theme: GREEN },
@@ -64,7 +67,23 @@ const METRICS: Metric[] = [

 export default function WarehouseDashboardPage() {
  const navigate = useNavigate();
-  const { data, isError, isLoading } = useWarehouseDashboard();
+  // Both null → the API defaults `received` to "today", matching the page's original behaviour.
+  const [dateRange, setDateRange] = useState<[string | null, string | null]>([null, null]);
+  const [warehouseId, setWarehouseId] = useState<string | null>(null);
+  const [dateFrom, dateTo] = dateRange;
+  const hasCustomRange = Boolean(dateFrom || dateTo);
+
+  const warehousesQuery = useWarehouses();
+  const warehouseOptions = useMemo(
+    () => (warehousesQuery.data ?? []).map((w) => ({ value: w.id, label: `${w.name} (${w.code})` })),
+    [warehousesQuery.data],
+  );
+
+  const { data, isError, isLoading } = useWarehouseDashboard({
+    dateFrom: dateFrom ?? undefined,
+    dateTo: dateTo ?? undefined,
+    warehouseId: warehouseId ?? undefined,
+  });

  return (
    <PageContainer>
@@ -72,27 +91,58 @@ export default function WarehouseDashboardPage() {
        title="Warehouse Dashboard"
        subtitle="Live overview of warehouse capacity and inventory lifecycle."
        action={
-          <Badge
-            color="edr-green"
-            variant="light"
-            size="lg"
-            leftSection={
-              <span
-                style={{
-                  display: 'inline-block',
-                  width: 8,
-                  height: 8,
-                  borderRadius: '50%',
-                  background: 'var(--mantine-color-edr-green-6)',
-                }}
-              />
-            }
-          >
-            Live · updates every 60s
-          </Badge>
+          <Group gap="sm" wrap="wrap" justify="flex-end">
+            <Select
+              placeholder="All warehouses"
+              clearable
+              searchable
+              data={warehouseOptions}
+              value={warehouseId}
+              onChange={setWarehouseId}
+              w={220}
+            />
+            <DatePickerInput
+              type="range"
+              placeholder="Received: today"
+              value={dateRange}
+              onChange={setDateRange}
+              presets={getDateRangePresets()}
+              clearable
+              w={230}
+            />
+            <Badge
+              color="edr-green"
+              variant="light"
+              size="lg"
+              leftSection={
+                <span
+                  style={{
+                    display: 'inline-block',
+                    width: 8,
+                    height: 8,
+                    borderRadius: '50%',
+                    background: 'var(--mantine-color-edr-green-6)',
+                  }}
+                />
+              }
+            >
+              Live · updates every 60s
+            </Badge>
+          </Group>
        }
      />

+      {(warehouseId || hasCustomRange) && (
+        <Text size="xs" c="dimmed" mt={-8}>
+          Scoped to{' '}
+          {warehouseId ? warehouseOptions.find((o) => o.value === warehouseId)?.label ?? 'selected warehouse' : 'all warehouses'}
+          {hasCustomRange
+            ? ` · Received counts ${dateFrom ?? '…'} to ${dateTo ?? '…'}`
+            : ' · Received counts: today'}
+          . Status-backlog and fleet counters are always current regardless of the date range.
+        </Text>
+      )}
+
      {isLoading ? (
        <Center py="xl">
          <Loader />
@@ -123,7 +173,7 @@ export default function WarehouseDashboardPage() {
                <Group justify="space-between" align="flex-start" wrap="nowrap">
                  <div>
                    <Text size="xs" c="edr-muted" tt="uppercase" fw={700} style={{ letterSpacing: 0.4 }}>
-                      {metric.label}
+                      {metric.key === 'received' && hasCustomRange ? 'Received' : metric.label}
                    </Text>
                    <Text fw={800} fz={32} mt={8} c="edr-text" lh={1.1}>
                      {data ? data[metric.key] : 0}
--- a/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts
@@ -64,6 +64,7 @@ import type {
  Warehouse,
  WarehouseActivityLog,
  WarehouseDashboard,
+  WarehouseDashboardFilter,
  WarehouseFacility,
  WarehouseFilter,
  WarehouseInventoryItem,
@@ -245,7 +246,10 @@ export const warehouseService = {
    apiClient.get<Warehouse[]>(URL_CONSTANTS.WAREHOUSES.BASE, {
      params: cleanParams(filter ?? {}),
    }),
-  dashboard: () => apiClient.get<WarehouseDashboard>(URL_CONSTANTS.WAREHOUSES.DASHBOARD),
+  dashboard: (filter?: WarehouseDashboardFilter) =>
+    apiClient.get<WarehouseDashboard>(URL_CONSTANTS.WAREHOUSES.DASHBOARD, {
+      params: cleanParams(filter ?? {}),
+    }),
  getDashboardSummary: (_filter?: InventoryFilter) =>
    apiClient.get<WarehouseDashboard>(URL_CONSTANTS.WAREHOUSES.DASHBOARD),
  getById: (id: string) => apiClient.get<Warehouse>(URL_CONSTANTS.WAREHOUSES.BY_ID(id)),
--- a/apps/edr-freight-web/backoffice/src/types/warehouse.ts
+++ b/apps/edr-freight-web/backoffice/src/types/warehouse.ts
@@ -286,10 +286,18 @@ export interface WarehouseActivityLog {
  createdAt: string;
 }

+/** Both dates omitted → `received` defaults to "today" (the original behaviour). */
+export interface WarehouseDashboardFilter {
+  dateFrom?: string;
+  dateTo?: string;
+  warehouseId?: string;
+}
+
 export interface WarehouseDashboard {
  totalWarehouses: number;
  totalInventory: number;
-  receivedToday: number;
+  /** Items received in the requested range — "today" when no range is set. */
+  received: number;
  awaitingInspection: number;
  inspected: number;
  stored: number;