@burdenoff/microfe-movethewheels 2026.1028.1 → 2026.1031.1

package/dist/pages/MarketplacePage.js

@@ -0,0 +1,503 @@
+import { BadgeCheck as e } from "../node_modules/lucide-react/dist/esm/icons/badge-check.js";
+import { ChevronDown as t } from "../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+import { ChevronUp as n } from "../node_modules/lucide-react/dist/esm/icons/chevron-up.js";
+import { Mail as r } from "../node_modules/lucide-react/dist/esm/icons/mail.js";
+import { MapPin as i } from "../node_modules/lucide-react/dist/esm/icons/map-pin.js";
+import { Package as a } from "../node_modules/lucide-react/dist/esm/icons/package.js";
+import { Pencil as o } from "../node_modules/lucide-react/dist/esm/icons/pencil.js";
+import { Phone as s } from "../node_modules/lucide-react/dist/esm/icons/phone.js";
+import { Plus as c } from "../node_modules/lucide-react/dist/esm/icons/plus.js";
+import { RefreshCw as l } from "../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
+import { Star as u } from "../node_modules/lucide-react/dist/esm/icons/star.js";
+import { Store as d } from "../node_modules/lucide-react/dist/esm/icons/store.js";
+import { Trash2 as f } from "../node_modules/lucide-react/dist/esm/icons/trash-2.js";
+import { Truck as p } from "../node_modules/lucide-react/dist/esm/icons/truck.js";
+import { Badge as m, Button as h, Card as g, CardContent as _, Input as v, Select as y, SelectContent as b, SelectItem as x, SelectTrigger as S, SelectValue as C, Skeleton as w } from "../components/ui.js";
+import { PageLayout as ee } from "../components/PageLayout.js";
+import { MetricCard as T, MetricGrid as te } from "../components/MetricCard.js";
+import { FormError as E } from "../components/FormError.js";
+import { Notice as ne, useNotice as re } from "../components/Notice.js";
+import { formatCurrency as D } from "../utils/formatters.js";
+import { useDebouncedValue as ie } from "../hooks/useDebouncedValue.js";
+import { PROVIDER_TYPES as ae, humanizeEnum as O, useMarketplaceActions as oe, useMarketplaceStats as se, useProviderOfferings as k, useServiceProviders as ce, useShipmentOptions as A } from "../hooks/useMarketplace.js";
+import { AssignShipmentDialog as le, OfferingDialog as ue, ProviderDialog as de } from "../components/marketplace/MarketplaceDialogs.js";
+import { useState as j } from "react";
+import { jsx as M, jsxs as N } from "react/jsx-runtime";
+import { CTAOverflowMenu as fe, PagePurpose as pe } from "@burdenoff/fe-libs/ui";
+//#region src/movethewheels/pages/MarketplacePage.tsx
+var P = 12, F = "ALL";
+function I(e) {
+	return e === "AVAILABLE" ? "default" : e === "LIMITED" ? "secondary" : "outline";
+}
+function L({ provider: e, refreshKey: t, onAdd: n, onEdit: r, onDelete: i }) {
+	let { offerings: a, isLoading: s, error: l } = k(e.id, t), { total: u } = A({
+		carrierId: e.id,
+		limit: 1
+	});
+	return /* @__PURE__ */ N("div", {
+		className: "mt-4 space-y-3 border-t border-border-subtle pt-4",
+		children: [
+			/* @__PURE__ */ N("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ M("p", {
+					className: "text-sm font-medium",
+					children: "Offerings"
+				}), /* @__PURE__ */ N("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ N("span", {
+						className: "text-xs text-text-secondary",
+						children: [
+							"Carrier on ",
+							u,
+							" shipment",
+							u === 1 ? "" : "s"
+						]
+					}), /* @__PURE__ */ N(h, {
+						size: "sm",
+						variant: "outline",
+						onClick: n,
+						children: [/* @__PURE__ */ M(c, {
+							size: 14,
+							className: "mr-1"
+						}), "Add offering"]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ M(E, { message: l?.message }),
+			s ? /* @__PURE__ */ M(w, { className: "h-12 w-full" }) : a.length === 0 ? /* @__PURE__ */ M("p", {
+				className: "text-sm text-text-secondary",
+				children: "No offerings yet. Add the lanes, services and indicative prices this provider offers."
+			}) : /* @__PURE__ */ M("ul", {
+				className: "space-y-2",
+				children: a.map((e) => /* @__PURE__ */ N("li", {
+					className: "flex flex-wrap items-start justify-between gap-3 rounded-lg bg-bg-sunken px-3 py-2",
+					children: [/* @__PURE__ */ N("div", {
+						className: "min-w-0",
+						children: [
+							/* @__PURE__ */ N("p", {
+								className: "text-sm font-medium",
+								children: [e.name, e.isActive ? null : /* @__PURE__ */ M("span", {
+									className: "ml-2 text-xs text-text-tertiary",
+									children: "(inactive)"
+								})]
+							}),
+							/* @__PURE__ */ N("p", {
+								className: "text-xs text-text-secondary",
+								children: [O(e.category), e.transitDays == null ? "" : ` · ${e.transitDays} day transit`]
+							}),
+							e.description ? /* @__PURE__ */ M("p", {
+								className: "mt-1 text-xs text-text-secondary",
+								children: e.description
+							}) : null
+						]
+					}), /* @__PURE__ */ N("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ M("span", {
+								className: "text-sm font-medium",
+								children: e.price == null ? "Price on request" : `${D(e.price, e.currency)}${e.pricingUnit ? ` / ${e.pricingUnit}` : ""}`
+							}),
+							/* @__PURE__ */ M(m, {
+								variant: I(e.availability),
+								children: O(e.availability)
+							}),
+							/* @__PURE__ */ M(h, {
+								size: "icon",
+								variant: "ghost",
+								"aria-label": `Edit ${e.name}`,
+								onClick: () => r(e),
+								children: /* @__PURE__ */ M(o, { size: 14 })
+							}),
+							/* @__PURE__ */ M(h, {
+								size: "icon",
+								variant: "ghost",
+								"aria-label": `Remove ${e.name}`,
+								onClick: () => i(e),
+								children: /* @__PURE__ */ M(f, { size: 14 })
+							})
+						]
+					})]
+				}, e.id))
+			})
+		]
+	});
+}
+function me({ provider: a, expanded: c, refreshKey: l, onToggle: d, onEdit: v, onDelete: y, onAssign: b, onAddOffering: x, onEditOffering: S, onDeleteOffering: C }) {
+	return /* @__PURE__ */ M(g, {
+		"data-testid": "mtw-provider-card",
+		children: /* @__PURE__ */ N(_, {
+			className: "p-5",
+			children: [
+				/* @__PURE__ */ N("div", {
+					className: "flex flex-wrap items-start justify-between gap-3",
+					children: [/* @__PURE__ */ N("div", {
+						className: "min-w-0 space-y-1",
+						children: [
+							/* @__PURE__ */ N("div", {
+								className: "flex flex-wrap items-center gap-2",
+								children: [
+									/* @__PURE__ */ M("h3", {
+										className: "text-base font-semibold",
+										children: a.name
+									}),
+									a.isVerified ? /* @__PURE__ */ N(m, {
+										variant: "default",
+										className: "gap-1",
+										children: [/* @__PURE__ */ M(e, { size: 12 }), "Verified"]
+									}) : /* @__PURE__ */ M(m, {
+										variant: "outline",
+										children: "Unverified"
+									}),
+									a.isActive ? null : /* @__PURE__ */ M(m, {
+										variant: "secondary",
+										children: "Inactive"
+									})
+								]
+							}),
+							/* @__PURE__ */ N("p", {
+								className: "text-sm text-text-secondary",
+								children: [O(a.type), a.rating == null ? null : /* @__PURE__ */ N("span", {
+									className: "ml-2 inline-flex items-center gap-1",
+									children: [/* @__PURE__ */ M(u, {
+										size: 13,
+										className: "fill-current text-status-warning-text"
+									}), a.rating.toFixed(1)]
+								})]
+							}),
+							a.description ? /* @__PURE__ */ M("p", {
+								className: "text-sm text-text-secondary",
+								children: a.description
+							}) : null
+						]
+					}), /* @__PURE__ */ N("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ N(h, {
+								size: "sm",
+								onClick: b,
+								children: [/* @__PURE__ */ M(p, {
+									size: 14,
+									className: "mr-1"
+								}), "Assign to shipment"]
+							}),
+							/* @__PURE__ */ M(h, {
+								size: "icon",
+								variant: "ghost",
+								"aria-label": `Edit ${a.name}`,
+								onClick: v,
+								children: /* @__PURE__ */ M(o, { size: 16 })
+							}),
+							/* @__PURE__ */ M(h, {
+								size: "icon",
+								variant: "ghost",
+								"aria-label": `Remove ${a.name}`,
+								onClick: y,
+								children: /* @__PURE__ */ M(f, { size: 16 })
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ N("div", {
+					className: "mt-3 flex flex-wrap gap-x-5 gap-y-1 text-xs text-text-secondary",
+					children: [
+						a.serviceAreas.length > 0 ? /* @__PURE__ */ N("span", {
+							className: "inline-flex items-center gap-1",
+							children: [/* @__PURE__ */ M(i, { size: 12 }), a.serviceAreas.join(", ")]
+						}) : null,
+						a.contact.email ? /* @__PURE__ */ N("span", {
+							className: "inline-flex items-center gap-1",
+							children: [/* @__PURE__ */ M(r, { size: 12 }), a.contact.email]
+						}) : null,
+						a.contact.phone ? /* @__PURE__ */ N("span", {
+							className: "inline-flex items-center gap-1",
+							children: [/* @__PURE__ */ M(s, { size: 12 }), a.contact.phone]
+						}) : null
+					]
+				}),
+				a.services.length > 0 ? /* @__PURE__ */ M("div", {
+					className: "mt-3 flex flex-wrap gap-1.5",
+					children: a.services.map((e) => /* @__PURE__ */ M(m, {
+						variant: "secondary",
+						children: e
+					}, e))
+				}) : null,
+				/* @__PURE__ */ N("button", {
+					type: "button",
+					className: "mt-3 inline-flex items-center gap-1 text-sm font-medium text-action-primary-text",
+					onClick: d,
+					"aria-expanded": c,
+					children: [
+						M(c ? n : t, { size: 14 }),
+						a.offeringsCount,
+						" offering",
+						a.offeringsCount === 1 ? "" : "s"
+					]
+				}),
+				c ? /* @__PURE__ */ M(L, {
+					provider: a,
+					refreshKey: l,
+					onAdd: x,
+					onEdit: S,
+					onDelete: C
+				}) : null
+			]
+		})
+	});
+}
+function R() {
+	let t = oe(), { message: n, notify: r } = re(), [i, o] = j(null), [s, f] = j(""), p = ie(s), [m, D] = j(F), [k, A] = j(!1), [I, L] = j(0), [R, he] = j(0), [ge, z] = j(null), [B, V] = j({
+		open: !1,
+		provider: null
+	}), [H, U] = j({
+		open: !1,
+		provider: null,
+		offering: null
+	}), [W, G] = j({
+		open: !1,
+		provider: null
+	}), { providers: K, total: q, isLoading: _e, error: J, refetch: ve } = ce({
+		filters: {
+			search: p,
+			type: m === F ? void 0 : m,
+			isVerified: k ? !0 : void 0
+		},
+		limit: P,
+		offset: I * P
+	}), Y = se(R), X = Math.max(1, Math.ceil(q / P)), Z = () => {
+		he((e) => e + 1), ve();
+	}, Q = (e) => {
+		o(null), r(e), Z();
+	}, ye = async (e) => {
+		if (window.confirm(`Remove ${e.name} and its offerings from the marketplace? Shipments it already carries keep it as their carrier.`)) try {
+			await t.deleteProvider(e.id), Q(`Removed ${e.name}.`);
+		} catch (e) {
+			o(e instanceof Error ? e.message : "Could not remove the provider.");
+		}
+	}, be = async (e) => {
+		if (window.confirm(`Remove the offering "${e.name}"?`)) try {
+			await t.deleteOffering(e.id), Q(`Removed ${e.name}.`);
+		} catch (e) {
+			o(e instanceof Error ? e.message : "Could not remove the offering.");
+		}
+	}, $ = !!p.trim() || m !== F || k;
+	return /* @__PURE__ */ N(ee, {
+		title: "Marketplace",
+		subtitle: Y ? `${Y.providers} service providers` : "Service providers",
+		icon: /* @__PURE__ */ M(d, { size: 24 }),
+		headerActions: /* @__PURE__ */ M(fe, {
+			primary: {
+				label: "Add provider",
+				icon: /* @__PURE__ */ M(c, { size: 16 }),
+				onSelect: () => V({
+					open: !0,
+					provider: null
+				})
+			},
+			actions: [{
+				label: "Refresh",
+				icon: /* @__PURE__ */ M(l, { size: 16 }),
+				onSelect: Z
+			}]
+		}),
+		children: [
+			/* @__PURE__ */ M(pe, {
+				icon: /* @__PURE__ */ M(d, { size: 18 }),
+				children: "Your directory of vetted carriers, 3PLs, warehouses and specialists. When you are short of capacity, find a provider here and make it a shipment's carrier instead of buying assets."
+			}),
+			/* @__PURE__ */ M(ne, { message: n }),
+			/* @__PURE__ */ M(E, { message: i }),
+			/* @__PURE__ */ N(te, {
+				columns: 4,
+				children: [
+					/* @__PURE__ */ M(T, {
+						label: "Providers",
+						value: Y?.providers ?? "—",
+						icon: /* @__PURE__ */ M(d, { size: 20 }),
+						accent: "brand"
+					}),
+					/* @__PURE__ */ M(T, {
+						label: "Verified",
+						value: Y?.verifiedProviders ?? "—",
+						icon: /* @__PURE__ */ M(e, { size: 20 }),
+						accent: "success"
+					}),
+					/* @__PURE__ */ M(T, {
+						label: "Offerings",
+						value: Y?.offerings ?? "—",
+						icon: /* @__PURE__ */ M(a, { size: 20 }),
+						accent: "blue"
+					}),
+					/* @__PURE__ */ M(T, {
+						label: "Avg. rating",
+						value: Y?.avgRating == null ? "—" : Y.avgRating.toFixed(1),
+						icon: /* @__PURE__ */ M(u, { size: 20 }),
+						accent: "warning"
+					})
+				]
+			}),
+			/* @__PURE__ */ N("div", {
+				className: "flex flex-col gap-3 sm:flex-row sm:items-center",
+				children: [
+					/* @__PURE__ */ M(v, {
+						"aria-label": "Search providers",
+						placeholder: "Search by name, service or area…",
+						value: s,
+						onChange: (e) => {
+							f(e.target.value), L(0);
+						},
+						className: "sm:max-w-sm"
+					}),
+					/* @__PURE__ */ N(y, {
+						value: m,
+						onValueChange: (e) => {
+							D(e), L(0);
+						},
+						children: [/* @__PURE__ */ M(S, {
+							"aria-label": "Provider type",
+							className: "sm:w-56",
+							children: /* @__PURE__ */ M(C, {})
+						}), /* @__PURE__ */ N(b, { children: [/* @__PURE__ */ M(x, {
+							value: F,
+							children: "All provider types"
+						}), ae.map((e) => /* @__PURE__ */ M(x, {
+							value: e,
+							children: O(e)
+						}, e))] })]
+					}),
+					/* @__PURE__ */ N(h, {
+						variant: k ? "default" : "outline",
+						onClick: () => {
+							A((e) => !e), L(0);
+						},
+						"aria-pressed": k,
+						children: [/* @__PURE__ */ M(e, {
+							size: 16,
+							className: "mr-1.5"
+						}), "Verified only"]
+					})
+				]
+			}),
+			/* @__PURE__ */ M(E, { message: J?.message }),
+			_e && K.length === 0 ? /* @__PURE__ */ N("div", {
+				className: "grid gap-4",
+				children: [/* @__PURE__ */ M(w, { className: "h-32 w-full" }), /* @__PURE__ */ M(w, { className: "h-32 w-full" })]
+			}) : K.length === 0 && !J ? /* @__PURE__ */ M(g, { children: /* @__PURE__ */ N(_, {
+				className: "flex flex-col items-center gap-3 p-10 text-center",
+				children: [
+					/* @__PURE__ */ M(d, {
+						size: 32,
+						className: "text-text-tertiary"
+					}),
+					/* @__PURE__ */ M("p", {
+						className: "font-medium",
+						children: $ ? "No providers match these filters" : "No providers yet"
+					}),
+					/* @__PURE__ */ M("p", {
+						className: "max-w-md text-sm text-text-secondary",
+						children: $ ? "Try a different search or clear the filters." : "Add the carriers, 3PLs and warehouses you work with so your team can find capacity in one place."
+					}),
+					$ ? null : /* @__PURE__ */ N(h, {
+						onClick: () => V({
+							open: !0,
+							provider: null
+						}),
+						children: [/* @__PURE__ */ M(c, {
+							size: 16,
+							className: "mr-1.5"
+						}), "Add provider"]
+					})
+				]
+			}) }) : /* @__PURE__ */ M("div", {
+				className: "grid gap-4",
+				children: K.map((e) => /* @__PURE__ */ M(me, {
+					provider: e,
+					expanded: ge === e.id,
+					refreshKey: R,
+					onToggle: () => z((t) => t === e.id ? null : e.id),
+					onEdit: () => V({
+						open: !0,
+						provider: e
+					}),
+					onDelete: () => void ye(e),
+					onAssign: () => G({
+						open: !0,
+						provider: e
+					}),
+					onAddOffering: () => U({
+						open: !0,
+						provider: e,
+						offering: null
+					}),
+					onEditOffering: (t) => U({
+						open: !0,
+						provider: e,
+						offering: t
+					}),
+					onDeleteOffering: (e) => void be(e)
+				}, e.id))
+			}),
+			q > P ? /* @__PURE__ */ N("div", {
+				className: "flex items-center justify-between text-sm",
+				children: [/* @__PURE__ */ N("span", {
+					className: "text-text-secondary",
+					children: [
+						"Page ",
+						I + 1,
+						" of ",
+						X,
+						" · ",
+						q,
+						" providers"
+					]
+				}), /* @__PURE__ */ N("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ M(h, {
+						variant: "outline",
+						size: "sm",
+						disabled: I === 0,
+						onClick: () => L((e) => e - 1),
+						children: "Previous"
+					}), /* @__PURE__ */ M(h, {
+						variant: "outline",
+						size: "sm",
+						disabled: I + 1 >= X,
+						onClick: () => L((e) => e + 1),
+						children: "Next"
+					})]
+				})]
+			}) : null,
+			/* @__PURE__ */ M(de, {
+				open: B.open,
+				provider: B.provider,
+				onOpenChange: (e) => V((t) => ({
+					...t,
+					open: e
+				})),
+				onDone: Q
+			}),
+			/* @__PURE__ */ M(ue, {
+				open: H.open,
+				provider: H.provider,
+				offering: H.offering,
+				onOpenChange: (e) => U((t) => ({
+					...t,
+					open: e
+				})),
+				onDone: (e) => {
+					H.provider && z(H.provider.id), Q(e);
+				}
+			}),
+			/* @__PURE__ */ M(le, {
+				open: W.open,
+				provider: W.provider,
+				onOpenChange: (e) => G((t) => ({
+					...t,
+					open: e
+				})),
+				onDone: Q
+			})
+		]
+	});
+}
+//#endregion
+export { R as default };