@burdenoff/microfe-movethewheels 2026.827.1 → 2026.830.1

package/src/movethewheels/pages/MarketplacePage.tsx

@@ -1,559 +1,36 @@
 /**
  * Marketplace Page
  *
- * Browse third-party logistics service providers and their offerings. Providers
- * are paginated server-side (offset); clicking a provider expands its offerings
- * inline. The Filters control narrows the current page by type, verification and
- * minimum rating.
+ * The collaborative logistics marketplace (service providers / service offerings)
+ * was withdrawn from wspace-movethewheels-svc by migration
+ * 20260707000001_movethewheels_reuse_cleanup. The original query and mutation
+ * documents are preserved verbatim in
+ * src/operations/wspace/movethewheels/{queries,mutations}/marketplace-reports.withdrawn.graphql
+ * so they can be restored if the surface returns. Until then the page renders a
+ * static "coming soon" state.
  */
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Store,
-  Star,
-  MapPin,
-  Clock,
-  Filter,
-  Search,
-  ChevronDown,
-  ChevronUp,
-  ChevronLeft,
-  ChevronRight,
-} from 'lucide-react';
+import { Store } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Button,
-  Badge,
-  Input,
-  Skeleton,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../components/ui';
-import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useFeatureFlag } from '@burdenoff/fe-libs/shared/feature-flags';
-import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
-import { formatCurrency } from '../utils/formatters';
-import { executeGraphQL } from '../utils/graphqlClient';
-
-/**
- * The backend has no ServiceProvider/ServiceOffering model (dropped by
- * migration 20260707000001_movethewheels_reuse_cleanup) — `serviceProviders`
- * and `serviceOfferings` are not resolvable fields today. Gate the whole page
- * behind a flag that defaults to **disabled** so it fails closed (an empty
- * "coming soon" state) instead of erroring on every load. Flip this on only
- * once a serviceProviders/serviceOfferings resolver ships.
- */
-const MARKETPLACE_FEATURE_FLAG = 'movethewheels.marketplace';
-
-interface ApiServiceProvider {
-  id: string;
-  name: string;
-  type: string;
-  description?: string | null;
-  rating?: number | null;
-  isVerified: boolean;
-  isActive: boolean;
-  services?: unknown;
-  contactInfo?: unknown;
-}
-
-interface ApiServiceOffering {
-  id: string;
-  providerId: string;
-  name: string;
-  description?: string | null;
-  category?: string | null;
-  price: number;
-  currency: string;
-  availability?: unknown;
-  provider?: {
-    id: string;
-    name: string;
-    type: string;
-    rating?: number | null;
-  } | null;
-}
-
-const PROVIDERS_QUERY = `
-  query ListServiceProviders($filter: ServiceProviderFilterInput, $pagination: PaginationInput) {
-    serviceProviders(filter: $filter, pagination: $pagination) {
-      id
-      name
-      type
-      description
-      rating
-      isVerified
-      isActive
-      services
-      contactInfo
-    }
-  }
-`;
-
-const OFFERINGS_QUERY = `
-  query ListServiceOfferings($filter: ServiceOfferingFilterInput, $pagination: PaginationInput) {
-    serviceOfferings(filter: $filter, pagination: $pagination) {
-      id
-      providerId
-      name
-      description
-      category
-      price
-      currency
-      availability
-      provider {
-        id
-        name
-        type
-        rating
-      }
-    }
-  }
-`;
-
-const PROVIDERS_PAGE_SIZE = 12;
-
-const RATING_OPTIONS: { value: string; label: string }[] = [
-  { value: '0', label: 'Any rating' },
-  { value: '3', label: '3.0+' },
-  { value: '4', label: '4.0+' },
-  { value: '4.5', label: '4.5+' },
-];
+import { Card, CardContent } from '../components/ui';
+import { IllustratedEmptyState } from '@burdenoff/fe-libs/ui';
 
 export default function MarketplacePage() {
-  const marketplaceEnabled = useFeatureFlag(MARKETPLACE_FEATURE_FLAG, false);
-  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
-    useMoveTheWheels();
-  const [providers, setProviders] = useState<ApiServiceProvider[]>([]);
-  const [offerings, setOfferings] = useState<ApiServiceOffering[]>([]);
-  const [search, setSearch] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const [page, setPage] = useState(0);
-  const [hasMore, setHasMore] = useState(false);
-
-  // Inline filters (toggled by the "Filters" button in the header).
-  const [showFilters, setShowFilters] = useState(false);
-  const [typeFilter, setTypeFilter] = useState('all');
-  const [verifiedOnly, setVerifiedOnly] = useState(false);
-  const [minRating, setMinRating] = useState('0');
-
-  // Provider whose offerings are currently expanded.
-  const [expandedProviderId, setExpandedProviderId] = useState<string | null>(null);
-
-  const graphQLOptions = useMemo(
-    () => ({
-      apiGatewayUrl,
-      authToken,
-      workspaceToken,
-      workspaceId,
-      tenantId,
-      actorId: currentUser?.id,
-    }),
-    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
-  );
-
-  const load = useCallback(async () => {
-    if (!marketplaceEnabled) return;
-    setIsLoading(true);
-    setError(null);
-    try {
-      const [providersData, offeringsData] = await Promise.all([
-        executeGraphQL<{ serviceProviders: ApiServiceProvider[] }>(
-          graphQLOptions,
-          PROVIDERS_QUERY,
-          {
-            pagination: { limit: PROVIDERS_PAGE_SIZE, offset: page * PROVIDERS_PAGE_SIZE },
-          }
-        ),
-        executeGraphQL<{ serviceOfferings: ApiServiceOffering[] }>(
-          graphQLOptions,
-          OFFERINGS_QUERY,
-          {
-            pagination: { limit: 200, offset: 0 },
-          }
-        ),
-      ]);
-
-      setProviders(providersData.serviceProviders);
-      setHasMore(providersData.serviceProviders.length === PROVIDERS_PAGE_SIZE);
-      setOfferings(offeringsData.serviceOfferings);
-    } catch (fetchError) {
-      setError(fetchError instanceof Error ? fetchError : new Error('Failed to load marketplace'));
-    } finally {
-      setIsLoading(false);
-    }
-  }, [graphQLOptions, page, marketplaceEnabled]);
-
-  useEffect(() => {
-    void load();
-  }, [load]);
-
-  const providerTypes = useMemo(() => {
-    const set = new Set<string>();
-    providers.forEach((provider) => set.add(provider.type));
-    return Array.from(set).sort();
-  }, [providers]);
-
-  const filteredProviders = useMemo(() => {
-    const term = search.trim().toLowerCase();
-    const rating = Number(minRating);
-    return providers.filter((provider) => {
-      if (term) {
-        const matches =
-          provider.name.toLowerCase().includes(term) ||
-          (provider.description ?? '').toLowerCase().includes(term) ||
-          provider.type.toLowerCase().includes(term);
-        if (!matches) return false;
-      }
-      if (typeFilter !== 'all' && provider.type !== typeFilter) return false;
-      if (verifiedOnly && !provider.isVerified) return false;
-      if (rating > 0 && (provider.rating ?? 0) < rating) return false;
-      return true;
-    });
-  }, [providers, search, typeFilter, verifiedOnly, minRating]);
-
-  const filteredOfferings = useMemo(() => {
-    const term = search.trim().toLowerCase();
-    if (!term) return offerings;
-    return offerings.filter(
-      (offering) =>
-        offering.name.toLowerCase().includes(term) ||
-        (offering.description ?? '').toLowerCase().includes(term) ||
-        (offering.category ?? '').toLowerCase().includes(term)
-    );
-  }, [offerings, search]);
-
-  const offeringsByProvider = useCallback(
-    (providerId: string) => offerings.filter((offering) => offering.providerId === providerId),
-    [offerings]
-  );
-
-  const filtersActive = typeFilter !== 'all' || verifiedOnly || minRating !== '0';
-
-  if (!marketplaceEnabled) {
-    return (
-      <PageLayout
-        title="Marketplace"
-        subtitle="Find logistics service providers"
-        icon={<Store size={24} />}
-      >
-        <Card>
-          <CardContent className="p-0">
-            <IllustratedEmptyState
-              illustration="empty-people"
-              title="Marketplace is coming soon"
-              description="The collaborative logistics marketplace is not open yet. Check back after it launches to browse verified third-party service providers."
-            />
-          </CardContent>
-        </Card>
-      </PageLayout>
-    );
-  }
-
   return (
     <PageLayout
       title="Marketplace"
       subtitle="Find logistics service providers"
       icon={<Store size={24} />}
-      headerActions={
-        <Button
-          variant={showFilters || filtersActive ? 'default' : 'outline'}
-          onClick={() => setShowFilters((prev) => !prev)}
-        >
-          <Filter size={16} /> Filters
-        </Button>
-      }
     >
-      <PagePurpose icon={<Store size={18} />}>
-        Don&apos;t own every leg of the journey? Find vetted third-party logistics providers and
-        service offerings here — compare ratings, verification status and pricing, then engage a
-        partner to cover routes, warehousing or specialised handling you can&apos;t do in-house.
-      </PagePurpose>
-
       <Card>
-        <CardContent className="p-4 space-y-4">
-          <div className="relative">
-            <Search
-              className="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
-              size={20}
-            />
-            <Input
-              placeholder="Search services, providers, locations..."
-              className="pl-10"
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-            />
-          </div>
-
-          {showFilters && (
-            <div className="flex flex-wrap items-center gap-3 border-t border-border-seam pt-4">
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-medium text-text-secondary">Type</span>
-                <Select value={typeFilter} onValueChange={setTypeFilter}>
-                  <SelectTrigger className="w-[160px]">
-                    <SelectValue placeholder="All types" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All types</SelectItem>
-                    {providerTypes.map((type) => (
-                      <SelectItem key={type} value={type}>
-                        {type}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-medium text-text-secondary">Min rating</span>
-                <Select value={minRating} onValueChange={setMinRating}>
-                  <SelectTrigger className="w-[130px]">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {RATING_OPTIONS.map((option) => (
-                      <SelectItem key={option.value} value={option.value}>
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <Button
-                variant={verifiedOnly ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setVerifiedOnly((prev) => !prev)}
-              >
-                Verified only
-              </Button>
-              {filtersActive && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => {
-                    setTypeFilter('all');
-                    setVerifiedOnly(false);
-                    setMinRating('0');
-                  }}
-                >
-                  Clear filters
-                </Button>
-              )}
-            </div>
-          )}
+        <CardContent className="p-0">
+          <IllustratedEmptyState
+            illustration="empty-people"
+            title="Marketplace is coming soon"
+            description="The collaborative logistics marketplace is not open yet. Check back after it launches to browse verified third-party service providers."
+          />
         </CardContent>
       </Card>
-
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <div className="lg:col-span-2 space-y-4">
-          <h3 className="font-semibold">Service Providers ({filteredProviders.length})</h3>
-          {error && !isLoading && (
-            <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 providers</p>
-                <p className="text-sm text-text-secondary">{error.message}</p>
-                <Button variant="outline" onClick={() => void load()}>
-                  Retry
-                </Button>
-              </CardContent>
-            </Card>
-          )}
-          {isLoading &&
-            Array.from({ length: 3 }).map((_, i) => (
-              <Skeleton key={i} className="h-32 w-full rounded-lg" />
-            ))}
-          {!isLoading && !error && filteredProviders.length === 0 && (
-            <Card>
-              <CardContent className="p-0">
-                <IllustratedEmptyState
-                  illustration={search.trim() || filtersActive ? 'empty-search' : 'empty-people'}
-                  title={
-                    search.trim() || filtersActive
-                      ? 'No providers match your filters'
-                      : 'No providers yet'
-                  }
-                  description={
-                    search.trim() || filtersActive
-                      ? 'Adjust your search or filters to find logistics partners.'
-                      : 'Verified logistics service providers will appear here as they join the marketplace.'
-                  }
-                />
-              </CardContent>
-            </Card>
-          )}
-          {!isLoading &&
-            !error &&
-            filteredProviders.map((provider) => {
-              const expanded = expandedProviderId === provider.id;
-              const providerOfferings = offeringsByProvider(provider.id);
-              return (
-                <Card key={provider.id}>
-                  <button
-                    type="button"
-                    aria-expanded={expanded}
-                    className="w-full text-left"
-                    onClick={() => setExpandedProviderId(expanded ? null : provider.id)}
-                  >
-                    <CardContent className="p-6">
-                      <div className="flex items-start justify-between gap-3">
-                        <div className="min-w-0">
-                          <div className="flex items-center gap-2 flex-wrap">
-                            <h4 className="font-semibold text-lg">{provider.name}</h4>
-                            {provider.isVerified && <Badge variant="default">Verified</Badge>}
-                            <Badge variant={provider.isActive ? 'default' : 'secondary'}>
-                              {provider.isActive ? 'active' : 'inactive'}
-                            </Badge>
-                          </div>
-                          <p className="text-text-secondary mt-1">{provider.description}</p>
-                          <div className="flex items-center gap-4 mt-3 text-sm text-text-secondary">
-                            <span className="flex items-center gap-1">
-                              <Star size={14} className="text-status-warning-text fill-current" />{' '}
-                              {provider.rating ?? 0}
-                            </span>
-                            <span className="flex items-center gap-1">
-                              <MapPin size={14} /> {provider.type}
-                            </span>
-                            <span className="flex items-center gap-1">
-                              <Clock size={14} /> Listed
-                            </span>
-                          </div>
-                        </div>
-                        <div className="text-right shrink-0">
-                          <p className="text-sm text-text-secondary">Services</p>
-                          <p className="text-lg font-bold">{providerOfferings.length}</p>
-                          <span className="mt-1 inline-flex items-center gap-1 text-xs text-primary">
-                            {expanded ? (
-                              <>
-                                Hide <ChevronUp size={14} />
-                              </>
-                            ) : (
-                              <>
-                                View <ChevronDown size={14} />
-                              </>
-                            )}
-                          </span>
-                        </div>
-                      </div>
-                    </CardContent>
-                  </button>
-                  {expanded && (
-                    <div className="border-t border-border-seam px-6 py-4 space-y-3">
-                      <p className="text-sm font-medium text-text-secondary">
-                        Offerings from {provider.name}
-                      </p>
-                      {providerOfferings.length === 0 ? (
-                        <p className="text-sm text-text-secondary">
-                          This provider hasn&apos;t listed any offerings yet.
-                        </p>
-                      ) : (
-                        providerOfferings.map((offering) => (
-                          <div
-                            key={offering.id}
-                            className="flex items-center justify-between gap-3 rounded-lg border border-border-seam p-3"
-                          >
-                            <div className="min-w-0">
-                              <p className="font-medium truncate">{offering.name}</p>
-                              <p className="text-sm text-text-secondary truncate">
-                                {offering.category ?? 'general'}
-                              </p>
-                            </div>
-                            <div className="text-right shrink-0">
-                              <p className="font-bold">{formatCurrency(offering.price)}</p>
-                              <p className="text-xs text-text-secondary">{offering.currency}</p>
-                            </div>
-                          </div>
-                        ))
-                      )}
-                    </div>
-                  )}
-                </Card>
-              );
-            })}
-
-          {!isLoading && !error && (providers.length > 0 || page > 0) && (
-            <div className="flex flex-wrap items-center justify-between gap-3 pt-1">
-              <span className="text-sm text-text-secondary">
-                Showing {providers.length === 0 ? 0 : page * PROVIDERS_PAGE_SIZE + 1} to{' '}
-                {page * PROVIDERS_PAGE_SIZE + providers.length}
-              </span>
-              <div className="flex items-center gap-1">
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="h-8 w-8"
-                  aria-label="Previous page"
-                  onClick={() => {
-                    setExpandedProviderId(null);
-                    setPage((p) => Math.max(0, p - 1));
-                  }}
-                  disabled={page === 0}
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </Button>
-                <span className="px-3 text-sm">Page {page + 1}</span>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="h-8 w-8"
-                  aria-label="Next page"
-                  onClick={() => {
-                    setExpandedProviderId(null);
-                    setPage((p) => p + 1);
-                  }}
-                  disabled={!hasMore}
-                >
-                  <ChevronRight className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Popular Services — the page's single emphasis zone */}
-        <EmphasisPanel className="space-y-4">
-          <h3 className="text-base font-semibold text-text-primary">Popular Services</h3>
-          {filteredOfferings.length === 0 && (
-            <IllustratedEmptyState
-              illustration={search.trim() ? 'empty-search' : 'empty-generic'}
-              title={search.trim() ? 'No matching services' : 'No services listed yet'}
-              description={
-                search.trim()
-                  ? 'Adjust your search to discover service offerings.'
-                  : 'Service offerings from providers will be listed here.'
-              }
-            />
-          )}
-          {filteredOfferings.map((service) => (
-            <Card key={service.id}>
-              <CardHeader>
-                <CardTitle className="text-base">{service.name}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-sm text-text-secondary mb-3">{service.description}</p>
-                <div className="flex flex-wrap gap-1 mb-3">
-                  <Badge variant="outline" className="text-xs">
-                    {service.category ?? 'general'}
-                  </Badge>
-                  <Badge variant="outline" className="text-xs">
-                    {service.provider?.name ?? 'provider'}
-                  </Badge>
-                </div>
-                <div className="flex items-center justify-between">
-                  <span className="font-bold">{formatCurrency(service.price)}</span>
-                  <span className="text-sm text-text-secondary">{service.currency}</span>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </EmphasisPanel>
-      </div>
     </PageLayout>
   );
 }

package/src/movethewheels/pages/ReportsPage.tsx

@@ -36,6 +36,8 @@ import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe
 import { VolumeBar } from '../components/charts';
 import { useReports, type CreateReportInput } from '../hooks/useReports';
 import { useAnalytics } from '../hooks/useAnalytics';
+import { useDemandForecast } from '../hooks/useDemandForecast';
+import { UpcomingDemandPanel } from '../components/UpcomingDemandPanel';
 import { formatDate } from '../utils/formatters';
 import { downloadFile, downloadJson, recordToCsv, slugifyForFilename } from '../utils/download';
 
@@ -62,6 +64,15 @@ export default function ReportsPage() {
   });
   const { analytics } = useAnalytics();
   const previewData = analytics.trends.dailyOrders.slice(-7);
+  const {
+    laneForecast,
+    customerForecast,
+    laneVariance,
+    customerVariance,
+    isLoading: forecastLoading,
+    error: forecastError,
+    refetch: refetchForecast,
+  } = useDemandForecast(4, 8);
   const [reportType, setReportType] = useState('operations');
   const [busyId, setBusyId] = useState<string | null>(null);
   const [creating, setCreating] = useState(false);
@@ -280,6 +291,18 @@ export default function ReportsPage() {
         </div>
 
         <div className="space-y-6">
+          {/* Demand forecast (BOFF-4393) — shared with AnalyticsPage so reports
+              and analytics show the same planning signal. */}
+          <UpcomingDemandPanel
+            laneForecast={laneForecast}
+            customerForecast={customerForecast}
+            laneVariance={laneVariance}
+            customerVariance={customerVariance}
+            isLoading={forecastLoading}
+            error={forecastError}
+            onRetry={refetchForecast}
+          />
+
           {/* Data preview — a real snapshot (recent order volume) of what a
               generated report draws from. Honest empty state when no data. */}
           <Card>