@burdenoff/microfe-movethewheels 2026.822.1 → 2026.828.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/ProductDetailsPage.tsx

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 import { useLocation, useParams } from 'react-router';
-import { Package, ArrowLeft, Edit, Box, DollarSign, Tag, Save } from 'lucide-react';
+import { Package, ArrowLeft, Edit, Box, DollarSign, Tag, Save, Warehouse } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import {
   Card,
@@ -17,7 +17,7 @@ import {
   Label,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useProduct, useInventory } from '../hooks/useInventory';
+import { useProduct, useInventory, useProductStockLevels } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -191,6 +191,13 @@ export default function ProductDetailsPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const { product, isLoading, error, refetch } = useProduct(productId);
   const isEditRoute = useLocation().pathname.endsWith('/edit');
+  // Where this item is actually stocked — inventoryItems(filter: { cargoItemId }).
+  const {
+    levels: stockLevels,
+    isLoading: stockLoading,
+    error: stockError,
+  } = useProductStockLevels(isEditRoute ? undefined : productId);
+  const totalAvailable = stockLevels.reduce((sum, level) => sum + level.available, 0);
 
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/products'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
@@ -248,7 +255,7 @@ export default function ProductDetailsPage() {
             label: 'Edit product details',
             description: 'Update dimensions, value or handling flags.',
             icon: <Tag size={16} />,
-            onClick: () => {},
+            onClick: () => goTo(`inventory/products/${productId}/edit`),
           },
         ]}
       />
@@ -335,6 +342,64 @@ export default function ProductDetailsPage() {
             <p className="text-sm text-text-secondary">Unit price</p>
           </EmphasisPanel>
 
+          {/* Stock levels — one row per warehouse holding this item. */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Warehouse size={18} /> Stock Levels
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {stockError ? (
+                <p className="text-sm text-status-error-text">{stockError.message}</p>
+              ) : stockLoading ? (
+                <p className="text-sm text-text-secondary">Loading stock levels…</p>
+              ) : stockLevels.length === 0 ? (
+                <div className="space-y-3">
+                  <p className="text-sm text-text-secondary">
+                    This item isn&apos;t stocked in any warehouse yet, so nothing can be promised on
+                    an order.
+                  </p>
+                  <Button variant="outline" size="sm" onClick={() => goTo('inventory/warehouses')}>
+                    View warehouses
+                  </Button>
+                </div>
+              ) : (
+                <>
+                  {stockLevels.map((level) => (
+                    <div
+                      key={level.inventoryItemId}
+                      className="flex items-baseline justify-between gap-3"
+                    >
+                      <div className="min-w-0">
+                        <p className="truncate text-sm font-medium">{level.warehouseName}</p>
+                        <p className="text-xs text-text-secondary">
+                          {level.allocated.toLocaleString()} allocated
+                          {level.reorderPoint !== undefined
+                            ? ` · reorder at ${level.reorderPoint.toLocaleString()}`
+                            : ''}
+                        </p>
+                      </div>
+                      <span
+                        className={
+                          level.reorderPoint !== undefined && level.available <= level.reorderPoint
+                            ? 'font-semibold text-status-warning-text'
+                            : 'font-semibold'
+                        }
+                      >
+                        {level.available.toLocaleString()}
+                      </span>
+                    </div>
+                  ))}
+                  <div className="flex items-baseline justify-between gap-3 border-t border-border-seam pt-3">
+                    <p className="text-sm text-text-secondary">Available across the network</p>
+                    <span className="font-bold">{totalAvailable.toLocaleString()}</span>
+                  </div>
+                </>
+              )}
+            </CardContent>
+          </Card>
+
           <Card>
             <CardHeader>
               <CardTitle>Identifiers</CardTitle>