@burdenoff/microfe-movethewheels 2026.625.1 → 2026.626.1

package/src/movethewheels/pages/InventoryPage.tsx

@@ -5,16 +5,8 @@
 import { Package, Warehouse, AlertTriangle, ChevronRight, Plus } from 'lucide-react';
 import { PageLayout, PageSection } from '../components/PageLayout';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Button,
-  Badge,
-  Progress,
-} from '../components/ui';
-import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
+import { Card, CardContent, Button, Badge, Progress } from '../components/ui';
+import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useInventory, useInventoryStats } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
@@ -59,6 +51,13 @@ export default function InventoryPage() {
         />
       }
     >
+      <PagePurpose icon={<Package size={18} />}>
+        {t(
+          'movethewheels.inventory.purpose',
+          'A real-time view of what you have and where. Track stock value and quantities across warehouses, catch low-stock items before they run out, and drill into products or warehouses to manage what you can promise on an order.'
+        )}
+      </PagePurpose>
+
       <MetricGrid columns={4}>
         <MetricCard
           label={t('movethewheels.inventory.metrics.totalProducts', 'Total Products')}
@@ -85,22 +84,20 @@ export default function InventoryPage() {
       </MetricGrid>
 
       {lowStockItems.length > 0 && (
-        <Card className="border-yellow-200">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-yellow-600">
-              <AlertTriangle size={18} />
-              {t('movethewheels.inventory.lowStock.title', 'Low Stock Alert')} (
-              {lowStockItems.length} {t('movethewheels.inventory.lowStock.items', 'items')})
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
+        <EmphasisPanel className="space-y-4">
+          <h2 className="flex items-center gap-2 text-base font-semibold text-status-warning-text">
+            <AlertTriangle size={18} />
+            {t('movethewheels.inventory.lowStock.title', 'Low Stock Alert')} ({lowStockItems.length}{' '}
+            {t('movethewheels.inventory.lowStock.items', 'items')})
+          </h2>
+          <div>
             <div className="space-y-3">
               {lowStockItems.slice(0, 5).map((item) => {
                 const product = products.find((p) => p.id === item.productId);
                 return (
                   <div
                     key={item.id}
-                    className="flex items-center justify-between p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg"
+                    className="flex items-center justify-between p-3 bg-status-warning-bg/10 rounded-lg"
                   >
                     <div>
                       <p className="font-medium">
@@ -112,7 +109,7 @@ export default function InventoryPage() {
                       </p>
                     </div>
                     <div className="text-right">
-                      <p className="font-medium text-yellow-600">
+                      <p className="font-medium text-status-warning-text">
                         {item.availableQuantity}{' '}
                         {t('movethewheels.inventory.lowStock.left', 'left')}
                       </p>
@@ -125,8 +122,8 @@ export default function InventoryPage() {
                 );
               })}
             </div>
-          </CardContent>
-        </Card>
+          </div>
+        </EmphasisPanel>
       )}
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">

package/src/movethewheels/pages/LiveTrackingPage.tsx

@@ -6,7 +6,7 @@
 
 import { useState } from 'react';
 import { MapPin, Truck, Package, RefreshCw, List, Map } from 'lucide-react';
-import { PageLayout } from '../components/PageLayout';
+import { PageLayout, EmptyState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
 import {
@@ -21,6 +21,7 @@ import {
   TabsTrigger,
   ScrollArea,
 } from '../components/ui';
+import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useLiveTracking, useTrackingAlerts } from '../hooks/useTracking';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
@@ -67,6 +68,40 @@ export default function LiveTrackingPage() {
         </div>
       }
     >
+      <PagePurpose icon={<MapPin size={18} />}>
+        A real-time operations board for every delivery currently on the road. Watch where drivers
+        are, which orders are out for delivery, and react to alerts — switch to the map for a
+        bird&apos;s-eye view or the list to drill into a single shipment.
+      </PagePurpose>
+
+      <NextSteps
+        storageKey="movethewheels-live-tracking"
+        steps={[
+          {
+            id: 'select',
+            label: 'Open a delivery',
+            description: 'Switch to the list and pick a shipment to see full details.',
+            icon: <List size={16} />,
+            onClick: () => setViewMode('list'),
+          },
+          {
+            id: 'alerts',
+            label: 'Clear outstanding alerts',
+            description: 'Review delays and exceptions that need attention.',
+            icon: <Truck size={16} />,
+            done: unacknowledgedAlerts.length === 0,
+            onClick: () => setViewMode('list'),
+          },
+          {
+            id: 'new-order',
+            label: 'Create another order',
+            description: 'Add a new delivery to the pipeline.',
+            icon: <Package size={16} />,
+            onClick: () => goTo('orders/new'),
+          },
+        ]}
+      />
+
       {/* Quick Stats */}
       <MetricGrid columns={4}>
         <MetricCard
@@ -171,9 +206,11 @@ export default function LiveTrackingPage() {
                       );
                     })}
                     {activeDeliveries.length === 0 && (
-                      <div className="p-8 text-center text-text-secondary">
-                        No active deliveries
-                      </div>
+                      <EmptyState
+                        illustration="empty-sessions"
+                        title="No active deliveries"
+                        description="When orders are dispatched they'll appear here in real time."
+                      />
                     )}
                   </div>
                 </ScrollArea>
@@ -184,18 +221,16 @@ export default function LiveTrackingPage() {
 
         {/* Sidebar */}
         <div className="space-y-6">
-          {/* Selected Delivery Details */}
+          {/* Selected Delivery Details — the page's single emphasis zone when a delivery is open */}
           {selected ? (
-            <Card>
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <CardTitle>Delivery Details</CardTitle>
-                  <Button variant="ghost" size="sm" onClick={() => setSelectedDelivery(null)}>
-                    Clear
-                  </Button>
-                </div>
-              </CardHeader>
-              <CardContent className="space-y-4">
+            <EmphasisPanel className="space-y-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-base font-semibold text-text-primary">Delivery Details</h2>
+                <Button variant="ghost" size="sm" onClick={() => setSelectedDelivery(null)}>
+                  Clear
+                </Button>
+              </div>
+              <div className="space-y-4">
                 <div>
                   <p className="text-sm text-text-secondary">Order</p>
                   <p className="font-medium">{selected.order?.orderNumber ?? '-'}</p>
@@ -250,13 +285,16 @@ export default function LiveTrackingPage() {
                     Track Details
                   </Button>
                 </div>
-              </CardContent>
-            </Card>
+              </div>
+            </EmphasisPanel>
           ) : (
             <Card>
-              <CardContent className="p-8 text-center text-text-secondary">
-                <MapPin size={32} className="mx-auto mb-2 opacity-50" />
-                <p>Select a delivery to see details</p>
+              <CardContent className="p-6">
+                <EmptyState
+                  illustration="empty-generic"
+                  title="No delivery selected"
+                  description="Pick a delivery from the list to see its driver, vehicle, ETA and live location."
+                />
               </CardContent>
             </Card>
           )}

package/src/movethewheels/pages/MarketplacePage.tsx

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Store, Star, MapPin, Clock, Filter, Search } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { Card, CardContent, CardHeader, CardTitle, Button, Badge, Input } from '../components/ui';
+import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
 import { executeGraphQL } from '../utils/graphqlClient';
@@ -146,6 +147,12 @@ export default function MarketplacePage() {
         </Button>
       }
     >
+      <PagePurpose icon={<Store size={18} />}>
+        Don&apos;t own every leg of the journey? Find vetted third-party logistics providers and
+        service offerings here — compare ratings, verification status and pricing, then engage a
+        partner to cover routes, warehousing or specialised handling you can&apos;t do in-house.
+      </PagePurpose>
+
       <Card>
         <CardContent className="p-4">
           <div className="relative">
@@ -166,6 +173,21 @@ export default function MarketplacePage() {
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-4">
           <h3 className="font-semibold">Service Providers ({filteredProviders.length})</h3>
+          {filteredProviders.length === 0 && (
+            <Card>
+              <CardContent className="p-0">
+                <IllustratedEmptyState
+                  illustration={search.trim() ? 'empty-search' : 'empty-people'}
+                  title={search.trim() ? 'No providers match your search' : 'No providers yet'}
+                  description={
+                    search.trim()
+                      ? 'Try a different search term to find logistics partners.'
+                      : 'Verified logistics service providers will appear here as they join the marketplace.'
+                  }
+                />
+              </CardContent>
+            </Card>
+          )}
           {filteredProviders.map((provider) => (
             <Card key={provider.id} className="hover:shadow-md transition-shadow cursor-pointer">
               <CardContent className="p-6">
@@ -204,8 +226,20 @@ export default function MarketplacePage() {
           ))}
         </div>
 
-        <div className="space-y-4">
-          <h3 className="font-semibold">Popular Services</h3>
+        {/* Popular Services — the page's single emphasis zone */}
+        <EmphasisPanel className="space-y-4">
+          <h3 className="text-base font-semibold text-text-primary">Popular Services</h3>
+          {filteredOfferings.length === 0 && (
+            <IllustratedEmptyState
+              illustration={search.trim() ? 'empty-search' : 'empty-generic'}
+              title={search.trim() ? 'No matching services' : 'No services listed yet'}
+              description={
+                search.trim()
+                  ? 'Adjust your search to discover service offerings.'
+                  : 'Service offerings from providers will be listed here.'
+              }
+            />
+          )}
           {filteredOfferings.map((service) => (
             <Card key={service.id}>
               <CardHeader>
@@ -228,7 +262,7 @@ export default function MarketplacePage() {
               </CardContent>
             </Card>
           ))}
-        </div>
+        </EmphasisPanel>
       </div>
     </PageLayout>
   );

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -42,6 +42,7 @@ import {
   TableHeader,
   TableRow,
 } from '../components/ui';
+import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useOrder } from '../hooks/useOrders';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency, formatDate, formatAddress } from '../utils/formatters';
@@ -108,6 +109,39 @@ export default function OrderDetailsPage() {
         </div>
       }
     >
+      <PagePurpose icon={<Package size={18} />}>
+        Everything about this one delivery in a single place — who it&apos;s for, where it&apos;s
+        going, what&apos;s inside, the running cost and the full status history. Use this page to
+        review the order, hand it to a driver, print the docket, or jump into live tracking.
+      </PagePurpose>
+
+      <NextSteps
+        storageKey="movethewheels-order-details"
+        steps={[
+          {
+            id: 'track',
+            label: 'Track this order live',
+            description: 'See where the shipment is right now on the map.',
+            icon: <MapPin size={16} />,
+            onClick: () => goTo(`tracking?order=${order.id}`),
+          },
+          {
+            id: 'edit',
+            label: 'Edit order details',
+            description: 'Update items, addresses or instructions before dispatch.',
+            icon: <Edit size={16} />,
+            onClick: () => goTo(`orders/${orderId}/edit`),
+          },
+          {
+            id: 'print',
+            label: 'Print the delivery docket',
+            description: 'Generate a printable copy for the driver or warehouse.',
+            icon: <Printer size={16} />,
+            onClick: () => window.print(),
+          },
+        ]}
+      />
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         {/* Main Content */}
         <div className="lg:col-span-2 space-y-6">
@@ -124,9 +158,7 @@ export default function OrderDetailsPage() {
                 <div>
                   <h4 className="font-medium mb-2">{order.customerInfo.name}</h4>
                   {order.customerInfo.company && (
-                    <p className="text-sm text-text-secondary mb-2">
-                      {order.customerInfo.company}
-                    </p>
+                    <p className="text-sm text-text-secondary mb-2">{order.customerInfo.company}</p>
                   )}
                   <div className="space-y-1 text-sm">
                     <p className="flex items-center gap-2">
@@ -285,52 +317,48 @@ export default function OrderDetailsPage() {
 
         {/* Sidebar */}
         <div className="space-y-6">
-          {/* Order Summary */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <DollarSign size={18} />
-                Order Summary
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-3">
-                <div className="flex justify-between text-sm">
-                  <span className="text-text-secondary">Subtotal</span>
-                  <span>{formatCurrency(order.pricing.subtotal)}</span>
-                </div>
-                <div className="flex justify-between text-sm">
-                  <span className="text-text-secondary">Delivery</span>
-                  <span>{formatCurrency(order.pricing.fees.delivery)}</span>
-                </div>
-                <div className="flex justify-between text-sm">
-                  <span className="text-text-secondary">Handling</span>
-                  <span>{formatCurrency(order.pricing.fees.handling)}</span>
-                </div>
-                {order.pricing.fees.insurance && (
-                  <div className="flex justify-between text-sm">
-                    <span className="text-text-secondary">Insurance</span>
-                    <span>{formatCurrency(order.pricing.fees.insurance)}</span>
-                  </div>
-                )}
+          {/* Order Summary — the page's single emphasis zone */}
+          <EmphasisPanel>
+            <h2 className="flex items-center gap-2 text-base font-semibold text-text-primary mb-4">
+              <DollarSign size={18} />
+              Order Summary
+            </h2>
+            <div className="space-y-3">
+              <div className="flex justify-between text-sm">
+                <span className="text-text-secondary">Subtotal</span>
+                <span>{formatCurrency(order.pricing.subtotal)}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-text-secondary">Delivery</span>
+                <span>{formatCurrency(order.pricing.fees.delivery)}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-text-secondary">Handling</span>
+                <span>{formatCurrency(order.pricing.fees.handling)}</span>
+              </div>
+              {order.pricing.fees.insurance && (
                 <div className="flex justify-between text-sm">
-                  <span className="text-text-secondary">Taxes</span>
-                  <span>{formatCurrency(order.pricing.taxes)}</span>
-                </div>
-                <Separator />
-                <div className="flex justify-between font-medium">
-                  <span>Total</span>
-                  <span className="text-lg">{formatCurrency(order.pricing.total)}</span>
-                </div>
-                <div className="pt-2">
-                  <p className="text-sm text-text-secondary">Payment Method</p>
-                  <p className="text-sm capitalize">
-                    {order.pricing.paymentMethod.replace('_', ' ')}
-                  </p>
+                  <span className="text-text-secondary">Insurance</span>
+                  <span>{formatCurrency(order.pricing.fees.insurance)}</span>
                 </div>
+              )}
+              <div className="flex justify-between text-sm">
+                <span className="text-text-secondary">Taxes</span>
+                <span>{formatCurrency(order.pricing.taxes)}</span>
               </div>
-            </CardContent>
-          </Card>
+              <Separator />
+              <div className="flex justify-between font-medium">
+                <span>Total</span>
+                <span className="text-lg">{formatCurrency(order.pricing.total)}</span>
+              </div>
+              <div className="pt-2">
+                <p className="text-sm text-text-secondary">Payment Method</p>
+                <p className="text-sm capitalize">
+                  {order.pricing.paymentMethod.replace('_', ' ')}
+                </p>
+              </div>
+            </div>
+          </EmphasisPanel>
 
           {/* Assignment Info */}
           <Card>

package/src/movethewheels/pages/OrdersListPage.tsx

@@ -9,7 +9,7 @@ import { Package, Plus, Filter, Download, RefreshCw } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge, PriorityBadge, TypeBadge } from '../components/StatusBadge';
-import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
+import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import {
   Button,
   Card,
@@ -174,6 +174,55 @@ export default function OrdersListPage() {
         />
       }
     >
+      <PagePurpose icon={<Package size={18} />}>
+        {t(
+          'movethewheels.orders.purpose',
+          'Every delivery job lives here — B2B and B2C orders, their status, priority and value. Use this list to find an order, filter by status or type, and open one to assign a driver, track it, or update fulfilment.'
+        )}
+      </PagePurpose>
+
+      {/* Pipeline at a glance — the page's single emphasis zone */}
+      <EmphasisPanel>
+        <p className="text-sm font-medium text-text-secondary">
+          {t('movethewheels.orders.glance.title', 'Pipeline at a glance')}
+        </p>
+        <div className="mt-3 grid grid-cols-2 sm:grid-cols-4 gap-4">
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">{totalOrders}</p>
+            <p className="text-xs text-text-secondary">
+              {t('movethewheels.orders.glance.total', 'Total orders')}
+            </p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {orders.filter((o) => o.status === 'pending').length}
+            </p>
+            <p className="text-xs text-text-secondary">
+              {t('movethewheels.orders.glance.pending', 'Pending')}
+            </p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {
+                orders.filter((o) => o.status === 'in_transit' || o.status === 'out_for_delivery')
+                  .length
+              }
+            </p>
+            <p className="text-xs text-text-secondary">
+              {t('movethewheels.orders.glance.inTransit', 'In transit')}
+            </p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {orders.filter((o) => o.status === 'delivered').length}
+            </p>
+            <p className="text-xs text-text-secondary">
+              {t('movethewheels.orders.glance.delivered', 'Delivered')}
+            </p>
+          </div>
+        </div>
+      </EmphasisPanel>
+
       {/* Filters */}
       <Card>
         <CardContent className="p-4">
@@ -241,6 +290,18 @@ export default function OrdersListPage() {
         onRowClick={(row) => goTo(`orders/${row.id}`)}
         getRowId={(row) => row.id}
         emptyMessage={t('movethewheels.orders.empty', 'No orders found')}
+        emptyIllustration="empty-data"
+        emptyTitle={t('movethewheels.orders.emptyTitle', 'No orders yet')}
+        emptyDescription={t(
+          'movethewheels.orders.emptyDescription',
+          'Create your first order to start moving shipments through the pipeline.'
+        )}
+        emptyAction={
+          <Button onClick={() => goTo('orders/new')}>
+            <Plus size={16} className="mr-1.5" />
+            {t('movethewheels.orders.actions.newOrder', 'New Order')}
+          </Button>
+        }
       />
     </PageLayout>
   );

package/src/movethewheels/pages/ProductDetailsPage.tsx

@@ -6,6 +6,7 @@ import { useParams } from 'react-router-dom';
 import { Package, ArrowLeft, Edit, Box, DollarSign, Tag } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { Card, CardContent, CardHeader, CardTitle, Button, Badge } from '../components/ui';
+import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useProduct } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
@@ -17,6 +18,7 @@ export default function ProductDetailsPage() {
   const { product, isLoading, error, refetch } = useProduct(productId);
 
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/products'));
+  const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
   if (isLoading) return <LoadingState message="Loading product details..." />;
   if (error || !product) return <ErrorState title="Product not found" onRetry={refetch} />;
@@ -46,6 +48,32 @@ export default function ProductDetailsPage() {
         </div>
       }
     >
+      <PagePurpose icon={<Package size={18} />}>
+        The catalog record for this item — its dimensions, weight, value and handling flags. These
+        drive how it&apos;s packed, priced and routed, so keep them accurate before adding the
+        product to an order or stocking it in a warehouse.
+      </PagePurpose>
+
+      <NextSteps
+        storageKey="movethewheels-product-details"
+        steps={[
+          {
+            id: 'order',
+            label: 'Add this product to an order',
+            description: 'Include it on a new delivery.',
+            icon: <Package size={16} />,
+            onClick: () => goTo('orders/new'),
+          },
+          {
+            id: 'edit',
+            label: 'Edit product details',
+            description: 'Update dimensions, value or handling flags.',
+            icon: <Tag 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>
@@ -119,17 +147,14 @@ export default function ProductDetailsPage() {
         </div>
 
         <div className="space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <DollarSign size={18} /> Pricing
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-3xl font-bold">{formatCurrency(product.value)}</p>
-              <p className="text-sm text-text-secondary">Unit price</p>
-            </CardContent>
-          </Card>
+          {/* Pricing — the page's single emphasis zone */}
+          <EmphasisPanel>
+            <h2 className="flex items-center gap-2 text-base font-semibold text-text-primary mb-3">
+              <DollarSign size={18} /> Pricing
+            </h2>
+            <p className="text-3xl font-bold">{formatCurrency(product.value)}</p>
+            <p className="text-sm text-text-secondary">Unit price</p>
+          </EmphasisPanel>
 
           <Card>
             <CardHeader>

package/src/movethewheels/pages/ProductsPage.tsx

@@ -6,7 +6,7 @@ import { Package, Plus, RefreshCw, Download } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { Badge } from '../components/ui';
-import { CTAOverflowMenu } from '@burdenoff/fe-libs/ui';
+import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useProducts } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
@@ -106,6 +106,35 @@ export default function ProductsPage() {
         />
       }
     >
+      <PagePurpose icon={<Package size={18} />}>
+        The catalog of items you ship. Each product&apos;s dimensions, weight, value and handling
+        flags (fragile, hazardous, temperature-controlled) drive how it&apos;s packed, priced and
+        routed — keep them accurate so shipments are quoted and handled correctly.
+      </PagePurpose>
+
+      {/* Catalog at a glance — the page's single emphasis zone */}
+      <EmphasisPanel>
+        <p className="text-sm font-medium text-text-secondary">Catalog 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">{totalProducts}</p>
+            <p className="text-xs text-text-secondary">Total products</p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {products.filter((p) => p.fragile || p.hazardous).length}
+            </p>
+            <p className="text-xs text-text-secondary">Special handling</p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {products.filter((p) => p.temperatureControlled).length}
+            </p>
+            <p className="text-xs text-text-secondary">Temp-controlled</p>
+          </div>
+        </div>
+      </EmphasisPanel>
+
       <DataTable
         columns={columns}
         data={products}
@@ -115,6 +144,9 @@ export default function ProductsPage() {
         searchFields={['name', 'sku', 'category'] as (keyof Product)[]}
         onRowClick={(row) => goTo(`inventory/products/${row.id}`)}
         getRowId={(row) => row.id}
+        emptyIllustration="empty-files"
+        emptyTitle="No products yet"
+        emptyDescription="Add products to your catalog so they can be added to orders and stocked in warehouses."
       />
     </PageLayout>
   );