@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

package/src/movethewheels/pages/MarketplacePage.tsx

@@ -1,9 +1,25 @@
 /**
  * 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.
  */
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Store, Star, MapPin, Clock, Filter, Search } from 'lucide-react';
+import {
+  Store,
+  Star,
+  MapPin,
+  Clock,
+  Filter,
+  Search,
+  ChevronDown,
+  ChevronUp,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import {
   Card,
@@ -14,6 +30,11 @@ import {
   Badge,
   Input,
   Skeleton,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '../components/ui';
 import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -86,6 +107,15 @@ const OFFERINGS_QUERY = `
   }
 `;
 
+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+' },
+];
+
 export default function MarketplacePage() {
   const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
     useMoveTheWheels();
@@ -94,6 +124,17 @@ export default function MarketplacePage() {
   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(
     () => ({
@@ -115,7 +156,9 @@ export default function MarketplacePage() {
         executeGraphQL<{ serviceProviders: ApiServiceProvider[] }>(
           graphQLOptions,
           PROVIDERS_QUERY,
-          { pagination: { limit: 200, offset: 0 } }
+          {
+            pagination: { limit: PROVIDERS_PAGE_SIZE, offset: page * PROVIDERS_PAGE_SIZE },
+          }
         ),
         executeGraphQL<{ serviceOfferings: ApiServiceOffering[] }>(
           graphQLOptions,
@@ -127,28 +170,42 @@ export default function MarketplacePage() {
       ]);
 
       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]);
+  }, [graphQLOptions, page]);
 
   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();
-    if (!term) return providers;
-    return providers.filter(
-      (provider) =>
-        provider.name.toLowerCase().includes(term) ||
-        (provider.description ?? '').toLowerCase().includes(term) ||
-        provider.type.toLowerCase().includes(term)
-    );
-  }, [providers, search]);
+    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();
@@ -161,13 +218,23 @@ export default function MarketplacePage() {
     );
   }, [offerings, search]);
 
+  const offeringsByProvider = useCallback(
+    (providerId: string) => offerings.filter((offering) => offering.providerId === providerId),
+    [offerings]
+  );
+
+  const filtersActive = typeFilter !== 'all' || verifiedOnly || minRating !== '0';
+
   return (
     <PageLayout
       title="Marketplace"
       subtitle="Find logistics service providers"
       icon={<Store size={24} />}
       headerActions={
-        <Button variant="outline">
+        <Button
+          variant={showFilters || filtersActive ? 'default' : 'outline'}
+          onClick={() => setShowFilters((prev) => !prev)}
+        >
           <Filter size={16} /> Filters
         </Button>
       }
@@ -179,7 +246,7 @@ export default function MarketplacePage() {
       </PagePurpose>
 
       <Card>
-        <CardContent className="p-4">
+        <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"
@@ -192,6 +259,62 @@ export default function MarketplacePage() {
               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>
       </Card>
 
@@ -217,11 +340,15 @@ export default function MarketplacePage() {
             <Card>
               <CardContent className="p-0">
                 <IllustratedEmptyState
-                  illustration={search.trim() ? 'empty-search' : 'empty-people'}
-                  title={search.trim() ? 'No providers match your search' : 'No providers yet'}
+                  illustration={search.trim() || filtersActive ? 'empty-search' : 'empty-people'}
+                  title={
+                    search.trim() || filtersActive
+                      ? 'No providers match your filters'
+                      : 'No providers yet'
+                  }
                   description={
-                    search.trim()
-                      ? 'Try a different search term to find logistics partners.'
+                    search.trim() || filtersActive
+                      ? 'Adjust your search or filters to find logistics partners.'
                       : 'Verified logistics service providers will appear here as they join the marketplace.'
                   }
                 />
@@ -230,42 +357,130 @@ export default function MarketplacePage() {
           )}
           {!isLoading &&
             !error &&
-            filteredProviders.map((provider) => (
-              <Card key={provider.id} className="hover:shadow-md transition-shadow">
-                <CardContent className="p-6">
-                  <div className="flex items-start justify-between">
-                    <div>
-                      <div className="flex items-center gap-2">
-                        <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>
+            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>
-                    </div>
-                    <div className="text-right">
-                      <p className="text-sm text-text-secondary">Services</p>
-                      <p className="text-lg font-bold">
-                        {Array.isArray(provider.services) ? provider.services.length : 0}
+                    </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>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
+                  )}
+                </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 */}