@burdenoff/microfe-movethewheels 2026.925.2 → 2026.925.3

package/src/movethewheels/pages/WarehouseDetailsPage.tsx

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 import { useLocation, useParams } from 'react-router';
-import { Warehouse, ArrowLeft, Edit, MapPin, Clock, Users, Box, Save } from 'lucide-react';
+import { Warehouse, ArrowLeft, Edit, MapPin, Clock, Box, Save, Trash2 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import {
   Card,
@@ -22,7 +22,17 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../components/ui';
-import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
+import {
+  EmphasisPanel,
+  NextSteps,
+  PagePurpose,
+  ResponsiveDialog,
+  ResponsiveDialogContent,
+  ResponsiveDialogHeader,
+  ResponsiveDialogFooter,
+  ResponsiveDialogTitle,
+  ResponsiveDialogDescription,
+} from '@burdenoff/fe-libs/ui';
 import { useWarehouse, useInventory } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatAddress } from '../utils/formatters';
@@ -37,24 +47,36 @@ const WAREHOUSE_TYPE_OPTIONS = [
   { value: 'RETAIL', label: 'Retail' },
 ];
 
+const WAREHOUSE_STATUS_OPTIONS = [
+  { value: 'ACTIVE', label: 'Active' },
+  { value: 'INACTIVE', label: 'Inactive' },
+];
+
 function NewWarehouseForm({ editId }: { editId?: string }) {
   const { basePath, navigate } = useMoveTheWheels();
-  const { createWarehouse, updateWarehouse } = useInventory();
+  const { createWarehouse, updateWarehouse, deleteWarehouse } = useInventory();
   const { warehouse } = useWarehouse(editId);
   const isEditing = !!editId;
   const [form, setForm] = useState({
     code: '',
     name: '',
     type: 'DISTRIBUTION',
+    status: 'ACTIVE',
     street: '',
     city: '',
     state: '',
     postalCode: '',
     country: 'USA',
     totalCapacity: '',
+    usedCapacity: '',
+    contactEmail: '',
+    contactPhone: '',
   });
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
 
   useEffect(() => {
     if (!editId || !warehouse) return;
@@ -62,12 +84,16 @@ function NewWarehouseForm({ editId }: { editId?: string }) {
       code: warehouse.code || '',
       name: warehouse.name || '',
       type: warehouse.type ? warehouse.type.toUpperCase() : 'DISTRIBUTION',
+      status: warehouse.status || 'ACTIVE',
       street: warehouse.address.street || '',
       city: warehouse.address.city || '',
       state: warehouse.address.state || '',
       postalCode: warehouse.address.postalCode || '',
       country: warehouse.address.country || 'USA',
       totalCapacity: warehouse.capacity.totalSpace ? String(warehouse.capacity.totalSpace) : '',
+      usedCapacity: warehouse.capacity.usedSpace ? String(warehouse.capacity.usedSpace) : '',
+      contactEmail: warehouse.contactInfo?.email || '',
+      contactPhone: warehouse.contactInfo?.phone || '',
     });
   }, [editId, warehouse]);
 
@@ -90,10 +116,12 @@ function NewWarehouseForm({ editId }: { editId?: string }) {
     setError(null);
     try {
       const totalCapacity = form.totalCapacity.trim() ? Number(form.totalCapacity) : undefined;
+      const usedCapacity = form.usedCapacity.trim() ? Number(form.usedCapacity) : undefined;
       const warehouseInput = {
         code: form.code.trim(),
         name: form.name.trim(),
         type: form.type,
+        status: form.status,
         address: {
           street: form.street.trim(),
           city: form.city.trim(),
@@ -101,8 +129,17 @@ function NewWarehouseForm({ editId }: { editId?: string }) {
           postalCode: form.postalCode.trim(),
           country: form.country.trim(),
         },
+        contactInfo:
+          form.contactEmail.trim() || form.contactPhone.trim()
+            ? {
+                email: form.contactEmail.trim() || undefined,
+                phone: form.contactPhone.trim() || undefined,
+              }
+            : undefined,
         totalCapacity:
           totalCapacity !== undefined && !Number.isNaN(totalCapacity) ? totalCapacity : undefined,
+        usedCapacity:
+          usedCapacity !== undefined && !Number.isNaN(usedCapacity) ? usedCapacity : undefined,
       };
       if (editId) {
         await updateWarehouse(editId, warehouseInput);
@@ -120,6 +157,20 @@ function NewWarehouseForm({ editId }: { editId?: string }) {
     }
   };
 
+  const handleDelete = async () => {
+    if (!editId) return;
+    setDeleting(true);
+    setDeleteError(null);
+    try {
+      await deleteWarehouse(editId);
+      setDeleteOpen(false);
+      goBack();
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : 'Failed to delete warehouse.');
+      setDeleting(false);
+    }
+  };
+
   return (
     <PageLayout
       title={isEditing ? 'Edit Warehouse' : 'Add Warehouse'}
@@ -196,16 +247,65 @@ function NewWarehouseForm({ editId }: { editId?: string }) {
                 </Select>
               </div>
             </div>
-            <div className="space-y-2">
-              <Label htmlFor="totalCapacity">Total Capacity (sq ft)</Label>
-              <Input
-                id="totalCapacity"
-                type="number"
-                min="0"
-                value={form.totalCapacity}
-                onChange={(e) => update('totalCapacity', e.target.value)}
-                placeholder="50000"
-              />
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="status">Status</Label>
+                <Select value={form.status} onValueChange={(value) => update('status', value)}>
+                  <SelectTrigger id="status">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {WAREHOUSE_STATUS_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="totalCapacity">Total Capacity (sq ft)</Label>
+                <Input
+                  id="totalCapacity"
+                  type="number"
+                  min="0"
+                  value={form.totalCapacity}
+                  onChange={(e) => update('totalCapacity', e.target.value)}
+                  placeholder="50000"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="usedCapacity">Used Capacity (sq ft)</Label>
+                <Input
+                  id="usedCapacity"
+                  type="number"
+                  min="0"
+                  value={form.usedCapacity}
+                  onChange={(e) => update('usedCapacity', e.target.value)}
+                  placeholder="0"
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="contactEmail">Contact Email</Label>
+                <Input
+                  id="contactEmail"
+                  type="email"
+                  value={form.contactEmail}
+                  onChange={(e) => update('contactEmail', e.target.value)}
+                  placeholder="dc-sf@example.com"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="contactPhone">Contact Phone</Label>
+                <Input
+                  id="contactPhone"
+                  value={form.contactPhone}
+                  onChange={(e) => update('contactPhone', e.target.value)}
+                  placeholder="+1-555-0100"
+                />
+              </div>
             </div>
           </div>
         </EmphasisPanel>
@@ -268,7 +368,56 @@ function NewWarehouseForm({ editId }: { editId?: string }) {
             </div>
           </CardContent>
         </Card>
+
+        {isEditing && (
+          <Card className="border-status-error-border">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-status-error-text">
+                <Trash2 size={18} /> Delete Warehouse
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-3 text-sm text-text-secondary">
+                Removes this warehouse from your network. This cannot be undone from here.
+              </p>
+              <Button
+                type="button"
+                variant="outline"
+                className="border-status-error-border text-status-error-text hover:bg-status-error-bg-subtle"
+                onClick={() => setDeleteOpen(true)}
+              >
+                <Trash2 size={16} /> Delete this warehouse
+              </Button>
+            </CardContent>
+          </Card>
+        )}
       </form>
+
+      <ResponsiveDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <ResponsiveDialogContent>
+          <ResponsiveDialogHeader>
+            <ResponsiveDialogTitle>Delete this warehouse?</ResponsiveDialogTitle>
+            <ResponsiveDialogDescription>
+              This removes {form.name || 'this warehouse'} and cannot be undone from here.
+            </ResponsiveDialogDescription>
+          </ResponsiveDialogHeader>
+          <div className="px-1">
+            <FormError message={deleteError} />
+          </div>
+          <ResponsiveDialogFooter>
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>
+              Cancel
+            </Button>
+            <Button
+              className="bg-status-error-text text-text-inverse hover:opacity-90"
+              onClick={handleDelete}
+              disabled={deleting}
+            >
+              {deleting ? 'Deleting...' : 'Delete warehouse'}
+            </Button>
+          </ResponsiveDialogFooter>
+        </ResponsiveDialogContent>
+      </ResponsiveDialog>
     </PageLayout>
   );
 }
@@ -287,7 +436,7 @@ export default function WarehouseDetailsPage() {
   if (isLoading) return <LoadingState message="Loading warehouse details..." />;
   if (error || !warehouse) return <ErrorState title="Warehouse not found" onRetry={refetch} />;
 
-  const utilization = (warehouse.capacity.usedSpace / warehouse.capacity.totalSpace) * 100;
+  const isActive = warehouse.status.toUpperCase() === 'ACTIVE';
 
   return (
     <PageLayout
@@ -310,8 +459,8 @@ export default function WarehouseDetailsPage() {
       }
       headerContent={
         <div className="flex gap-2">
-          <Badge variant={warehouse.isActive ? 'default' : 'secondary'}>
-            {warehouse.isActive ? 'Active' : 'Inactive'}
+          <Badge variant={isActive ? 'default' : 'secondary'}>
+            {isActive ? 'Active' : 'Inactive'}
           </Badge>
           <Badge variant="outline" className="capitalize">
             {warehouse.type.replace('_', ' ')}
@@ -320,9 +469,9 @@ export default function WarehouseDetailsPage() {
       }
     >
       <PagePurpose icon={<Warehouse size={18} />}>
-        A storage and fulfilment site at a glance — how full it is, its zones, operating hours,
-        throughput and staff. Use it to decide whether this warehouse has the space and hours to
-        fulfil an order, and where stock is running tight.
+        A storage and fulfilment site at a glance — how full it is, its operating hours and how to
+        reach it. Use it to decide whether this warehouse has the space and hours to fulfil an
+        order.
       </PagePurpose>
 
       <NextSteps
@@ -352,65 +501,19 @@ export default function WarehouseDetailsPage() {
             <h2 className="flex items-center gap-2 text-base font-semibold text-text-primary mb-4">
               <Box size={18} /> Capacity
             </h2>
-            <div className="space-y-4">
-              <div>
-                <div className="flex justify-between text-sm mb-2">
-                  <span>Space Utilization</span>
-                  <span>{utilization.toFixed(0)}%</span>
-                </div>
-                <Progress value={utilization} />
-                <p className="text-sm text-text-secondary mt-1">
-                  {warehouse.capacity.usedSpace.toLocaleString()} /{' '}
-                  {warehouse.capacity.totalSpace.toLocaleString()} sq ft
-                </p>
-              </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <div>
-                  <p className="text-sm text-text-secondary">Pallets Used</p>
-                  <p className="text-2xl font-bold">
-                    {warehouse.capacity.usedPallets}
-                    <span className="text-sm font-normal text-text-secondary">
-                      {' '}
-                      / {warehouse.capacity.totalPallets}
-                    </span>
-                  </p>
-                </div>
+            <div>
+              <div className="flex justify-between text-sm mb-2">
+                <span>Space Utilization</span>
+                <span>{warehouse.utilization.toFixed(0)}%</span>
               </div>
+              <Progress value={warehouse.utilization} />
+              <p className="text-sm text-text-secondary mt-1">
+                {warehouse.capacity.usedSpace.toLocaleString()} /{' '}
+                {warehouse.capacity.totalSpace.toLocaleString()} sq ft
+              </p>
             </div>
           </EmphasisPanel>
 
-          <Card>
-            <CardHeader>
-              <CardTitle>Zones ({warehouse.zones.length})</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-3">
-                {warehouse.zones.map((zone) => (
-                  <div
-                    key={zone.id}
-                    className="flex items-center justify-between p-3 border rounded-lg"
-                  >
-                    <div>
-                      <p className="font-medium">{zone.name}</p>
-                      <p className="text-sm text-text-secondary capitalize">
-                        {zone.type} - {zone.location}
-                      </p>
-                    </div>
-                    <div className="text-right">
-                      <Progress
-                        value={(zone.currentOccupancy / zone.capacity) * 100}
-                        className="w-24 h-2"
-                      />
-                      <p className="text-sm text-text-secondary">
-                        {zone.currentOccupancy} / {zone.capacity}
-                      </p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
@@ -418,16 +521,20 @@ export default function WarehouseDetailsPage() {
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                {Object.entries(warehouse.operatingHours).map(([day, hours]) => (
-                  <div key={day}>
-                    <p className="text-sm font-medium">{day}</p>
-                    <p className="text-sm text-text-secondary">
-                      {hours ? `${hours.open} - ${hours.close}` : 'Closed'}
-                    </p>
-                  </div>
-                ))}
-              </div>
+              {Object.keys(warehouse.operatingHours).length > 0 ? (
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  {Object.entries(warehouse.operatingHours).map(([day, hours]) => (
+                    <div key={day}>
+                      <p className="text-sm font-medium">{day}</p>
+                      <p className="text-sm text-text-secondary">
+                        {hours ? `${hours.open} - ${hours.close}` : 'Closed'}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-text-secondary">Not recorded</p>
+              )}
             </CardContent>
           </Card>
         </div>
@@ -440,60 +547,31 @@ export default function WarehouseDetailsPage() {
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <p className="text-sm">{formatAddress(warehouse.address)}</p>
+              <p className="text-sm">{formatAddress(warehouse.address) || '—'}</p>
             </CardContent>
           </Card>
 
-          <Card>
-            <CardHeader>
-              <CardTitle>Metrics</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              <div>
-                <p className="text-sm text-text-secondary">Throughput</p>
-                <p className="text-2xl font-bold">
-                  {warehouse.metrics.throughput}
-                  <span className="text-sm font-normal"> orders/day</span>
-                </p>
-              </div>
-              <div>
-                <p className="text-sm text-text-secondary">Accuracy</p>
-                <p className="text-2xl font-bold">{warehouse.metrics.accuracy}%</p>
-              </div>
-              <div>
-                <p className="text-sm text-text-secondary">Productivity</p>
-                <p className="text-2xl font-bold">{warehouse.metrics.productivity}%</p>
-              </div>
-              <div>
-                <p className="text-sm text-text-secondary">Orders Fulfilled</p>
-                <p className="text-2xl font-bold">
-                  {warehouse.metrics.ordersFulfilled.toLocaleString()}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Users size={18} /> Staff ({warehouse.staff.length})
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              {warehouse.staff.length > 0 ? (
-                <div className="space-y-2">
-                  {warehouse.staff.map((member, i) => (
-                    <div key={i} className="flex items-center justify-between p-2 border rounded">
-                      <span className="text-sm capitalize">{member.role}</span>
-                      <Badge variant="outline">{member.shift}</Badge>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <p className="text-text-secondary">No staff assigned</p>
-              )}
-            </CardContent>
-          </Card>
+          {(warehouse.contactInfo?.email || warehouse.contactInfo?.phone) && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Contact</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {warehouse.contactInfo?.email && (
+                  <div>
+                    <p className="text-sm text-text-secondary">Email</p>
+                    <p className="font-medium">{warehouse.contactInfo.email}</p>
+                  </div>
+                )}
+                {warehouse.contactInfo?.phone && (
+                  <div>
+                    <p className="text-sm text-text-secondary">Phone</p>
+                    <p className="font-medium">{warehouse.contactInfo.phone}</p>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
         </div>
       </div>
     </PageLayout>

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();
 
@@ -83,25 +103,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 +170,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}