@burdenoff/microfe-movethewheels 2026.804.1 → 2026.822.1

package/src/generated/wspace-operations.ts

@@ -462,6 +462,28 @@ export type GetWarehouseQueryVariables = Types.Exact<{
 
 export type GetWarehouseQuery = { __typename?: 'Query', warehouse?: { __typename?: 'Warehouse', id: string, name: string, code: string, type: Types.WarehouseType, address: Record<string, unknown>, contactInfo?: Record<string, unknown> | null, operatingHours?: Record<string, unknown> | null, capabilities?: Record<string, unknown> | null, status: string, totalCapacity?: number | null, usedCapacity?: number | null, createdAt: string, updatedAt: string, locations: Array<{ __typename?: 'WarehouseLocation', id: string, locationCode: string, zone?: string | null, aisle?: string | null, rack?: string | null, shelf?: string | null, bin?: string | null, locationType?: string | null, capacity?: number | null, status: string }> } | null };
 
+export type GetMovethewheelsDemandForecastByLaneQueryVariables = Types.Exact<{
+  weeks: Types.Scalars['Int']['input'];
+}>;
+
+
+export type GetMovethewheelsDemandForecastByLaneQuery = { __typename?: 'Query', demandForecastByLane: Array<{ __typename?: 'MtwDemandForecastPoint', scopeType: Types.DemandForecastScope, scopeKey: string, periodStart: string, periodEnd: string, predictedVolume: number, predictedRevenue: number, actualVolume?: number | null, actualRevenue?: number | null, confidence: number }> };
+
+export type GetMovethewheelsDemandForecastByCustomerQueryVariables = Types.Exact<{
+  weeks: Types.Scalars['Int']['input'];
+}>;
+
+
+export type GetMovethewheelsDemandForecastByCustomerQuery = { __typename?: 'Query', demandForecastByCustomer: Array<{ __typename?: 'MtwDemandForecastPoint', scopeType: Types.DemandForecastScope, scopeKey: string, periodStart: string, periodEnd: string, predictedVolume: number, predictedRevenue: number, actualVolume?: number | null, actualRevenue?: number | null, confidence: number }> };
+
+export type GetMovethewheelsDemandForecastVarianceQueryVariables = Types.Exact<{
+  scopeType: Types.DemandForecastScope;
+  limit: Types.Scalars['Int']['input'];
+}>;
+
+
+export type GetMovethewheelsDemandForecastVarianceQuery = { __typename?: 'Query', demandForecastVariance: Array<{ __typename?: 'MtwDemandForecastVariance', scopeType: Types.DemandForecastScope, scopeKey: string, periodStart: string, periodEnd: string, predictedVolume: number, actualVolume: number, volumeVariance: number, predictedRevenue: number, actualRevenue: number, revenueVariance: number }> };
+
 export type ListInventoryItemsQueryVariables = Types.Exact<{
   filter?: Types.InputMaybe<Types.InventoryFilterInput>;
   pagination?: Types.InputMaybe<Types.PaginationInput>;
@@ -2918,6 +2940,161 @@ export type GetWarehouseQueryHookResult = ReturnType<typeof useGetWarehouseQuery
 export type GetWarehouseLazyQueryHookResult = ReturnType<typeof useGetWarehouseLazyQuery>;
 export type GetWarehouseSuspenseQueryHookResult = ReturnType<typeof useGetWarehouseSuspenseQuery>;
 export type GetWarehouseQueryResult = Apollo.QueryResult<Types.GetWarehouseQuery, Types.GetWarehouseQueryVariables>;
+export const GetMovethewheelsDemandForecastByLaneDocument = gql`
+    query GetMovethewheelsDemandForecastByLane($weeks: Int!) {
+  demandForecastByLane(weeks: $weeks) {
+    scopeType
+    scopeKey
+    periodStart
+    periodEnd
+    predictedVolume
+    predictedRevenue
+    actualVolume
+    actualRevenue
+    confidence
+  }
+}
+    `;
+
+/**
+ * __useGetMovethewheelsDemandForecastByLaneQuery__
+ *
+ * To run a query within a React component, call `useGetMovethewheelsDemandForecastByLaneQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetMovethewheelsDemandForecastByLaneQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetMovethewheelsDemandForecastByLaneQuery({
+ *   variables: {
+ *      weeks: // value for 'weeks'
+ *   },
+ * });
+ */
+export function useGetMovethewheelsDemandForecastByLaneQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.GetMovethewheelsDemandForecastByLaneQuery, Types.GetMovethewheelsDemandForecastByLaneQueryVariables> & ({ variables: Types.GetMovethewheelsDemandForecastByLaneQueryVariables; skip?: boolean; } | { skip: boolean; }) ) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.GetMovethewheelsDemandForecastByLaneQuery, Types.GetMovethewheelsDemandForecastByLaneQueryVariables>(GetMovethewheelsDemandForecastByLaneDocument, options);
+      }
+export function useGetMovethewheelsDemandForecastByLaneLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.GetMovethewheelsDemandForecastByLaneQuery, Types.GetMovethewheelsDemandForecastByLaneQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.GetMovethewheelsDemandForecastByLaneQuery, Types.GetMovethewheelsDemandForecastByLaneQueryVariables>(GetMovethewheelsDemandForecastByLaneDocument, options);
+        }
+// @ts-ignore
+export function useGetMovethewheelsDemandForecastByLaneSuspenseQuery(baseOptions?: ApolloReactHooks.SuspenseQueryHookOptions<Types.GetMovethewheelsDemandForecastByLaneQuery, Types.GetMovethewheelsDemandForecastByLaneQueryVariables>): ApolloReactHooks.UseSuspenseQueryResult<Types.GetMovethewheelsDemandForecastByLaneQuery, Types.GetMovethewheelsDemandForecastByLaneQueryVariables>;
+export function useGetMovethewheelsDemandForecastByLaneSuspenseQuery(baseOptions?: ApolloReactHooks.SkipToken | ApolloReactHooks.SuspenseQueryHookOptions<Types.GetMovethewheelsDemandForecastByLaneQuery, Types.GetMovethewheelsDemandForecastByLaneQueryVariables>): ApolloReactHooks.UseSuspenseQueryResult<Types.GetMovethewheelsDemandForecastByLaneQuery | undefined, Types.GetMovethewheelsDemandForecastByLaneQueryVariables>;
+export function useGetMovethewheelsDemandForecastByLaneSuspenseQuery(baseOptions?: ApolloReactHooks.SkipToken | ApolloReactHooks.SuspenseQueryHookOptions<Types.GetMovethewheelsDemandForecastByLaneQuery, Types.GetMovethewheelsDemandForecastByLaneQueryVariables>) {
+          const options = baseOptions === ApolloReactHooks.skipToken ? baseOptions : {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useSuspenseQuery<Types.GetMovethewheelsDemandForecastByLaneQuery, Types.GetMovethewheelsDemandForecastByLaneQueryVariables>(GetMovethewheelsDemandForecastByLaneDocument, options);
+        }
+export type GetMovethewheelsDemandForecastByLaneQueryHookResult = ReturnType<typeof useGetMovethewheelsDemandForecastByLaneQuery>;
+export type GetMovethewheelsDemandForecastByLaneLazyQueryHookResult = ReturnType<typeof useGetMovethewheelsDemandForecastByLaneLazyQuery>;
+export type GetMovethewheelsDemandForecastByLaneSuspenseQueryHookResult = ReturnType<typeof useGetMovethewheelsDemandForecastByLaneSuspenseQuery>;
+export type GetMovethewheelsDemandForecastByLaneQueryResult = Apollo.QueryResult<Types.GetMovethewheelsDemandForecastByLaneQuery, Types.GetMovethewheelsDemandForecastByLaneQueryVariables>;
+export const GetMovethewheelsDemandForecastByCustomerDocument = gql`
+    query GetMovethewheelsDemandForecastByCustomer($weeks: Int!) {
+  demandForecastByCustomer(weeks: $weeks) {
+    scopeType
+    scopeKey
+    periodStart
+    periodEnd
+    predictedVolume
+    predictedRevenue
+    actualVolume
+    actualRevenue
+    confidence
+  }
+}
+    `;
+
+/**
+ * __useGetMovethewheelsDemandForecastByCustomerQuery__
+ *
+ * To run a query within a React component, call `useGetMovethewheelsDemandForecastByCustomerQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetMovethewheelsDemandForecastByCustomerQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetMovethewheelsDemandForecastByCustomerQuery({
+ *   variables: {
+ *      weeks: // value for 'weeks'
+ *   },
+ * });
+ */
+export function useGetMovethewheelsDemandForecastByCustomerQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.GetMovethewheelsDemandForecastByCustomerQuery, Types.GetMovethewheelsDemandForecastByCustomerQueryVariables> & ({ variables: Types.GetMovethewheelsDemandForecastByCustomerQueryVariables; skip?: boolean; } | { skip: boolean; }) ) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.GetMovethewheelsDemandForecastByCustomerQuery, Types.GetMovethewheelsDemandForecastByCustomerQueryVariables>(GetMovethewheelsDemandForecastByCustomerDocument, options);
+      }
+export function useGetMovethewheelsDemandForecastByCustomerLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.GetMovethewheelsDemandForecastByCustomerQuery, Types.GetMovethewheelsDemandForecastByCustomerQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.GetMovethewheelsDemandForecastByCustomerQuery, Types.GetMovethewheelsDemandForecastByCustomerQueryVariables>(GetMovethewheelsDemandForecastByCustomerDocument, options);
+        }
+// @ts-ignore
+export function useGetMovethewheelsDemandForecastByCustomerSuspenseQuery(baseOptions?: ApolloReactHooks.SuspenseQueryHookOptions<Types.GetMovethewheelsDemandForecastByCustomerQuery, Types.GetMovethewheelsDemandForecastByCustomerQueryVariables>): ApolloReactHooks.UseSuspenseQueryResult<Types.GetMovethewheelsDemandForecastByCustomerQuery, Types.GetMovethewheelsDemandForecastByCustomerQueryVariables>;
+export function useGetMovethewheelsDemandForecastByCustomerSuspenseQuery(baseOptions?: ApolloReactHooks.SkipToken | ApolloReactHooks.SuspenseQueryHookOptions<Types.GetMovethewheelsDemandForecastByCustomerQuery, Types.GetMovethewheelsDemandForecastByCustomerQueryVariables>): ApolloReactHooks.UseSuspenseQueryResult<Types.GetMovethewheelsDemandForecastByCustomerQuery | undefined, Types.GetMovethewheelsDemandForecastByCustomerQueryVariables>;
+export function useGetMovethewheelsDemandForecastByCustomerSuspenseQuery(baseOptions?: ApolloReactHooks.SkipToken | ApolloReactHooks.SuspenseQueryHookOptions<Types.GetMovethewheelsDemandForecastByCustomerQuery, Types.GetMovethewheelsDemandForecastByCustomerQueryVariables>) {
+          const options = baseOptions === ApolloReactHooks.skipToken ? baseOptions : {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useSuspenseQuery<Types.GetMovethewheelsDemandForecastByCustomerQuery, Types.GetMovethewheelsDemandForecastByCustomerQueryVariables>(GetMovethewheelsDemandForecastByCustomerDocument, options);
+        }
+export type GetMovethewheelsDemandForecastByCustomerQueryHookResult = ReturnType<typeof useGetMovethewheelsDemandForecastByCustomerQuery>;
+export type GetMovethewheelsDemandForecastByCustomerLazyQueryHookResult = ReturnType<typeof useGetMovethewheelsDemandForecastByCustomerLazyQuery>;
+export type GetMovethewheelsDemandForecastByCustomerSuspenseQueryHookResult = ReturnType<typeof useGetMovethewheelsDemandForecastByCustomerSuspenseQuery>;
+export type GetMovethewheelsDemandForecastByCustomerQueryResult = Apollo.QueryResult<Types.GetMovethewheelsDemandForecastByCustomerQuery, Types.GetMovethewheelsDemandForecastByCustomerQueryVariables>;
+export const GetMovethewheelsDemandForecastVarianceDocument = gql`
+    query GetMovethewheelsDemandForecastVariance($scopeType: DemandForecastScope!, $limit: Int!) {
+  demandForecastVariance(scopeType: $scopeType, limit: $limit) {
+    scopeType
+    scopeKey
+    periodStart
+    periodEnd
+    predictedVolume
+    actualVolume
+    volumeVariance
+    predictedRevenue
+    actualRevenue
+    revenueVariance
+  }
+}
+    `;
+
+/**
+ * __useGetMovethewheelsDemandForecastVarianceQuery__
+ *
+ * To run a query within a React component, call `useGetMovethewheelsDemandForecastVarianceQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetMovethewheelsDemandForecastVarianceQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetMovethewheelsDemandForecastVarianceQuery({
+ *   variables: {
+ *      scopeType: // value for 'scopeType'
+ *      limit: // value for 'limit'
+ *   },
+ * });
+ */
+export function useGetMovethewheelsDemandForecastVarianceQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.GetMovethewheelsDemandForecastVarianceQuery, Types.GetMovethewheelsDemandForecastVarianceQueryVariables> & ({ variables: Types.GetMovethewheelsDemandForecastVarianceQueryVariables; skip?: boolean; } | { skip: boolean; }) ) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.GetMovethewheelsDemandForecastVarianceQuery, Types.GetMovethewheelsDemandForecastVarianceQueryVariables>(GetMovethewheelsDemandForecastVarianceDocument, options);
+      }
+export function useGetMovethewheelsDemandForecastVarianceLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.GetMovethewheelsDemandForecastVarianceQuery, Types.GetMovethewheelsDemandForecastVarianceQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.GetMovethewheelsDemandForecastVarianceQuery, Types.GetMovethewheelsDemandForecastVarianceQueryVariables>(GetMovethewheelsDemandForecastVarianceDocument, options);
+        }
+// @ts-ignore
+export function useGetMovethewheelsDemandForecastVarianceSuspenseQuery(baseOptions?: ApolloReactHooks.SuspenseQueryHookOptions<Types.GetMovethewheelsDemandForecastVarianceQuery, Types.GetMovethewheelsDemandForecastVarianceQueryVariables>): ApolloReactHooks.UseSuspenseQueryResult<Types.GetMovethewheelsDemandForecastVarianceQuery, Types.GetMovethewheelsDemandForecastVarianceQueryVariables>;
+export function useGetMovethewheelsDemandForecastVarianceSuspenseQuery(baseOptions?: ApolloReactHooks.SkipToken | ApolloReactHooks.SuspenseQueryHookOptions<Types.GetMovethewheelsDemandForecastVarianceQuery, Types.GetMovethewheelsDemandForecastVarianceQueryVariables>): ApolloReactHooks.UseSuspenseQueryResult<Types.GetMovethewheelsDemandForecastVarianceQuery | undefined, Types.GetMovethewheelsDemandForecastVarianceQueryVariables>;
+export function useGetMovethewheelsDemandForecastVarianceSuspenseQuery(baseOptions?: ApolloReactHooks.SkipToken | ApolloReactHooks.SuspenseQueryHookOptions<Types.GetMovethewheelsDemandForecastVarianceQuery, Types.GetMovethewheelsDemandForecastVarianceQueryVariables>) {
+          const options = baseOptions === ApolloReactHooks.skipToken ? baseOptions : {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useSuspenseQuery<Types.GetMovethewheelsDemandForecastVarianceQuery, Types.GetMovethewheelsDemandForecastVarianceQueryVariables>(GetMovethewheelsDemandForecastVarianceDocument, options);
+        }
+export type GetMovethewheelsDemandForecastVarianceQueryHookResult = ReturnType<typeof useGetMovethewheelsDemandForecastVarianceQuery>;
+export type GetMovethewheelsDemandForecastVarianceLazyQueryHookResult = ReturnType<typeof useGetMovethewheelsDemandForecastVarianceLazyQuery>;
+export type GetMovethewheelsDemandForecastVarianceSuspenseQueryHookResult = ReturnType<typeof useGetMovethewheelsDemandForecastVarianceSuspenseQuery>;
+export type GetMovethewheelsDemandForecastVarianceQueryResult = Apollo.QueryResult<Types.GetMovethewheelsDemandForecastVarianceQuery, Types.GetMovethewheelsDemandForecastVarianceQueryVariables>;
 export const ListInventoryItemsDocument = gql`
     query ListInventoryItems($filter: InventoryFilterInput, $pagination: PaginationInput) {
   inventoryItems(filter: $filter, pagination: $pagination) {

package/src/generated/wspace-types.ts

@@ -9831,6 +9831,11 @@ export enum DeliveryChannelType {
   Webhook = 'WEBHOOK'
 }
 
+export enum DemandForecastScope {
+  Customer = 'CUSTOMER',
+  Lane = 'LANE'
+}
+
 export type DependencyHealth = {
   __typename?: 'DependencyHealth';
   message: Scalars['String']['output'];
@@ -20581,6 +20586,33 @@ export type MovethewheelsReportFilterInput = {
   type?: InputMaybe<Scalars['String']['input']>;
 };
 
+export type MtwDemandForecastPoint = {
+  __typename?: 'MtwDemandForecastPoint';
+  actualRevenue?: Maybe<Scalars['Float']['output']>;
+  actualVolume?: Maybe<Scalars['Int']['output']>;
+  confidence: Scalars['Float']['output'];
+  periodEnd: Scalars['DateTime']['output'];
+  periodStart: Scalars['DateTime']['output'];
+  predictedRevenue: Scalars['Float']['output'];
+  predictedVolume: Scalars['Int']['output'];
+  scopeKey: Scalars['String']['output'];
+  scopeType: DemandForecastScope;
+};
+
+export type MtwDemandForecastVariance = {
+  __typename?: 'MtwDemandForecastVariance';
+  actualRevenue: Scalars['Float']['output'];
+  actualVolume: Scalars['Int']['output'];
+  periodEnd: Scalars['DateTime']['output'];
+  periodStart: Scalars['DateTime']['output'];
+  predictedRevenue: Scalars['Float']['output'];
+  predictedVolume: Scalars['Int']['output'];
+  revenueVariance: Scalars['Float']['output'];
+  scopeKey: Scalars['String']['output'];
+  scopeType: DemandForecastScope;
+  volumeVariance: Scalars['Int']['output'];
+};
+
 /**
  * Base Mutation type with placeholder field.
  * Extended by individual mutation files.
@@ -22335,6 +22367,7 @@ export type Mutation = {
   /** Reactivate an archived workspace (sets status to ACTIVE) */
   reactivateWorkspace: Workspace;
   rebuildKnowledgeBaseIndex: Scalars['Boolean']['output'];
+  recalculateDemandForecasts: Scalars['Int']['output'];
   /**
    * Recalculate resource usage for the current workspace.
    * Workspace ID is read from gateway context (x-workspace-id header).
@@ -32325,6 +32358,15 @@ export type MutationRebuildKnowledgeBaseIndexArgs = {
 };
 
 
+/**
+ * Base Mutation type with placeholder field.
+ * Extended by individual mutation files.
+ */
+export type MutationRecalculateDemandForecastsArgs = {
+  weeksOfHistory?: InputMaybe<Scalars['Int']['input']>;
+};
+
+
 /**
  * Base Mutation type with placeholder field.
  * Extended by individual mutation files.
@@ -41214,6 +41256,10 @@ export type Query = {
   deadLetterQueueEntry?: Maybe<DeadLetterQueue>;
   decryptSecret?: Maybe<DecryptedSecret>;
   defaultVibeDeck?: Maybe<VibeDeck>;
+  /** Demand forecasting / S&OP v1 (BOFF-4393). Heuristic next-week forecasts. */
+  demandForecastByCustomer: Array<MtwDemandForecastPoint>;
+  demandForecastByLane: Array<MtwDemandForecastPoint>;
+  demandForecastVariance: Array<MtwDemandForecastVariance>;
   /** Check the health status of all system dependencies */
   dependenciesHealth: HealthCheckResponse;
   /**
@@ -43672,6 +43718,34 @@ export type QueryDecryptSecretArgs = {
 };
 
 
+/**
+ * Base Query type with placeholder field.
+ * Extended by individual query files.
+ */
+export type QueryDemandForecastByCustomerArgs = {
+  weeks?: InputMaybe<Scalars['Int']['input']>;
+};
+
+
+/**
+ * Base Query type with placeholder field.
+ * Extended by individual query files.
+ */
+export type QueryDemandForecastByLaneArgs = {
+  weeks?: InputMaybe<Scalars['Int']['input']>;
+};
+
+
+/**
+ * Base Query type with placeholder field.
+ * Extended by individual query files.
+ */
+export type QueryDemandForecastVarianceArgs = {
+  limit?: InputMaybe<Scalars['Int']['input']>;
+  scopeType: DemandForecastScope;
+};
+
+
 /**
  * Base Query type with placeholder field.
  * Extended by individual query 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

@@ -0,0 +1,237 @@
+/**
+ * UpcomingDemandPanel
+ *
+ * Surfaces next-week demand forecasts by lane / customer alongside the
+ * most recent closed-period variance (BOFF-4393). Pure read-side view
+ * over `wspace-movethewheels-svc`'s DemandForecast surface.
+ */
+
+import { Calendar, TrendingUp, TrendingDown, AlertCircle } from 'lucide-react';
+
+import { Card, CardContent, CardHeader, CardTitle, Skeleton } from './ui';
+
+import type { ForecastPoint, ForecastVariance } from '../hooks/useDemandForecast';
+
+interface UpcomingDemandPanelProps {
+  laneForecast: ForecastPoint[];
+  customerForecast: ForecastPoint[];
+  laneVariance: ForecastVariance[];
+  customerVariance: ForecastVariance[];
+  isLoading: boolean;
+  error: Error | null;
+  onRetry: () => void;
+}
+
+const formatWeek = (iso: string): string => {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso;
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+};
+
+const topByVolume = (rows: ForecastPoint[], weekStart: string): ForecastPoint[] => {
+  const filtered = rows.filter((row) => row.periodStart === weekStart);
+  return [...filtered].sort((a, b) => b.predictedVolume - a.predictedVolume).slice(0, 3);
+};
+
+const topByRevenue = (rows: ForecastPoint[], weekStart: string): ForecastPoint[] => {
+  const filtered = rows.filter((row) => row.periodStart === weekStart);
+  return [...filtered].sort((a, b) => b.predictedRevenue - a.predictedRevenue).slice(0, 3);
+};
+
+const totalVolume = (rows: ForecastPoint[], weekStart: string): number =>
+  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';
+  return `${Math.round(confidence * 100)}% confidence`;
+};
+
+export function UpcomingDemandPanel({
+  laneForecast,
+  customerForecast,
+  laneVariance,
+  customerVariance,
+  isLoading,
+  error,
+  onRetry,
+}: UpcomingDemandPanelProps) {
+  if (error && !isLoading) {
+    return (
+      <Card className="border-status-error-border">
+        <CardContent className="p-6 text-center space-y-3">
+          <p className="text-status-error-text font-medium">Couldn&apos;t load demand forecast</p>
+          <p className="text-sm text-text-secondary">{error.message}</p>
+          <button
+            type="button"
+            onClick={onRetry}
+            className="text-sm font-medium text-primary hover:underline"
+          >
+            Retry
+          </button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Upcoming demand</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Skeleton className="h-16 w-full" />
+          <Skeleton className="h-16 w-full" />
+          <Skeleton className="h-16 w-full" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const nextWeekStart = laneForecast[0]?.periodStart ?? customerForecast[0]?.periodStart ?? null;
+
+  if (!nextWeekStart || laneForecast.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Calendar size={18} aria-hidden="true" />
+            Upcoming demand
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-start gap-2 rounded-lg border border-border/60 bg-muted/40 p-4 text-sm text-text-secondary">
+            <AlertCircle size={16} aria-hidden="true" className="mt-0.5 shrink-0" />
+            <p>
+              Not enough history to forecast next week yet. Once you have at least 4 weeks of
+              completed orders, this panel will surface demand by lane and customer.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const topLanes = topByVolume(laneForecast, nextWeekStart);
+  const topLanesByRevenue = topByRevenue(laneForecast, nextWeekStart);
+  const topCustomers = topByVolume(customerForecast, nextWeekStart);
+  const total = totalVolume(laneForecast, nextWeekStart);
+
+  // Most-recent variance row per scope key — show the lane that overshot /
+  // undershot the most in absolute volume terms.
+  const mostRecentVariance = [...laneVariance, ...customerVariance]
+    .sort((a, b) => Math.abs(b.volumeVariance) - Math.abs(a.volumeVariance))
+    .slice(0, 3);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Calendar size={18} aria-hidden="true" />
+          Upcoming demand — week of {formatWeek(nextWeekStart)}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-baseline justify-between rounded-lg border border-border/60 bg-muted/40 px-4 py-3">
+          <div>
+            <p className="text-xs uppercase tracking-wide text-text-secondary">
+              Predicted jobs (all lanes)
+            </p>
+            <p className="text-2xl font-bold">{total}</p>
+          </div>
+          <p className="text-xs text-text-secondary">
+            {topLanes[0] ? formatConfidence(topLanes[0].confidence) : ''}
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <ForecastList title="Top lanes (volume)" rows={topLanes} />
+          <ForecastList title="Top lanes (revenue)" rows={topLanesByRevenue} />
+          <ForecastList title="Top customers (volume)" rows={topCustomers} />
+          <VarianceList rows={mostRecentVariance} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface ForecastListProps {
+  title: string;
+  rows: ForecastPoint[];
+}
+
+function ForecastList({ title, rows }: ForecastListProps) {
+  if (rows.length === 0) {
+    return (
+      <div className="rounded-lg border border-border/60 p-4">
+        <p className="text-sm font-medium mb-2">{title}</p>
+        <p className="text-xs text-text-secondary">No forecasts yet for this week.</p>
+      </div>
+    );
+  }
+  return (
+    <div className="rounded-lg border border-border/60 p-4">
+      <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"
+          >
+            <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)}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+interface VarianceListProps {
+  rows: ForecastVariance[];
+}
+
+function VarianceList({ rows }: VarianceListProps) {
+  return (
+    <div className="rounded-lg border border-border/60 p-4">
+      <p className="text-sm font-medium mb-3">Recent forecast variance</p>
+      {rows.length === 0 ? (
+        <p className="text-xs text-text-secondary">No closed periods to compare yet.</p>
+      ) : (
+        <ul className="space-y-2">
+          {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';
+            return (
+              <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>
+                </span>
+                <span className={`ml-2 shrink-0 ${tone}`}>
+                  {isOvershoot ? '+' : ''}
+                  {row.volumeVariance} jobs
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}