@burdenoff/microfe-movethewheels 2026.703.4 → 2026.703.6

package/src/movethewheels/pages/CustomersPage.tsx

@@ -3,12 +3,13 @@
  */
 
 import { useState } from 'react';
-import { Users, Plus, RefreshCw, Download, Star } from 'lucide-react';
+import { Users, Plus, RefreshCw, Download, Star, UserCheck, Building2 } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { TypeBadge } from '../components/StatusBadge';
 import { Badge, Avatar, AvatarFallback, Button } from '../components/ui';
-import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useCustomers, useCustomerStats } from '../hooks/useCustomers';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
@@ -119,24 +120,32 @@ export default function CustomersPage() {
         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">{stats.total}</p>
-            <p className="text-xs text-text-secondary">Total customers</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{stats.active}</p>
-            <p className="text-xs text-text-secondary">Active</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{stats.b2b}</p>
-            <p className="text-xs text-text-secondary">Business accounts</p>
-          </div>
-        </div>
-      </EmphasisPanel>
+      {/* Customer base at a glance — premium stat cards */}
+      <div>
+        <p className="mb-3 text-sm font-medium text-text-secondary">Customer base at a glance</p>
+        <MetricGrid columns={3}>
+          <MetricCard
+            label="Total customers"
+            value={stats.total}
+            icon={<Users size={20} />}
+            accent="brand"
+          />
+          <MetricCard
+            label="Active"
+            value={stats.active}
+            icon={<UserCheck size={20} />}
+            accent="success"
+            subtitle="Currently transacting"
+          />
+          <MetricCard
+            label="Business accounts"
+            value={stats.b2b}
+            icon={<Building2 size={20} />}
+            accent="blue"
+            subtitle="B2B relationships"
+          />
+        </MetricGrid>
+      </div>
 
       <DataTable
         columns={columns}

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

@@ -374,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

@@ -3,12 +3,13 @@
  */
 
 import { useState } from 'react';
-import { Users, Plus, RefreshCw, Download, Star } from 'lucide-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 { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useDrivers, useFleetStats } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
@@ -123,28 +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">
-              {stats.driversByStatus.available + stats.driversByStatus.busy}
-            </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">
-              {stats.avgDriverRating > 0 ? stats.avgDriverRating.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}

package/src/movethewheels/pages/FinancePage.tsx

@@ -1,16 +1,19 @@
 /**
  * Finance Page
  *
- * Shows only REAL figures returned by Query.financeMetrics (revenue, fuel cost,
- * open invoices) — no simulated paid/pending splits. Invoicing and settlement
- * are handled by the platform Billing module (global-billing-svc), which this
- * page deep-links to rather than re-implementing an Invoice model here.
+ * Shows only REAL figures returned by Query.financeMetrics (revenue, delivered
+ * revenue, fuel cost, open invoices) plus the real revenue trend series — no
+ * simulated paid/pending splits and no fabricated cost categories. Invoicing and
+ * settlement are handled by the platform Billing module, which this page
+ * deep-links to rather than re-implementing an Invoice ledger here.
  */
 
+import { useMemo } from 'react';
 import { DollarSign, TrendingUp, CreditCard, FileText, Fuel, ArrowRight } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { Card, CardContent, CardHeader, CardTitle, Button } from '../components/ui';
+import { TrendChart, VolumeBar, chartTokens } from '../components/charts';
 import { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useAnalytics, useFinanceMetrics } from '../hooks/useAnalytics';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -24,6 +27,24 @@ export default function FinancePage() {
   // Deep-link to the host Billing module (mounted at /billing in the app shell).
   const openBilling = () => navigate('/billing');
 
+  const revenueSeries = useMemo(
+    () => analytics.trends.revenue.map((r) => ({ month: r.month, revenue: r.revenue })),
+    [analytics.trends.revenue]
+  );
+
+  // Real dollar figures only — total revenue, money already collected on delivered
+  // orders, and fuel spend. No invented category breakdown.
+  const economics = useMemo(
+    () => [
+      { label: 'Total revenue', amount: metrics.totalRevenue },
+      { label: 'Collected', amount: metrics.deliveredRevenue },
+      { label: 'Fuel cost', amount: metrics.fuelCost },
+    ],
+    [metrics.totalRevenue, metrics.deliveredRevenue, metrics.fuelCost]
+  );
+
+  const hasEconomics = economics.some((e) => e.amount > 0);
+
   return (
     <PageLayout
       title="Finance"
@@ -31,7 +52,7 @@ export default function FinancePage() {
       icon={<DollarSign size={24} />}
       headerActions={
         <Button variant="outline" onClick={openBilling}>
-          <FileText size={16} /> Invoices & Billing
+          <FileText size={16} /> Invoices &amp; Billing
         </Button>
       }
     >
@@ -48,59 +69,54 @@ export default function FinancePage() {
           label="Total Revenue"
           value={formatCurrency(metrics.totalRevenue)}
           icon={<DollarSign size={20} />}
+          accent="success"
         />
         <MetricCard
           label="Collected (Delivered)"
           value={formatCurrency(metrics.deliveredRevenue)}
           icon={<TrendingUp size={20} />}
-          changeType="positive"
+          accent="brand"
         />
         <MetricCard
           label="Fuel Cost"
           value={formatCurrency(metrics.fuelCost)}
           icon={<Fuel size={20} />}
-          changeType="neutral"
+          accent="warning"
         />
         <MetricCard
           label="Open Invoices"
           value={String(metrics.openInvoices)}
           icon={<CreditCard size={20} />}
+          accent="blue"
         />
       </MetricGrid>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <Card>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <Card className="lg:col-span-2">
           <CardHeader>
-            <CardTitle>Revenue by Month</CardTitle>
+            <CardTitle>Revenue trend</CardTitle>
           </CardHeader>
           <CardContent>
-            {analytics.trends.revenue.length > 0 ? (
-              <div className="space-y-4">
-                {analytics.trends.revenue.map((r) => (
-                  <div
-                    key={r.month}
-                    className="flex items-center justify-between p-3 bg-bg-sunken/50 rounded-lg"
-                  >
-                    <span className="font-medium">{r.month}</span>
-                    <span className="text-lg font-bold">{formatCurrency(r.revenue)}</span>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <p className="text-text-secondary text-center py-6">
-                No revenue recorded yet. Revenue appears here as orders are delivered.
-              </p>
-            )}
+            <TrendChart
+              xKey="month"
+              variant="area"
+              height={280}
+              showLegend={false}
+              data={revenueSeries}
+              series={[{ dataKey: 'revenue', name: 'Revenue', color: chartTokens.brandBlue }]}
+              valueFormatter={(v) => formatCurrency(Number(v))}
+              emptyMessage="No revenue recorded yet. Revenue appears here as orders are delivered."
+            />
           </CardContent>
         </Card>
 
         {/* Invoices & Settlement — reuse of the Billing module */}
         <EmphasisPanel className="space-y-4">
-          <h2 className="text-base font-semibold text-text-primary">Invoices & Settlement</h2>
+          <h2 className="text-base font-semibold text-text-primary">Invoices &amp; Settlement</h2>
           <p className="text-sm text-text-secondary">
             Invoicing, payments and settlement run through the platform Billing module — the single
-            source of truth for what&apos;s been billed and paid. MoveTheWheels doesn&apos;t keep its
-            own invoice ledger.
+            source of truth for what&apos;s been billed and paid. MoveTheWheels doesn&apos;t keep
+            its own invoice ledger.
           </p>
           <div className="flex items-center justify-between p-4 bg-status-warning-bg/10 rounded-lg">
             <div className="flex items-center gap-3">
@@ -123,6 +139,28 @@ export default function FinancePage() {
           </Button>
         </EmphasisPanel>
       </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Revenue vs cost</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {hasEconomics ? (
+            <VolumeBar
+              xKey="label"
+              height={260}
+              showLegend={false}
+              data={economics}
+              series={[{ dataKey: 'amount', name: 'Amount' }]}
+              valueFormatter={(v) => formatCurrency(Number(v))}
+            />
+          ) : (
+            <p className="py-8 text-center text-sm text-text-secondary">
+              Revenue and cost figures appear here as orders are delivered.
+            </p>
+          )}
+        </CardContent>
+      </Card>
     </PageLayout>
   );
 }