@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

package/src/movethewheels/pages/DashboardPage.tsx

@@ -4,6 +4,7 @@
  * Main overview page with key metrics and quick actions.
  */
 
+import { useMemo } from 'react';
 import {
   Package,
   Truck,
@@ -14,10 +15,14 @@ import {
   TrendingUp,
   MapPin,
   ChevronRight,
+  Activity,
 } from 'lucide-react';
 import { PageLayout, PageSection } from '../components/PageLayout';
-import { MetricCard, MetricGrid } from '../components/MetricCard';
+import { MetricCard, MetricGrid, type MetricDelta } from '../components/MetricCard';
 import { StatusBadge } from '../components/StatusBadge';
+import { LogisticsMap, type LogisticsMarker } from '../components/maps';
+import { VolumeBar } from '../components/charts';
+import { deliveryMarkerStatus, firstRealLatLng } from '../utils/mapMarkers';
 import {
   Card,
   CardContent,
@@ -28,15 +33,26 @@ import {
   Progress,
 } from '../components/ui';
 import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useDashboardMetrics } from '../hooks/useAnalytics';
+import { useAnalytics, useDashboardMetrics } from '../hooks/useAnalytics';
 import { useOrders, useOrderStats } from '../hooks/useOrders';
 import { useFleetStats } from '../hooks/useFleet';
-import { useLiveTracking } from '../hooks/useTracking';
+import { useLiveTracking, useTrackingAlerts } from '../hooks/useTracking';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
 import { formatCurrency, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 
+/** Percentage delta across a real series (first non-zero → last). */
+function seriesDelta(values: number[], invert = false): MetricDelta | undefined {
+  if (values.length < 2) return undefined;
+  const first = values.find((v) => v > 0);
+  const last = values[values.length - 1];
+  if (first == null || first === 0) return undefined;
+  const pct = ((last - first) / Math.abs(first)) * 100;
+  const direction = pct > 0.5 ? 'up' : pct < -0.5 ? 'down' : 'flat';
+  return { value: `${pct >= 0 ? '+' : ''}${pct.toFixed(1)}%`, direction, invert };
+}
+
 export default function DashboardPage() {
   const { t: translate } = useI18n();
   const t = (key: string, fallback: string): string => {
@@ -45,10 +61,69 @@ export default function DashboardPage() {
   };
   const { basePath, navigate } = useMoveTheWheels();
   const { metrics } = useDashboardMetrics();
+  const { analytics } = useAnalytics();
   const { orders } = useOrders({ limit: 5 });
   const { stats: orderStats } = useOrderStats();
   const { stats: fleetStats } = useFleetStats();
   const { activeDeliveries } = useLiveTracking();
+  const { unacknowledgedAlerts } = useTrackingAlerts();
+
+  const orderSpark = useMemo(
+    () => analytics.trends.dailyOrders.map((d) => d.orders),
+    [analytics.trends.dailyOrders]
+  );
+  const deliverySpark = useMemo(
+    () => analytics.trends.dailyOrders.map((d) => d.deliveries),
+    [analytics.trends.dailyOrders]
+  );
+  const revenueSpark = useMemo(
+    () => analytics.trends.revenue.map((r) => r.revenue),
+    [analytics.trends.revenue]
+  );
+
+  // Weekly order volume — last 7 real trend points (orders + deliveries).
+  const weeklyVolume = useMemo(
+    () => analytics.trends.dailyOrders.slice(-7),
+    [analytics.trends.dailyOrders]
+  );
+
+  // Live map markers built from the best real coordinate per active delivery.
+  const mapMarkers = useMemo<LogisticsMarker[]>(
+    () =>
+      activeDeliveries.flatMap((d) => {
+        if (!d.order) return [];
+        const coord = firstRealLatLng(
+          d.vehicle?.currentLocation,
+          d.driver?.currentLocation,
+          d.tracking?.currentLocation
+        );
+        if (!coord) return [];
+        return [
+          {
+            id: d.order.id,
+            lat: coord.lat,
+            lng: coord.lng,
+            label: d.order.orderNumber,
+            status: deliveryMarkerStatus(d.order.status),
+            sublabel: d.driver?.fullName || d.vehicle?.vehicleNumber || undefined,
+          },
+        ];
+      }),
+    [activeDeliveries]
+  );
+
+  // Recent activity — the latest orders as a real, timestamped feed.
+  const recentActivity = useMemo(
+    () =>
+      [...orders]
+        .sort(
+          (a, b) =>
+            new Date(b.updatedAt ?? b.createdAt).getTime() -
+            new Date(a.updatedAt ?? a.createdAt).getTime()
+        )
+        .slice(0, 5),
+    [orders]
+  );
 
   const goTo = (path: string) => {
     if (navigate) {
@@ -94,27 +169,38 @@ export default function DashboardPage() {
         )}
       </PagePurpose>
 
-      {/* Key Metrics */}
+      {/* Key Metrics — premium control-tower stat cards with real trend deltas */}
       <MetricGrid columns={4}>
         <MetricCard
           label={t('movethewheels.dashboard.metrics.totalOrders', 'Total Orders')}
           value={metrics.orders.total}
           icon={<Package size={20} />}
+          accent="brand"
+          sparklineData={orderSpark.length >= 2 ? orderSpark : undefined}
+          delta={seriesDelta(orderSpark)}
           onClick={() => goTo('orders')}
         />
         <MetricCard
           label={t('movethewheels.dashboard.metrics.activeDeliveries', 'Active Deliveries')}
           value={metrics.orders.inTransit}
           icon={<Truck size={20} />}
+          accent="blue"
           subtitle={`${metrics.orders.pending} ${t('movethewheels.dashboard.metrics.pending', 'pending')}`}
+          sparklineData={deliverySpark.length >= 2 ? deliverySpark : undefined}
+          delta={seriesDelta(deliverySpark)}
           onClick={() => goTo('tracking')}
         />
         <MetricCard
-          label={t('movethewheels.dashboard.metrics.fleetUtilization', 'Fleet Utilization')}
-          value={`${metrics.fleet.activeVehicles}/${metrics.fleet.totalVehicles}`}
-          icon={<Truck size={20} />}
-          subtitle={`${metrics.fleet.availableDrivers} ${t('movethewheels.dashboard.metrics.driversAvailable', 'drivers available')}`}
-          onClick={() => goTo('fleet')}
+          label={t('movethewheels.dashboard.metrics.onTimeDelivery', 'On-Time Delivery')}
+          value={`${metrics.performance.onTimeDeliveryRate.toFixed(1)}%`}
+          icon={<TrendingUp size={20} />}
+          accent="success"
+          delta={
+            metrics.performance.onTimeDeliveryRate >= 90
+              ? { value: 'On target', direction: 'up' }
+              : { value: 'Below 90%', direction: 'down' }
+          }
+          onClick={() => goTo('analytics')}
         />
         <MetricCard
           treatment="glass"
@@ -122,17 +208,157 @@ export default function DashboardPage() {
           label={t('movethewheels.dashboard.metrics.revenue', 'Revenue')}
           value={formatCurrency(metrics.revenue.total)}
           icon={<DollarSign size={20} />}
+          accent="success"
+          sparklineData={revenueSpark.length >= 2 ? revenueSpark : undefined}
+          delta={seriesDelta(revenueSpark)}
           onClick={() => goTo('analytics')}
         />
       </MetricGrid>
 
+      {/* Control Tower — live map + exceptions + recent activity */}
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        <Card className="overflow-hidden lg:col-span-2">
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="flex items-center gap-2">
+              <MapPin size={18} /> {t('movethewheels.dashboard.liveMap.title', 'Live Map')}
+            </CardTitle>
+            <Button variant="ghost" size="sm" onClick={() => goTo('tracking/live')}>
+              {t('movethewheels.dashboard.liveMap.open', 'Open live tracking')}
+              <ChevronRight size={16} />
+            </Button>
+          </CardHeader>
+          <CardContent className="p-0">
+            <LogisticsMap
+              markers={mapMarkers}
+              height={460}
+              emptyMessage={
+                activeDeliveries.length === 0
+                  ? t('movethewheels.dashboard.liveMap.noActive', 'No active deliveries right now')
+                  : t(
+                      'movethewheels.dashboard.liveMap.awaitingGps',
+                      'Awaiting live GPS positions for active deliveries'
+                    )
+              }
+            />
+          </CardContent>
+        </Card>
+
+        <div className="space-y-6">
+          {/* Exception Alerts */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <AlertTriangle size={18} className="text-status-warning-text" />
+                {t('movethewheels.dashboard.exceptions.title', 'Exception Alerts')}
+                {unacknowledgedAlerts.length > 0 && (
+                  <Badge variant="destructive" className="ml-auto">
+                    {unacknowledgedAlerts.length}
+                  </Badge>
+                )}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {unacknowledgedAlerts.length > 0 ? (
+                <div className="space-y-3">
+                  {unacknowledgedAlerts.slice(0, 4).map((alert) => (
+                    <div
+                      key={alert.id}
+                      className={`rounded-lg p-3 text-sm ${
+                        alert.severity === 'critical' || alert.severity === 'high'
+                          ? 'bg-status-error-bg-subtle'
+                          : 'bg-status-warning-bg-subtle'
+                      }`}
+                    >
+                      <p className="font-medium">{alert.message}</p>
+                      <p className="mt-1 text-xs text-text-secondary">
+                        {formatDate(alert.timestamp, 'relative')}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="py-4 text-center text-sm text-text-secondary">
+                  {t(
+                    'movethewheels.dashboard.exceptions.none',
+                    'No exceptions — all deliveries on track'
+                  )}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Recent Activity */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Activity size={18} />
+                {t('movethewheels.dashboard.activity.title', 'Recent Activity')}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {recentActivity.length > 0 ? (
+                <ul className="space-y-3">
+                  {recentActivity.map((order) => (
+                    <li key={order.id} className="flex items-start gap-3">
+                      <span
+                        aria-hidden
+                        className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-action-primary-bg"
+                      />
+                      <div className="min-w-0 flex-1">
+                        <p className="truncate text-sm">
+                          <span className="font-medium">{order.orderNumber}</span>{' '}
+                          <span className="text-text-secondary capitalize">
+                            {order.status.replace(/_/g, ' ')}
+                          </span>
+                        </p>
+                        <p className="text-xs text-text-secondary">
+                          {formatDate(order.updatedAt ?? order.createdAt, 'relative')}
+                        </p>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="py-4 text-center text-sm text-text-secondary">
+                  {t('movethewheels.dashboard.activity.none', 'No recent activity yet')}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Weekly order volume */}
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {t('movethewheels.dashboard.weeklyVolume.title', 'Weekly order volume')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <VolumeBar
+            xKey="date"
+            height={240}
+            data={weeklyVolume}
+            series={[
+              { dataKey: 'orders', name: 'Orders' },
+              { dataKey: 'deliveries', name: 'Deliveries' },
+            ]}
+            emptyMessage={t(
+              'movethewheels.dashboard.weeklyVolume.empty',
+              'No order volume recorded yet'
+            )}
+          />
+        </CardContent>
+      </Card>
+
       {/* Quick Stats Row */}
       <MetricGrid columns={4}>
         <MetricCard
           size="sm"
-          label={t('movethewheels.dashboard.stats.onTimeDelivery', 'On-Time Delivery')}
-          value={`${metrics.performance.onTimeDeliveryRate.toFixed(1)}%`}
-          changeType={metrics.performance.onTimeDeliveryRate >= 90 ? 'positive' : 'negative'}
+          label={t('movethewheels.dashboard.metrics.fleetUtilization', 'Fleet Utilization')}
+          value={`${metrics.fleet.activeVehicles}/${metrics.fleet.totalVehicles}`}
+          subtitle={`${metrics.fleet.availableDrivers} ${t('movethewheels.dashboard.metrics.driversAvailable', 'drivers available')}`}
         />
         <MetricCard
           size="sm"

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -34,6 +34,7 @@ import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 import { FormError } from '../components/FormError';
+import { DocumentsCard } from '../components/DocumentsCard';
 
 function NewDriverForm() {
   const { basePath, navigate } = useMoveTheWheels();
@@ -310,46 +311,31 @@ export default function DriverDetailsPage() {
             </CardContent>
           </Card>
 
-          {/* Documents */}
+          {/* License — real driver credential fields */}
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
-                <FileText size={18} /> Documents
+                <FileText size={18} /> License
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="space-y-3">
-                <div className="flex items-center justify-between p-3 border rounded-lg">
-                  <div>
-                    <p className="font-medium">Driver's License</p>
-                    <p className="text-sm text-text-secondary">
-                      {driver.licenseNumber} - {driver.licenseType}
-                    </p>
-                    <p className="text-sm text-text-secondary">
-                      Expires: {formatDate(driver.licenseExpiry)}
-                    </p>
-                  </div>
-                  <Badge variant="default">Valid</Badge>
+              <div className="flex items-center justify-between p-3 border rounded-lg">
+                <div>
+                  <p className="font-medium">Driver&apos;s License</p>
+                  <p className="text-sm text-text-secondary">
+                    {driver.licenseNumber || '—'}
+                    {driver.licenseType ? ` - ${driver.licenseType}` : ''}
+                  </p>
+                  <p className="text-sm text-text-secondary">
+                    Expires: {formatDate(driver.licenseExpiry)}
+                  </p>
                 </div>
-                {driver.documents.map((doc) => (
-                  <div
-                    key={doc.id}
-                    className="flex items-center justify-between p-3 border rounded-lg"
-                  >
-                    <div>
-                      <p className="font-medium capitalize">{doc.type.replace('_', ' ')}</p>
-                      <p className="text-sm text-text-secondary">
-                        Expires: {formatDate(doc.expiryDate)}
-                      </p>
-                    </div>
-                    <Badge variant={doc.verified ? 'default' : 'secondary'}>
-                      {doc.verified ? 'Verified' : 'Pending'}
-                    </Badge>
-                  </div>
-                ))}
               </div>
             </CardContent>
           </Card>
+
+          {/* Documents — real files via wspace-files-svc */}
+          <DocumentsCard entityType="driver" entityId={driver.id} />
         </div>
 
         <div className="space-y-6">
@@ -388,7 +374,7 @@ export default function DriverDetailsPage() {
                   {formatCurrency(driver.earnings.totalEarnings)}
                 </p>
               </div>
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 <div>
                   <p className="text-sm text-text-secondary">This Week</p>
                   <p className="font-medium">{formatCurrency(driver.earnings.weeklyEarnings)}</p>

package/src/movethewheels/pages/DriversPage.tsx

@@ -2,13 +2,15 @@
  * Drivers Page - List of all drivers
  */
 
-import { Users, Plus, RefreshCw, Download, Star } from 'lucide-react';
+import { useState } from 'react';
+import { Users, Plus, RefreshCw, Download, Star, UserCheck, Coffee, UserMinus } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge } from '../components/StatusBadge';
 import { Avatar, AvatarFallback } from '../components/ui';
-import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useDrivers } from '../hooks/useFleet';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { useDrivers, useFleetStats } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -16,7 +18,15 @@ import type { Driver } from '../types';
 
 export default function DriversPage() {
   const { basePath, navigate } = useMoveTheWheels();
-  const { drivers, totalDrivers, isLoading, refetch } = useDrivers();
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
+  const { drivers, isLoading, refetch } = useDrivers({
+    limit: pageSize,
+    offset: page * pageSize,
+  });
+  // Workforce totals + tiles from the live aggregate, not the current page.
+  const { stats } = useFleetStats();
+  const totalDrivers = stats.totalDrivers;
 
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
@@ -99,7 +109,11 @@ export default function DriversPage() {
           }}
           actions={[
             { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
-            { label: 'Export', icon: <Download size={16} />, onSelect: () => goTo('import-export') },
+            {
+              label: 'Export',
+              icon: <Download size={16} />,
+              onSelect: () => goTo('import-export'),
+            },
           ]}
         />
       }
@@ -110,32 +124,38 @@ export default function DriversPage() {
         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>
+      {/* Workforce at a glance — premium stat cards */}
+      <div>
+        <p className="mb-3 text-sm font-medium text-text-secondary">Workforce at a glance</p>
+        <MetricGrid columns={4}>
+          <MetricCard
+            label="On duty"
+            value={stats.driversByStatus.available + stats.driversByStatus.busy}
+            icon={<UserCheck size={20} />}
+            accent="success"
+            subtitle="Available or delivering"
+          />
+          <MetricCard
+            label="On break"
+            value={stats.driversByStatus.on_break}
+            icon={<Coffee size={20} />}
+            accent="warning"
+          />
+          <MetricCard
+            label="Off duty"
+            value={stats.driversByStatus.offline}
+            icon={<UserMinus size={20} />}
+            accent="neutral"
+          />
+          <MetricCard
+            label="Avg rating"
+            value={stats.avgDriverRating > 0 ? stats.avgDriverRating.toFixed(1) : '—'}
+            icon={<Star size={20} />}
+            accent="brand"
+            subtitle={`${totalDrivers} drivers`}
+          />
+        </MetricGrid>
+      </div>
 
       <DataTable
         columns={columns}
@@ -146,6 +166,14 @@ export default function DriversPage() {
         searchFields={['fullName', 'employeeId'] as (keyof Driver)[]}
         onRowClick={(row) => goTo(`fleet/drivers/${row.id}`)}
         getRowId={(row) => row.id}
+        pageIndex={page}
+        pageSize={pageSize}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(0);
+        }}
+        totalItems={totalDrivers}
         emptyIllustration="empty-people"
         emptyTitle="No drivers yet"
         emptyDescription="Add drivers to start assigning deliveries and routes."