@burdenoff/microfe-movethewheels 2026.624.1 → 2026.626.1

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -15,6 +15,7 @@ import {
   Badge,
   Progress,
 } from '../components/ui';
+import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useDriver } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency, formatDate } from '../utils/formatters';
@@ -26,6 +27,7 @@ export default function DriverDetailsPage() {
   const { driver, isLoading, error, refetch } = useDriver(driverId);
 
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/drivers'));
+  const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
   if (isLoading) return <LoadingState message="Loading driver details..." />;
   if (error || !driver) return <ErrorState title="Driver not found" onRetry={refetch} />;
@@ -56,35 +58,64 @@ export default function DriverDetailsPage() {
         </div>
       }
     >
+      <PagePurpose icon={<Users size={18} />}>
+        A driver&apos;s full profile — performance ratings, working hours, documents, earnings and
+        live location. Use it to confirm someone is road-ready and compliant before assigning them
+        an order or route.
+      </PagePurpose>
+
+      <NextSteps
+        storageKey="movethewheels-driver-details"
+        steps={[
+          {
+            id: 'assign',
+            label: 'Assign to an order',
+            description: 'Hand a pending delivery to this driver.',
+            icon: <MapPin size={16} />,
+            onClick: () => goTo('orders'),
+          },
+          {
+            id: 'routes',
+            label: 'Plan their route',
+            description: 'Batch nearby drop-offs into an optimized itinerary.',
+            icon: <Clock size={16} />,
+            onClick: () => goTo('routes'),
+          },
+          {
+            id: 'edit',
+            label: 'Update driver record',
+            description: 'Refresh documents, shift or compliance details.',
+            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">
-          {/* Ratings */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Star size={18} /> Ratings
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-                {[
-                  { label: 'Punctuality', value: driver.ratings.punctuality },
-                  { label: 'Communication', value: driver.ratings.communication },
-                  { label: 'Handling', value: driver.ratings.carefulHandling },
-                  { label: 'Professionalism', value: driver.ratings.professionalism },
-                  { label: 'On-Time Delivery', value: driver.ratings.onTimeDelivery },
-                ].map((rating) => (
-                  <div key={rating.label}>
-                    <p className="text-sm text-text-secondary">{rating.label}</p>
-                    <div className="flex items-center gap-2 mt-1">
-                      <Progress value={rating.value * 20} className="flex-1 h-2" />
-                      <span className="text-sm font-medium">{rating.value.toFixed(1)}</span>
-                    </div>
+          {/* Ratings — the page's single emphasis zone */}
+          <EmphasisPanel>
+            <h2 className="flex items-center gap-2 text-base font-semibold text-text-primary mb-4">
+              <Star size={18} /> Ratings
+            </h2>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+              {[
+                { label: 'Punctuality', value: driver.ratings.punctuality },
+                { label: 'Communication', value: driver.ratings.communication },
+                { label: 'Handling', value: driver.ratings.carefulHandling },
+                { label: 'Professionalism', value: driver.ratings.professionalism },
+                { label: 'On-Time Delivery', value: driver.ratings.onTimeDelivery },
+              ].map((rating) => (
+                <div key={rating.label}>
+                  <p className="text-sm text-text-secondary">{rating.label}</p>
+                  <div className="flex items-center gap-2 mt-1">
+                    <Progress value={rating.value * 20} className="flex-1 h-2" />
+                    <span className="text-sm font-medium">{rating.value.toFixed(1)}</span>
                   </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
+                </div>
+              ))}
+            </div>
+          </EmphasisPanel>
 
           {/* Working Hours */}
           <Card>

package/src/movethewheels/pages/DriversPage.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 { StatusBadge } from '../components/StatusBadge';
-import { Button, Avatar, AvatarFallback } from '../components/ui';
+import { Avatar, AvatarFallback } from '../components/ui';
+import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useDrivers } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
@@ -90,19 +91,48 @@ export default function DriversPage() {
       subtitle={`${totalDrivers} drivers`}
       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>
-            <Plus size={16} /> Add Driver
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{ label: 'Add Driver', icon: <Plus size={16} />, onSelect: () => {} }}
+          actions={[
+            { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
+            { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },
+          ]}
+        />
       }
     >
+      <PagePurpose icon={<Users size={18} />}>
+        Your delivery workforce. Track each driver&apos;s availability, performance rating,
+        completed deliveries and license status here — open a driver to review their history before
+        assigning them to an order or route.
+      </PagePurpose>
+
+      {/* Workforce at a glance — the page's single emphasis zone */}
+      <EmphasisPanel>
+        <p className="text-sm font-medium text-text-secondary">Workforce 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">{totalDrivers}</p>
+            <p className="text-xs text-text-secondary">Total drivers</p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {drivers.filter((d) => d.status === 'available' || d.status === 'busy').length}
+            </p>
+            <p className="text-xs text-text-secondary">On duty / available</p>
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">
+              {drivers.length > 0
+                ? (drivers.reduce((sum, d) => sum + d.ratings.overall, 0) / drivers.length).toFixed(
+                    1
+                  )
+                : '—'}
+            </p>
+            <p className="text-xs text-text-secondary">Avg rating</p>
+          </div>
+        </div>
+      </EmphasisPanel>
+
       <DataTable
         columns={columns}
         data={drivers}
@@ -112,6 +142,9 @@ export default function DriversPage() {
         searchFields={['fullName', 'employeeId'] as (keyof Driver)[]}
         onRowClick={(row) => goTo(`fleet/drivers/${row.id}`)}
         getRowId={(row) => row.id}
+        emptyIllustration="empty-people"
+        emptyTitle="No drivers yet"
+        emptyDescription="Add drivers to start assigning deliveries and routes."
       />
     </PageLayout>
   );

package/src/movethewheels/pages/FinancePage.tsx

@@ -6,6 +6,7 @@ import { DollarSign, TrendingUp, CreditCard, FileText, Download } from 'lucide-r
 import { PageLayout } from '../components/PageLayout';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { Card, CardContent, CardHeader, CardTitle, Button } from '../components/ui';
+import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useAnalytics } from '../hooks/useAnalytics';
 import { useOrderStats } from '../hooks/useOrders';
 import { formatCurrency } from '../utils/formatters';
@@ -33,8 +34,16 @@ export default function FinancePage() {
         </div>
       }
     >
+      <PagePurpose icon={<DollarSign size={18} />}>
+        Follow the money behind your deliveries. See revenue earned, what&apos;s been collected
+        versus still owed, and average order value — use it to chase pending payments, forecast cash
+        flow, and confirm which shipments have actually been paid for.
+      </PagePurpose>
+
       <MetricGrid columns={4}>
         <MetricCard
+          treatment="glass"
+          glow
           label="Total Revenue"
           value={formatCurrency(analytics.overview.totalRevenue)}
           icon={<DollarSign size={20} />}
@@ -81,47 +90,42 @@ export default function FinancePage() {
           </CardContent>
         </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Payment Status</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              <div className="flex items-center justify-between p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-full bg-green-100 dark:bg-green-800 flex items-center justify-center">
-                    <TrendingUp size={20} className="text-green-600" />
-                  </div>
-                  <div>
-                    <p className="font-medium">Paid</p>
-                    <p className="text-sm text-text-secondary">
-                      {stats.byStatus.delivered} orders
-                    </p>
-                  </div>
+        {/* Payment Status — the page's single emphasis zone */}
+        <EmphasisPanel className="space-y-4">
+          <h2 className="text-base font-semibold text-text-primary">Payment Status</h2>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between p-4 bg-status-success-bg/10 rounded-lg">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-status-success-bg/20 flex items-center justify-center">
+                  <TrendingUp size={20} className="text-status-success-text" />
+                </div>
+                <div>
+                  <p className="font-medium">Paid</p>
+                  <p className="text-sm text-text-secondary">{stats.byStatus.delivered} orders</p>
                 </div>
-                <span className="text-xl font-bold text-green-600">
-                  {formatCurrency(completedPayments)}
-                </span>
               </div>
-              <div className="flex items-center justify-between p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-800 flex items-center justify-center">
-                    <CreditCard size={20} className="text-yellow-600" />
-                  </div>
-                  <div>
-                    <p className="font-medium">Pending</p>
-                    <p className="text-sm text-text-secondary">
-                      {stats.byStatus.pending + stats.byStatus.in_transit} orders
-                    </p>
-                  </div>
+              <span className="text-xl font-bold text-status-success-text">
+                {formatCurrency(completedPayments)}
+              </span>
+            </div>
+            <div className="flex items-center justify-between p-4 bg-status-warning-bg/10 rounded-lg">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-status-warning-bg/20 flex items-center justify-center">
+                  <CreditCard size={20} className="text-status-warning-text" />
+                </div>
+                <div>
+                  <p className="font-medium">Pending</p>
+                  <p className="text-sm text-text-secondary">
+                    {stats.byStatus.pending + stats.byStatus.in_transit} orders
+                  </p>
                 </div>
-                <span className="text-xl font-bold text-yellow-600">
-                  {formatCurrency(pendingPayments)}
-                </span>
               </div>
+              <span className="text-xl font-bold text-status-warning-text">
+                {formatCurrency(pendingPayments)}
+              </span>
             </div>
-          </CardContent>
-        </Card>
+          </div>
+        </EmphasisPanel>
       </div>
 
       <Card>
@@ -129,11 +133,11 @@ export default function FinancePage() {
           <CardTitle>Recent Transactions</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="text-center py-8 text-text-secondary">
-            <FileText size={48} className="mx-auto mb-4 opacity-50" />
-            <p>Transaction history would be displayed here</p>
-            <p className="text-sm">Integration with payment gateway required</p>
-          </div>
+          <IllustratedEmptyState
+            illustration="empty-data"
+            title="No transactions yet"
+            description="Once payments are processed, your transaction history will appear here. Connect a payment gateway to start recording transactions."
+          />
         </CardContent>
       </Card>
     </PageLayout>

package/src/movethewheels/pages/FleetPage.tsx

@@ -18,6 +18,7 @@ import {
   Avatar,
   AvatarFallback,
 } from '../components/ui';
+import { CTAOverflowMenu, EmphasisPanel, PagePurpose, NextSteps } from '@burdenoff/fe-libs/ui';
 import { useFleetStats, useVehicles, useDrivers } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
@@ -46,18 +47,65 @@ export default function FleetPage() {
       subtitle={t('movethewheels.fleet.subtitle', 'Manage your vehicles and drivers')}
       icon={<Truck size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={() => goTo('fleet/vehicles')}>
-            <Truck size={16} />
-            {t('movethewheels.fleet.actions.allVehicles', 'All Vehicles')}
-          </Button>
-          <Button variant="outline" onClick={() => goTo('fleet/drivers')}>
-            <Users size={16} />
-            {t('movethewheels.fleet.actions.allDrivers', 'All Drivers')}
-          </Button>
-        </div>
+        <CTAOverflowMenu
+          primary={{
+            label: t('movethewheels.fleet.actions.allVehicles', 'All Vehicles'),
+            icon: <Truck size={16} />,
+            onSelect: () => goTo('fleet/vehicles'),
+          }}
+          actions={[
+            {
+              label: t('movethewheels.fleet.actions.allDrivers', 'All Drivers'),
+              icon: <Users size={16} />,
+              onSelect: () => goTo('fleet/drivers'),
+            },
+          ]}
+        />
       }
     >
+      <PagePurpose icon={<Truck size={18} />}>
+        {t(
+          'movethewheels.fleet.purpose',
+          'Your command center for vehicles and drivers. See utilization at a glance, keep an eye on availability and ratings, and act on maintenance alerts so you always have road-ready capacity to fulfil orders.'
+        )}
+      </PagePurpose>
+
+      <NextSteps
+        storageKey="movethewheels-fleet"
+        steps={[
+          {
+            id: 'vehicles',
+            label: t('movethewheels.fleet.nextSteps.vehicles', 'Review your vehicles'),
+            description: t(
+              'movethewheels.fleet.nextSteps.vehiclesDesc',
+              'Check capacity, fuel and maintenance status across the fleet.'
+            ),
+            icon: <Truck size={16} />,
+            onClick: () => goTo('fleet/vehicles'),
+          },
+          {
+            id: 'drivers',
+            label: t('movethewheels.fleet.nextSteps.drivers', 'Review your drivers'),
+            description: t(
+              'movethewheels.fleet.nextSteps.driversDesc',
+              'See availability, ratings and delivery history before assigning work.'
+            ),
+            icon: <Users size={16} />,
+            onClick: () => goTo('fleet/drivers'),
+          },
+          {
+            id: 'assign',
+            label: t('movethewheels.fleet.nextSteps.assign', 'Assign capacity to orders'),
+            description: t(
+              'movethewheels.fleet.nextSteps.assignDesc',
+              'Open an order to assign an available vehicle and driver.'
+            ),
+            icon: <ChevronRight size={16} />,
+            onClick: () => goTo('orders'),
+          },
+        ]}
+      />
+
       {/* Key Metrics */}
       <MetricGrid columns={4}>
         <MetricCard
@@ -75,6 +123,8 @@ export default function FleetPage() {
           onClick={() => goTo('fleet/drivers')}
         />
         <MetricCard
+          treatment="glass"
+          glow
           label={t('movethewheels.fleet.metrics.utilization', 'Fleet Utilization')}
           value={`${stats.utilization.toFixed(0)}%`}
           icon={<Truck size={20} />}
@@ -197,29 +247,27 @@ export default function FleetPage() {
         </PageSection>
       </div>
 
-      {/* Status Summary */}
+      {/* Status Summary — Vehicle Status is the page's single emphasis zone */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         {/* Vehicle Status */}
-        <Card>
-          <CardHeader>
-            <CardTitle>{t('movethewheels.fleet.status.vehicleTitle', 'Vehicle Status')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {Object.entries(stats.vehiclesByStatus).map(([status, count]) => (
-                <div key={status} className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <StatusBadge status={status} type="vehicle" />
-                  </div>
-                  <div className="flex items-center gap-3">
-                    <span className="font-medium">{count}</span>
-                    <Progress value={(count / stats.totalVehicles) * 100} className="w-24 h-2" />
-                  </div>
+        <EmphasisPanel className="space-y-4">
+          <h2 className="text-base font-semibold text-text-primary">
+            {t('movethewheels.fleet.status.vehicleTitle', 'Vehicle Status')}
+          </h2>
+          <div className="space-y-4">
+            {Object.entries(stats.vehiclesByStatus).map(([status, count]) => (
+              <div key={status} className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <StatusBadge status={status} type="vehicle" />
                 </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
+                <div className="flex items-center gap-3">
+                  <span className="font-medium">{count}</span>
+                  <Progress value={(count / stats.totalVehicles) * 100} className="w-24 h-2" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </EmphasisPanel>
 
         {/* Driver Status */}
         <Card>
@@ -246,9 +294,9 @@ export default function FleetPage() {
 
       {/* Maintenance Alerts */}
       {stats.vehiclesByStatus.maintenance > 0 && (
-        <Card className="border-yellow-200 dark:border-yellow-800">
+        <Card className="border-status-warning-border">
           <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-yellow-600">
+            <CardTitle className="flex items-center gap-2 text-status-warning-text">
               <Wrench size={18} />
               {t('movethewheels.fleet.maintenance.title', 'Maintenance Required')}
             </CardTitle>
@@ -260,10 +308,10 @@ export default function FleetPage() {
                 .map((vehicle) => (
                   <div
                     key={vehicle.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 className="flex items-center gap-3">
-                      <Truck size={20} className="text-yellow-600" />
+                      <Truck size={20} className="text-status-warning-text" />
                       <div>
                         <p className="font-medium">{vehicle.vehicleNumber}</p>
                         <p className="text-sm text-text-secondary">

package/src/movethewheels/pages/ImportExportPage.tsx

@@ -5,6 +5,7 @@
 import { Upload, Download, FileText, FileSpreadsheet, Check } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { Card, CardContent, CardHeader, CardTitle, Button, Badge } from '../components/ui';
+import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
 
 export default function ImportExportPage() {
   const importOptions = [
@@ -69,14 +70,19 @@ export default function ImportExportPage() {
       subtitle="Import and export your data"
       icon={<FileText size={24} />}
     >
+      <PagePurpose icon={<FileText size={18} />}>
+        Move data in and out in bulk. Import orders, customers, products or inventory from CSV/Excel
+        to onboard or migrate without re-keying, and export any dataset for accounting, BI tools or
+        backups — no manual copy-paste required.
+      </PagePurpose>
+
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Upload size={18} /> Import Data
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
+        {/* Import Data — the page's single emphasis zone */}
+        <EmphasisPanel className="space-y-4">
+          <h2 className="flex items-center gap-2 text-base font-semibold text-text-primary">
+            <Upload size={18} /> Import Data
+          </h2>
+          <div className="space-y-4">
             {importOptions.map((opt) => (
               <div
                 key={opt.name}
@@ -99,8 +105,8 @@ export default function ImportExportPage() {
                 </div>
               </div>
             ))}
-          </CardContent>
-        </Card>
+          </div>
+        </EmphasisPanel>
 
         <Card>
           <CardHeader>
@@ -136,28 +142,39 @@ export default function ImportExportPage() {
           <CardTitle>Recent Activity</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="space-y-3">
-            {recentActivity.map((activity, i) => (
-              <div key={i} className="flex items-center justify-between p-3 bg-bg-sunken/50 rounded-lg">
-                <div className="flex items-center gap-3">
-                  {activity.type === 'import' ? (
-                    <Upload size={16} className="text-primary" />
-                  ) : (
-                    <Download size={16} className="text-primary" />
-                  )}
-                  <div>
-                    <p className="font-medium">{activity.name}</p>
-                    <p className="text-sm text-text-secondary">
-                      {activity.type === 'import' ? 'Imported' : 'Exported'} on {activity.date}
-                    </p>
+          {recentActivity.length === 0 ? (
+            <IllustratedEmptyState
+              illustration="empty-data"
+              title="No import or export activity yet"
+              description="Your recent imports and exports will show up here once you run one."
+            />
+          ) : (
+            <div className="space-y-3">
+              {recentActivity.map((activity, i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between p-3 bg-bg-sunken/50 rounded-lg"
+                >
+                  <div className="flex items-center gap-3">
+                    {activity.type === 'import' ? (
+                      <Upload size={16} className="text-primary" />
+                    ) : (
+                      <Download size={16} className="text-primary" />
+                    )}
+                    <div>
+                      <p className="font-medium">{activity.name}</p>
+                      <p className="text-sm text-text-secondary">
+                        {activity.type === 'import' ? 'Imported' : 'Exported'} on {activity.date}
+                      </p>
+                    </div>
                   </div>
+                  <Badge variant="default" className="gap-1">
+                    <Check size={12} /> {activity.status}
+                  </Badge>
                 </div>
-                <Badge variant="default" className="gap-1">
-                  <Check size={12} /> {activity.status}
-                </Badge>
-              </div>
-            ))}
-          </div>
+              ))}
+            </div>
+          )}
         </CardContent>
       </Card>
     </PageLayout>