@burdenoff/microfe-movethewheels 2026.805.1 → 2026.822.1

package/dist/components/CarbonFootprintPanel.js

@@ -0,0 +1,108 @@
+import { Leaf as e } from "../node_modules/lucide-react/dist/esm/icons/leaf.js";
+import { Truck as t } from "../node_modules/lucide-react/dist/esm/icons/truck.js";
+import { useEmissionsSummary as n } from "../hooks/useAnalytics.js";
+import { Card as r, CardContent as i, CardHeader as a, CardTitle as o } from "./ui.js";
+import { MetricCard as s, MetricGrid as c } from "./MetricCard.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/movethewheels/components/CarbonFootprintPanel.tsx
+function d(e) {
+	return e >= 1e3 ? `${(e / 1e3).toFixed(2)} t` : `${e.toFixed(1)} kg`;
+}
+function f(e) {
+	return e >= 1e3 ? `${(e / 1e3).toFixed(1)}k km` : `${e.toFixed(1)} km`;
+}
+function p() {
+	let { summary: p, isLoading: m, error: h } = n();
+	if (h) return /* @__PURE__ */ l(r, {
+		className: "border-status-error-border",
+		children: /* @__PURE__ */ l(i, {
+			className: "p-6 text-center",
+			children: /* @__PURE__ */ l("p", {
+				className: "text-sm text-status-error-text",
+				children: "Couldn't load emissions data"
+			})
+		})
+	});
+	if (m) return /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(a, { children: /* @__PURE__ */ u(o, {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ l(e, {
+			size: 18,
+			className: "text-status-success-text"
+		}), "Carbon footprint"]
+	}) }), /* @__PURE__ */ l(i, { children: /* @__PURE__ */ l(c, {
+		columns: 3,
+		children: Array.from({ length: 3 }).map((e, t) => /* @__PURE__ */ l("div", { className: "h-24 rounded-xl bg-bg-sunken motion-safe:animate-pulse" }, t))
+	}) })] });
+	let g = p.totalDistanceKm > 0;
+	return /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(a, { children: /* @__PURE__ */ u(o, {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ l(e, {
+			size: 18,
+			className: "text-status-success-text"
+		}), "Carbon footprint"]
+	}) }), /* @__PURE__ */ u(i, {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ u(c, {
+				columns: 3,
+				children: [
+					/* @__PURE__ */ l(s, {
+						label: "Total CO2e",
+						value: d(p.totalCo2eKg),
+						icon: /* @__PURE__ */ l(e, { size: 20 }),
+						accent: "success"
+					}),
+					/* @__PURE__ */ l(s, {
+						label: "Total distance",
+						value: f(p.totalDistanceKm),
+						icon: /* @__PURE__ */ l(t, { size: 20 }),
+						accent: "blue"
+					}),
+					/* @__PURE__ */ l(s, {
+						label: "Avg intensity",
+						value: `${(p.averageCo2eKgPerKm * 1e3).toFixed(1)} g/km`,
+						icon: /* @__PURE__ */ l(e, { size: 20 }),
+						accent: "warning"
+					})
+				]
+			}),
+			g && p.byVehicle.length > 0 && /* @__PURE__ */ u("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ l("h4", {
+					className: "text-sm font-medium text-text-secondary",
+					children: "By vehicle"
+				}), /* @__PURE__ */ l("div", {
+					className: "space-y-2",
+					children: p.byVehicle.filter((e) => e.totalDistanceKm > 0 || e.co2eKg > 0).slice(0, 5).map((e) => /* @__PURE__ */ u("div", {
+						className: "flex items-center justify-between rounded-lg bg-bg-sunken px-3 py-2",
+						children: [/* @__PURE__ */ u("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ l(t, {
+								size: 16,
+								className: "text-text-secondary"
+							}), /* @__PURE__ */ l("span", {
+								className: "text-sm font-medium text-text-primary",
+								children: e.vehicleNumber ?? "Unassigned"
+							})]
+						}), /* @__PURE__ */ u("div", {
+							className: "text-right",
+							children: [/* @__PURE__ */ l("p", {
+								className: "text-sm font-medium text-text-primary",
+								children: d(e.co2eKg)
+							}), /* @__PURE__ */ l("p", {
+								className: "text-xs text-text-secondary",
+								children: f(e.totalDistanceKm)
+							})]
+						})]
+					}, e.vehicleId ?? "unassigned"))
+				})]
+			}),
+			!g && /* @__PURE__ */ l("p", {
+				className: "text-sm text-text-secondary",
+				children: "No route distance recorded yet. Assign vehicles and distances to routes to see emissions estimates."
+			})
+		]
+	})] });
+}
+//#endregion
+export { p as CarbonFootprintPanel };

package/dist/components/index.js

@@ -20,3 +20,4 @@ import "./DataTable.js";
 import "./FormError.js";
 import "./Notice.js";
 import "./DocumentsCard.js";
+import "./CarbonFootprintPanel.js";

package/dist/hooks/useAnalytics.js

@@ -287,8 +287,8 @@ function m() {
 		error: n
 	};
 }
