@burdenoff/microfe-movethewheels 2026.624.1 → 2026.626.1

package/src/movethewheels/pages/AnalyticsPage.tsx

@@ -6,6 +6,7 @@ import { BarChart3, TrendingUp, Package, Truck, DollarSign, Users } from 'lucide
 import { PageLayout } from '../components/PageLayout';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { Card, CardContent, CardHeader, CardTitle, Progress } from '../components/ui';
+import { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useAnalytics, useOrderAnalytics, useFleetAnalytics } from '../hooks/useAnalytics';
 import { formatCurrency } from '../utils/formatters';
 
@@ -20,6 +21,12 @@ export default function AnalyticsPage() {
       subtitle="Business performance and insights"
       icon={<BarChart3 size={24} />}
     >
+      <PagePurpose icon={<BarChart3 size={18} />}>
+        See how the operation is really performing. Track order volume, revenue, on-time rate and
+        customer satisfaction over time so you can spot trends, find bottlenecks, and decide where
+        to invest — whether that&apos;s more vehicles, better routes, or new customers.
+      </PagePurpose>
+
       <MetricGrid columns={5}>
         <MetricCard
           label="Total Orders"
@@ -30,6 +37,8 @@ export default function AnalyticsPage() {
           trend="up"
         />
         <MetricCard
+          treatment="glass"
+          glow
           label="Revenue"
           value={formatCurrency(analytics.overview.totalRevenue)}
           icon={<DollarSign size={20} />}
@@ -159,31 +168,28 @@ export default function AnalyticsPage() {
           </CardContent>
         </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Performance Metrics</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div>
-              <p className="text-sm text-text-secondary">On-Time Pickup</p>
-              <p className="text-2xl font-bold">{analytics.performance.onTimePickup}%</p>
-            </div>
-            <div>
-              <p className="text-sm text-text-secondary">On-Time Delivery</p>
-              <p className="text-2xl font-bold">{analytics.performance.onTimeDelivery}%</p>
-            </div>
-            <div>
-              <p className="text-sm text-text-secondary">Damaged Items</p>
-              <p className="text-2xl font-bold text-green-600">
-                {analytics.performance.damagedItems}%
-              </p>
-            </div>
-            <div>
-              <p className="text-sm text-text-secondary">Driver Ratings</p>
-              <p className="text-2xl font-bold">{analytics.performance.driverRatings}/5</p>
-            </div>
-          </CardContent>
-        </Card>
+        {/* Performance Metrics — the page's single emphasis zone */}
+        <EmphasisPanel className="space-y-4">
+          <h2 className="text-base font-semibold text-text-primary">Performance Metrics</h2>
+          <div>
+            <p className="text-sm text-text-secondary">On-Time Pickup</p>
+            <p className="text-2xl font-bold">{analytics.performance.onTimePickup}%</p>
+          </div>
+          <div>
+            <p className="text-sm text-text-secondary">On-Time Delivery</p>
+            <p className="text-2xl font-bold">{analytics.performance.onTimeDelivery}%</p>
+          </div>
+          <div>
+            <p className="text-sm text-text-secondary">Damaged Items</p>
+            <p className="text-2xl font-bold text-status-success-text">
+              {analytics.performance.damagedItems}%
+            </p>
+          </div>
+          <div>
+            <p className="text-sm text-text-secondary">Driver Ratings</p>
+            <p className="text-2xl font-bold">{analytics.performance.driverRatings}/5</p>
+          </div>
+        </EmphasisPanel>
       </div>
     </PageLayout>
   );

package/src/movethewheels/pages/CreateOrderPage.tsx

@@ -6,8 +6,8 @@
 
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Package, ArrowLeft, Save, Plus, Trash2 } from 'lucide-react';
-import { PageLayout } from '../components/PageLayout';
+import { Package, ArrowLeft, Save, Plus, Trash2, Users, MapPin } from 'lucide-react';
+import { PageLayout, EmptyState } from '../components/PageLayout';
 import {
   Card,
   CardContent,
@@ -24,6 +24,7 @@ import {
   SelectValue,
   Separator,
 } from '../components/ui';
+import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useOrder, useOrders } from '../hooks/useOrders';
 import { useCustomers } from '../hooks/useCustomers';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -171,13 +172,47 @@ export default function CreateOrderPage() {
         </div>
       }
     >
+      <PagePurpose icon={<Package size={18} />}>
+        {isEditing
+          ? 'Update this delivery before it goes out — change the customer, addresses, items or handling notes, then save.'
+          : 'Book a new delivery in a few steps: choose who it’s for, set pickup and drop-off addresses, list what’s being shipped, and add any handling notes. Once created it joins the orders pipeline ready to assign and track.'}
+      </PagePurpose>
+
+      <NextSteps
+        storageKey="movethewheels-create-order"
+        steps={[
+          {
+            id: 'customer',
+            label: 'Pick the customer first',
+            description: 'Their saved contact details auto-fill the order.',
+            icon: <Users size={16} />,
+            done: !!formData.customerId,
+            onClick: () => document.getElementById('customer')?.focus(),
+          },
+          {
+            id: 'addresses',
+            label: 'Set pickup & delivery addresses',
+            description: 'Where the shipment is collected and dropped off.',
+            icon: <MapPin size={16} />,
+            done: !!formData.pickupAddress.street && !!formData.deliveryAddress.street,
+            onClick: () => document.getElementById('pickupStreet')?.focus(),
+          },
+          {
+            id: 'items',
+            label: 'Add the items to ship',
+            description: 'List each product with its quantity and value.',
+            icon: <Package size={16} />,
+            done: formData.items.length > 0,
+            onClick: addItem,
+          },
+        ]}
+      />
+
       <form onSubmit={handleSubmit} className="space-y-6">
-        {/* Order Details */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Order Details</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
+        {/* Order Details — the page's single emphasis zone (the form's starting point) */}
+        <EmphasisPanel>
+          <h2 className="text-base font-semibold text-text-primary mb-4">Order Details</h2>
+          <div className="space-y-4">
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
               <div className="space-y-2">
                 <Label htmlFor="customer">Customer</Label>
@@ -230,8 +265,8 @@ export default function CreateOrderPage() {
                 </Select>
               </div>
             </div>
-          </CardContent>
-        </Card>
+          </div>
+        </EmphasisPanel>
 
         {/* Addresses */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -363,13 +398,17 @@ export default function CreateOrderPage() {
           </CardHeader>
           <CardContent>
             {formData.items.length === 0 ? (
-              <div className="text-center py-8 text-text-secondary">
-                <Package size={48} className="mx-auto mb-4 opacity-50" />
-                <p>No items added yet</p>
-                <Button type="button" variant="link" onClick={addItem}>
-                  Add your first item
-                </Button>
-              </div>
+              <EmptyState
+                illustration="empty-files"
+                title="No items added yet"
+                description="Add the products this order will ship — each with a name, SKU, quantity and value."
+                action={
+                  <Button type="button" variant="outline" onClick={addItem}>
+                    <Plus size={16} className="mr-1.5" />
+                    Add your first item
+                  </Button>
+                }
+              />
             ) : (
               <div className="space-y-4">
                 {formData.items.map((item, index) => (

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -17,6 +17,7 @@ import {
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { TypeBadge } from '../components/StatusBadge';
 import { Card, CardContent, CardHeader, CardTitle, Button, Badge } from '../components/ui';
+import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useCustomer } from '../hooks/useCustomers';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatAddress, formatDate } from '../utils/formatters';
@@ -28,6 +29,7 @@ export default function CustomerDetailsPage() {
   const { customer, isLoading, error, refetch } = useCustomer(customerId);
 
   const goBack = () => navigate?.(joinPath(basePath, 'customers'));
+  const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
   // Handle new customer form
   if (!customerId) {
@@ -82,52 +84,75 @@ export default function CustomerDetailsPage() {
         </div>
       }
     >
+      <PagePurpose icon={<Users size={18} />}>
+        Everything you know about this customer — how to reach them, where they are, and their
+        account standing. Use it to confirm contact details before a delivery, check their rating,
+        or book their next order.
+      </PagePurpose>
+
+      <NextSteps
+        storageKey="movethewheels-customer-details"
+        steps={[
+          {
+            id: 'new-order',
+            label: 'Book a delivery for this customer',
+            description: 'Start a new order pre-filled for this account.',
+            icon: <FileText size={16} />,
+            onClick: () => goTo('orders/new'),
+          },
+          {
+            id: 'edit',
+            label: 'Update contact details',
+            description: 'Keep email, phone and address current.',
+            icon: <Edit 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>Contact Information</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div className="space-y-4">
-                  <div className="flex items-center gap-3">
-                    <Mail size={18} className="text-text-secondary" />
-                    <div>
-                      <p className="text-sm text-text-secondary">Email</p>
-                      <p className="font-medium">{customer.email}</p>
-                    </div>
+          {/* Contact Information — the page's single emphasis zone */}
+          <EmphasisPanel>
+            <h2 className="text-base font-semibold text-text-primary mb-4">Contact Information</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-4">
+                <div className="flex items-center gap-3">
+                  <Mail size={18} className="text-text-secondary" />
+                  <div>
+                    <p className="text-sm text-text-secondary">Email</p>
+                    <p className="font-medium">{customer.email}</p>
                   </div>
-                  <div className="flex items-center gap-3">
-                    <Phone size={18} className="text-text-secondary" />
-                    <div>
-                      <p className="text-sm text-text-secondary">Phone</p>
-                      <p className="font-medium">{customer.phone}</p>
-                    </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  <Phone size={18} className="text-text-secondary" />
+                  <div>
+                    <p className="text-sm text-text-secondary">Phone</p>
+                    <p className="font-medium">{customer.phone}</p>
                   </div>
                 </div>
-                <div className="space-y-4">
-                  {customer.company && (
-                    <div className="flex items-center gap-3">
-                      <Building size={18} className="text-text-secondary" />
-                      <div>
-                        <p className="text-sm text-text-secondary">Company</p>
-                        <p className="font-medium">{customer.company}</p>
-                      </div>
-                    </div>
-                  )}
-                  {customer.website && (
+              </div>
+              <div className="space-y-4">
+                {customer.company && (
+                  <div className="flex items-center gap-3">
+                    <Building size={18} className="text-text-secondary" />
                     <div>
-                      <p className="text-sm text-text-secondary">Website</p>
-                      <a href={customer.website} className="text-primary hover:underline">
-                        {customer.website}
-                      </a>
+                      <p className="text-sm text-text-secondary">Company</p>
+                      <p className="font-medium">{customer.company}</p>
                     </div>
-                  )}
-                </div>
+                  </div>
+                )}
+                {customer.website && (
+                  <div>
+                    <p className="text-sm text-text-secondary">Website</p>
+                    <a href={customer.website} className="text-primary hover:underline">
+                      {customer.website}
+                    </a>
+                  </div>
+                )}
               </div>
-            </CardContent>
-          </Card>
+            </div>
+          </EmphasisPanel>
 
           <Card>
             <CardHeader>

package/src/movethewheels/pages/CustomersPage.tsx

@@ -6,7 +6,8 @@ import { Users, Plus, RefreshCw, Download, Star } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { TypeBadge } from '../components/StatusBadge';
-import { Button, Badge, Avatar, AvatarFallback } from '../components/ui';
+import { Badge, Avatar, AvatarFallback, Button } from '../components/ui';
+import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useCustomers } from '../hooks/useCustomers';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
@@ -87,19 +88,48 @@ export default function CustomersPage() {
       subtitle={`${totalCustomers} customers`}
       icon={<Users 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 onClick={() => goTo('customers/new')}>
-            <Plus size={16} /> Add Customer
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{
+            label: 'Add Customer',
+            icon: <Plus size={16} />,
+            onSelect: () => goTo('customers/new'),
+          }}
+          actions={[
+            { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
+            { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },
+          ]}
+        />
       }
     >
+      <PagePurpose icon={<Users size={18} />}>
+        The businesses and individuals you deliver for. Keep contact details, locations and
+        satisfaction ratings here, and open a customer to see their order history before booking the
+        next shipment.
+      </PagePurpose>
+
+      {/* Customer base at a glance — the page's single emphasis zone */}
+      <EmphasisPanel>
+        <p className="text-sm font-medium text-text-secondary">Customer base 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">{totalCustomers}</p>
+            <p className="text-xs text-text-secondary">Total customers</p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {customers.filter((c) => c.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">
+              {customers.filter((c) => c.type === 'b2b').length}
+            </p>
+            <p className="text-xs text-text-secondary">Business accounts</p>
+          </div>
+        </div>
+      </EmphasisPanel>
+
       <DataTable
         columns={columns}
         data={customers}
@@ -109,6 +139,15 @@ export default function CustomersPage() {
         searchFields={['name', 'email', 'company'] as (keyof Customer)[]}
         onRowClick={(row) => goTo(`customers/${row.id}`)}
         getRowId={(row) => row.id}
+        emptyIllustration="empty-people"
+        emptyTitle="No customers yet"
+        emptyDescription="Add your first customer to start booking deliveries for them."
+        emptyAction={
+          <Button onClick={() => goTo('customers/new')}>
+            <Plus size={16} className="mr-1.5" />
+            Add Customer
+          </Button>
+        }
       />
     </PageLayout>
   );

package/src/movethewheels/pages/DashboardPage.tsx

@@ -27,6 +27,7 @@ import {
   Badge,
   Progress,
 } from '../components/ui';
+import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useDashboardMetrics } from '../hooks/useAnalytics';
 import { useOrders, useOrderStats } from '../hooks/useOrders';
 import { useFleetStats } from '../hooks/useFleet';
@@ -57,22 +58,35 @@ export default function DashboardPage() {
 
   return (
     <PageLayout
+      hero
+      titleAccent={t('movethewheels.dashboard.title', 'Dashboard')}
       title={t('movethewheels.dashboard.title', 'Dashboard')}
       subtitle={t('movethewheels.dashboard.subtitle', 'Overview of your logistics operations')}
       icon={<TrendingUp size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={() => goTo('tracking/live')}>
-            <MapPin size={16} />
-            {t('movethewheels.dashboard.actions.liveMap', 'Live Map')}
-          </Button>
-          <Button onClick={() => goTo('orders/new')}>
-            <Package size={16} />
-            {t('movethewheels.dashboard.actions.newOrder', 'New Order')}
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{
+            label: t('movethewheels.dashboard.actions.newOrder', 'New Order'),
+            icon: <Package size={16} />,
+            onSelect: () => goTo('orders/new'),
+          }}
+          actions={[
+            {
+              label: t('movethewheels.dashboard.actions.liveMap', 'Live Map'),
+              icon: <MapPin size={16} />,
+              onSelect: () => goTo('tracking/live'),
+            },
+          ]}
+        />
       }
     >
+      <PagePurpose icon={<TrendingUp size={18} />}>
+        {t(
+          'movethewheels.dashboard.purpose',
+          'Your logistics command center — a live snapshot of orders, active deliveries, fleet health and revenue. Start here each day to spot what needs attention, then jump straight into an order, the live map or fleet status.'
+        )}
+      </PagePurpose>
+
       {/* Key Metrics */}
       <MetricGrid columns={4}>
         <MetricCard
@@ -99,6 +113,8 @@ export default function DashboardPage() {
           onClick={() => goTo('fleet')}
         />
         <MetricCard
+          treatment="glass"
+          glow
           label={t('movethewheels.dashboard.metrics.revenue', 'Revenue')}
           value={formatCurrency(metrics.revenue.total)}
           icon={<DollarSign size={20} />}
@@ -234,45 +250,43 @@ export default function DashboardPage() {
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Order Status Summary */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">
-              {t('movethewheels.dashboard.orderStatus.title', 'Order Status')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-3">
-              {[
-                { status: 'pending', count: orderStats.byStatus.pending, color: 'bg-yellow-500' },
-                {
-                  status: 'in_transit',
-                  count: orderStats.byStatus.in_transit,
-                  color: 'bg-blue-500',
-                },
-                {
-                  status: 'delivered',
-                  count: orderStats.byStatus.delivered,
-                  color: 'bg-green-500',
-                },
-                { status: 'cancelled', count: orderStats.byStatus.cancelled, color: 'bg-red-500' },
-              ].map(({ status, count, color }) => (
-                <div key={status} className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <div className={`w-2 h-2 rounded-full ${color}`} />
-                    <span className="text-sm capitalize">
-                      {t(
-                        `movethewheels.dashboard.orderStatus.status.${status}`,
-                        status.replace('_', ' ')
-                      )}
-                    </span>
-                  </div>
-                  <Badge variant="secondary">{count}</Badge>
+        {/* Order Status Summary — the page's single emphasis zone */}
+        <EmphasisPanel className="space-y-4">
+          <h2 className="text-base font-semibold text-text-primary">
+            {t('movethewheels.dashboard.orderStatus.title', 'Order Status')}
+          </h2>
+          <div className="space-y-3">
+            {[
+              { status: 'pending', count: orderStats.byStatus.pending, color: 'bg-yellow-500' },
+              {
+                status: 'in_transit',
+                count: orderStats.byStatus.in_transit,
+                color: 'bg-blue-500',
+              },
+              {
+                status: 'delivered',
+                count: orderStats.byStatus.delivered,
+                color: 'bg-green-500',
+              },
+              { status: 'cancelled', count: orderStats.byStatus.cancelled, color: 'bg-red-500' },
+            ].map(({ status, count, color }) => (
+              <div key={status} className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <div className={`w-2 h-2 rounded-full ${color}`} />
+                  <span className="text-sm capitalize">
+                    {t(
+                      `movethewheels.dashboard.orderStatus.status.${status}`,
+                      status.replace('_', ' ')
+                    )}
+                  </span>
                 </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
+                <Badge variant="secondary" className="tabular-nums">
+                  {count}
+                </Badge>
+              </div>
+            ))}
+          </div>
+        </EmphasisPanel>
 
         {/* Fleet Status */}
         <Card>