@burdenoff/microfe-movethewheels 2026.805.1 → 2026.827.1

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

@@ -12,9 +12,12 @@ export {
   useFleet,
   useVehicles,
   useVehicle,
+  useVehicleDrivers,
   useDrivers,
   useDriver,
+  useDriverStatusCounts,
   useFleetStats,
+  type DriverStatusCounts,
 } from './useFleet';
 
 // Inventory (Products & Warehouses)
@@ -22,9 +25,15 @@ export {
   useInventory,
   useProducts,
   useProduct,
+  useProductStockLevels,
   useWarehouses,
   useWarehouse,
   useInventoryStats,
+  useInventoryTransactions,
+  type InventoryStats,
+  type InventoryTransaction,
+  type InventoryTransactionType,
+  type ProductStockLevel,
 } from './useInventory';
 
 // Customers
@@ -43,6 +52,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/hooks/useFleet.ts

@@ -46,6 +46,7 @@ interface ApiVehicle {
   make?: string | null;
   model?: string | null;
   licensePlate?: string | null;
+  ownershipType?: string | null;
   year?: number | null;
   capacity?: Record<string, unknown> | null;
   status: string;
@@ -83,6 +84,7 @@ const LIST_VEHICLES_QUERY = `
       make
       model
       licensePlate
+      ownershipType
       year
       capacity
       status
@@ -126,6 +128,7 @@ const GET_VEHICLE_QUERY = `
       make
       model
       licensePlate
+      ownershipType
       year
       capacity
       status
@@ -169,6 +172,7 @@ const UPDATE_VEHICLE_STATUS_MUTATION = `
       make
       model
       licensePlate
+      ownershipType
       year
       capacity
       status
@@ -234,6 +238,7 @@ const CREATE_VEHICLE_MUTATION = `
       make
       model
       licensePlate
+      ownershipType
       year
       capacity
       status
@@ -277,6 +282,7 @@ const UPDATE_VEHICLE_MUTATION = `
       make
       model
       licensePlate
+      ownershipType
       year
       capacity
       status
@@ -311,6 +317,21 @@ const UPDATE_DRIVER_MUTATION = `
   }
 `;
 
+/**
+ * `fleetStats` only breaks drivers down into available / on-delivery, so an
+ * "on break" or "off duty" tile derived from it is always wrong (on-break
+ * drivers get lumped into the off-duty remainder). `driversCount` takes the
+ * same DriverFilterInput as the list, so each roster tile can be counted
+ * exactly, workspace-wide, instead of inferred from a subtraction.
+ */
+const DRIVER_STATUS_COUNTS_QUERY = `
+  query GetDriverStatusCounts {
+    onBreak: driversCount(filter: { status: ON_BREAK })
+    offDuty: driversCount(filter: { status: OFF_DUTY })
+    inactive: driversCount(filter: { status: INACTIVE })
+  }
+`;
+
 const FLEET_STATS_QUERY = `
   query GetFleetStats {
     fleetStats {
@@ -386,6 +407,7 @@ function mapVehicle(vehicle: ApiVehicle): Vehicle {
     make: vehicle.make ?? '',
     model: vehicle.model ?? '',
     licensePlate: vehicle.licensePlate ?? '',
+    ownershipType: vehicle.ownershipType ?? undefined,
     year: vehicle.year ?? new Date().getFullYear(),
     capacity: {
       weight: 0,
@@ -805,8 +827,16 @@ interface UseDriversResult {
   assignVehicle: (driverId: string, vehicleId: string) => Promise<Driver>;
 }
 
-export function useDrivers(options: UseListOptions = {}): UseDriversResult {
-  const { limit = 200, offset = 0 } = options;
+interface UseDriversOptions extends UseListOptions {
+  /**
+   * Narrows the roster server-side via `DriverFilterInput.status` so the pager
+   * still counts whole result sets rather than filtering one fetched page.
+   */
+  status?: DriverStatus;
+}
+
+export function useDrivers(options: UseDriversOptions = {}): UseDriversResult {
+  const { limit = 200, offset = 0, status } = options;
   const graphQLOptions = useGraphqlOptions();
   const [drivers, setDrivers] = useState<Driver[]>([]);
   const [hasMore, setHasMore] = useState(false);
@@ -821,6 +851,7 @@ export function useDrivers(options: UseListOptions = {}): UseDriversResult {
         graphQLOptions,
         LIST_DRIVERS_QUERY,
         {
+          filter: status ? { status: toApiDriverStatus(status) } : undefined,
           pagination: { limit, offset },
         }
       );
@@ -831,7 +862,7 @@ export function useDrivers(options: UseListOptions = {}): UseDriversResult {
     } finally {
       setIsLoading(false);
     }
-  }, [graphQLOptions, limit, offset]);
+  }, [graphQLOptions, limit, offset, status]);
 
   useEffect(() => {
     void load();
@@ -928,6 +959,105 @@ export function useDriver(driverId: string | undefined) {
   return { driver, isLoading, error, refetch };
 }
 
+export interface DriverStatusCounts {
+  onBreak: number;
+  offDuty: number;
+  inactive: number;
+}
+
+/** Exact per-status driver counts for the roster tiles (see DRIVER_STATUS_COUNTS_QUERY). */
+export function useDriverStatusCounts() {
+  const graphQLOptions = useGraphqlOptions();
+  const [counts, setCounts] = useState<DriverStatusCounts>({
+    onBreak: 0,
+    offDuty: 0,
+    inactive: 0,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const load = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<DriverStatusCounts>(
+        graphQLOptions,
+        DRIVER_STATUS_COUNTS_QUERY
+      );
+      setCounts({
+        onBreak: data.onBreak,
+        offDuty: data.offDuty,
+        inactive: data.inactive,
+      });
+    } catch (fetchError) {
+      setError(
+        fetchError instanceof Error ? fetchError : new Error('Failed to load driver status counts')
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [graphQLOptions]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const refetch = useCallback(() => {
+    void load();
+  }, [load]);
+
+  return { counts, isLoading, error, refetch };
+}
+
+/**
+ * The driver(s) currently assigned to a vehicle, resolved server-side through
+ * `DriverFilterInput.vehicleId` (the same link `assignDriverVehicle` writes).
+ * A vehicle normally has one driver, but the filter returns a list, so the
+ * caller gets every assignment rather than a silently-picked first row.
+ */
+export function useVehicleDrivers(vehicleId: string | undefined) {
+  const graphQLOptions = useGraphqlOptions();
+  const [drivers, setDrivers] = useState<Driver[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const load = useCallback(async () => {
+    if (!vehicleId) {
+      setDrivers([]);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{ drivers: ApiDriver[] }>(
+        graphQLOptions,
+        LIST_DRIVERS_QUERY,
+        {
+          filter: { vehicleId },
+          pagination: { limit: 25, offset: 0 },
+        }
+      );
+      setDrivers(data.drivers.map(mapDriver));
+    } catch (fetchError) {
+      setError(
+        fetchError instanceof Error ? fetchError : new Error('Failed to load assigned driver')
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [graphQLOptions, vehicleId]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const refetch = useCallback(() => {
+    void load();
+  }, [load]);
+
+  return { drivers, isLoading, error, refetch };
+}
+
 export function useFleetStats() {
   const graphQLOptions = useGraphqlOptions();
   const [stats, setStats] = useState({