@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

package/src/movethewheels/pages/FinancePage.tsx

@@ -1,22 +1,49 @@
 /**
  * Finance Page
+ *
+ * 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 { DollarSign, TrendingUp, CreditCard, FileText, Download } from 'lucide-react';
+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 { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useAnalytics } from '../hooks/useAnalytics';
-import { useOrderStats } from '../hooks/useOrders';
+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';
 import { formatCurrency } from '../utils/formatters';
 
 export default function FinancePage() {
   const { analytics } = useAnalytics();
-  const { stats } = useOrderStats();
+  const { metrics } = useFinanceMetrics();
+  const { navigate } = useMoveTheWheels();
 
-  const pendingPayments = stats.totalRevenue * 0.15; // Simulated
-  const completedPayments = stats.totalRevenue * 0.85;
+  // 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
@@ -24,20 +51,15 @@ export default function FinancePage() {
       subtitle="Financial overview and reports"
       icon={<DollarSign size={24} />}
       headerActions={
-        <div className="flex gap-2">
-          <Button variant="outline">
-            <FileText size={16} /> Invoices
-          </Button>
-          <Button variant="outline">
-            <Download size={16} /> Export
-          </Button>
-        </div>
+        <Button variant="outline" onClick={openBilling}>
+          <FileText size={16} /> Invoices &amp; Billing
+        </Button>
       }
     >
       <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.
+        Follow the money behind your deliveries. See total revenue, how much has already been
+        collected on delivered orders, fuel cost and how many invoices are still open — then head to
+        Billing to raise and settle invoices.
       </PagePurpose>
 
       <MetricGrid columns={4}>
@@ -45,99 +67,98 @@ export default function FinancePage() {
           treatment="glass"
           glow
           label="Total Revenue"
-          value={formatCurrency(analytics.overview.totalRevenue)}
+          value={formatCurrency(metrics.totalRevenue)}
           icon={<DollarSign size={20} />}
-          change="+12.5%"
-          changeType="positive"
-          trend="up"
+          accent="success"
         />
         <MetricCard
-          label="Completed"
-          value={formatCurrency(completedPayments)}
+          label="Collected (Delivered)"
+          value={formatCurrency(metrics.deliveredRevenue)}
           icon={<TrendingUp size={20} />}
-          changeType="positive"
+          accent="brand"
         />
         <MetricCard
-          label="Pending"
-          value={formatCurrency(pendingPayments)}
-          icon={<CreditCard size={20} />}
-          changeType="neutral"
+          label="Fuel Cost"
+          value={formatCurrency(metrics.fuelCost)}
+          icon={<Fuel size={20} />}
+          accent="warning"
         />
         <MetricCard
-          label="Avg Order Value"
-          value={formatCurrency(stats.avgOrderValue)}
-          icon={<DollarSign size={20} />}
+          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>
-            <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} 2024</span>
-                  <span className="text-lg font-bold">{formatCurrency(r.revenue)}</span>
-                </div>
-              ))}
-            </div>
+            <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>
 
-        {/* Payment Status — the page's single emphasis zone */}
+        {/* Invoices & Settlement — reuse of the Billing module */}
         <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>
+          <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.
+          </p>
+          <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>
-              <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>
+              <div>
+                <p className="font-medium">Open invoices</p>
+                <p className="text-sm text-text-secondary">
+                  {metrics.openInvoices} awaiting settlement
+                </p>
               </div>
-              <span className="text-xl font-bold text-status-warning-text">
-                {formatCurrency(pendingPayments)}
-              </span>
             </div>
+            <span className="text-xl font-bold text-status-warning-text">
+              {metrics.openInvoices}
+            </span>
           </div>
+          <Button className="w-full" onClick={openBilling}>
+            Open Billing <ArrowRight size={16} />
+          </Button>
         </EmphasisPanel>
       </div>
 
       <Card>
         <CardHeader>
-          <CardTitle>Recent Transactions</CardTitle>
+          <CardTitle>Revenue vs cost</CardTitle>
         </CardHeader>
         <CardContent>
