@burdenoff/microfe-movethewheels 2026.925.2 → 2026.929.1

package/src/movethewheels/pages/WarehousesPage.tsx

@@ -3,11 +3,22 @@
  */
 
 import { useState } from 'react';
-import { Warehouse, Plus, RefreshCw, CircleCheck, Gauge } from 'lucide-react';
+import { Warehouse, Plus, RefreshCw, CircleCheck, Gauge, Filter } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
-import { Badge, Progress } from '../components/ui';
+import {
+  Badge,
+  Progress,
+  Card,
+  CardContent,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Button,
+} from '../components/ui';
 import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useWarehouses, useWarehouseStats } from '../hooks/useInventory';
 import { useDebouncedValue } from '../hooks/useDebouncedValue';
@@ -15,17 +26,26 @@ import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
 import type { Warehouse as WarehouseType } from '../types';
 
+const STATUS_OPTIONS = [
+  { value: 'all', label: 'All statuses' },
+  { value: 'ACTIVE', label: 'Active' },
+  { value: 'INACTIVE', label: 'Inactive' },
+];
+
 export default function WarehousesPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
   const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
   const debouncedSearch = useDebouncedValue(search);
   const { warehouses, totalWarehouses, hasMore, isLoading, error, refetch } = useWarehouses({
     limit: pageSize,
     offset: page * pageSize,
     search: debouncedSearch,
+    status: statusFilter === 'all' ? undefined : statusFilter,
   });
+  const filtersActive = statusFilter !== 'all' || search.length > 0;
   // Bounded aggregate for the tiles + subtitle — not the truncated page.
   const { stats } = useWarehouseStats();
 
