@burdenoff/microfe-movethewheels 2026.1101.3 → 2026.1102.1

package/src/movethewheels/components/UpcomingDemandPanel.tsx

@@ -4,11 +4,17 @@
  * 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.
+ *
+ * "Next week" is the first forecast week that has not begun yet: the current
+ * week's rows are kept server-side for the closed-period variance, but they
+ * are not upcoming demand. Cold-start rows (confidence 0, fewer than 4 weeks
+ * of history for that lane or customer) are not shown as forecasts.
  */
 
 import { Calendar, TrendingUp, TrendingDown, AlertCircle } from 'lucide-react';
 
 import { Card, CardContent, CardHeader, CardTitle, Skeleton } from './ui';
+import { formatCurrency } from '../utils/formatters';
 
 import type { ForecastPoint, ForecastVariance } from '../hooks/useDemandForecast';
 
@@ -28,20 +34,41 @@ const formatWeek = (iso: string): string => {
   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);
-};
+/** Rows for one week that rest on enough history to be a forecast. */
+const forecastsFor = (rows: ForecastPoint[], weekStart: string): ForecastPoint[] =>
+  rows.filter((row) => row.periodStart === weekStart && row.confidence > 0);
 
-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 topByVolume = (rows: ForecastPoint[], weekStart: string): ForecastPoint[] =>
+  [...forecastsFor(rows, weekStart)]
+    .sort(
+      (a, b) => b.predictedVolume - a.predictedVolume || b.predictedRevenue - a.predictedRevenue
+    )
+    .slice(0, 3);
+
+const topByRevenue = (rows: ForecastPoint[], weekStart: string): ForecastPoint[] =>
+  [...forecastsFor(rows, weekStart)]
+    .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);
+  forecastsFor(rows, weekStart).reduce((sum, row) => sum + row.predictedVolume, 0);
+
+/**
+ * The first forecast week that has not started yet, else the latest week on
+ * offer (rows arrive sorted by period).
+ */
+const upcomingWeekStart = (rows: ForecastPoint[], now: Date = new Date()): string | null => {
+  const starts = [...new Set(rows.map((row) => row.periodStart))].sort(
+    (a, b) => new Date(a).getTime() - new Date(b).getTime()
+  );
+  return starts.find((start) => new Date(start).getTime() > now.getTime()) ?? starts.at(-1) ?? null;
+};
+
+/** `3 jobs`, `1 job`, or `<1 job` when demand is real but under one a week. */
+const formatJobs = (volume: number, revenue: number): string => {
+  if (volume === 0 && revenue > 0) return '<1 job';
+  return volume === 1 ? '1 job' : `${volume} jobs`;
+};
 
 const formatConfidence = (confidence: number): string => {
   if (confidence <= 0) return 'Not enough history';
@@ -90,9 +117,13 @@ export function UpcomingDemandPanel({
     );
   }
 
-  const nextWeekStart = laneForecast[0]?.periodStart ?? customerForecast[0]?.periodStart ?? null;
+  const nextWeekStart = upcomingWeekStart([...laneForecast, ...customerForecast]);
+  const hasForecast =
+    nextWeekStart !== null &&
+    (forecastsFor(laneForecast, nextWeekStart).length > 0 ||
+      forecastsFor(customerForecast, nextWeekStart).length > 0);
 
-  if (!nextWeekStart || laneForecast.length === 0) {
+  if (!nextWeekStart || !hasForecast) {
     return (
       <Card>
         <CardHeader>
@@ -105,8 +136,8 @@ export function UpcomingDemandPanel({
           <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.
+              Not enough history to forecast next week yet. Once a lane or customer has at least 4
+              weeks of delivery jobs, this panel will surface its demand.
             </p>
           </div>
         </CardContent>
@@ -117,7 +148,18 @@ export function UpcomingDemandPanel({
   const topLanes = topByVolume(laneForecast, nextWeekStart);
   const topLanesByRevenue = topByRevenue(laneForecast, nextWeekStart);
   const topCustomers = topByVolume(customerForecast, nextWeekStart);
-  const total = totalVolume(laneForecast, nextWeekStart);
+  // The headline total comes from lane forecasts when any lane clears the
+  // history threshold. A customer can have enough history while each of its
+  // lanes does not, so fall back to the customer total rather than show a
+  // lane total of 0 beside valid customer forecasts.
+  const hasLaneForecast = forecastsFor(laneForecast, nextWeekStart).length > 0;
+  const total = hasLaneForecast
+    ? totalVolume(laneForecast, nextWeekStart)
+    : totalVolume(customerForecast, nextWeekStart);
+  const totalLabel = hasLaneForecast
+    ? 'Predicted jobs (all lanes)'
+    : 'Predicted jobs (all customers)';
+  const headlineRow = hasLaneForecast ? topLanes[0] : topCustomers[0];
 
   // Most-recent variance row per scope key — show the lane that overshot /
   // undershot the most in absolute volume terms.
@@ -136,13 +178,11 @@ export function UpcomingDemandPanel({
       <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-xs uppercase tracking-wide text-text-secondary">{totalLabel}</p>
             <p className="text-2xl font-bold">{total}</p>
           </div>
           <p className="text-xs text-text-secondary">
-            {topLanes[0] ? formatConfidence(topLanes[0].confidence) : ''}
+            {headlineRow ? formatConfidence(headlineRow.confidence) : ''}
           </p>
         </div>
 
@@ -180,14 +220,12 @@ function ForecastList({ title, rows }: ForecastListProps) {
             key={`${row.scopeType}-${row.scopeKey}`}
             className="flex items-center justify-between text-sm"
           >
-            <span className="truncate font-medium">{row.scopeKey}</span>
+            <span className="truncate font-medium" title={row.scopeLabel}>
+              {row.scopeLabel}
+            </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)}
+              {formatJobs(row.predictedVolume, row.predictedRevenue)} ·{' '}
+              {formatCurrency(row.predictedRevenue)}
             </span>
           </li>
         ))}
@@ -219,11 +257,15 @@ function VarianceList({ rows }: VarianceListProps) {
               >
                 <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 className="truncate font-medium" title={row.scopeLabel}>
+                    {row.scopeLabel}
+                  </span>
                 </span>
                 <span className={`ml-2 shrink-0 ${tone}`}>
                   {isOvershoot ? '+' : ''}
-                  {row.volumeVariance} jobs
+                  {Math.abs(row.volumeVariance) === 1
+                    ? `${row.volumeVariance} job`
+                    : `${row.volumeVariance} jobs`}
                 </span>
               </li>
             );

package/src/movethewheels/hooks/useCustomers.ts

@@ -35,6 +35,8 @@ interface ApiCustomer {
   businessLicense?: string | null;
   taxId?: string | null;
   rating?: number | null;
+  notifyByEmail?: boolean | null;
+  notifyBySms?: boolean | null;
   createdAt: string;
   updatedAt: string;
   deletedAt?: string | null;
@@ -53,6 +55,8 @@ const LIST_CUSTOMERS_QUERY = `
       businessLicense
       taxId
       rating
+      notifyByEmail
+      notifyBySms
       createdAt
       updatedAt
       deletedAt
@@ -74,6 +78,8 @@ const GET_CUSTOMER_QUERY = `
       businessLicense
       taxId
       rating
+      notifyByEmail
+      notifyBySms
       createdAt
       updatedAt
       deletedAt
@@ -94,6 +100,8 @@ const CREATE_CUSTOMER_MUTATION = `
       businessLicense
       taxId
       rating
+      notifyByEmail
+      notifyBySms
       createdAt
       updatedAt
       deletedAt
@@ -114,6 +122,8 @@ const UPDATE_CUSTOMER_MUTATION = `
       businessLicense
       taxId
       rating
+      notifyByEmail
+      notifyBySms
       createdAt
       updatedAt
       deletedAt
@@ -144,6 +154,9 @@ function mapCustomer(customer: ApiCustomer): Customer {
     businessLicense: customer.businessLicense ?? undefined,
     taxId: customer.taxId ?? undefined,
     rating: customer.rating ?? undefined,
+    // Absent only from an older service; match its defaults (email on, SMS off).
+    notifyByEmail: customer.notifyByEmail ?? true,
+    notifyBySms: customer.notifyBySms ?? false,
     createdAt: new Date(customer.createdAt),
     updatedAt: new Date(customer.updatedAt),
   };
@@ -263,6 +276,8 @@ export function useCustomers(options: UseCustomersOptions = {}): UseCustomersRes
           businessLicense: customerData.businessLicense,
           taxId: customerData.taxId,
           rating: customerData.rating,
+          notifyByEmail: customerData.notifyByEmail,
+          notifyBySms: customerData.notifyBySms,
         },
       });
 
@@ -289,6 +304,8 @@ export function useCustomers(options: UseCustomersOptions = {}): UseCustomersRes
           businessLicense: updates.businessLicense,
           taxId: updates.taxId,
           rating: updates.rating,
+          notifyByEmail: updates.notifyByEmail,
+          notifyBySms: updates.notifyBySms,
         },
       });
 

package/src/movethewheels/hooks/useDemandForecast.ts

@@ -12,6 +12,8 @@ import { executeGraphQL } from '../utils/graphqlClient';
 export interface ForecastPoint {
   scopeType: 'LANE' | 'CUSTOMER';
   scopeKey: string;
+  /** Customer name or `Origin → Destination`; falls back to the key. */
+  scopeLabel: string;
   periodStart: string;
   periodEnd: string;
   predictedVolume: number;
@@ -24,6 +26,7 @@ export interface ForecastPoint {
 export interface ForecastVariance {
   scopeType: 'LANE' | 'CUSTOMER';
   scopeKey: string;
+  scopeLabel: string;
   periodStart: string;
   periodEnd: string;
   predictedVolume: number;
@@ -49,6 +52,7 @@ const FORECAST_QUERY = `
     demandForecastByLane(weeks: $weeks) {
       scopeType
       scopeKey
+      scopeLabel
       periodStart
       periodEnd
       predictedVolume
@@ -60,6 +64,7 @@ const FORECAST_QUERY = `
     demandForecastByCustomer(weeks: $weeks) {
       scopeType
       scopeKey
+      scopeLabel
       periodStart
       periodEnd
       predictedVolume
@@ -71,6 +76,7 @@ const FORECAST_QUERY = `
     laneVariance: demandForecastVariance(scopeType: LANE, limit: $varianceLimit) {
       scopeType
       scopeKey
+      scopeLabel
       periodStart
       periodEnd
       predictedVolume
@@ -83,6 +89,7 @@ const FORECAST_QUERY = `
     customerVariance: demandForecastVariance(scopeType: CUSTOMER, limit: $varianceLimit) {
       scopeType
       scopeKey
+      scopeLabel
       periodStart
       periodEnd
       predictedVolume

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -18,6 +18,7 @@ import {
   Package,
   X,
   Trash2,
+  BellRing,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { TypeBadge, StatusBadge } from '../components/StatusBadge';
@@ -51,6 +52,10 @@ import { useOrders } from '../hooks/useOrders';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatAddress, formatCurrency, formatDate } from '../utils/formatters';
 import { joinPath, buildOrderCustomerPath, getSafeCustomerReturnPath } from '../utils/navigation';
+import {
+  CustomerDeliveryUpdatesFields,
+  deliveryUpdatesSummary,
+} from '../components/CustomerDeliveryUpdatesFields';
 import { FormError } from '../components/FormError';
 import { Notice, useNotice } from '../components/Notice';
 
@@ -68,6 +73,8 @@ interface CustomerFormState {
   businessLicense: string;
   taxId: string;
   rating: string;
+  notifyByEmail: boolean;
+  notifyBySms: boolean;
 }
 
 const emptyCustomerForm: CustomerFormState = {
@@ -84,6 +91,8 @@ const emptyCustomerForm: CustomerFormState = {
   businessLicense: '',
   taxId: '',
   rating: '',
+  notifyByEmail: true,
+  notifyBySms: false,
 };
 
 function NewCustomerForm() {
@@ -125,6 +134,8 @@ function NewCustomerForm() {
         businessLicense: form.businessLicense.trim() || undefined,
         taxId: form.taxId.trim() || undefined,
         rating: form.rating ? Number(form.rating) : undefined,
+        notifyByEmail: form.notifyByEmail,
+        notifyBySms: form.notifyBySms,
       });
       const destination = returnTo
         ? buildOrderCustomerPath(returnTo, created.id)
@@ -320,6 +331,13 @@ function NewCustomerForm() {
                 />
               </div>
             </div>
+            <div className="mt-6">
+              <CustomerDeliveryUpdatesFields
+                idPrefix="new-customer"
+                value={{ notifyByEmail: form.notifyByEmail, notifyBySms: form.notifyBySms }}
+                onChange={(next) => setForm((prev) => ({ ...prev, ...next }))}
+              />
+            </div>
           </CardContent>
         </Card>
       </form>
@@ -343,6 +361,8 @@ function customerToForm(customer: {
   businessLicense?: string;
   taxId?: string;
   rating?: number;
+  notifyByEmail: boolean;
+  notifyBySms: boolean;
 }): CustomerFormState {
   return {
     name: customer.name,
@@ -358,6 +378,8 @@ function customerToForm(customer: {
     businessLicense: customer.businessLicense ?? '',
     taxId: customer.taxId ?? '',
     rating: customer.rating ? String(customer.rating) : '',
+    notifyByEmail: customer.notifyByEmail,
+    notifyBySms: customer.notifyBySms,
   };
 }
 
@@ -424,6 +446,8 @@ export default function CustomerDetailsPage() {
         businessLicense: form.businessLicense.trim() || undefined,
         taxId: form.taxId.trim() || undefined,
         rating: form.rating ? Number(form.rating) : undefined,
+        notifyByEmail: form.notifyByEmail,
+        notifyBySms: form.notifyBySms,
       });
       notify('Customer updated.');
       setEditing(false);
@@ -662,6 +686,12 @@ export default function CustomerDetailsPage() {
                     />
                   </div>
                 </div>
+                <CustomerDeliveryUpdatesFields
+                  idPrefix="edit-customer"
+                  value={{ notifyByEmail: form.notifyByEmail, notifyBySms: form.notifyBySms }}
+                  onChange={(next) => setForm((prev) => ({ ...prev, ...next }))}
+                  disabled={saving}
+                />
               </div>
             ) : (
               <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -691,6 +721,15 @@ export default function CustomerDetailsPage() {
                       </div>
                     </div>
                   )}
+                  <div className="flex items-center gap-3">
+                    <BellRing size={18} className="text-text-secondary" />
+                    <div>
+                      <p className="text-sm text-text-secondary">Delivery updates</p>
+                      <p className="font-medium" data-testid="customer-delivery-updates">
+                        {deliveryUpdatesSummary(customer)}
+                      </p>
+                    </div>
+                  </div>
                 </div>
               </div>
             )}