-          <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."
-          />
+          {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>

package/src/movethewheels/pages/InventoryPage.tsx

@@ -2,7 +2,15 @@
  * Inventory Page - Overview of inventory management
  */
 
-import { Package, Warehouse, AlertTriangle, ChevronRight, Plus } from 'lucide-react';
+import {
+  Package,
+  Warehouse,
+  AlertTriangle,
+  ChevronRight,
+  Plus,
+  Boxes,
+  DollarSign,
+} from 'lucide-react';
 import { PageLayout, PageSection } from '../components/PageLayout';
 import { MetricCard, MetricGrid, MetricCardSkeleton } from '../components/MetricCard';
 import { Card, CardContent, Button, Badge, Progress } from '../components/ui';
@@ -88,22 +96,26 @@ export default function InventoryPage() {
             label={t('movethewheels.inventory.metrics.totalProducts', 'Total Products')}
             value={stats.totalProducts}
             icon={<Package size={20} />}
+            accent="brand"
             onClick={() => goTo('inventory/products')}
           />
           <MetricCard
             label={t('movethewheels.inventory.metrics.totalItems', 'Total Items')}
             value={stats.totalItems.toLocaleString()}
-            icon={<Package size={20} />}
+            icon={<Boxes size={20} />}
+            accent="success"
           />
           <MetricCard
             label={t('movethewheels.inventory.metrics.inventoryValue', 'Inventory Value')}
             value={formatCurrency(stats.totalValue)}
-            icon={<Package size={20} />}
+            icon={<DollarSign size={20} />}
+            accent="blue"
           />
           <MetricCard
             label={t('movethewheels.inventory.metrics.warehouses', 'Warehouses')}
             value={stats.totalWarehouses}
             icon={<Warehouse size={20} />}
+            accent="neutral"
             onClick={() => goTo('inventory/warehouses')}
           />
         </MetricGrid>

package/src/movethewheels/pages/LiveTrackingPage.tsx

@@ -4,11 +4,13 @@
  * Real-time map view of all active deliveries.
  */
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { MapPin, Truck, Package, RefreshCw, List, Map } from 'lucide-react';
 import { PageLayout, EmptyState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
+import { LogisticsMap, type LogisticsMarker } from '../components/maps';
+import { deliveryMarkerStatus, firstRealLatLng } from '../utils/mapMarkers';
 import {
   Card,
   CardContent,
@@ -27,12 +29,15 @@ import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 
+type LiveFilter = 'all' | 'in_transit' | 'out_for_delivery' | 'other';
+
 export default function LiveTrackingPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const { activeDeliveries, isLoading, refetch } = useLiveTracking();
   const { unacknowledgedAlerts } = useTrackingAlerts();
   const [viewMode, setViewMode] = useState<'map' | 'list'>('map');
   const [selectedDelivery, setSelectedDelivery] = useState<string | null>(null);
+  const [filter, setFilter] = useState<LiveFilter>('all');
 
   const goTo = (path: string) => {
     if (navigate) {
@@ -44,6 +49,70 @@ export default function LiveTrackingPage() {
     ? activeDeliveries.find((d) => d.order?.id === selectedDelivery)
     : null;
 
+  const filteredDeliveries = useMemo(
+    () =>
+      activeDeliveries.filter((d) => {
+        const status = d.order?.status;
+        if (filter === 'all') return true;
+        if (filter === 'in_transit') return status === 'in_transit';
+        if (filter === 'out_for_delivery') return status === 'out_for_delivery';
+        return status !== 'in_transit' && status !== 'out_for_delivery';
+      }),
+    [activeDeliveries, filter]
+  );
+
+  // Build brand markers from the best real coordinate we hold for each delivery —
+  // the vehicle GPS fix, else the driver's, else the latest tracking event.
+  // Deliveries with no real coordinate are honestly omitted (never plotted at 0,0).
+  const markers = useMemo<LogisticsMarker[]>(() => {
+    return filteredDeliveries.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 ||
+            d.tracking?.currentLocation.address ||
+            undefined,
+        },
+      ];
+    });
+  }, [filteredDeliveries]);
+
+  const locatedCount = markers.length;
+
+  const filterChips: { value: LiveFilter; label: string; count: number }[] = [
+    { value: 'all', label: 'All', count: activeDeliveries.length },
+    {
+      value: 'in_transit',
+      label: 'In transit',
+      count: activeDeliveries.filter((d) => d.order?.status === 'in_transit').length,
+    },
+    {
+      value: 'out_for_delivery',
+      label: 'Out for delivery',
+      count: activeDeliveries.filter((d) => d.order?.status === 'out_for_delivery').length,
+    },
+    {
+      value: 'other',
+      label: 'Other',
+      count: activeDeliveries.filter(
+        (d) => d.order?.status !== 'in_transit' && d.order?.status !== 'out_for_delivery'
+      ).length,
+    },
+  ];
+
   return (
     <PageLayout
       title="Live Tracking"
@@ -134,20 +203,37 @@ export default function LiveTrackingPage() {
         {/* Map / List View */}
         <div className="lg:col-span-2">
           {viewMode === 'map' ? (
-            <Card className="h-[600px]">
-              <CardContent className="p-0 h-full">
-                <div className="w-full h-full bg-bg-sunken rounded-lg flex items-center justify-center">
-                  <div className="text-center text-text-secondary">
-                    <MapPin size={64} className="mx-auto mb-4 opacity-50" />
-                    <p className="text-lg font-medium">Map View</p>
-                    <p className="text-sm">
-                      Interactive map showing {activeDeliveries.length} active deliveries
-                    </p>
-                    <p className="text-xs mt-2">
-                      (Map integration with Mapbox/Google Maps would go here)
-                    </p>
-                  </div>
+            <Card className="overflow-hidden">
+              <CardContent className="p-0">
+                <div className="flex flex-wrap items-center gap-2 border-b border-border-seam p-3">
+                  {filterChips.map((chip) => (
+                    <button
+                      key={chip.value}
+                      type="button"
+                      onClick={() => setFilter(chip.value)}
+                      className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg ${
+                        filter === chip.value
+                          ? 'border-transparent bg-action-primary-bg text-action-primary-text'
+                          : 'border-border-seam text-text-secondary hover:bg-bg-sunken/60'
+                      }`}
+                    >
+                      {chip.label}
+                      <span className="tabular-nums opacity-80">{chip.count}</span>
+                    </button>
+                  ))}
+                  <span className="ml-auto text-xs text-text-secondary">
+                    {locatedCount} of {filteredDeliveries.length} located
+                  </span>
                 </div>
+                <LogisticsMap
+                  markers={markers}
+                  height={560}
+                  emptyMessage={
+                    filteredDeliveries.length === 0
+                      ? 'No active deliveries to plot'
+                      : 'Awaiting live GPS positions for these deliveries'
+                  }
+                />
               </CardContent>
             </Card>
           ) : (
@@ -158,7 +244,7 @@ export default function LiveTrackingPage() {
               <CardContent className="p-0">
                 <ScrollArea className="h-[550px]">
                   <div className="divide-y">
-                    {activeDeliveries.map((delivery) => {
+                    {filteredDeliveries.map((delivery) => {
                       if (!delivery.order) {
                         return null;
                       }
@@ -214,7 +300,7 @@ export default function LiveTrackingPage() {
                         </div>
                       );
                     })}
-                    {activeDeliveries.length === 0 && (
+                    {filteredDeliveries.length === 0 && (
                       <EmptyState
                         illustration="empty-sessions"
                         title="No active deliveries"
@@ -268,6 +354,28 @@ export default function LiveTrackingPage() {
                   <p className="text-sm">
                     {selected.tracking?.currentLocation.address || 'Updating...'}
                   </p>
+                  {(() => {
+                    const coord = firstRealLatLng(
+                      selected.vehicle?.currentLocation,
+                      selected.driver?.currentLocation,
+                      selected.tracking?.currentLocation
+                    );
+                    return coord ? (
+                      <LogisticsMap
+                        className="mt-3 overflow-hidden rounded-lg border border-border-seam"
+                        height={160}
+                        markers={[
+                          {
+                            id: selected.order?.id ?? 'selected',
+                            lat: coord.lat,
+                            lng: coord.lng,
+                            label: selected.order?.orderNumber ?? 'Delivery',
+                            status: deliveryMarkerStatus(selected.order?.status),
+                          },
+                        ]}
+                      />
+                    ) : null;
+                  })()}
                 </div>
                 <div>
                   <p className="text-sm text-text-secondary">Estimated Arrival</p>