@burdenoff/microfe-movethewheels 2026.624.1 → 2026.626.1

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -15,6 +15,7 @@ import {
   Badge,
   Progress,
 } from '../components/ui';
+import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useVehicle } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
@@ -26,6 +27,7 @@ export default function VehicleDetailsPage() {
   const { vehicle, isLoading, error, refetch } = useVehicle(vehicleId);
 
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/vehicles'));
+  const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
   if (isLoading) return <LoadingState message="Loading vehicle details..." />;
   if (error || !vehicle) return <ErrorState title="Vehicle not found" onRetry={refetch} />;
@@ -52,33 +54,56 @@ export default function VehicleDetailsPage() {
         </div>
       }
     >
+      <PagePurpose icon={<Truck size={18} />}>
+        The full record for this vehicle — specs, capacity, fuel and mileage, maintenance schedule
+        and current location. Use it to confirm a vehicle is fuelled, serviced and the right size
+        before dispatching it on a delivery.
+      </PagePurpose>
+
+      <NextSteps
+        storageKey="movethewheels-vehicle-details"
+        steps={[
+          {
+            id: 'assign',
+            label: 'Assign to a delivery',
+            description: 'Put this vehicle on an order that fits its capacity.',
+            icon: <MapPin size={16} />,
+            onClick: () => goTo('orders'),
+          },
+          {
+            id: 'maintenance',
+            label: 'Schedule maintenance',
+            description: 'Keep it road-ready and compliant.',
+            icon: <Wrench size={16} />,
+            onClick: () => {},
+          },
+        ]}
+      />
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Vehicle Information</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
-                <div>
-                  <p className="text-sm text-text-secondary">Type</p>
-                  <p className="font-medium capitalize">{vehicle.type}</p>
-                </div>
-                <div>
-                  <p className="text-sm text-text-secondary">Make</p>
-                  <p className="font-medium">{vehicle.make}</p>
-                </div>
-                <div>
-                  <p className="text-sm text-text-secondary">Model</p>
-                  <p className="font-medium">{vehicle.model}</p>
-                </div>
-                <div>
-                  <p className="text-sm text-text-secondary">Year</p>
-                  <p className="font-medium">{vehicle.year}</p>
-                </div>
+          {/* Vehicle Information — the page's single emphasis zone */}
+          <EmphasisPanel>
+            <h2 className="text-base font-semibold text-text-primary mb-4">Vehicle Information</h2>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+              <div>
+                <p className="text-sm text-text-secondary">Type</p>
+                <p className="font-medium capitalize">{vehicle.type}</p>
               </div>
-            </CardContent>
-          </Card>
+              <div>
+                <p className="text-sm text-text-secondary">Make</p>
+                <p className="font-medium">{vehicle.make}</p>
+              </div>
+              <div>
+                <p className="text-sm text-text-secondary">Model</p>
+                <p className="font-medium">{vehicle.model}</p>
+              </div>
+              <div>
+                <p className="text-sm text-text-secondary">Year</p>
+                <p className="font-medium">{vehicle.year}</p>
+              </div>
+            </div>
+          </EmphasisPanel>
 
           <Card>
             <CardHeader>

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -6,7 +6,8 @@ import { Truck, Plus, RefreshCw, Download } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
-import { Button, Progress } from '../components/ui';
+import { Progress } from '../components/ui';
+import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useVehicles } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
@@ -93,22 +94,44 @@ export default function VehiclesPage() {
       subtitle={`${totalVehicles} vehicles in fleet`}
       icon={<Truck size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={refetch}>
-            <RefreshCw size={16} />
-            Refresh
-          </Button>
-          <Button variant="outline">
-            <Download size={16} />
-            Export
-          </Button>
-          <Button>
-            <Plus size={16} />
-            Add Vehicle
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{ label: 'Add Vehicle', icon: <Plus size={16} />, onSelect: () => {} }}
+          actions={[
+            { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
+            { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },
+          ]}
+        />
       }
     >
+      <PagePurpose icon={<Truck size={18} />}>
+        Every truck, van and bike in your fleet. Monitor capacity, fuel level, mileage and
+        maintenance status here so you always know which vehicles are road-ready before dispatching
+        an order.
+      </PagePurpose>
+
+      {/* Fleet at a glance — the page's single emphasis zone */}
+      <EmphasisPanel>
+        <p className="text-sm font-medium text-text-secondary">Fleet at a glance</p>
+        <div className="mt-3 grid grid-cols-3 gap-4">
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">{totalVehicles}</p>
+            <p className="text-xs text-text-secondary">Total vehicles</p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {vehicles.filter((v) => v.status === 'available').length}
+            </p>
+            <p className="text-xs text-text-secondary">Available now</p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {vehicles.filter((v) => v.status === 'maintenance').length}
+            </p>
+            <p className="text-xs text-text-secondary">In maintenance</p>
+          </div>
+        </div>
+      </EmphasisPanel>
+
       <DataTable
         columns={columns}
         data={vehicles}
@@ -118,6 +141,9 @@ export default function VehiclesPage() {
         searchFields={['vehicleNumber', 'make', 'model'] as (keyof Vehicle)[]}
         onRowClick={(row) => goTo(`fleet/vehicles/${row.id}`)}
         getRowId={(row) => row.id}
+        emptyIllustration="empty-data"
+        emptyTitle="No vehicles yet"
+        emptyDescription="Add vehicles to your fleet to start assigning them to deliveries."
       />
     </PageLayout>
   );

package/src/movethewheels/pages/WarehouseDetailsPage.tsx

@@ -14,6 +14,7 @@ import {
   Badge,
   Progress,
 } from '../components/ui';
+import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useWarehouse } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatAddress } from '../utils/formatters';
@@ -25,6 +26,7 @@ export default function WarehouseDetailsPage() {
   const { warehouse, isLoading, error, refetch } = useWarehouse(warehouseId);
 
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/warehouses'));
+  const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
   if (isLoading) return <LoadingState message="Loading warehouse details..." />;
   if (error || !warehouse) return <ErrorState title="Warehouse not found" onRetry={refetch} />;
@@ -57,42 +59,65 @@ export default function WarehouseDetailsPage() {
         </div>
       }
     >
+      <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.
+      </PagePurpose>
+
+      <NextSteps
+        storageKey="movethewheels-warehouse-details"
+        steps={[
+          {
+            id: 'inventory',
+            label: 'Review stock here',
+            description: 'See which products are stored at this site.',
+            icon: <Box size={16} />,
+            onClick: () => goTo('inventory/products'),
+          },
+          {
+            id: 'fulfil',
+            label: 'Fulfil an order from this site',
+            description: 'Pick a pending order to ship out of this warehouse.',
+            icon: <MapPin size={16} />,
+            onClick: () => goTo('orders'),
+          },
+        ]}
+      />
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Box size={18} /> Capacity
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
+          {/* Capacity — the page's single emphasis zone */}
+          <EmphasisPanel>
+            <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-2 gap-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 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 className="grid 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>
-            </CardContent>
-          </Card>
+            </div>
+          </EmphasisPanel>
 
           <Card>
             <CardHeader>

package/src/movethewheels/pages/WarehousesPage.tsx

@@ -5,7 +5,8 @@
 import { Warehouse, Plus, RefreshCw } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
-import { Button, Badge, Progress } from '../components/ui';
+import { Badge, Progress } from '../components/ui';
+import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useWarehouses } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
@@ -97,16 +98,49 @@ export default function WarehousesPage() {
       subtitle={`${totalWarehouses} warehouses`}
       icon={<Warehouse size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={refetch}>
-            <RefreshCw size={16} /> Refresh
-          </Button>
-          <Button>
-            <Plus size={16} /> Add Warehouse
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{ label: 'Add Warehouse', icon: <Plus size={16} />, onSelect: () => {} }}
+          actions={[{ label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() }]}
+        />
       }
     >
