@burdenoff/microfe-crewfoundry 2026.704.5 → 2026.704.7

package/dist/crewfoundry/pages/MarketplaceMarketplaceServicesPagePage.js

@@ -1,65 +1,110 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { formatEnumLabel as t } from "../utils/formatEnumLabel.js";
-import { useState as n } from "react";
-import { Search as r, Star as i } from "lucide-react";
-import { useNavigate as a } from "react-router-dom";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Badge as c, CardContent as l, GlassCard as u, GradientText as d, IllustratedEmptyState as f, Input as p, PagePurpose as m, Pagination as h, ResponsiveTable as g } from "@burdenoff/fe-libs/ui";
-import { usePagination as _ } from "@burdenoff/fe-libs/shared/hooks";
+import { getInitials as n } from "../components/viz/lib/format.js";
+import { RatingStars as r } from "../components/viz/RatingStars.js";
+import { SegmentedTabs as i } from "../components/viz/SegmentedTabs.js";
+import "../components/viz/index.js";
+import { useEffect as a, useMemo as o, useState as s } from "react";
+import { Search as c } from "lucide-react";
+import { useNavigate as l } from "react-router-dom";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Badge as f, CardContent as p, GlassCard as m, GradientText as h, IllustratedEmptyState as g, Input as _, PagePurpose as v, Pagination as y, ResponsiveTable as b } from "@burdenoff/fe-libs/ui";
+import { usePagination as x } from "@burdenoff/fe-libs/shared/hooks";
 //#region src/crewfoundry/pages/MarketplaceMarketplaceServicesPagePage.tsx