-var h = "\n  query GetMovethewheelsFinanceMetrics {\n    financeMetrics {\n      revenue {\n        totalRevenue\n        deliveredRevenue\n        averageOrderValue\n      }\n      fuelCost\n      openInvoices\n    }\n  }\n";
-function g() {
+var h = "\n  query GetMovethewheelsFinanceMetrics {\n    financeMetrics {\n      revenue {\n        totalRevenue\n        deliveredRevenue\n        averageOrderValue\n      }\n      fuelCost\n      openInvoices\n    }\n  }\n", g = "\n  query GetMovethewheelsEmissionsSummary {\n    emissionsSummary {\n      totalCo2eKg\n      totalDistanceKm\n      averageCo2eKgPerKm\n      byVehicle {\n        vehicleId\n        vehicleNumber\n        totalDistanceKm\n        co2eKg\n      }\n    }\n  }\n";
+function _() {
 	let { apiGatewayUrl: o, authToken: s, workspaceToken: c, workspaceId: l, tenantId: u, currentUser: d } = e(), [f, p] = a({
 		totalRevenue: 0,
 		deliveredRevenue: 0,
@@ -337,7 +337,7 @@ function g() {
 		}, [b])
 	};
 }
-function _() {
+function v() {
 	let { analytics: e, isLoading: t, error: n } = u();
 	return {
 		performanceData: i(() => ({
@@ -348,5 +348,46 @@ function _() {
 		error: n
 	};
 }
+function y() {
+	let { apiGatewayUrl: o, authToken: s, workspaceToken: c, workspaceId: l, tenantId: u, currentUser: d } = e(), [f, p] = a({
+		totalCo2eKg: 0,
+		totalDistanceKm: 0,
+		averageCo2eKgPerKm: 0,
+		byVehicle: []
+	}), [m, h] = a(!1), [_, v] = a(null), y = i(() => ({
+		apiGatewayUrl: o,
+		authToken: s,
+		workspaceToken: c,
+		workspaceId: l,
+		tenantId: u,
+		actorId: d?.id
+	}), [
+		o,
+		s,
+		c,
+		l,
+		u,
+		d?.id
+	]), b = n(async () => {
+		h(!0), v(null);
+		try {
+			p((await t(y, g)).emissionsSummary);
+		} catch (e) {
+			v(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to load emissions summary"));
+		} finally {
+			h(!1);
+		}
+	}, [y]);
+	return r(() => {
+		b();
+	}, [b]), {
+		summary: f,
+		isLoading: m,
+		error: _,
+		refetch: n(() => {
+			b();
+		}, [b])
+	};
+}
 //#endregion
-export { u as useAnalytics, d as useDashboardMetrics, g as useFinanceMetrics, m as useFleetAnalytics, p as useOrderAnalytics, _ as usePerformanceAnalytics, f as useRevenueAnalytics };
+export { u as useAnalytics, d as useDashboardMetrics, y as useEmissionsSummary, _ as useFinanceMetrics, m as useFleetAnalytics, p as useOrderAnalytics, v as usePerformanceAnalytics, f as useRevenueAnalytics };

package/dist/index.js

@@ -7,33 +7,34 @@ import { useDriver as c, useDrivers as l, useFleet as u, useFleetStats as d, use
 import { useInventory as m, useInventoryStats as h, useProduct as g, useProducts as _, useWarehouse as v, useWarehouses as y } from "./hooks/useInventory.js";
 import { useCustomer as b, useCustomerStats as x, useCustomers as S } from "./hooks/useCustomers.js";
 import { useRoute as C, useRouteStats as w, useRoutes as T } from "./hooks/useRoutes.js";
-import { useAnalytics as E, useDashboardMetrics as D, useFinanceMetrics as O, useFleetAnalytics as k, useOrderAnalytics as A, usePerformanceAnalytics as j, useRevenueAnalytics as M } from "./hooks/useAnalytics.js";
-import { useDriverTracking as N, useGeofence as P, useLiveTracking as F, useOrderTracking as I, useTracking as L, useTrackingAlerts as R, useVehicleTracking as z } from "./hooks/useTracking.js";
-import { useReports as B } from "./hooks/useReports.js";
-import { useImportExport as V } from "./hooks/useImportExport.js";
-import { useModuleSettings as H } from "./hooks/useSettings.js";
-import { useEntityDocuments as U } from "./hooks/useEntityDocuments.js";
-import { useCaptureEpod as W, useEpod as G, useEpodPhotoUpload as K, useEpodPhotoUrl as q, useMyPendingEpodDeliveryJobs as J } from "./hooks/useEpod.js";
+import { useAnalytics as E, useDashboardMetrics as D, useEmissionsSummary as O, useFinanceMetrics as k, useFleetAnalytics as A, useOrderAnalytics as j, usePerformanceAnalytics as M, useRevenueAnalytics as N } from "./hooks/useAnalytics.js";
+import { useDriverTracking as P, useGeofence as F, useLiveTracking as I, useOrderTracking as L, useTracking as R, useTrackingAlerts as z, useVehicleTracking as B } from "./hooks/useTracking.js";
+import { useReports as V } from "./hooks/useReports.js";
+import { useImportExport as H } from "./hooks/useImportExport.js";
+import { useModuleSettings as U } from "./hooks/useSettings.js";
+import { useEntityDocuments as W } from "./hooks/useEntityDocuments.js";
+import { useCaptureEpod as G, useEpod as K, useEpodPhotoUpload as q, useEpodPhotoUrl as J, useMyPendingEpodDeliveryJobs as Y } from "./hooks/useEpod.js";
 import "./hooks/index.js";
-import { Avatar as Y, AvatarFallback as X, AvatarImage as Z, Badge as Q, Button as $, Card as ee, CardContent as te, CardDescription as ne, CardFooter as re, CardHeader as ie, CardTitle as ae, Checkbox as oe, Dialog as se, DialogContent as ce, DialogDescription as le, DialogFooter as ue, DialogHeader as de, DialogTitle as fe, DialogTrigger as pe, DropdownMenu as me, DropdownMenuContent as he, DropdownMenuItem as ge, DropdownMenuSeparator as _e, DropdownMenuTrigger as ve, Input as ye, Label as be, Progress as xe, ScrollArea as Se, Select as Ce, SelectContent as we, SelectItem as Te, SelectTrigger as Ee, SelectValue as De, Separator as Oe, Skeleton as ke, Switch as Ae, Table as je, TableBody as Me, TableCell as Ne, TableHead as Pe, TableHeader as Fe, TableRow as Ie, Tabs as Le, TabsContent as Re, TabsList as ze, TabsTrigger as Be, Textarea as Ve, Tooltip as He, TooltipContent as Ue, TooltipProvider as We, TooltipTrigger as Ge } from "./components/ui.js";
-import { EmptyState as Ke, ErrorState as qe, LoadingState as Je, PageLayout as Ye, PageSection as Xe } from "./components/PageLayout.js";
-import { chartTokens as Ze, seriesColor as Qe } from "./components/charts/chartTokens.js";
-import { Sparkline as $e } from "./components/charts/Sparkline.js";
-import { MetricCard as et, MetricCardSkeleton as tt, MetricGrid as nt } from "./components/MetricCard.js";
-import { GlassPanel as rt } from "./components/GlassPanel.js";
-import { ChartEmpty as it, ChartTooltip as at } from "./components/charts/ChartShell.js";
-import { TrendChart as ot } from "./components/charts/TrendChart.js";
-import { VolumeBar as st } from "./components/charts/VolumeBar.js";
-import { StatusDonut as ct } from "./components/charts/StatusDonut.js";
-import { createCurrentIcon as lt, createPinIcon as ut, createStopIcon as dt, isRealCoord as ft } from "./components/maps/leaflet-setup.js";
-import { MapCanvas as pt } from "./components/maps/MapCanvas.js";
-import { LogisticsMap as mt } from "./components/maps/LogisticsMap.js";
-import { RouteMap as ht } from "./components/maps/RouteMap.js";
-import { TrackingMap as gt } from "./components/maps/TrackingMap.js";
-import { PaymentStatusBadge as _t, PriorityBadge as vt, StatusBadge as yt, TypeBadge as bt, VehicleTypeBadge as xt } from "./components/StatusBadge.js";
-import { DataTable as St } from "./components/DataTable.js";
-import { FormError as Ct } from "./components/FormError.js";
-import { Notice as wt, useNotice as Tt } from "./components/Notice.js";
-import { DocumentsCard as Et } from "./components/DocumentsCard.js";
+import { Avatar as X, AvatarFallback as Z, AvatarImage as Q, Badge as $, Button as ee, Card as te, CardContent as ne, CardDescription as re, CardFooter as ie, CardHeader as ae, CardTitle as oe, Checkbox as se, Dialog as ce, DialogContent as le, DialogDescription as ue, DialogFooter as de, DialogHeader as fe, DialogTitle as pe, DialogTrigger as me, DropdownMenu as he, DropdownMenuContent as ge, DropdownMenuItem as _e, DropdownMenuSeparator as ve, DropdownMenuTrigger as ye, Input as be, Label as xe, Progress as Se, ScrollArea as Ce, Select as we, SelectContent as Te, SelectItem as Ee, SelectTrigger as De, SelectValue as Oe, Separator as ke, Skeleton as Ae, Switch as je, Table as Me, TableBody as Ne, TableCell as Pe, TableHead as Fe, TableHeader as Ie, TableRow as Le, Tabs as Re, TabsContent as ze, TabsList as Be, TabsTrigger as Ve, Textarea as He, Tooltip as Ue, TooltipContent as We, TooltipProvider as Ge, TooltipTrigger as Ke } from "./components/ui.js";
+import { EmptyState as qe, ErrorState as Je, LoadingState as Ye, PageLayout as Xe, PageSection as Ze } from "./components/PageLayout.js";
+import { chartTokens as Qe, seriesColor as $e } from "./components/charts/chartTokens.js";
+import { Sparkline as et } from "./components/charts/Sparkline.js";
+import { MetricCard as tt, MetricCardSkeleton as nt, MetricGrid as rt } from "./components/MetricCard.js";
+import { GlassPanel as it } from "./components/GlassPanel.js";
+import { ChartEmpty as at, ChartTooltip as ot } from "./components/charts/ChartShell.js";
+import { TrendChart as st } from "./components/charts/TrendChart.js";
+import { VolumeBar as ct } from "./components/charts/VolumeBar.js";
+import { StatusDonut as lt } from "./components/charts/StatusDonut.js";
+import { createCurrentIcon as ut, createPinIcon as dt, createStopIcon as ft, isRealCoord as pt } from "./components/maps/leaflet-setup.js";
+import { MapCanvas as mt } from "./components/maps/MapCanvas.js";
+import { LogisticsMap as ht } from "./components/maps/LogisticsMap.js";
+import { RouteMap as gt } from "./components/maps/RouteMap.js";
+import { TrackingMap as _t } from "./components/maps/TrackingMap.js";
+import { PaymentStatusBadge as vt, PriorityBadge as yt, StatusBadge as bt, TypeBadge as xt, VehicleTypeBadge as St } from "./components/StatusBadge.js";
+import { DataTable as Ct } from "./components/DataTable.js";
+import { FormError as wt } from "./components/FormError.js";
+import { Notice as Tt, useNotice as Et } from "./components/Notice.js";
+import { DocumentsCard as Dt } from "./components/DocumentsCard.js";
+import { CarbonFootprintPanel as Ot } from "./components/CarbonFootprintPanel.js";
 import "./components/index.js";
-export { Y as Avatar, X as AvatarFallback, Z as AvatarImage, Q as Badge, $ as Button, ee as Card, te as CardContent, ne as CardDescription, re as CardFooter, ie as CardHeader, ae as CardTitle, it as ChartEmpty, at as ChartTooltip, oe as Checkbox, St as DataTable, se as Dialog, ce as DialogContent, le as DialogDescription, ue as DialogFooter, de as DialogHeader, fe as DialogTitle, pe as DialogTrigger, Et as DocumentsCard, me as DropdownMenu, he as DropdownMenuContent, ge as DropdownMenuItem, _e as DropdownMenuSeparator, ve as DropdownMenuTrigger, Ke as EmptyState, qe as ErrorState, Ct as FormError, rt as GlassPanel, ye as Input, be as Label, Je as LoadingState, mt as LogisticsMap, pt as MapCanvas, et as MetricCard, tt as MetricCardSkeleton, nt as MetricGrid, n as MoveTheWheelsRoot, wt as Notice, Ye as PageLayout, Xe as PageSection, _t as PaymentStatusBadge, vt as PriorityBadge, xe as Progress, ht as RouteMap, Se as ScrollArea, Ce as Select, we as SelectContent, Te as SelectItem, Ee as SelectTrigger, De as SelectValue, Oe as Separator, ke as Skeleton, $e as Sparkline, yt as StatusBadge, ct as StatusDonut, Ae as Switch, je as Table, Me as TableBody, Ne as TableCell, Pe as TableHead, Fe as TableHeader, Ie as TableRow, Le as Tabs, Re as TabsContent, ze as TabsList, Be as TabsTrigger, Ve as Textarea, He as Tooltip, Ue as TooltipContent, We as TooltipProvider, Ge as TooltipTrigger, gt as TrackingMap, ot as TrendChart, bt as TypeBadge, xt as VehicleTypeBadge, st as VolumeBar, Ze as chartTokens, lt as createCurrentIcon, ut as createPinIcon, dt as createStopIcon, ft as isRealCoord, Qe as seriesColor, E as useAnalytics, W as useCaptureEpod, b as useCustomer, x as useCustomerStats, S as useCustomers, D as useDashboardMetrics, c as useDriver, N as useDriverTracking, l as useDrivers, U as useEntityDocuments, G as useEpod, K as useEpodPhotoUpload, q as useEpodPhotoUrl, O as useFinanceMetrics, u as useFleet, k as useFleetAnalytics, d as useFleetStats, P as useGeofence, V as useImportExport, m as useInventory, h as useInventoryStats, F as useLiveTracking, H as useModuleSettings, e as useMoveTheWheels, t as useMoveTheWheelsNavigate, r as useMoveTheWheelsStore, J as useMyPendingEpodDeliveryJobs, Tt as useNotice, a as useOrder, A as useOrderAnalytics, o as useOrderStats, I as useOrderTracking, s as useOrders, j as usePerformanceAnalytics, g as useProduct, _ as useProducts, B as useReports, M as useRevenueAnalytics, C as useRoute, w as useRouteStats, T as useRoutes, i as useSandboxAssistantTransport, L as useTracking, R as useTrackingAlerts, f as useVehicle, z as useVehicleTracking, p as useVehicles, v as useWarehouse, y as useWarehouses };
+export { X as Avatar, Z as AvatarFallback, Q as AvatarImage, $ as Badge, ee as Button, Ot as CarbonFootprintPanel, te as Card, ne as CardContent, re as CardDescription, ie as CardFooter, ae as CardHeader, oe as CardTitle, at as ChartEmpty, ot as ChartTooltip, se as Checkbox, Ct as DataTable, ce as Dialog, le as DialogContent, ue as DialogDescription, de as DialogFooter, fe as DialogHeader, pe as DialogTitle, me as DialogTrigger, Dt as DocumentsCard, he as DropdownMenu, ge as DropdownMenuContent, _e as DropdownMenuItem, ve as DropdownMenuSeparator, ye as DropdownMenuTrigger, qe as EmptyState, Je as ErrorState, wt as FormError, it as GlassPanel, be as Input, xe as Label, Ye as LoadingState, ht as LogisticsMap, mt as MapCanvas, tt as MetricCard, nt as MetricCardSkeleton, rt as MetricGrid, n as MoveTheWheelsRoot, Tt as Notice, Xe as PageLayout, Ze as PageSection, vt as PaymentStatusBadge, yt as PriorityBadge, Se as Progress, gt as RouteMap, Ce as ScrollArea, we as Select, Te as SelectContent, Ee as SelectItem, De as SelectTrigger, Oe as SelectValue, ke as Separator, Ae as Skeleton, et as Sparkline, bt as StatusBadge, lt as StatusDonut, je as Switch, Me as Table, Ne as TableBody, Pe as TableCell, Fe as TableHead, Ie as TableHeader, Le as TableRow, Re as Tabs, ze as TabsContent, Be as TabsList, Ve as TabsTrigger, He as Textarea, Ue as Tooltip, We as TooltipContent, Ge as TooltipProvider, Ke as TooltipTrigger, _t as TrackingMap, st as TrendChart, xt as TypeBadge, St as VehicleTypeBadge, ct as VolumeBar, Qe as chartTokens, ut as createCurrentIcon, dt as createPinIcon, ft as createStopIcon, pt as isRealCoord, $e as seriesColor, E as useAnalytics, G as useCaptureEpod, b as useCustomer, x as useCustomerStats, S as useCustomers, D as useDashboardMetrics, c as useDriver, P as useDriverTracking, l as useDrivers, O as useEmissionsSummary, W as useEntityDocuments, K as useEpod, q as useEpodPhotoUpload, J as useEpodPhotoUrl, k as useFinanceMetrics, u as useFleet, A as useFleetAnalytics, d as useFleetStats, F as useGeofence, H as useImportExport, m as useInventory, h as useInventoryStats, I as useLiveTracking, U as useModuleSettings, e as useMoveTheWheels, t as useMoveTheWheelsNavigate, r as useMoveTheWheelsStore, Y as useMyPendingEpodDeliveryJobs, Et as useNotice, a as useOrder, j as useOrderAnalytics, o as useOrderStats, L as useOrderTracking, s as useOrders, M as usePerformanceAnalytics, g as useProduct, _ as useProducts, V as useReports, N as useRevenueAnalytics, C as useRoute, w as useRouteStats, T as useRoutes, i as useSandboxAssistantTransport, R as useTracking, z as useTrackingAlerts, f as useVehicle, B as useVehicleTracking, p as useVehicles, v as useWarehouse, y as useWarehouses };

package/dist/movethewheels/components/CarbonFootprintPanel.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Carbon footprint panel (BOFF-4391).
+ *
+ * Surfaces workspace-level CO2e totals and per-vehicle intensity. Data comes
+ * from Query.emissionsSummary via useEmissionsSummary.
+ */
+export declare function CarbonFootprintPanel(): import("react").JSX.Element;

package/dist/movethewheels/components/index.d.ts

@@ -14,3 +14,4 @@ export { DataTable, type Column } from './DataTable';
 export { FormError } from './FormError';
 export { Notice, useNotice } from './Notice';
 export { DocumentsCard } from './DocumentsCard';
+export { CarbonFootprintPanel } from './CarbonFootprintPanel';

package/dist/movethewheels/hooks/index.d.ts

@@ -8,7 +8,7 @@ export { useFleet, useVehicles, useVehicle, useDrivers, useDriver, useFleetStats
 export { useInventory, useProducts, useProduct, useWarehouses, useWarehouse, useInventoryStats, } from './useInventory';
 export { useCustomers, useCustomer, useCustomerStats } from './useCustomers';
 export { useRoutes, useRoute, useRouteStats } from './useRoutes';
-export { useAnalytics, useDashboardMetrics, useRevenueAnalytics, useOrderAnalytics, useFleetAnalytics, usePerformanceAnalytics, useFinanceMetrics, type FinanceMetrics, } from './useAnalytics';
+export { useAnalytics, useDashboardMetrics, useRevenueAnalytics, useOrderAnalytics, useFleetAnalytics, usePerformanceAnalytics, useFinanceMetrics, type FinanceMetrics, useEmissionsSummary, type EmissionsSummary, } from './useAnalytics';
 export { useTracking, useOrderTracking, useVehicleTracking, useDriverTracking, useLiveTracking, useTrackingAlerts, useGeofence, } from './useTracking';
 export { useReports } from './useReports';
 export { useImportExport } from './useImportExport';

package/dist/movethewheels/hooks/useAnalytics.d.ts

@@ -133,4 +133,26 @@ export declare function usePerformanceAnalytics(): {
     isLoading: boolean;
     error: Error | null;
 };
+export interface EmissionsSummary {
+    totalCo2eKg: number;
+    totalDistanceKm: number;
+    averageCo2eKgPerKm: number;
+    byVehicle: Array<{
+        vehicleId: string | null;
+        vehicleNumber: string | null;
+        totalDistanceKm: number;
+        co2eKg: number;
+    }>;
+}
+/**
+ * Real emissions figures straight from Query.emissionsSummary (BOFF-4391).
+ * Returns totals, per-km intensity, and a per-vehicle breakdown sourced from
+ * cached route CO2e values and actual/estimated distances.
+ */
+export declare function useEmissionsSummary(): {
+    summary: EmissionsSummary;
+    isLoading: boolean;
+    error: Error | null;
+    refetch: () => void;
+};
 export {};

package/dist/node_modules/lucide-react/dist/esm/icons/leaf.js

@@ -0,0 +1,11 @@
+import { createLucideIcon as e } from "../createLucideIcon.js";
+//#region node_modules/lucide-react/dist/esm/icons/leaf.js
+var t = e("Leaf", [["path", {
+	d: "M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z",
+	key: "nnexq3"
+}], ["path", {
+	d: "M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12",
+	key: "mt58a7"
+}]]);
+//#endregion
+export { t as Leaf };

package/dist/pages/AnalyticsPage.js

@@ -13,77 +13,78 @@ import { VolumeBar as b } from "../components/charts/VolumeBar.js";
 import { StatusDonut as x } from "../components/charts/StatusDonut.js";
 import "../components/charts/index.js";
 import { formatCurrency as S } from "../utils/formatters.js";
-import { UpcomingDemandPanel as C } from "../components/UpcomingDemandPanel.js";
-import { useDemandForecast as w } from "../hooks/useDemandForecast.js";
-import { useMemo as T } from "react";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
-import { EmphasisPanel as O, PagePurpose as k } from "@burdenoff/fe-libs/ui";
+import { CarbonFootprintPanel as C } from "../components/CarbonFootprintPanel.js";
+import { UpcomingDemandPanel as w } from "../components/UpcomingDemandPanel.js";
+import { useDemandForecast as T } from "../hooks/useDemandForecast.js";
+import { useMemo as E } from "react";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { EmphasisPanel as k, PagePurpose as A } from "@burdenoff/fe-libs/ui";
 //#region src/movethewheels/pages/AnalyticsPage.tsx
-var A = (e) => e.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
-function j() {
-	let { analytics: j, isLoading: M, error: N, refetch: P } = o(), { orderData: F } = c(), { fleetData: I } = s(), { laneForecast: L, customerForecast: R, laneVariance: z, customerVariance: B, isLoading: V, error: H, refetch: U } = w(4, 8), W = T(() => j.trends.dailyOrders.map((e) => e.orders), [j.trends.dailyOrders]), G = T(() => j.trends.revenue.map((e) => ({
+var j = (e) => e.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
+function M() {
+	let { analytics: M, isLoading: N, error: P, refetch: F } = o(), { orderData: I } = c(), { fleetData: L } = s(), { laneForecast: R, customerForecast: z, laneVariance: B, customerVariance: V, isLoading: H, error: U, refetch: W } = T(4, 8), G = E(() => M.trends.dailyOrders.map((e) => e.orders), [M.trends.dailyOrders]), K = E(() => M.trends.revenue.map((e) => ({
 		month: e.month,
 		revenue: e.revenue
-	})), [j.trends.revenue]), K = T(() => F.byStatus.filter((e) => e.count > 0).map((e) => ({
-		name: A(e.status),
+	})), [M.trends.revenue]), q = E(() => I.byStatus.filter((e) => e.count > 0).map((e) => ({
+		name: j(e.status),
 		value: e.count
-	})), [F.byStatus]), q = K.reduce((e, t) => e + t.value, 0);
-	return /* @__PURE__ */ D(h, {
+	})), [I.byStatus]), J = q.reduce((e, t) => e + t.value, 0);
+	return /* @__PURE__ */ O(h, {
 		title: "Analytics",
 		subtitle: "Business performance and insights",
-		icon: /* @__PURE__ */ E(e, { size: 24 }),
+		icon: /* @__PURE__ */ D(e, { size: 24 }),
 		children: [
-			/* @__PURE__ */ E(k, {
-				icon: /* @__PURE__ */ E(e, { size: 18 }),
+			/* @__PURE__ */ D(A, {
+				icon: /* @__PURE__ */ D(e, { size: 18 }),
 				children: "See how the operation is really performing. Track order volume, revenue, on-time rate and customer satisfaction over time so you can spot trends, find bottlenecks, and decide where to invest — whether that's more vehicles, better routes, or new customers."
 			}),
-			N && !M ? /* @__PURE__ */ E(u, {
+			P && !N ? /* @__PURE__ */ D(u, {
 				className: "border-status-error-border",
-				children: /* @__PURE__ */ D(d, {
+				children: /* @__PURE__ */ O(d, {
 					className: "p-6 text-center space-y-3",
 					children: [
-						/* @__PURE__ */ E("p", {
+						/* @__PURE__ */ D("p", {
 							className: "text-status-error-text font-medium",
 							children: "Couldn't load analytics"
 						}),
-						/* @__PURE__ */ E("p", {
+						/* @__PURE__ */ D("p", {
 							className: "text-sm text-text-secondary",
-							children: N.message
+							children: P.message
 						}),
-						/* @__PURE__ */ E(l, {
+						/* @__PURE__ */ D(l, {
 							variant: "outline",
-							onClick: P,
+							onClick: F,
 							children: "Retry"
 						})
 					]
 				})
-			}) : M ? /* @__PURE__ */ E(v, {
+			}) : N ? /* @__PURE__ */ D(v, {
 				columns: 4,
-				children: Array.from({ length: 4 }).map((e, t) => /* @__PURE__ */ E(_, {}, t))
-			}) : /* @__PURE__ */ D(v, {
+				children: Array.from({ length: 4 }).map((e, t) => /* @__PURE__ */ D(_, {}, t))
+			}) : /* @__PURE__ */ O(v, {
 				columns: 4,
 				children: [
-					/* @__PURE__ */ E(g, {
+					/* @__PURE__ */ D(g, {
 						label: "Order Volume",
-						value: j.overview.totalOrders.toLocaleString(),
-						icon: /* @__PURE__ */ E(n, { size: 20 }),
+						value: M.overview.totalOrders.toLocaleString(),
+						icon: /* @__PURE__ */ D(n, { size: 20 }),
 						accent: "brand",
-						sparklineData: W.length >= 2 ? W : void 0
+						sparklineData: G.length >= 2 ? G : void 0
 					}),
-					/* @__PURE__ */ E(g, {
+					/* @__PURE__ */ D(g, {
 						treatment: "glass",
 						glow: !0,
 						label: "Revenue",
-						value: S(j.overview.totalRevenue),
-						icon: /* @__PURE__ */ E(t, { size: 20 }),
+						value: S(M.overview.totalRevenue),
+						icon: /* @__PURE__ */ D(t, { size: 20 }),
 						accent: "success"
 					}),
-					/* @__PURE__ */ E(g, {
+					/* @__PURE__ */ D(g, {
 						label: "On-Time Delivery",
-						value: `${j.overview.onTimeDeliveryRate.toFixed(1)}%`,
-						icon: /* @__PURE__ */ E(i, { size: 20 }),
+						value: `${M.overview.onTimeDeliveryRate.toFixed(1)}%`,
+						icon: /* @__PURE__ */ D(i, { size: 20 }),
 						accent: "blue",
-						delta: j.overview.onTimeDeliveryRate >= 90 ? {
+						delta: M.overview.onTimeDeliveryRate >= 90 ? {
 							value: "On target",
 							direction: "up"
 						} : {
@@ -91,19 +92,19 @@ function j() {
 							direction: "down"
 						}
 					}),
-					/* @__PURE__ */ E(g, {
+					/* @__PURE__ */ D(g, {
 						label: "Customer Satisfaction",
-						value: j.overview.customerSatisfaction.toFixed(1),
-						icon: /* @__PURE__ */ E(r, { size: 20 }),
+						value: M.overview.customerSatisfaction.toFixed(1),
+						icon: /* @__PURE__ */ D(r, { size: 20 }),
 						accent: "warning",
 						subtitle: "out of 5"
 					})
 				]
 			}),
-			/* @__PURE__ */ D(u, { children: [/* @__PURE__ */ E(f, { children: /* @__PURE__ */ E(p, { children: "Order & delivery trend" }) }), /* @__PURE__ */ E(d, { children: /* @__PURE__ */ E(y, {
+			/* @__PURE__ */ O(u, { children: [/* @__PURE__ */ D(f, { children: /* @__PURE__ */ D(p, { children: "Order & delivery trend" }) }), /* @__PURE__ */ D(d, { children: /* @__PURE__ */ D(y, {
 				xKey: "date",
 				height: 300,
-				data: j.trends.dailyOrders,
+				data: M.trends.dailyOrders,
 				series: [{
 					dataKey: "orders",
 					name: "Orders"
@@ -113,98 +114,99 @@ function j() {
 				}],
 				emptyMessage: "No order trend recorded yet"
 			}) })] }),
-			/* @__PURE__ */ E(C, {
-				laneForecast: L,
-				customerForecast: R,
-				laneVariance: z,
-				customerVariance: B,
-				isLoading: V,
-				error: H,
-				onRetry: U
+			/* @__PURE__ */ D(w, {
+				laneForecast: R,
+				customerForecast: z,
+				laneVariance: B,
+				customerVariance: V,
+				isLoading: H,
+				error: U,
+				onRetry: W
 			}),
-			/* @__PURE__ */ D("div", {
+			/* @__PURE__ */ O("div", {
 				className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
-				children: [/* @__PURE__ */ D(u, { children: [/* @__PURE__ */ E(f, { children: /* @__PURE__ */ E(p, { children: "Revenue by month" }) }), /* @__PURE__ */ E(d, { children: /* @__PURE__ */ E(b, {
+				children: [/* @__PURE__ */ O(u, { children: [/* @__PURE__ */ D(f, { children: /* @__PURE__ */ D(p, { children: "Revenue by month" }) }), /* @__PURE__ */ D(d, { children: /* @__PURE__ */ D(b, {
 					xKey: "month",
 					height: 280,
 					showLegend: !1,
-					data: G,
+					data: K,
 					series: [{
 						dataKey: "revenue",
 						name: "Revenue"
 					}],
 					valueFormatter: (e) => S(Number(e)),
 					emptyMessage: "No revenue recorded yet"
-				}) })] }), /* @__PURE__ */ D(u, { children: [/* @__PURE__ */ E(f, { children: /* @__PURE__ */ E(p, { children: "Orders by status" }) }), /* @__PURE__ */ E(d, { children: /* @__PURE__ */ E(x, {
-					data: K,
+				}) })] }), /* @__PURE__ */ O(u, { children: [/* @__PURE__ */ D(f, { children: /* @__PURE__ */ D(p, { children: "Orders by status" }) }), /* @__PURE__ */ D(d, { children: /* @__PURE__ */ D(x, {
+					data: q,
 					height: 240,
-					centerLabel: q.toLocaleString(),
+					centerLabel: J.toLocaleString(),
 					centerSubLabel: "orders",
 					emptyMessage: "No orders to break down yet"
 				}) })] })]
 			}),
-			/* @__PURE__ */ D("div", {
+			/* @__PURE__ */ O("div", {
 				className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
-				children: [/* @__PURE__ */ D(u, { children: [/* @__PURE__ */ E(f, { children: /* @__PURE__ */ E(p, { children: "Fleet Performance" }) }), /* @__PURE__ */ D(d, {
+				children: [/* @__PURE__ */ O(u, { children: [/* @__PURE__ */ D(f, { children: /* @__PURE__ */ D(p, { children: "Fleet Performance" }) }), /* @__PURE__ */ O(d, {
 					className: "space-y-4",
-					children: [/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ D("div", {
+					children: [/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ O("div", {
 						className: "flex justify-between text-sm mb-1",
-						children: [/* @__PURE__ */ E("span", { children: "Vehicle Utilization" }), /* @__PURE__ */ D("span", { children: [I.vehicleUtilization.toFixed(0), "%"] })]
-					}), /* @__PURE__ */ E(m, { value: I.vehicleUtilization })] }), I.vehiclesByType.length > 0 && /* @__PURE__ */ D("div", {
+						children: [/* @__PURE__ */ D("span", { children: "Vehicle Utilization" }), /* @__PURE__ */ O("span", { children: [L.vehicleUtilization.toFixed(0), "%"] })]
+					}), /* @__PURE__ */ D(m, { value: L.vehicleUtilization })] }), L.vehiclesByType.length > 0 && /* @__PURE__ */ O("div", {
 						className: "pt-2",
-						children: [/* @__PURE__ */ E("p", {
+						children: [/* @__PURE__ */ D("p", {
 							className: "text-sm text-text-secondary mb-2",
 							children: "Vehicles by Type"
-						}), I.vehiclesByType.map(({ type: e, count: t }) => /* @__PURE__ */ D("div", {
+						}), L.vehiclesByType.map(({ type: e, count: t }) => /* @__PURE__ */ O("div", {
 							className: "flex justify-between text-sm py-1",
-							children: [/* @__PURE__ */ E("span", {
+							children: [/* @__PURE__ */ D("span", {
 								className: "capitalize",
 								children: e
-							}), /* @__PURE__ */ E("span", {
+							}), /* @__PURE__ */ D("span", {
 								className: "font-medium",
 								children: t
 							})]
 						}, e))]
 					})]
-				})] }), /* @__PURE__ */ D(O, {
+				})] }), /* @__PURE__ */ O(k, {
 					className: "space-y-4",
 					children: [
-						/* @__PURE__ */ E("h2", {
+						/* @__PURE__ */ D("h2", {
 							className: "text-base font-semibold text-text-primary",
 							children: "Performance Metrics"
 						}),
-						/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+						/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
 							className: "text-sm text-text-secondary",
 							children: "On-Time Delivery"
-						}), /* @__PURE__ */ D("p", {
+						}), /* @__PURE__ */ O("p", {
 							className: "text-2xl font-bold",
-							children: [j.performance.onTimeDelivery.toFixed(1), "%"]
+							children: [M.performance.onTimeDelivery.toFixed(1), "%"]
 						})] }),
-						/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+						/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
 							className: "text-sm text-text-secondary",
 							children: "Customer Satisfaction"
-						}), /* @__PURE__ */ D("p", {
+						}), /* @__PURE__ */ O("p", {
 							className: "text-2xl font-bold",
-							children: [j.overview.customerSatisfaction.toFixed(1), "/5"]
+							children: [M.overview.customerSatisfaction.toFixed(1), "/5"]
 						})] }),
-						/* @__PURE__ */ D("div", {
+						/* @__PURE__ */ O("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ E(a, {
+							children: [/* @__PURE__ */ D(a, {
 								size: 16,
 								className: "text-text-secondary"
-							}), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+							}), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
 								className: "text-sm text-text-secondary",
 								children: "Driver Ratings"
-							}), /* @__PURE__ */ D("p", {
+							}), /* @__PURE__ */ O("p", {
 								className: "text-2xl font-bold",
-								children: [j.performance.driverRatings.toFixed(1), "/5"]
+								children: [M.performance.driverRatings.toFixed(1), "/5"]
 							})] })]
 						})
 					]
 				})]
-			})
+			}),
+			/* @__PURE__ */ D(C, {})
 		]
 	});
 }
 //#endregion
-export { j as default };
+export { M as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.805.1",
+  "version": "2026.822.1",
   "description": "Burdenoff MoveTheWheels Microfrontend - Logistics & Supply Chain Management Platform",
   "type": "module",
   "files": [

package/src/movethewheels/components/CarbonFootprintPanel.tsx

@@ -0,0 +1,133 @@
+/**
+ * Carbon footprint panel (BOFF-4391).
+ *
+ * Surfaces workspace-level CO2e totals and per-vehicle intensity. Data comes
+ * from Query.emissionsSummary via useEmissionsSummary.
+ */
+
+import { Leaf, Truck } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from './ui';
+import { MetricCard, MetricGrid } from './MetricCard';
+import { useEmissionsSummary } from '../hooks/useAnalytics';
+
+function formatKg(value: number): string {
+  if (value >= 1000) {
+    return `${(value / 1000).toFixed(2)} t`;
+  }
+  return `${value.toFixed(1)} kg`;
+}
+
+function formatKm(value: number): string {
+  if (value >= 1000) {
+    return `${(value / 1000).toFixed(1)}k km`;
+  }
+  return `${value.toFixed(1)} km`;
+}
+
+export function CarbonFootprintPanel() {
+  const { summary, isLoading, error } = useEmissionsSummary();
+
+  if (error) {
+    return (
+      <Card className="border-status-error-border">
+        <CardContent className="p-6 text-center">
+          <p className="text-sm text-status-error-text">Couldn&apos;t load emissions data</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Leaf size={18} className="text-status-success-text" />
+            Carbon footprint
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <MetricGrid columns={3}>
+            {Array.from({ length: 3 }).map((_, i) => (
+              <div key={i} className="h-24 rounded-xl bg-bg-sunken motion-safe:animate-pulse" />
+            ))}
+          </MetricGrid>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const hasData = summary.totalDistanceKm > 0;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Leaf size={18} className="text-status-success-text" />
+          Carbon footprint
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <MetricGrid columns={3}>
+          <MetricCard
+            label="Total CO2e"
+            value={formatKg(summary.totalCo2eKg)}
+            icon={<Leaf size={20} />}
+            accent="success"
+          />
+          <MetricCard
+            label="Total distance"
+            value={formatKm(summary.totalDistanceKm)}
+            icon={<Truck size={20} />}
+            accent="blue"
+          />
+          <MetricCard
+            label="Avg intensity"
+            value={`${(summary.averageCo2eKgPerKm * 1000).toFixed(1)} g/km`}
+            icon={<Leaf size={20} />}
+            accent="warning"
+          />
+        </MetricGrid>
+
+        {hasData && summary.byVehicle.length > 0 && (
+          <div className="space-y-3">
+            <h4 className="text-sm font-medium text-text-secondary">By vehicle</h4>
+            <div className="space-y-2">
+              {summary.byVehicle
+                .filter((v) => v.totalDistanceKm > 0 || v.co2eKg > 0)
+                .slice(0, 5)
+                .map((vehicle) => (
+                  <div
+                    key={vehicle.vehicleId ?? 'unassigned'}
+                    className="flex items-center justify-between rounded-lg bg-bg-sunken px-3 py-2"
+                  >
+                    <div className="flex items-center gap-2">
+                      <Truck size={16} className="text-text-secondary" />
+                      <span className="text-sm font-medium text-text-primary">
+                        {vehicle.vehicleNumber ?? 'Unassigned'}
+                      </span>
+                    </div>
+                    <div className="text-right">
+                      <p className="text-sm font-medium text-text-primary">
+                        {formatKg(vehicle.co2eKg)}
+                      </p>
+                      <p className="text-xs text-text-secondary">
+                        {formatKm(vehicle.totalDistanceKm)}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+            </div>
+          </div>
+        )}
+
+        {!hasData && (
+          <p className="text-sm text-text-secondary">
+            No route distance recorded yet. Assign vehicles and distances to routes to see emissions
+            estimates.
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/movethewheels/components/UpcomingDemandPanel.tsx

@@ -10,10 +10,7 @@ import { Calendar, TrendingUp, TrendingDown, AlertCircle } from 'lucide-react';
 
 import { Card, CardContent, CardHeader, CardTitle, Skeleton } from './ui';
 
-import type {
-  ForecastPoint,
-  ForecastVariance,
-} from '../hooks/useDemandForecast';
+import type { ForecastPoint, ForecastVariance } from '../hooks/useDemandForecast';
 
 interface UpcomingDemandPanelProps {
   laneForecast: ForecastPoint[];
@@ -42,7 +39,9 @@ const topByRevenue = (rows: ForecastPoint[], weekStart: string): ForecastPoint[]
 };
 
 const totalVolume = (rows: ForecastPoint[], weekStart: string): number =>
-  rows.filter((row) => row.periodStart === weekStart).reduce((sum, row) => sum + row.predictedVolume, 0);
+  rows
+    .filter((row) => row.periodStart === weekStart)
+    .reduce((sum, row) => sum + row.predictedVolume, 0);
 
 const formatConfidence = (confidence: number): string => {
   if (confidence <= 0) return 'Not enough history';
@@ -177,13 +176,18 @@ function ForecastList({ title, rows }: ForecastListProps) {
       <p className="text-sm font-medium mb-3">{title}</p>
       <ul className="space-y-2">
         {rows.map((row) => (
-          <li key={`${row.scopeType}-${row.scopeKey}`} className="flex items-center justify-between text-sm">
+          <li
+            key={`${row.scopeType}-${row.scopeKey}`}
+            className="flex items-center justify-between text-sm"
+          >
             <span className="truncate font-medium">{row.scopeKey}</span>
             <span className="ml-2 shrink-0 text-text-secondary">
               {row.predictedVolume} jobs ·{' '}
-              {new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(
-                row.predictedRevenue
-              )}
+              {new Intl.NumberFormat(undefined, {
+                style: 'currency',
+                currency: 'USD',
+                maximumFractionDigits: 0,
+              }).format(row.predictedRevenue)}
             </span>
           </li>
         ))}
@@ -207,9 +211,14 @@ function VarianceList({ rows }: VarianceListProps) {
           {rows.map((row) => {
             const isOvershoot = row.volumeVariance > 0;
             const Icon = isOvershoot ? TrendingUp : TrendingDown;
-            const tone = isOvershoot ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400';
+            const tone = isOvershoot
+              ? 'text-emerald-600 dark:text-emerald-400'
+              : 'text-rose-600 dark:text-rose-400';
             return (
-              <li key={`${row.scopeType}-${row.scopeKey}-${row.periodStart}`} className="flex items-center justify-between text-sm">
+              <li
+                key={`${row.scopeType}-${row.scopeKey}-${row.periodStart}`}
+                className="flex items-center justify-between text-sm"
+              >
                 <span className="flex items-center gap-2 truncate">
                   <Icon size={14} className={tone} aria-hidden="true" />
                   <span className="truncate font-medium">{row.scopeKey}</span>

package/src/movethewheels/components/index.ts

@@ -74,3 +74,6 @@ export { Notice, useNotice } from './Notice';
 
 // Documents (reuse of wspace-files-svc)
 export { DocumentsCard } from './DocumentsCard';
+
+// Sustainability / carbon tracking (BOFF-4391)
+export { CarbonFootprintPanel } from './CarbonFootprintPanel';

package/src/movethewheels/hooks/index.ts

@@ -43,6 +43,8 @@ export {
   usePerformanceAnalytics,
   useFinanceMetrics,
   type FinanceMetrics,
+  useEmissionsSummary,
+  type EmissionsSummary,
 } from './useAnalytics';
 
 // Tracking

package/src/movethewheels/hooks/useAnalytics.ts

@@ -493,6 +493,22 @@ const FINANCE_METRICS_QUERY = `
   }
 `;
 
+const EMISSIONS_SUMMARY_QUERY = `
+  query GetMovethewheelsEmissionsSummary {
+    emissionsSummary {
+      totalCo2eKg
+      totalDistanceKm
+      averageCo2eKgPerKm
+      byVehicle {
+        vehicleId
+        vehicleNumber
+        totalDistanceKm
+        co2eKg
+      }
+    }
+  }
+`;
+
 export interface FinanceMetrics {
   totalRevenue: number;
   deliveredRevenue: number;
@@ -593,3 +609,73 @@ export function usePerformanceAnalytics() {
 
   return { performanceData, isLoading, error };
 }
+
+export interface EmissionsSummary {
+  totalCo2eKg: number;
+  totalDistanceKm: number;
+  averageCo2eKgPerKm: number;
+  byVehicle: Array<{
+    vehicleId: string | null;
+    vehicleNumber: string | null;
+    totalDistanceKm: number;
+    co2eKg: number;
+  }>;
+}
+
+/**
+ * Real emissions figures straight from Query.emissionsSummary (BOFF-4391).
+ * Returns totals, per-km intensity, and a per-vehicle breakdown sourced from
+ * cached route CO2e values and actual/estimated distances.
+ */
+export function useEmissionsSummary() {
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+  const [summary, setSummary] = useState<EmissionsSummary>({
+    totalCo2eKg: 0,
+    totalDistanceKm: 0,
+    averageCo2eKgPerKm: 0,
+    byVehicle: [],
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const graphQLOptions = useMemo(
+    () => ({
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+    }),
+    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
+  );
+
+  const load = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{
+        emissionsSummary: EmissionsSummary;
+      }>(graphQLOptions, EMISSIONS_SUMMARY_QUERY);
+
+      setSummary(data.emissionsSummary);
+    } catch (fetchError) {
+      setError(
+        fetchError instanceof Error ? fetchError : new Error('Failed to load emissions summary')
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [graphQLOptions]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const refetch = useCallback(() => {
+    void load();
+  }, [load]);
+
+  return { summary, isLoading, error, refetch };
+}

package/src/movethewheels/hooks/useDemandForecast.ts

@@ -134,9 +134,7 @@ export function useDemandForecast(weeks = 4, varianceLimit = 8): UseDemandForeca
       setCustomerVariance(data.customerVariance ?? []);
     } catch (fetchError) {
       setError(
-        fetchError instanceof Error
-          ? fetchError
-          : new Error('Failed to load demand forecast')
+        fetchError instanceof Error ? fetchError : new Error('Failed to load demand forecast')
       );
     } finally {
       setIsLoading(false);
@@ -151,5 +149,13 @@ export function useDemandForecast(weeks = 4, varianceLimit = 8): UseDemandForeca
     void load();
   }, [load]);
 
-  return { laneForecast, customerForecast, laneVariance, customerVariance, isLoading, error, refetch };
+  return {
+    laneForecast,
+    customerForecast,
+    laneVariance,
+    customerVariance,
+    isLoading,
+    error,
+    refetch,
+  };
 }

package/src/movethewheels/pages/AnalyticsPage.tsx

@@ -13,12 +13,9 @@ import { MetricCard, MetricGrid, MetricCardSkeleton } from '../components/Metric
 import { Card, CardContent, CardHeader, CardTitle, Progress, Button } from '../components/ui';
 import { TrendChart, VolumeBar, StatusDonut, type DonutSlice } from '../components/charts';
 import { UpcomingDemandPanel } from '../components/UpcomingDemandPanel';
+import { CarbonFootprintPanel } from '../components/CarbonFootprintPanel';
 import { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
-import {
-  useAnalytics,
-  useOrderAnalytics,
-  useFleetAnalytics,
-} from '../hooks/useAnalytics';
+import { useAnalytics, useOrderAnalytics, useFleetAnalytics } from '../hooks/useAnalytics';
 import { useDemandForecast } from '../hooks/useDemandForecast';
 import { formatCurrency } from '../utils/formatters';
 
@@ -241,6 +238,9 @@ export default function AnalyticsPage() {
           </div>
         </EmphasisPanel>
       </div>
+
+      {/* Carbon footprint (BOFF-4391) */}
+      <CarbonFootprintPanel />
     </PageLayout>
   );
 }