@@ -70,7 +90,10 @@ export default function WarehousesPage() {
       id: 'utilization',
       header: 'Utilization',
       cell: (row) => {
-        const pct = (row.capacity.usedSpace / row.capacity.totalSpace) * 100;
+        const pct =
+          row.capacity.totalSpace > 0
+            ? (row.capacity.usedSpace / row.capacity.totalSpace) * 100
+            : 0;
         return (
           <div className="flex items-center gap-2">
             <Progress value={pct} className="w-16 h-2" />
@@ -83,25 +106,23 @@ export default function WarehousesPage() {
       id: 'capacity',
       header: 'Capacity',
       cell: (row) => (
-        <div className="text-sm">
-          <p>
-            {row.capacity.usedSpace.toLocaleString()} / {row.capacity.totalSpace.toLocaleString()}{' '}
-            sq ft
-          </p>
-          <p className="text-text-secondary">
-            {row.capacity.usedPallets} / {row.capacity.totalPallets} pallets
-          </p>
-        </div>
+        <p className="text-sm">
+          {row.capacity.usedSpace.toLocaleString()} / {row.capacity.totalSpace.toLocaleString()} sq
+          ft
+        </p>
       ),
     },
     {
       id: 'status',
       header: 'Status',
-      cell: (row) => (
-        <Badge variant={row.isActive ? 'default' : 'secondary'}>
-          {row.isActive ? 'Active' : 'Inactive'}
-        </Badge>
-      ),
+      cell: (row) => {
+        const isActive = row.status.toUpperCase() === 'ACTIVE';
+        return (
+          <Badge variant={isActive ? 'default' : 'secondary'}>
+            {isActive ? 'Active' : 'Inactive'}
+          </Badge>
+        );
+      },
     },
   ];
 
@@ -152,6 +173,49 @@ export default function WarehousesPage() {
         </MetricGrid>
       </div>
 
+      {/* Filters */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex flex-wrap items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Filter size={16} className="text-text-secondary" />
+              <span className="text-sm font-medium">Filters:</span>
+            </div>
+            <Select
+              value={statusFilter}
+              onValueChange={(value) => {
+                setStatusFilter(value);
+                setPage(0);
+              }}
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                {STATUS_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {filtersActive && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setStatusFilter('all');
+                  setSearch('');
+                  setPage(0);
+                }}
+              >
+                Clear filters
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
       <DataTable
         columns={columns}
         data={warehouses}

package/src/movethewheels/types/index.ts

@@ -171,11 +171,6 @@ export interface Customer {
   address: Address;
   businessLicense?: string;
   taxId?: string;
-  website?: string;
-  preferredContactMethod: 'email' | 'phone' | 'both';
-  marketingOptIn: boolean;
-  notes?: string;
-  isActive: boolean;
   rating: number;
   createdAt: Date;
   updatedAt: Date;
@@ -313,8 +308,18 @@ export interface ProofOfDelivery {
 }
 
 // Vehicle type
-export type VehicleType = 'van' | 'truck' | 'motorcycle' | 'bicycle' | 'car';
-export type VehicleStatus = 'available' | 'assigned' | 'maintenance' | 'out_of_service';
+export type VehicleType =
+  | 'van'
+  | 'truck'
+  | 'motorcycle'
+  | 'bicycle'
+  | 'flatbed'
+  | 'refrigerated'
+  | 'semi_trailer'
+  | 'drone';
+export type VehicleFuelType = 'DIESEL' | 'PETROL' | 'CNG' | 'ELECTRIC' | 'HYBRID';
+export type VehicleStatus =
+  'available' | 'assigned' | 'maintenance' | 'out_of_service' | 'decommissioned';
 
 export interface VehicleDocument {
   id: string;
@@ -333,10 +338,10 @@ export interface Vehicle {
   licensePlate: string;
   /** MtwVehicle.ownershipType — free-text, e.g. "owned", "leased". */
   ownershipType?: string;
-  year: number;
+  year?: number;
   capacity: {
-    weight: number;
-    volume: number;
+    weight?: number;
+    volume?: number;
     pallets?: number;
   };
   status: VehicleStatus;
@@ -346,7 +351,7 @@ export interface Vehicle {
   nextMaintenance?: Date;
   /** Odometer reading (km) at which the next service is due. */
   nextMaintenanceMileage?: number;
-  fuelType?: string;
+  fuelType?: VehicleFuelType;
   /** Fuel consumption, litres per 100km. */
   fuelEfficiencyLPer100Km?: number;
   fuelLevel?: number;
@@ -375,7 +380,7 @@ export interface Driver {
   employeeId: string;
   licenseNumber: string;
   licenseType: string;
-  licenseExpiry: Date;
+  licenseExpiry?: Date;
   vehicleIds: string[];
   assignedVehicle?: string;
   status: DriverStatus;
@@ -396,44 +401,18 @@ export interface Driver {
   createdAt: Date;
 }
 
-// Warehouse zone type
-export interface WarehouseZone {
-  id: string;
-  name: string;
-  type: 'receiving' | 'storage' | 'picking' | 'packing' | 'shipping';
-  location: string;
-  capacity: number;
-  currentOccupancy: number;
-}
-
-// Warehouse equipment type
-export interface WarehouseEquipment {
-  id: string;
-  type: string;
-  model: string;
-  status: 'operational' | 'maintenance' | 'out_of_service';
-  lastMaintenance: Date;
-  nextMaintenance: Date;
-}
-
 // Warehouse type
 export interface Warehouse {
   id: string;
   name: string;
   code: string;
   address: Address;
-  type: 'distribution' | 'fulfillment' | 'cold_storage' | 'cross_dock';
+  type: 'distribution' | 'fulfillment' | 'cold_storage' | 'cross_dock' | 'retail';
+  /** Raw backend value (free-text, e.g. "ACTIVE"/"INACTIVE" — defaults to ACTIVE). */
+  status: string;
   capacity: {
     totalSpace: number;
     usedSpace: number;
-    totalPallets: number;
-    usedPallets: number;
-    specialAreas: Array<{
-      type: string;
-      capacity: number;
-      currentUsage: number;
-      temperature?: { min: number; max: number; unit: string };
-    }>;
   };
   operatingHours: Record<
     string,
@@ -442,28 +421,12 @@ export interface Warehouse {
       close: string;
     } | null
   >;
-  contacts: Array<{
-    primaryEmail: string;
-    primaryPhone: string;
-  }>;
-  zones: WarehouseZone[];
-  equipment: WarehouseEquipment[];
-  staff: Array<{
-    userId: string;
-    role: string;
-    shift: string;
-    permissions: string[];
-  }>;
-  metrics: {
-    throughput: number;
-    accuracy: number;
-    productivity: number;
-    utilization: number;
-    ordersFulfilled: number;
-    averageProcessingTime: number;
-    lastUpdated: Date;
+  contactInfo?: {
+    email?: string;
+    phone?: string;
   };
-  isActive: boolean;
+  /** Real computed value: usedSpace / totalSpace. No other backend metrics exist for a warehouse. */
+  utilization: number;
   createdAt: Date;
 }
 
@@ -487,20 +450,13 @@ export interface Inventory {
   productSku?: string;
   warehouseId: string;
   warehouseName?: string;
-  zoneId: string;
   quantity: number;
   reservedQuantity: number;
   availableQuantity: number;
-  reorderLevel: number;
-  maxLevel: number;
+  damagedQuantity: number;
+  /** Undefined means no reorder point is configured — never treat as 0 (matches the backend's low-stock rule, which requires one to be set). */
+  reorderLevel?: number;
   lastRestocked: Date;
-  location: {
-    aisle: string;
-    shelf: string;
-    position: string;
-    level: number;
-  };
-  movements: InventoryMovement[];
   createdAt: Date;
   updatedAt: Date;
 }
@@ -540,10 +496,7 @@ export interface Route {
   /** Estimated fuel cost for the route (svc MtwRoute.fuelCost). */
   fuelCost?: number;
   actualDuration?: number;
-  startTime?: Date;
-  endTime?: Date;
   optimized: boolean;
-  trafficConditions: TrafficCondition[];
   createdAt: Date;
 }