-function v() {
-	let v = a(), { marketplaceServices: y } = e(), [b, x] = n(""), { page: S, pageSize: C, offset: w, setPage: T } = _({ initialPageSize: 10 }), E = y.filter((e) => `${e.title} ${e.provider} ${e.category}`.toLowerCase().includes(b.toLowerCase())), D = E.slice(w, w + C);
-	return /* @__PURE__ */ s("div", {
+function S() {
+	let S = l(), { marketplaceServices: C } = e(), [w, T] = s(""), [E, D] = s("all"), { page: O, pageSize: k, offset: A, setPage: j } = x({ initialPageSize: 10 }), M = o(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of C) e.set(t.category, (e.get(t.category) ?? 0) + 1);
+		let t = [{
+			id: "all",
+			label: "All",
+			count: C.length
+		}];
+		for (let [n, r] of [...e.entries()].sort((e, t) => e[0].localeCompare(t[0]))) t.push({
+			id: n,
+			label: n,
+			count: r
+		});
+		return t;
+	}, [C]), N = C.filter((e) => E !== "all" && e.category !== E ? !1 : `${e.title} ${e.provider} ${e.category}`.toLowerCase().includes(w.toLowerCase())), P = N.slice(A, A + k);
+	return a(() => {
+		j(1);
+	}, [
+		w,
+		E,
+		j
+	]), /* @__PURE__ */ d("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ s("div", { children: [
-				/* @__PURE__ */ o("h1", {
+			/* @__PURE__ */ d("div", { children: [
+				/* @__PURE__ */ u("h1", {
 					className: "text-2xl font-semibold",
-					children: /* @__PURE__ */ o(d, { children: "Browse Services" })
+					children: /* @__PURE__ */ u(h, { children: "Browse Services" })
 				}),
-				/* @__PURE__ */ s("p", {
+				/* @__PURE__ */ d("p", {
 					className: "text-sm text-text-secondary",
-					children: [y.length, " services available"]
+					children: [C.length, " services available"]
 				}),
-				/* @__PURE__ */ o(m, {
+				/* @__PURE__ */ u(v, {
 					className: "mt-1",
 					children: "Explore services offered on the marketplace — search and compare offerings to find exactly the help your project needs."
 				})
 			] }),
-			/* @__PURE__ */ s("div", {
-				className: "relative max-w-sm",
-				children: [/* @__PURE__ */ o(r, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ o(p, {
-					placeholder: "Search services...",
-					className: "pl-9",
-					value: b,
-					onChange: (e) => x(e.target.value)
+			/* @__PURE__ */ d("div", {
+				className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
+				children: [/* @__PURE__ */ d("div", {
+					className: "relative w-full max-w-sm",
+					children: [/* @__PURE__ */ u(c, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ u(_, {
+						placeholder: "Search services...",
+						className: "pl-9",
+						value: w,
+						onChange: (e) => T(e.target.value)
+					})]
+				}), /* @__PURE__ */ u("div", {
+					className: "-mx-1 overflow-x-auto px-1 pb-1",
+					children: /* @__PURE__ */ u(i, {
+						tabs: M,
+						value: E,
+						onChange: D,
+						"aria-label": "Filter services by category"
+					})
 				})]
 			}),
-			/* @__PURE__ */ o(u, {
+			/* @__PURE__ */ u(m, {
 				treatment: "glass",
 				glow: !0,
 				className: "border-border-seam",
-				children: /* @__PURE__ */ o(l, {
+				children: /* @__PURE__ */ u(p, {
 					className: "p-4",
-					children: /* @__PURE__ */ o(g, {
+					children: /* @__PURE__ */ u(b, {
 						columns: [
 							{
 								key: "service",
 								header: "Service",
 								priority: "primary",
-								cell: (e) => /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("p", {
-									className: "font-medium",
-									children: e.title
-								}), /* @__PURE__ */ s("p", {
-									className: "text-xs text-text-secondary truncate",
-									children: [e.description.slice(0, 60), e.description.length > 60 ? "…" : ""]
-								})] })
+								cell: (e) => /* @__PURE__ */ d("div", {
+									className: "flex items-center gap-2.5",
+									children: [/* @__PURE__ */ u("span", {
+										className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-action-primary-bg text-[11px] font-semibold text-action-primary-text",
+										"aria-hidden": "true",
+										children: n(e.provider)
+									}), /* @__PURE__ */ d("div", {
+										className: "min-w-0",
+										children: [/* @__PURE__ */ u("p", {
+											className: "font-medium",
+											children: e.title
+										}), /* @__PURE__ */ d("p", {
+											className: "truncate text-xs text-text-secondary",
+											children: [e.description.slice(0, 60), e.description.length > 60 ? "…" : ""]
+										})]
+									})]
+								})
 							},
 							{
 								key: "provider",
 								header: "Provider",
 								priority: "secondary",
-								cell: (e) => /* @__PURE__ */ o("span", {
+								cell: (e) => /* @__PURE__ */ u("span", {
 									className: "text-text-secondary",
 									children: e.provider
 								})
@@ -68,7 +113,7 @@ function v() {
 								key: "category",
 								header: "Category",
 								priority: "secondary",
-								cell: (e) => /* @__PURE__ */ o(c, {
+								cell: (e) => /* @__PURE__ */ u(f, {
 									variant: "outline",
 									className: "w-fit h-fit text-[10px]",
 									children: e.category
@@ -78,7 +123,7 @@ function v() {
 								key: "price",
 								header: "Price",
 								priority: "secondary",
-								cell: (e) => /* @__PURE__ */ s("span", {
+								cell: (e) => /* @__PURE__ */ d("span", {
 									className: "font-medium",
 									children: [
 										"$",
@@ -92,32 +137,27 @@ function v() {
 								key: "rating",
 								header: "Rating",
 								priority: "secondary",
-								cell: (e) => /* @__PURE__ */ s("span", {
-									className: "flex items-center gap-1",
-									children: [
-										/* @__PURE__ */ o(i, { className: "h-3 w-3 text-status-warning-text" }),
-										e.rating,
-										" (",
-										e.reviews,
-										")"
-									]
+								cell: (e) => /* @__PURE__ */ u(r, {
+									value: e.rating,
+									count: e.reviews,
+									size: 12
 								})
 							},
 							{
 								key: "status",
 								header: "Status",
 								priority: "secondary",
-								cell: (e) => /* @__PURE__ */ o(c, {
+								cell: (e) => /* @__PURE__ */ u(f, {
 									variant: e.status === "active" ? "default" : "secondary",
 									className: "text-[10px]",
 									children: t(e.status)
 								})
 							}
 						],
-						data: D,
+						data: P,
 						rowKey: (e) => e.id,
-						onRowClick: (e) => v(`../marketplace/service-details-page?id=${e.id}`),
-						emptyState: /* @__PURE__ */ o(f, {
+						onRowClick: (e) => S(`../marketplace/service-details-page?id=${e.id}`),
+						emptyState: /* @__PURE__ */ u(g, {
 							illustration: "empty-search",
 							title: "No services found",
 							description: "Try a different search term to find the help you need."
@@ -125,16 +165,16 @@ function v() {
 					})
 				})
 			}),
-			E.length > 0 ? /* @__PURE__ */ o(h, {
-				page: S,
-				pageSize: C,
-				totalItems: E.length,
-				onPageChange: T
+			N.length > 0 ? /* @__PURE__ */ u(y, {
+				page: O,
+				pageSize: k,
+				totalItems: N.length,
+				onPageChange: j
 			}) : null
 		]
 	});
 }
 //#endregion
-export { v as MarketplaceMarketplaceServicesPagePage };
+export { S as MarketplaceMarketplaceServicesPagePage };
 
 //# sourceMappingURL=MarketplaceMarketplaceServicesPagePage.js.map

package/dist/crewfoundry/pages/MarketplaceMarketplaceServicesPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarketplaceMarketplaceServicesPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/MarketplaceMarketplaceServicesPagePage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Badge,\n  CardContent,\n  GlassCard,\n  GradientText,\n  IllustratedEmptyState,\n  Input,\n  PagePurpose,\n  Pagination,\n  ResponsiveTable,\n  type ResponsiveTableColumn,\n} from '@burdenoff/fe-libs/ui';\nimport { usePagination } from '@burdenoff/fe-libs/shared/hooks';\nimport { Search, Star } from 'lucide-react';\nimport { useNavigate } from 'react-router-dom';\nimport { useCrewFoundryStore, type MarketplaceService } from '../store/crewfoundryStore';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\n\nexport function MarketplaceMarketplaceServicesPagePage() {\n  const navigate = useNavigate();\n  const { marketplaceServices } = useCrewFoundryStore();\n  const [search, setSearch] = useState('');\n  const { page, pageSize, offset, setPage } = usePagination({ initialPageSize: 10 });\n  const filtered = marketplaceServices.filter((s) =>\n    `${s.title} ${s.provider} ${s.category}`.toLowerCase().includes(search.toLowerCase())\n  );\n  const paged = filtered.slice(offset, offset + pageSize);\n\n  const columns: ResponsiveTableColumn<MarketplaceService>[] = [\n    {\n      key: 'service',\n      header: 'Service',\n      priority: 'primary',\n      cell: (svc) => (\n        <div>\n          <p className=\"font-medium\">{svc.title}</p>\n          <p className=\"text-xs text-text-secondary truncate\">\n            {svc.description.slice(0, 60)}\n            {svc.description.length > 60 ? '…' : ''}\n          </p>\n        </div>\n      ),\n    },\n    {\n      key: 'provider',\n      header: 'Provider',\n      priority: 'secondary',\n      cell: (svc) => <span className=\"text-text-secondary\">{svc.provider}</span>,\n    },\n    {\n      key: 'category',\n      header: 'Category',\n      priority: 'secondary',\n      cell: (svc) => (\n        <Badge variant=\"outline\" className=\"w-fit h-fit text-[10px]\">\n          {svc.category}\n        </Badge>\n      ),\n    },\n    {\n      key: 'price',\n      header: 'Price',\n      priority: 'secondary',\n      cell: (svc) => (\n        <span className=\"font-medium\">\n          ${svc.price.toLocaleString()}/{svc.priceType}\n        </span>\n      ),\n    },\n    {\n      key: 'rating',\n      header: 'Rating',\n      priority: 'secondary',\n      cell: (svc) => (\n        <span className=\"flex items-center gap-1\">\n          <Star className=\"h-3 w-3 text-status-warning-text\" />\n          {svc.rating} ({svc.reviews})\n        </span>\n      ),\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      priority: 'secondary',\n      cell: (svc) => (\n        <Badge variant={svc.status === 'active' ? 'default' : 'secondary'} className=\"text-[10px]\">\n          {formatEnumLabel(svc.status)}\n        </Badge>\n      ),\n    },\n  ];\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div>\n        <h1 className=\"text-2xl font-semibold\">\n          <GradientText>Browse Services</GradientText>\n        </h1>\n        <p className=\"text-sm text-text-secondary\">\n          {marketplaceServices.length} services available\n        </p>\n        <PagePurpose className=\"mt-1\">\n          Explore services offered on the marketplace — search and compare offerings to find exactly\n          the help your project needs.\n        </PagePurpose>\n      </div>\n      <div className=\"relative max-w-sm\">\n        <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n        <Input\n          placeholder=\"Search services...\"\n          className=\"pl-9\"\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n        />\n      </div>\n      <GlassCard treatment=\"glass\" glow className=\"border-border-seam\">\n        <CardContent className=\"p-4\">\n          <ResponsiveTable\n            columns={columns}\n            data={paged}\n            rowKey={(svc) => svc.id}\n            onRowClick={(svc) => navigate(`../marketplace/service-details-page?id=${svc.id}`)}\n            emptyState={\n              <IllustratedEmptyState\n                illustration=\"empty-search\"\n                title=\"No services found\"\n                description=\"Try a different search term to find the help you need.\"\n              />\n            }\n          />\n        </CardContent>\n      </GlassCard>\n      {filtered.length > 0 ? (\n        <Pagination\n          page={page}\n          pageSize={pageSize}\n          totalItems={filtered.length}\n          onPageChange={setPage}\n        />\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAmBA,SAAgB,IAAyC;CACvD,IAAM,IAAW,GAAa,EACxB,EAAE,2BAAwB,GAAqB,EAC/C,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,EAAE,SAAM,aAAU,WAAQ,eAAY,EAAc,EAAE,iBAAiB,IAAI,CAAC,EAC5E,IAAW,EAAoB,QAAQ,MAC3C,GAAG,EAAE,MAAM,GAAG,EAAE,SAAS,GAAG,EAAE,WAAW,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,CACtF,EACK,IAAQ,EAAS,MAAM,GAAQ,IAAS,EAAS;AAkEvD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,MAAD;KAAI,WAAU;eACZ,kBAAC,GAAD,EAAA,UAAc,mBAA8B,CAAA;KACzC,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eAAb,CACG,EAAoB,QAAO,sBAC1B;;IACJ,kBAAC,GAAD;KAAa,WAAU;eAAO;KAGhB,CAAA;IACV,EAAA,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,wEAAyE,CAAA,EAC3F,kBAAC,GAAD;KACE,aAAY;KACZ,WAAU;KACV,OAAO;KACP,WAAW,MAAM,EAAU,EAAE,OAAO,MAAM;KAC1C,CAAA,CACE;;GACN,kBAAC,GAAD;IAAW,WAAU;IAAQ,MAAA;IAAK,WAAU;cAC1C,kBAAC,GAAD;KAAa,WAAU;eACrB,kBAAC,GAAD;MACW,SA1F0C;OAC3D;QACE,KAAK;QACL,QAAQ;QACR,UAAU;QACV,OAAO,MACL,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAAe,EAAI;SAAU,CAAA,EAC1C,kBAAC,KAAD;SAAG,WAAU;mBAAb,CACG,EAAI,YAAY,MAAM,GAAG,GAAG,EAC5B,EAAI,YAAY,SAAS,KAAK,MAAM,GACnC;WACA,EAAA,CAAA;QAET;OACD;QACE,KAAK;QACL,QAAQ;QACR,UAAU;QACV,OAAO,MAAQ,kBAAC,QAAD;SAAM,WAAU;mBAAuB,EAAI;SAAgB,CAAA;QAC3E;OACD;QACE,KAAK;QACL,QAAQ;QACR,UAAU;QACV,OAAO,MACL,kBAAC,GAAD;SAAO,SAAQ;SAAU,WAAU;mBAChC,EAAI;SACC,CAAA;QAEX;OACD;QACE,KAAK;QACL,QAAQ;QACR,UAAU;QACV,OAAO,MACL,kBAAC,QAAD;SAAM,WAAU;mBAAhB;UAA8B;UAC1B,EAAI,MAAM,gBAAgB;UAAC;UAAE,EAAI;UAC9B;;QAEV;OACD;QACE,KAAK;QACL,QAAQ;QACR,UAAU;QACV,OAAO,MACL,kBAAC,QAAD;SAAM,WAAU;mBAAhB;UACE,kBAAC,GAAD,EAAM,WAAU,oCAAqC,CAAA;UACpD,EAAI;UAAO;UAAG,EAAI;UAAQ;UACtB;;QAEV;OACD;QACE,KAAK;QACL,QAAQ;QACR,UAAU;QACV,OAAO,MACL,kBAAC,GAAD;SAAO,SAAS,EAAI,WAAW,WAAW,YAAY;SAAa,WAAU;mBAC1E,EAAgB,EAAI,OAAO;SACtB,CAAA;QAEX;OACF;MA6BS,MAAM;MACN,SAAS,MAAQ,EAAI;MACrB,aAAa,MAAQ,EAAS,0CAA0C,EAAI,KAAK;MACjF,YACE,kBAAC,GAAD;OACE,cAAa;OACb,OAAM;OACN,aAAY;OACZ,CAAA;MAEJ,CAAA;KACU,CAAA;IACJ,CAAA;GACX,EAAS,SAAS,IACjB,kBAAC,GAAD;IACQ;IACI;IACV,YAAY,EAAS;IACrB,cAAc;IACd,CAAA,GACA;GACA"}
+{"version":3,"file":"MarketplaceMarketplaceServicesPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/MarketplaceMarketplaceServicesPagePage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport {\n  Badge,\n  CardContent,\n  GlassCard,\n  GradientText,\n  IllustratedEmptyState,\n  Input,\n  PagePurpose,\n  Pagination,\n  ResponsiveTable,\n  type ResponsiveTableColumn,\n} from '@burdenoff/fe-libs/ui';\nimport { usePagination } from '@burdenoff/fe-libs/shared/hooks';\nimport { Search } from 'lucide-react';\nimport { useNavigate } from 'react-router-dom';\nimport { useCrewFoundryStore, type MarketplaceService } from '../store/crewfoundryStore';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\nimport { RatingStars, SegmentedTabs, getInitials, type SegmentedTab } from '../components/viz';\n\nexport function MarketplaceMarketplaceServicesPagePage() {\n  const navigate = useNavigate();\n  const { marketplaceServices } = useCrewFoundryStore();\n  const [search, setSearch] = useState('');\n  const [category, setCategory] = useState('all');\n  const { page, pageSize, offset, setPage } = usePagination({ initialPageSize: 10 });\n\n  const categoryTabs = useMemo<SegmentedTab[]>(() => {\n    const counts = new Map<string, number>();\n    for (const svc of marketplaceServices) {\n      counts.set(svc.category, (counts.get(svc.category) ?? 0) + 1);\n    }\n    const tabs: SegmentedTab[] = [{ id: 'all', label: 'All', count: marketplaceServices.length }];\n    for (const [name, count] of [...counts.entries()].sort((a, b) => a[0].localeCompare(b[0]))) {\n      tabs.push({ id: name, label: name, count });\n    }\n    return tabs;\n  }, [marketplaceServices]);\n\n  const filtered = marketplaceServices.filter((s) => {\n    if (category !== 'all' && s.category !== category) {\n      return false;\n    }\n    return `${s.title} ${s.provider} ${s.category}`.toLowerCase().includes(search.toLowerCase());\n  });\n  const paged = filtered.slice(offset, offset + pageSize);\n\n  useEffect(() => {\n    setPage(1);\n  }, [search, category, setPage]);\n\n  const columns: ResponsiveTableColumn<MarketplaceService>[] = [\n    {\n      key: 'service',\n      header: 'Service',\n      priority: 'primary',\n      cell: (svc) => (\n        <div className=\"flex items-center gap-2.5\">\n          <span\n            className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-action-primary-bg text-[11px] font-semibold text-action-primary-text\"\n            aria-hidden=\"true\"\n          >\n            {getInitials(svc.provider)}\n          </span>\n          <div className=\"min-w-0\">\n            <p className=\"font-medium\">{svc.title}</p>\n            <p className=\"truncate text-xs text-text-secondary\">\n              {svc.description.slice(0, 60)}\n              {svc.description.length > 60 ? '…' : ''}\n            </p>\n          </div>\n        </div>\n      ),\n    },\n    {\n      key: 'provider',\n      header: 'Provider',\n      priority: 'secondary',\n      cell: (svc) => <span className=\"text-text-secondary\">{svc.provider}</span>,\n    },\n    {\n      key: 'category',\n      header: 'Category',\n      priority: 'secondary',\n      cell: (svc) => (\n        <Badge variant=\"outline\" className=\"w-fit h-fit text-[10px]\">\n          {svc.category}\n        </Badge>\n      ),\n    },\n    {\n      key: 'price',\n      header: 'Price',\n      priority: 'secondary',\n      cell: (svc) => (\n        <span className=\"font-medium\">\n          ${svc.price.toLocaleString()}/{svc.priceType}\n        </span>\n      ),\n    },\n    {\n      key: 'rating',\n      header: 'Rating',\n      priority: 'secondary',\n      cell: (svc) => <RatingStars value={svc.rating} count={svc.reviews} size={12} />,\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      priority: 'secondary',\n      cell: (svc) => (\n        <Badge variant={svc.status === 'active' ? 'default' : 'secondary'} className=\"text-[10px]\">\n          {formatEnumLabel(svc.status)}\n        </Badge>\n      ),\n    },\n  ];\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div>\n        <h1 className=\"text-2xl font-semibold\">\n          <GradientText>Browse Services</GradientText>\n        </h1>\n        <p className=\"text-sm text-text-secondary\">\n          {marketplaceServices.length} services available\n        </p>\n        <PagePurpose className=\"mt-1\">\n          Explore services offered on the marketplace — search and compare offerings to find exactly\n          the help your project needs.\n        </PagePurpose>\n      </div>\n      <div className=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n        <div className=\"relative w-full max-w-sm\">\n          <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n          <Input\n            placeholder=\"Search services...\"\n            className=\"pl-9\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n          />\n        </div>\n        <div className=\"-mx-1 overflow-x-auto px-1 pb-1\">\n          <SegmentedTabs\n            tabs={categoryTabs}\n            value={category}\n            onChange={setCategory}\n            aria-label=\"Filter services by category\"\n          />\n        </div>\n      </div>\n      <GlassCard treatment=\"glass\" glow className=\"border-border-seam\">\n        <CardContent className=\"p-4\">\n          <ResponsiveTable\n            columns={columns}\n            data={paged}\n            rowKey={(svc) => svc.id}\n            onRowClick={(svc) => navigate(`../marketplace/service-details-page?id=${svc.id}`)}\n            emptyState={\n              <IllustratedEmptyState\n                illustration=\"empty-search\"\n                title=\"No services found\"\n                description=\"Try a different search term to find the help you need.\"\n              />\n            }\n          />\n        </CardContent>\n      </GlassCard>\n      {filtered.length > 0 ? (\n        <Pagination\n          page={page}\n          pageSize={pageSize}\n          totalItems={filtered.length}\n          onPageChange={setPage}\n        />\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/crewfoundry/pages/MarketplaceProjectDetailsPagePage.js

@@ -3,11 +3,14 @@ import { formatEnumLabel as t } from "../utils/formatEnumLabel.js";
 import { Calendar as n, DollarSign as r, MessageSquare as i, Users as a } from "lucide-react";
 import { useLocation as o, useNavigate as s } from "react-router-dom";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Badge as u, Card as d, CardContent as f, EmphasisPanel as p, GradientText as m, IllustratedEmptyState as h, NextSteps as g, PagePurpose as _ } from "@burdenoff/fe-libs/ui";
+import { Badge as u, Card as d, CardContent as f, EmphasisPanel as p, GradientText as m, IllustratedEmptyState as h, NextSteps as g, PagePurpose as _, Spinner as v } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/MarketplaceProjectDetailsPagePage.tsx
-function v() {
-	let v = s(), y = o(), { projects: b } = e(), x = new URLSearchParams(y.search).get("id"), S = b.find((e) => e.id === x) ?? b[0];
-	return S ? /* @__PURE__ */ l("div", {
+function y() {
+	let y = s(), b = o(), { projects: x, initialized: S } = e(), C = new URLSearchParams(b.search).get("id"), w = x.find((e) => e.id === C) ?? x[0];
+	return !S && !w ? /* @__PURE__ */ c("div", {
+		className: "flex min-h-[60vh] items-center justify-center p-6",
+		children: /* @__PURE__ */ c(v, { size: "lg" })
+	}) : w ? /* @__PURE__ */ l("div", {
 		className: "space-y-6 p-6 max-w-4xl",
 		children: [
 			/* @__PURE__ */ l("div", {
@@ -15,19 +18,19 @@ function v() {
 				children: [/* @__PURE__ */ l("div", { children: [
 					/* @__PURE__ */ c("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ c(m, { children: S.name })
+						children: /* @__PURE__ */ c(m, { children: w.name })
 					}),
 					/* @__PURE__ */ c("p", {
 						className: "text-sm text-text-secondary",
-						children: S.description
+						children: w.description
 					}),
 					/* @__PURE__ */ c(_, {
 						className: "mt-2",
 						children: "The full picture of a marketplace project — scope, budget, timeline, and progress — so you can track delivery and stay aligned with the team doing the work."
 					})
 				] }), /* @__PURE__ */ c(u, {
-					variant: S.status === "active" ? "default" : "secondary",
-					children: t(S.status)
+					variant: w.status === "active" ? "default" : "secondary",
+					children: t(w.status)
 				})]
 			}),
 			/* @__PURE__ */ c(g, {
@@ -38,21 +41,21 @@ function v() {
 						label: "Message the team",
 						description: "Coordinate on scope, blockers, and next milestones.",
 						icon: /* @__PURE__ */ c(i, { className: "h-4 w-4" }),
-						onClick: () => v("../marketplace/messaging-page")
+						onClick: () => y("../marketplace/messaging-page")
 					},
 					{
 						id: "bookings",
 						label: "Review bookings",
 						description: "Check the engagements tied to this project.",
 						icon: /* @__PURE__ */ c(n, { className: "h-4 w-4" }),
-						onClick: () => v("../marketplace/booking-management-page")
+						onClick: () => y("../marketplace/booking-management-page")
 					},
 					{
 						id: "earnings",
 						label: "Track earnings",
 						description: "See payouts and balances connected to your work.",
 						icon: /* @__PURE__ */ c(r, { className: "h-4 w-4" }),
-						onClick: () => v("../marketplace/earnings-page")
+						onClick: () => y("../marketplace/earnings-page")
 					}
 				]
 			}),
@@ -67,7 +70,7 @@ function v() {
 								className: "text-lg font-bold",
 								children: [
 									"$",
-									(S.budget / 1e3).toFixed(0),
+									(w.budget / 1e3).toFixed(0),
 									"K"
 								]
 							}),
@@ -85,7 +88,7 @@ function v() {
 								className: "text-lg font-bold",
 								children: [
 									"$",
-									(S.spent / 1e3).toFixed(0),
+									(w.spent / 1e3).toFixed(0),
 									"K"
 								]
 							}),
@@ -101,7 +104,7 @@ function v() {
 							/* @__PURE__ */ c(a, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
 							/* @__PURE__ */ c("p", {
 								className: "text-lg font-bold",
-								children: S.teamName
+								children: w.teamName
 							}),
 							/* @__PURE__ */ c("p", {
 								className: "text-xs text-text-secondary",
@@ -115,7 +118,7 @@ function v() {
 							/* @__PURE__ */ c(n, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
 							/* @__PURE__ */ c("p", {
 								className: "text-lg font-bold",
-								children: S.endDate
+								children: w.endDate
 							}),
 							/* @__PURE__ */ c("p", {
 								className: "text-xs text-text-secondary",
@@ -135,19 +138,19 @@ function v() {
 					children: [/* @__PURE__ */ l("div", {
 						className: "flex justify-between text-sm",
 						children: [/* @__PURE__ */ l("span", { children: [
-							S.completedTasks,
+							w.completedTasks,
 							" of ",
-							S.tasks,
+							w.tasks,
 							" tasks"
 						] }), /* @__PURE__ */ l("span", {
 							className: "font-medium",
-							children: [S.progress, "%"]
+							children: [w.progress, "%"]
 						})]
 					}), /* @__PURE__ */ c("div", {
 						className: "h-3 bg-bg-sunken rounded overflow-hidden",
 						children: /* @__PURE__ */ c("div", {
 							className: "h-3 bg-action-primary-bg rounded",
-							style: { width: `${S.progress}%` }
+							style: { width: `${w.progress}%` }
 						})
 					})]
 				}),
@@ -159,28 +162,28 @@ function v() {
 							children: "Manager"
 						}), /* @__PURE__ */ c("p", {
 							className: "text-sm font-medium",
-							children: S.managerName
+							children: w.managerName
 						})] }),
 						/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
 							className: "text-xs text-text-secondary",
 							children: "Priority"
 						}), /* @__PURE__ */ c(u, {
-							variant: S.priority === "critical" ? "destructive" : S.priority === "high" ? "default" : "secondary",
-							children: t(S.priority)
+							variant: w.priority === "critical" ? "destructive" : w.priority === "high" ? "default" : "secondary",
+							children: t(w.priority)
 						})] }),
 						/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
 							className: "text-xs text-text-secondary",
 							children: "Start Date"
 						}), /* @__PURE__ */ c("p", {
 							className: "text-sm",
-							children: S.startDate
+							children: w.startDate
 						})] }),
 						/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
 							className: "text-xs text-text-secondary",
 							children: "End Date"
 						}), /* @__PURE__ */ c("p", {
 							className: "text-sm",
-							children: S.endDate
+							children: w.endDate
 						})] })
 					]
 				})
@@ -196,6 +199,6 @@ function v() {
 	});
 }
 //#endregion
-export { v as MarketplaceProjectDetailsPagePage };
+export { y as MarketplaceProjectDetailsPagePage };
 
 //# sourceMappingURL=MarketplaceProjectDetailsPagePage.js.map

package/dist/crewfoundry/pages/MarketplaceProjectDetailsPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarketplaceProjectDetailsPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/MarketplaceProjectDetailsPagePage.tsx"],"sourcesContent":["import {\n  Badge,\n  Card,\n  CardContent,\n  EmphasisPanel,\n  GradientText,\n  IllustratedEmptyState,\n  NextSteps,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { Calendar, DollarSign, MessageSquare, Users } from 'lucide-react';\nimport { useLocation, useNavigate } from 'react-router-dom';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\n\nexport function MarketplaceProjectDetailsPagePage() {\n  const navigate = useNavigate();\n  const location = useLocation();\n  const { projects } = useCrewFoundryStore();\n  const selectedId = new URLSearchParams(location.search).get('id');\n  const project = projects.find((p) => p.id === selectedId) ?? projects[0];\n  if (!project)\n    return (\n      <div className=\"p-6\">\n        <IllustratedEmptyState\n          illustration=\"empty-search\"\n          title=\"Project not found\"\n          description=\"This project is no longer available.\"\n        />\n      </div>\n    );\n\n  return (\n    <div className=\"space-y-6 p-6 max-w-4xl\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">\n            <GradientText>{project.name}</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">{project.description}</p>\n          <PagePurpose className=\"mt-2\">\n            The full picture of a marketplace project — scope, budget, timeline, and progress — so\n            you can track delivery and stay aligned with the team doing the work.\n          </PagePurpose>\n        </div>\n        <Badge variant={project.status === 'active' ? 'default' : 'secondary'}>\n          {formatEnumLabel(project.status)}\n        </Badge>\n      </div>\n\n      <NextSteps\n        storageKey=\"crewfoundry-marketplace-project-details\"\n        steps={[\n          {\n            id: 'message',\n            label: 'Message the team',\n            description: 'Coordinate on scope, blockers, and next milestones.',\n            icon: <MessageSquare className=\"h-4 w-4\" />,\n            onClick: () => navigate('../marketplace/messaging-page'),\n          },\n          {\n            id: 'bookings',\n            label: 'Review bookings',\n            description: 'Check the engagements tied to this project.',\n            icon: <Calendar className=\"h-4 w-4\" />,\n            onClick: () => navigate('../marketplace/booking-management-page'),\n          },\n          {\n            id: 'earnings',\n            label: 'Track earnings',\n            description: 'See payouts and balances connected to your work.',\n            icon: <DollarSign className=\"h-4 w-4\" />,\n            onClick: () => navigate('../marketplace/earnings-page'),\n          },\n        ]}\n      />\n\n      <div className=\"grid gap-4 md:grid-cols-4\">\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <DollarSign className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">${(project.budget / 1000).toFixed(0)}K</p>\n            <p className=\"text-xs text-text-secondary\">Budget</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <DollarSign className=\"h-5 w-5 mx-auto text-status-success-text mb-1\" />\n            <p className=\"text-lg font-bold\">${(project.spent / 1000).toFixed(0)}K</p>\n            <p className=\"text-xs text-text-secondary\">Spent</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Users className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">{project.teamName}</p>\n            <p className=\"text-xs text-text-secondary\">Team</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Calendar className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">{project.endDate}</p>\n            <p className=\"text-xs text-text-secondary\">Deadline</p>\n          </CardContent>\n        </Card>\n      </div>\n      <EmphasisPanel>\n        <div className=\"mb-2 text-lg font-semibold\">Progress</div>\n        <div className=\"space-y-2\">\n          <div className=\"flex justify-between text-sm\">\n            <span>\n              {project.completedTasks} of {project.tasks} tasks\n            </span>\n            <span className=\"font-medium\">{project.progress}%</span>\n          </div>\n          <div className=\"h-3 bg-bg-sunken rounded overflow-hidden\">\n            <div\n              className=\"h-3 bg-action-primary-bg rounded\"\n              style={{ width: `${project.progress}%` }}\n            />\n          </div>\n        </div>\n        <div className=\"grid grid-cols-2 gap-4 mt-4\">\n          <div>\n            <p className=\"text-xs text-text-secondary\">Manager</p>\n            <p className=\"text-sm font-medium\">{project.managerName}</p>\n          </div>\n          <div>\n            <p className=\"text-xs text-text-secondary\">Priority</p>\n            <Badge\n              variant={\n                project.priority === 'critical'\n                  ? 'destructive'\n                  : project.priority === 'high'\n                    ? 'default'\n                    : 'secondary'\n              }\n            >\n              {formatEnumLabel(project.priority)}\n            </Badge>\n          </div>\n          <div>\n            <p className=\"text-xs text-text-secondary\">Start Date</p>\n            <p className=\"text-sm\">{project.startDate}</p>\n          </div>\n          <div>\n            <p className=\"text-xs text-text-secondary\">End Date</p>\n            <p className=\"text-sm\">{project.endDate}</p>\n          </div>\n        </div>\n      </EmphasisPanel>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MarketplaceProjectDetailsPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/MarketplaceProjectDetailsPagePage.tsx"],"sourcesContent":["import {\n  Badge,\n  Card,\n  CardContent,\n  EmphasisPanel,\n  GradientText,\n  IllustratedEmptyState,\n  NextSteps,\n  PagePurpose,\n  Spinner,\n} from '@burdenoff/fe-libs/ui';\nimport { Calendar, DollarSign, MessageSquare, Users } from 'lucide-react';\nimport { useLocation, useNavigate } from 'react-router-dom';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\n\nexport function MarketplaceProjectDetailsPagePage() {\n  const navigate = useNavigate();\n  const location = useLocation();\n  const { projects, initialized } = useCrewFoundryStore();\n  const selectedId = new URLSearchParams(location.search).get('id');\n  const project = projects.find((p) => p.id === selectedId) ?? projects[0];\n  if (!initialized && !project) {\n    return (\n      <div className=\"flex min-h-[60vh] items-center justify-center p-6\">\n        <Spinner size=\"lg\" />\n      </div>\n    );\n  }\n\n  if (!project)\n    return (\n      <div className=\"p-6\">\n        <IllustratedEmptyState\n          illustration=\"empty-search\"\n          title=\"Project not found\"\n          description=\"This project is no longer available.\"\n        />\n      </div>\n    );\n\n  return (\n    <div className=\"space-y-6 p-6 max-w-4xl\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">\n            <GradientText>{project.name}</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">{project.description}</p>\n          <PagePurpose className=\"mt-2\">\n            The full picture of a marketplace project — scope, budget, timeline, and progress — so\n            you can track delivery and stay aligned with the team doing the work.\n          </PagePurpose>\n        </div>\n        <Badge variant={project.status === 'active' ? 'default' : 'secondary'}>\n          {formatEnumLabel(project.status)}\n        </Badge>\n      </div>\n\n      <NextSteps\n        storageKey=\"crewfoundry-marketplace-project-details\"\n        steps={[\n          {\n            id: 'message',\n            label: 'Message the team',\n            description: 'Coordinate on scope, blockers, and next milestones.',\n            icon: <MessageSquare className=\"h-4 w-4\" />,\n            onClick: () => navigate('../marketplace/messaging-page'),\n          },\n          {\n            id: 'bookings',\n            label: 'Review bookings',\n            description: 'Check the engagements tied to this project.',\n            icon: <Calendar className=\"h-4 w-4\" />,\n            onClick: () => navigate('../marketplace/booking-management-page'),\n          },\n          {\n            id: 'earnings',\n            label: 'Track earnings',\n            description: 'See payouts and balances connected to your work.',\n            icon: <DollarSign className=\"h-4 w-4\" />,\n            onClick: () => navigate('../marketplace/earnings-page'),\n          },\n        ]}\n      />\n\n      <div className=\"grid gap-4 md:grid-cols-4\">\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <DollarSign className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">${(project.budget / 1000).toFixed(0)}K</p>\n            <p className=\"text-xs text-text-secondary\">Budget</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <DollarSign className=\"h-5 w-5 mx-auto text-status-success-text mb-1\" />\n            <p className=\"text-lg font-bold\">${(project.spent / 1000).toFixed(0)}K</p>\n            <p className=\"text-xs text-text-secondary\">Spent</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Users className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">{project.teamName}</p>\n            <p className=\"text-xs text-text-secondary\">Team</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Calendar className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">{project.endDate}</p>\n            <p className=\"text-xs text-text-secondary\">Deadline</p>\n          </CardContent>\n        </Card>\n      </div>\n      <EmphasisPanel>\n        <div className=\"mb-2 text-lg font-semibold\">Progress</div>\n        <div className=\"space-y-2\">\n          <div className=\"flex justify-between text-sm\">\n            <span>\n              {project.completedTasks} of {project.tasks} tasks\n            </span>\n            <span className=\"font-medium\">{project.progress}%</span>\n          </div>\n          <div className=\"h-3 bg-bg-sunken rounded overflow-hidden\">\n            <div\n              className=\"h-3 bg-action-primary-bg rounded\"\n              style={{ width: `${project.progress}%` }}\n            />\n          </div>\n        </div>\n        <div className=\"grid grid-cols-2 gap-4 mt-4\">\n          <div>\n            <p className=\"text-xs text-text-secondary\">Manager</p>\n            <p className=\"text-sm font-medium\">{project.managerName}</p>\n          </div>\n          <div>\n            <p className=\"text-xs text-text-secondary\">Priority</p>\n            <Badge\n              variant={\n                project.priority === 'critical'\n                  ? 'destructive'\n                  : project.priority === 'high'\n                    ? 'default'\n                    : 'secondary'\n              }\n            >\n              {formatEnumLabel(project.priority)}\n            </Badge>\n          </div>\n          <div>\n            <p className=\"text-xs text-text-secondary\">Start Date</p>\n            <p className=\"text-sm\">{project.startDate}</p>\n          </div>\n          <div>\n            <p className=\"text-xs text-text-secondary\">End Date</p>\n            <p className=\"text-sm\">{project.endDate}</p>\n          </div>\n        </div>\n      </EmphasisPanel>\n    </div>\n  );\n}\n"],"mappings":"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"}