@burdenoff/microfe-movethewheels 2026.704.2 → 2026.713.1

package/dist/pages/MarketplacePage.js

@@ -0,0 +1,425 @@
+import { ChevronDown as e } from "../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+import { ChevronLeft as t } from "../node_modules/lucide-react/dist/esm/icons/chevron-left.js";
+import { ChevronRight as n } from "../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
+import { ChevronUp as ee } from "../node_modules/lucide-react/dist/esm/icons/chevron-up.js";
+import { Clock as te } from "../node_modules/lucide-react/dist/esm/icons/clock.js";
+import { Filter as r } from "../node_modules/lucide-react/dist/esm/icons/filter.js";
+import { MapPin as ne } from "../node_modules/lucide-react/dist/esm/icons/map-pin.js";
+import { Search as re } from "../node_modules/lucide-react/dist/esm/icons/search.js";
+import { Star as ie } from "../node_modules/lucide-react/dist/esm/icons/star.js";
+import { Store as i } from "../node_modules/lucide-react/dist/esm/icons/store.js";
+import { useMoveTheWheels as ae } from "../providers/MoveTheWheelsProvider.js";
+import { executeGraphQL as a } from "../utils/graphqlClient.js";
+import { Badge as o, Button as s, Card as c, CardContent as l, CardHeader as oe, CardTitle as se, Input as ce, Select as u, SelectContent as d, SelectItem as f, SelectTrigger as p, SelectValue as m, Skeleton as le } from "../components/ui.js";
+import { PageLayout as ue } from "../components/PageLayout.js";
+import { formatCurrency as h } from "../utils/formatters.js";
+import { useCallback as g, useEffect as de, useMemo as _, useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { EmphasisPanel as S, IllustratedEmptyState as C, PagePurpose as fe } from "@burdenoff/fe-libs/ui";
+//#region src/movethewheels/pages/MarketplacePage.tsx
+var pe = "\n  query ListServiceProviders($filter: ServiceProviderFilterInput, $pagination: PaginationInput) {\n    serviceProviders(filter: $filter, pagination: $pagination) {\n      id\n      name\n      type\n      description\n      rating\n      isVerified\n      isActive\n      services\n      contactInfo\n    }\n  }\n", me = "\n  query ListServiceOfferings($filter: ServiceOfferingFilterInput, $pagination: PaginationInput) {\n    serviceOfferings(filter: $filter, pagination: $pagination) {\n      id\n      providerId\n      name\n      description\n      category\n      price\n      currency\n      availability\n      provider {\n        id\n        name\n        type\n        rating\n      }\n    }\n  }\n", w = 12, T = [
+	{
+		value: "0",
+		label: "Any rating"
+	},
+	{
+		value: "3",
+		label: "3.0+"
+	},
+	{
+		value: "4",
+		label: "4.0+"
+	},
+	{
+		value: "4.5",
+		label: "4.5+"
+	}
+];
+function E() {
+	let { apiGatewayUrl: E, authToken: D, workspaceToken: O, workspaceId: k, tenantId: A, currentUser: j } = ae(), [M, he] = v([]), [N, ge] = v([]), [P, _e] = v(""), [F, I] = v(!1), [L, R] = v(null), [z, B] = v(0), [ve, ye] = v(!1), [V, be] = v(!1), [H, U] = v("all"), [W, G] = v(!1), [K, q] = v("0"), [xe, J] = v(null), Y = _(() => ({
+		apiGatewayUrl: E,
+		authToken: D,
+		workspaceToken: O,
+		workspaceId: k,
+		tenantId: A,
+		actorId: j?.id
+	}), [
+		E,
+		D,
+		O,
+		k,
+		A,
+		j?.id
+	]), X = g(async () => {
+		I(!0), R(null);
+		try {
+			let [e, t] = await Promise.all([a(Y, pe, { pagination: {
+				limit: w,
+				offset: z * w
+			} }), a(Y, me, { pagination: {
+				limit: 200,
+				offset: 0
+			} })]);
+			he(e.serviceProviders), ye(e.serviceProviders.length === w), ge(t.serviceOfferings);
+		} catch (e) {
+			R(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to load marketplace"));
+		} finally {
+			I(!1);
+		}
+	}, [Y, z]);
+	de(() => {
+		X();
+	}, [X]);
+	let Se = _(() => {
+		let e = /* @__PURE__ */ new Set();
+		return M.forEach((t) => e.add(t.type)), Array.from(e).sort();
+	}, [M]), Z = _(() => {
+		let e = P.trim().toLowerCase(), t = Number(K);
+		return M.filter((n) => !(e && !(n.name.toLowerCase().includes(e) || (n.description ?? "").toLowerCase().includes(e) || n.type.toLowerCase().includes(e)) || H !== "all" && n.type !== H || W && !n.isVerified || t > 0 && (n.rating ?? 0) < t));
+	}, [
+		M,
+		P,
+		H,
+		W,
+		K
+	]), Q = _(() => {
+		let e = P.trim().toLowerCase();
+		return e ? N.filter((t) => t.name.toLowerCase().includes(e) || (t.description ?? "").toLowerCase().includes(e) || (t.category ?? "").toLowerCase().includes(e)) : N;
+	}, [N, P]), Ce = g((e) => N.filter((t) => t.providerId === e), [N]), $ = H !== "all" || W || K !== "0";
+	return /* @__PURE__ */ x(ue, {
+		title: "Marketplace",
+		subtitle: "Find logistics service providers",
+		icon: /* @__PURE__ */ b(i, { size: 24 }),
+		headerActions: /* @__PURE__ */ x(s, {
+			variant: V || $ ? "default" : "outline",
+			onClick: () => be((e) => !e),
+			children: [/* @__PURE__ */ b(r, { size: 16 }), " Filters"]
+		}),
+		children: [
+			/* @__PURE__ */ b(fe, {
+				icon: /* @__PURE__ */ b(i, { size: 18 }),
+				children: "Don'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't do in-house."
+			}),
+			/* @__PURE__ */ b(c, { children: /* @__PURE__ */ x(l, {
+				className: "p-4 space-y-4",
+				children: [/* @__PURE__ */ x("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ b(re, {
+						className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary",
+						size: 20
+					}), /* @__PURE__ */ b(ce, {
+						placeholder: "Search services, providers, locations...",
+						className: "pl-10",
+						value: P,
+						onChange: (e) => _e(e.target.value)
+					})]
+				}), V && /* @__PURE__ */ x("div", {
+					className: "flex flex-wrap items-center gap-3 border-t border-border-seam pt-4",
+					children: [
+						/* @__PURE__ */ x("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ b("span", {
+								className: "text-sm font-medium text-text-secondary",
+								children: "Type"
+							}), /* @__PURE__ */ x(u, {
+								value: H,
+								onValueChange: U,
+								children: [/* @__PURE__ */ b(p, {
+									className: "w-[160px]",
+									children: /* @__PURE__ */ b(m, { placeholder: "All types" })
+								}), /* @__PURE__ */ x(d, { children: [/* @__PURE__ */ b(f, {
+									value: "all",
+									children: "All types"
+								}), Se.map((e) => /* @__PURE__ */ b(f, {
+									value: e,
+									children: e
+								}, e))] })]
+							})]
+						}),
+						/* @__PURE__ */ x("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ b("span", {
+								className: "text-sm font-medium text-text-secondary",
+								children: "Min rating"
+							}), /* @__PURE__ */ x(u, {
+								value: K,
+								onValueChange: q,
+								children: [/* @__PURE__ */ b(p, {
+									className: "w-[130px]",
+									children: /* @__PURE__ */ b(m, {})
+								}), /* @__PURE__ */ b(d, { children: T.map((e) => /* @__PURE__ */ b(f, {
+									value: e.value,
+									children: e.label
+								}, e.value)) })]
+							})]
+						}),
+						/* @__PURE__ */ b(s, {
+							variant: W ? "default" : "outline",
+							size: "sm",
+							onClick: () => G((e) => !e),
+							children: "Verified only"
+						}),
+						$ && /* @__PURE__ */ b(s, {
+							variant: "ghost",
+							size: "sm",
+							onClick: () => {
+								U("all"), G(!1), q("0");
+							},
+							children: "Clear filters"
+						})
+					]
+				})]
+			}) }),
+			/* @__PURE__ */ x("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ x("div", {
+					className: "lg:col-span-2 space-y-4",
+					children: [
+						/* @__PURE__ */ x("h3", {
+							className: "font-semibold",
+							children: [
+								"Service Providers (",
+								Z.length,
+								")"
+							]
+						}),
+						L && !F && /* @__PURE__ */ b(c, {
+							className: "border-status-error-border",
+							children: /* @__PURE__ */ x(l, {
+								className: "p-6 text-center space-y-3",
+								children: [
+									/* @__PURE__ */ b("p", {
+										className: "text-status-error-text font-medium",
+										children: "Couldn't load providers"
+									}),
+									/* @__PURE__ */ b("p", {
+										className: "text-sm text-text-secondary",
+										children: L.message
+									}),
+									/* @__PURE__ */ b(s, {
+										variant: "outline",
+										onClick: () => void X(),
+										children: "Retry"
+									})
+								]
+							})
+						}),
+						F && Array.from({ length: 3 }).map((e, t) => /* @__PURE__ */ b(le, { className: "h-32 w-full rounded-lg" }, t)),
+						!F && !L && Z.length === 0 && /* @__PURE__ */ b(c, { children: /* @__PURE__ */ b(l, {
+							className: "p-0",
+							children: /* @__PURE__ */ b(C, {
+								illustration: P.trim() || $ ? "empty-search" : "empty-people",
+								title: P.trim() || $ ? "No providers match your filters" : "No providers yet",
+								description: P.trim() || $ ? "Adjust your search or filters to find logistics partners." : "Verified logistics service providers will appear here as they join the marketplace."
+							})
+						}) }),
+						!F && !L && Z.map((t) => {
+							let n = xe === t.id, r = Ce(t.id);
+							return /* @__PURE__ */ x(c, { children: [/* @__PURE__ */ b("button", {
+								type: "button",
+								"aria-expanded": n,
+								className: "w-full text-left",
+								onClick: () => J(n ? null : t.id),
+								children: /* @__PURE__ */ b(l, {
+									className: "p-6",
+									children: /* @__PURE__ */ x("div", {
+										className: "flex items-start justify-between gap-3",
+										children: [/* @__PURE__ */ x("div", {
+											className: "min-w-0",
+											children: [
+												/* @__PURE__ */ x("div", {
+													className: "flex items-center gap-2 flex-wrap",
+													children: [
+														/* @__PURE__ */ b("h4", {
+															className: "font-semibold text-lg",
+															children: t.name
+														}),
+														t.isVerified && /* @__PURE__ */ b(o, {
+															variant: "default",
+															children: "Verified"
+														}),
+														/* @__PURE__ */ b(o, {
+															variant: t.isActive ? "default" : "secondary",
+															children: t.isActive ? "active" : "inactive"
+														})
+													]
+												}),
+												/* @__PURE__ */ b("p", {
+													className: "text-text-secondary mt-1",
+													children: t.description
+												}),
+												/* @__PURE__ */ x("div", {
+													className: "flex items-center gap-4 mt-3 text-sm text-text-secondary",
+													children: [
+														/* @__PURE__ */ x("span", {
+															className: "flex items-center gap-1",
+															children: [
+																/* @__PURE__ */ b(ie, {
+																	size: 14,
+																	className: "text-status-warning-text fill-current"
+																}),
+																" ",
+																t.rating ?? 0
+															]
+														}),
+														/* @__PURE__ */ x("span", {
+															className: "flex items-center gap-1",
+															children: [
+																/* @__PURE__ */ b(ne, { size: 14 }),
+																" ",
+																t.type
+															]
+														}),
+														/* @__PURE__ */ x("span", {
+															className: "flex items-center gap-1",
+															children: [/* @__PURE__ */ b(te, { size: 14 }), " Listed"]
+														})
+													]
+												})
+											]
+										}), /* @__PURE__ */ x("div", {
+											className: "text-right shrink-0",
+											children: [
+												/* @__PURE__ */ b("p", {
+													className: "text-sm text-text-secondary",
+													children: "Services"
+												}),
+												/* @__PURE__ */ b("p", {
+													className: "text-lg font-bold",
+													children: r.length
+												}),
+												/* @__PURE__ */ b("span", {
+													className: "mt-1 inline-flex items-center gap-1 text-xs text-primary",
+													children: n ? /* @__PURE__ */ x(y, { children: ["Hide ", /* @__PURE__ */ b(ee, { size: 14 })] }) : /* @__PURE__ */ x(y, { children: ["View ", /* @__PURE__ */ b(e, { size: 14 })] })
+												})
+											]
+										})]
+									})
+								})
+							}), n && /* @__PURE__ */ x("div", {
+								className: "border-t border-border-seam px-6 py-4 space-y-3",
+								children: [/* @__PURE__ */ x("p", {
+									className: "text-sm font-medium text-text-secondary",
+									children: ["Offerings from ", t.name]
+								}), r.length === 0 ? /* @__PURE__ */ b("p", {
+									className: "text-sm text-text-secondary",
+									children: "This provider hasn't listed any offerings yet."
+								}) : r.map((e) => /* @__PURE__ */ x("div", {
+									className: "flex items-center justify-between gap-3 rounded-lg border border-border-seam p-3",
+									children: [/* @__PURE__ */ x("div", {
+										className: "min-w-0",
+										children: [/* @__PURE__ */ b("p", {
+											className: "font-medium truncate",
+											children: e.name
+										}), /* @__PURE__ */ b("p", {
+											className: "text-sm text-text-secondary truncate",
+											children: e.category ?? "general"
+										})]
+									}), /* @__PURE__ */ x("div", {
+										className: "text-right shrink-0",
+										children: [/* @__PURE__ */ b("p", {
+											className: "font-bold",
+											children: h(e.price)
+										}), /* @__PURE__ */ b("p", {
+											className: "text-xs text-text-secondary",
+											children: e.currency
+										})]
+									})]
+								}, e.id))]
+							})] }, t.id);
+						}),
+						!F && !L && (M.length > 0 || z > 0) && /* @__PURE__ */ x("div", {
+							className: "flex flex-wrap items-center justify-between gap-3 pt-1",
+							children: [/* @__PURE__ */ x("span", {
+								className: "text-sm text-text-secondary",
+								children: [
+									"Showing ",
+									M.length === 0 ? 0 : z * w + 1,
+									" to",
+									" ",
+									z * w + M.length
+								]
+							}), /* @__PURE__ */ x("div", {
+								className: "flex items-center gap-1",
+								children: [
+									/* @__PURE__ */ b(s, {
+										variant: "outline",
+										size: "icon",
+										className: "h-8 w-8",
+										"aria-label": "Previous page",
+										onClick: () => {
+											J(null), B((e) => Math.max(0, e - 1));
+										},
+										disabled: z === 0,
+										children: /* @__PURE__ */ b(t, { className: "h-4 w-4" })
+									}),
+									/* @__PURE__ */ x("span", {
+										className: "px-3 text-sm",
+										children: ["Page ", z + 1]
+									}),
+									/* @__PURE__ */ b(s, {
+										variant: "outline",
+										size: "icon",
+										className: "h-8 w-8",
+										"aria-label": "Next page",
+										onClick: () => {
+											J(null), B((e) => e + 1);
+										},
+										disabled: !ve,
+										children: /* @__PURE__ */ b(n, { className: "h-4 w-4" })
+									})
+								]
+							})]
+						})
+					]
+				}), /* @__PURE__ */ x(S, {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ b("h3", {
+							className: "text-base font-semibold text-text-primary",
+							children: "Popular Services"
+						}),
+						Q.length === 0 && /* @__PURE__ */ b(C, {
+							illustration: P.trim() ? "empty-search" : "empty-generic",
+							title: P.trim() ? "No matching services" : "No services listed yet",
+							description: P.trim() ? "Adjust your search to discover service offerings." : "Service offerings from providers will be listed here."
+						}),
+						Q.map((e) => /* @__PURE__ */ x(c, { children: [/* @__PURE__ */ b(oe, { children: /* @__PURE__ */ b(se, {
+							className: "text-base",
+							children: e.name
+						}) }), /* @__PURE__ */ x(l, { children: [
+							/* @__PURE__ */ b("p", {
+								className: "text-sm text-text-secondary mb-3",
+								children: e.description
+							}),
+							/* @__PURE__ */ x("div", {
+								className: "flex flex-wrap gap-1 mb-3",
+								children: [/* @__PURE__ */ b(o, {
+									variant: "outline",
+									className: "text-xs",
+									children: e.category ?? "general"
+								}), /* @__PURE__ */ b(o, {
+									variant: "outline",
+									className: "text-xs",
+									children: e.provider?.name ?? "provider"
+								})]
+							}),
+							/* @__PURE__ */ x("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ b("span", {
+									className: "font-bold",
+									children: h(e.price)
+								}), /* @__PURE__ */ b("span", {
+									className: "text-sm text-text-secondary",
+									children: e.currency
+								})]
+							})
+						] })] }, e.id))
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { E as default };