@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.4

package/src/movethewheels/pages/CustomersPage.tsx

@@ -2,13 +2,14 @@
  * Customers Page
  */
 
+import { useState } from 'react';
 import { Users, Plus, RefreshCw, Download, Star } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { TypeBadge } from '../components/StatusBadge';
 import { Badge, Avatar, AvatarFallback, Button } from '../components/ui';
 import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useCustomers } from '../hooks/useCustomers';
+import { useCustomers, useCustomerStats } from '../hooks/useCustomers';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -16,7 +17,14 @@ import type { Customer } from '../types';
 
 export default function CustomersPage() {
   const { basePath, navigate } = useMoveTheWheels();
-  const { customers, totalCustomers, isLoading, refetch } = useCustomers({ limit: 100 });
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
+  const { customers, hasMore, isLoading, refetch } = useCustomers({
+    limit: pageSize,
+    offset: page * pageSize,
+  });
+  // Bounded aggregate for the tiles + subtitle — never the truncated page.
+  const { stats } = useCustomerStats();
 
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
@@ -85,7 +93,7 @@ export default function CustomersPage() {
   return (
     <PageLayout
       title="Customers"
-      subtitle={`${totalCustomers} customers`}
+      subtitle={`${stats.total} customers`}
       icon={<Users size={24} />}
       headerActions={
         <CTAOverflowMenu
@@ -96,7 +104,11 @@ export default function CustomersPage() {
           }}
           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'),
+            },
           ]}
         />
       }
@@ -112,19 +124,15 @@ export default function CustomersPage() {
         <p className="text-sm font-medium text-text-secondary">Customer base at a glance</p>
         <div className="mt-3 grid grid-cols-3 gap-4">
           <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{totalCustomers}</p>
+            <p className="text-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">
-              {customers.filter((c) => c.isActive).length}
-            </p>
+            <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">
-              {customers.filter((c) => c.type === 'b2b').length}
-            </p>
+            <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>
@@ -139,6 +147,14 @@ export default function CustomersPage() {
         searchFields={['name', 'email', 'company'] as (keyof Customer)[]}
         onRowClick={(row) => goTo(`customers/${row.id}`)}
         getRowId={(row) => row.id}
+        pageIndex={page}
+        pageSize={pageSize}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(0);
+        }}
+        hasNextPage={hasMore}
         emptyIllustration="empty-people"
         emptyTitle="No customers yet"
         emptyDescription="Add your first customer to start booking deliveries for them."

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">

package/src/movethewheels/pages/DriversPage.tsx

@@ -2,13 +2,14 @@
  * Drivers Page - List of all drivers
  */
 
+import { useState } from 'react';
 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 { Avatar, AvatarFallback } from '../components/ui';
 import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useDrivers } from '../hooks/useFleet';
+import { useDrivers, useFleetStats } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -16,7 +17,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 +108,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'),
+            },
           ]}
         />
       }
@@ -120,17 +133,13 @@ export default function DriversPage() {
           </div>
           <div>
             <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {drivers.filter((d) => d.status === 'available' || d.status === 'busy').length}
+              {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">
-              {drivers.length > 0
-                ? (drivers.reduce((sum, d) => sum + d.ratings.overall, 0) / drivers.length).toFixed(
-                    1
-                  )
-                : '—'}
+              {stats.avgDriverRating > 0 ? stats.avgDriverRating.toFixed(1) : '—'}
             </p>
             <p className="text-xs text-text-secondary">Avg rating</p>
           </div>
@@ -146,6 +155,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."

package/src/movethewheels/pages/FinancePage.tsx

@@ -1,22 +1,28 @@
 /**
  * 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.
  */
 
-import { DollarSign, TrendingUp, CreditCard, FileText, Download } from 'lucide-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 { 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');
 
   return (
     <PageLayout
@@ -24,20 +30,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 & 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,28 +46,25 @@ 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"
         />
         <MetricCard
-          label="Completed"
-          value={formatCurrency(completedPayments)}
+          label="Collected (Delivered)"
+          value={formatCurrency(metrics.deliveredRevenue)}
           icon={<TrendingUp size={20} />}
           changeType="positive"
         />
         <MetricCard
-          label="Pending"
-          value={formatCurrency(pendingPayments)}
-          icon={<CreditCard size={20} />}
+          label="Fuel Cost"
+          value={formatCurrency(metrics.fuelCost)}
+          icon={<Fuel size={20} />}
           changeType="neutral"
         />
         <MetricCard
-          label="Avg Order Value"
-          value={formatCurrency(stats.avgOrderValue)}
-          icon={<DollarSign size={20} />}
+          label="Open Invoices"
+          value={String(metrics.openInvoices)}
+          icon={<CreditCard size={20} />}
         />
       </MetricGrid>
 
@@ -76,70 +74,55 @@ export default function FinancePage() {
             <CardTitle>Revenue by Month</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>
+            {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>
+            )}
           </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 & 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>
-        </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."
-          />
-        </CardContent>
-      </Card>
     </PageLayout>
   );
 }