+      <PagePurpose icon={<Warehouse size={18} />}>
+        Your storage and fulfilment sites. Watch space and pallet utilization across each warehouse
+        to balance stock, spot capacity crunches, and decide where to fulfil an order from.
+      </PagePurpose>
+
+      {/* Network at a glance — the page's single emphasis zone */}
+      <EmphasisPanel>
+        <p className="text-sm font-medium text-text-secondary">Network at a glance</p>
+        <div className="mt-3 grid grid-cols-3 gap-4">
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">{totalWarehouses}</p>
+            <p className="text-xs text-text-secondary">Total sites</p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {warehouses.filter((w) => w.isActive).length}
+            </p>
+            <p className="text-xs text-text-secondary">Active</p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {warehouses.length > 0
+                ? `${Math.round(
+                    (warehouses.reduce(
+                      (sum, w) => sum + w.capacity.usedSpace / w.capacity.totalSpace,
+                      0
+                    ) /
+                      warehouses.length) *
+                      100
+                  )}%`
+                : '—'}
+            </p>
+            <p className="text-xs text-text-secondary">Avg utilization</p>
+          </div>
+        </div>
+      </EmphasisPanel>
+
       <DataTable
         columns={columns}
         data={warehouses}
@@ -116,6 +150,9 @@ export default function WarehousesPage() {
         searchFields={['name', 'code'] as (keyof WarehouseType)[]}
         onRowClick={(row) => goTo(`inventory/warehouses/${row.id}`)}
         getRowId={(row) => row.id}
+        emptyIllustration="empty-data"
+        emptyTitle="No warehouses yet"
+        emptyDescription="Add a warehouse to store inventory and fulfil orders from it."
       />
     </PageLayout>
   );