@burdenoff/microfe-crewfoundry 2026.624.1 → 2026.625.2

package/dist/crewfoundry/pages/MarketplaceMarketplaceServicesPagePage.js

@@ -1,104 +1,123 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { useState as t } from "react";
 import { Search as n, Star as r } from "lucide-react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Badge as o, Card as s, CardContent as c, Input as l } from "@burdenoff/fe-libs/ui";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Badge as s, CardContent as c, GlassCard as l, GradientText as u, IllustratedEmptyState as d, Input as f, PagePurpose as p } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/MarketplaceMarketplaceServicesPagePage.tsx
-function u() {
-	let { marketplaceServices: u } = e(), [d, f] = t(""), p = u.filter((e) => `${e.title} ${e.provider} ${e.category}`.toLowerCase().includes(d.toLowerCase()));
-	return /* @__PURE__ */ a("div", {
+function m() {
+	let { marketplaceServices: m } = e(), [h, g] = t(""), _ = m.filter((e) => `${e.title} ${e.provider} ${e.category}`.toLowerCase().includes(h.toLowerCase()));
+	return /* @__PURE__ */ o("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("h1", {
-				className: "text-2xl font-semibold",
-				children: "Browse Services"
-			}), /* @__PURE__ */ a("p", {
-				className: "text-sm text-text-secondary",
-				children: [u.length, " services available"]
-			})] }),
-			/* @__PURE__ */ a("div", {
+			/* @__PURE__ */ o("div", { children: [
+				/* @__PURE__ */ a("h1", {
+					className: "text-2xl font-semibold",
+					children: /* @__PURE__ */ a(u, { children: "Browse Services" })
+				}),
+				/* @__PURE__ */ o("p", {
+					className: "text-sm text-text-secondary",
+					children: [m.length, " services available"]
+				}),
+				/* @__PURE__ */ a(p, {
+					className: "mt-1",
+					children: "Explore services offered on the marketplace — search and compare offerings to find exactly the help your project needs."
+				})
+			] }),
+			/* @__PURE__ */ o("div", {
 				className: "relative max-w-sm",
-				children: [/* @__PURE__ */ i(n, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ i(l, {
+				children: [/* @__PURE__ */ a(n, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ a(f, {
 					placeholder: "Search services...",
 					className: "pl-9",
-					value: d,
-					onChange: (e) => f(e.target.value)
+					value: h,
+					onChange: (e) => g(e.target.value)
 				})]
 			}),
-			/* @__PURE__ */ i(s, { children: /* @__PURE__ */ a(c, {
-				className: "p-0",
-				children: [/* @__PURE__ */ a("div", {
-					className: "grid grid-cols-6 gap-2 text-xs font-medium text-text-secondary p-4 border-b",
-					children: [
-						/* @__PURE__ */ i("span", { children: "Service" }),
-						/* @__PURE__ */ i("span", { children: "Provider" }),
-						/* @__PURE__ */ i("span", { children: "Category" }),
-						/* @__PURE__ */ i("span", {
-							className: "text-right",
-							children: "Price"
-						}),
-						/* @__PURE__ */ i("span", {
-							className: "text-center",
-							children: "Rating"
-						}),
-						/* @__PURE__ */ i("span", {
-							className: "text-center",
-							children: "Status"
+			/* @__PURE__ */ a(l, {
+				treatment: "glass",
+				glow: !0,
+				className: "border-border-seam",
+				children: /* @__PURE__ */ a(c, {
+					className: "p-0",
+					children: _.length === 0 ? /* @__PURE__ */ a("div", {
+						className: "p-6",
+						children: /* @__PURE__ */ a(d, {
+							illustration: "empty-search",
+							title: "No services found",
+							description: "Try a different search term to find the help you need."
 						})
-					]
-				}), p.map((e) => /* @__PURE__ */ a("div", {
-					className: "grid grid-cols-6 gap-2 py-3 px-4 border-b last:border-0 text-sm hover:bg-bg-sunken/50",
-					children: [
-						/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
-							className: "font-medium",
-							children: e.title
-						}), /* @__PURE__ */ a("p", {
-							className: "text-xs text-text-secondary truncate",
-							children: [e.description.slice(0, 60), "..."]
-						})] }),
-						/* @__PURE__ */ i("span", {
-							className: "text-text-secondary",
-							children: e.provider
-						}),
-						/* @__PURE__ */ i(o, {
-							variant: "outline",
-							className: "w-fit h-fit text-[10px]",
-							children: e.category
-						}),
-						/* @__PURE__ */ a("span", {
-							className: "text-right font-medium",
-							children: [
-								"$",
-								e.price.toLocaleString(),
-								"/",
-								e.priceType
-							]
-						}),
-						/* @__PURE__ */ a("div", {
-							className: "flex items-center justify-center gap-1",
-							children: [
-								/* @__PURE__ */ i(r, { className: "h-3 w-3 text-yellow-500" }),
-								e.rating,
-								" (",
-								e.reviews,
-								")"
-							]
-						}),
-						/* @__PURE__ */ i("div", {
-							className: "text-center",
-							children: /* @__PURE__ */ i(o, {
-								variant: e.status === "active" ? "default" : "secondary",
-								className: "text-[10px]",
-								children: e.status
+					}) : /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("div", {
+						className: "grid grid-cols-6 gap-2 text-xs font-medium text-text-secondary p-4 border-b",
+						children: [
+							/* @__PURE__ */ a("span", { children: "Service" }),
+							/* @__PURE__ */ a("span", { children: "Provider" }),
+							/* @__PURE__ */ a("span", { children: "Category" }),
+							/* @__PURE__ */ a("span", {
+								className: "text-right",
+								children: "Price"
+							}),
+							/* @__PURE__ */ a("span", {
+								className: "text-center",
+								children: "Rating"
+							}),
+							/* @__PURE__ */ a("span", {
+								className: "text-center",
+								children: "Status"
 							})
-						})
-					]
-				}, e.id))]
-			}) })
+						]
+					}), _.map((e) => /* @__PURE__ */ o("div", {
+						className: "grid grid-cols-6 gap-2 py-3 px-4 border-b last:border-0 text-sm hover:bg-bg-sunken/50",
+						children: [
+							/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
+								className: "font-medium",
+								children: e.title
+							}), /* @__PURE__ */ o("p", {
+								className: "text-xs text-text-secondary truncate",
+								children: [e.description.slice(0, 60), "..."]
+							})] }),
+							/* @__PURE__ */ a("span", {
+								className: "text-text-secondary",
+								children: e.provider
+							}),
+							/* @__PURE__ */ a(s, {
+								variant: "outline",
+								className: "w-fit h-fit text-[10px]",
+								children: e.category
+							}),
+							/* @__PURE__ */ o("span", {
+								className: "text-right font-medium",
+								children: [
+									"$",
+									e.price.toLocaleString(),
+									"/",
+									e.priceType
+								]
+							}),
+							/* @__PURE__ */ o("div", {
+								className: "flex items-center justify-center gap-1",
+								children: [
+									/* @__PURE__ */ a(r, { className: "h-3 w-3 text-status-warning-text" }),
+									e.rating,
+									" (",
+									e.reviews,
+									")"
+								]
+							}),
+							/* @__PURE__ */ a("div", {
+								className: "text-center",
+								children: /* @__PURE__ */ a(s, {
+									variant: e.status === "active" ? "default" : "secondary",
+									className: "text-[10px]",
+									children: e.status
+								})
+							})
+						]
+					}, e.id))] })
+				})
+			})
 		]
 	});
 }
 //#endregion
-export { u as MarketplaceMarketplaceServicesPagePage };
+export { m 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  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  Input,\n} from '@burdenoff/fe-libs/ui';\nimport { Search, Star } from 'lucide-react';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\nexport function MarketplaceMarketplaceServicesPagePage() {\n  const { marketplaceServices } = useCrewFoundryStore();\n  const [search, setSearch] = useState('');\n  const filtered = marketplaceServices.filter((s) =>\n    `${s.title} ${s.provider} ${s.category}`.toLowerCase().includes(search.toLowerCase())\n  );\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div>\n        <h1 className=\"text-2xl font-semibold\">Browse Services</h1>\n        <p className=\"text-sm text-text-secondary\">\n          {marketplaceServices.length} services available\n        </p>\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      <Card>\n        <CardContent className=\"p-0\">\n          <div className=\"grid grid-cols-6 gap-2 text-xs font-medium text-text-secondary p-4 border-b\">\n            <span>Service</span>\n            <span>Provider</span>\n            <span>Category</span>\n            <span className=\"text-right\">Price</span>\n            <span className=\"text-center\">Rating</span>\n            <span className=\"text-center\">Status</span>\n          </div>\n          {filtered.map((svc) => (\n            <div\n              key={svc.id}\n              className=\"grid grid-cols-6 gap-2 py-3 px-4 border-b last:border-0 text-sm hover:bg-bg-sunken/50\"\n            >\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                </p>\n              </div>\n              <span className=\"text-text-secondary\">{svc.provider}</span>\n              <Badge variant=\"outline\" className=\"w-fit h-fit text-[10px]\">\n                {svc.category}\n              </Badge>\n              <span className=\"text-right font-medium\">\n                ${svc.price.toLocaleString()}/{svc.priceType}\n              </span>\n              <div className=\"flex items-center justify-center gap-1\">\n                <Star className=\"h-3 w-3 text-yellow-500\" />\n                {svc.rating} ({svc.reviews})\n              </div>\n              <div className=\"text-center\">\n                <Badge\n                  variant={svc.status === 'active' ? 'default' : 'secondary'}\n                  className=\"text-[10px]\"\n                >\n                  {svc.status}\n                </Badge>\n              </div>\n            </div>\n          ))}\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAaA,SAAgB,IAAyC;CACvD,IAAM,EAAE,2BAAwB,GAAqB,EAC/C,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,IAAW,EAAoB,QAAQ,MAC3C,GAAG,EAAE,MAAM,GAAG,EAAE,SAAS,GAAG,EAAE,WAAW,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,CACtF;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAAyB;IAAoB,CAAA,EAC3D,kBAAC,KAAD;IAAG,WAAU;cAAb,CACG,EAAoB,QAAO,sBAC1B;MACA,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,EAAA,UACE,kBAAC,GAAD;IAAa,WAAU;cAAvB,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,QAAD,EAAA,UAAM,WAAc,CAAA;MACpB,kBAAC,QAAD,EAAA,UAAM,YAAe,CAAA;MACrB,kBAAC,QAAD,EAAA,UAAM,YAAe,CAAA;MACrB,kBAAC,QAAD;OAAM,WAAU;iBAAa;OAAY,CAAA;MACzC,kBAAC,QAAD;OAAM,WAAU;iBAAc;OAAa,CAAA;MAC3C,kBAAC,QAAD;OAAM,WAAU;iBAAc;OAAa,CAAA;MACvC;QACL,EAAS,KAAK,MACb,kBAAC,OAAD;KAEE,WAAU;eAFZ;MAIE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;OAAG,WAAU;iBAAe,EAAI;OAAU,CAAA,EAC1C,kBAAC,KAAD;OAAG,WAAU;iBAAb,CACG,EAAI,YAAY,MAAM,GAAG,GAAG,EAAC,MAC5B;SACA,EAAA,CAAA;MACN,kBAAC,QAAD;OAAM,WAAU;iBAAuB,EAAI;OAAgB,CAAA;MAC3D,kBAAC,GAAD;OAAO,SAAQ;OAAU,WAAU;iBAChC,EAAI;OACC,CAAA;MACR,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QAAyC;QACrC,EAAI,MAAM,gBAAgB;QAAC;QAAE,EAAI;QAC9B;;MACP,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,GAAD,EAAM,WAAU,2BAA4B,CAAA;QAC3C,EAAI;QAAO;QAAG,EAAI;QAAQ;QACvB;;MACN,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD;QACE,SAAS,EAAI,WAAW,WAAW,YAAY;QAC/C,WAAU;kBAET,EAAI;QACC,CAAA;OACJ,CAAA;MACF;OA5BC,EAAI,GA4BL,CACN,CACU;OACT,CAAA;GACH"}
+{"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} from '@burdenoff/fe-libs/ui';\nimport { Search, Star } from 'lucide-react';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\nexport function MarketplaceMarketplaceServicesPagePage() {\n  const { marketplaceServices } = useCrewFoundryStore();\n  const [search, setSearch] = useState('');\n  const filtered = marketplaceServices.filter((s) =>\n    `${s.title} ${s.provider} ${s.category}`.toLowerCase().includes(search.toLowerCase())\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\">Explore services offered on the marketplace — search and compare offerings to find exactly the help your project needs.</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-0\">\n          {filtered.length === 0 ? (\n            <div className=\"p-6\">\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            </div>\n          ) : (\n            <>\n              <div className=\"grid grid-cols-6 gap-2 text-xs font-medium text-text-secondary p-4 border-b\">\n                <span>Service</span>\n                <span>Provider</span>\n                <span>Category</span>\n                <span className=\"text-right\">Price</span>\n                <span className=\"text-center\">Rating</span>\n                <span className=\"text-center\">Status</span>\n              </div>\n              {filtered.map((svc) => (\n            <div\n              key={svc.id}\n              className=\"grid grid-cols-6 gap-2 py-3 px-4 border-b last:border-0 text-sm hover:bg-bg-sunken/50\"\n            >\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                </p>\n              </div>\n              <span className=\"text-text-secondary\">{svc.provider}</span>\n              <Badge variant=\"outline\" className=\"w-fit h-fit text-[10px]\">\n                {svc.category}\n              </Badge>\n              <span className=\"text-right font-medium\">\n                ${svc.price.toLocaleString()}/{svc.priceType}\n              </span>\n              <div className=\"flex items-center justify-center gap-1\">\n                <Star className=\"h-3 w-3 text-status-warning-text\" />\n                {svc.rating} ({svc.reviews})\n              </div>\n              <div className=\"text-center\">\n                <Badge\n                  variant={svc.status === 'active' ? 'default' : 'secondary'}\n                  className=\"text-[10px]\"\n                >\n                  {svc.status}\n                </Badge>\n              </div>\n            </div>\n              ))}\n            </>\n          )}\n        </CardContent>\n      </GlassCard>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAaA,SAAgB,IAAyC;CACvD,IAAM,EAAE,2BAAwB,GAAqB,EAC/C,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,IAAW,EAAoB,QAAQ,MAC3C,GAAG,EAAE,MAAM,GAAG,EAAE,SAAS,GAAG,EAAE,WAAW,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,CACtF;AAED,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;KAAqI,CAAA;IAC/J,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;eACpB,EAAS,WAAW,IACnB,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OACE,cAAa;OACb,OAAM;OACN,aAAY;OACZ,CAAA;MACE,CAAA,GAEN,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,QAAD,EAAA,UAAM,WAAc,CAAA;OACpB,kBAAC,QAAD,EAAA,UAAM,YAAe,CAAA;OACrB,kBAAC,QAAD,EAAA,UAAM,YAAe,CAAA;OACrB,kBAAC,QAAD;QAAM,WAAU;kBAAa;QAAY,CAAA;OACzC,kBAAC,QAAD;QAAM,WAAU;kBAAc;QAAa,CAAA;OAC3C,kBAAC,QAAD;QAAM,WAAU;kBAAc;QAAa,CAAA;OACvC;SACL,EAAS,KAAK,MACjB,kBAAC,OAAD;MAEE,WAAU;gBAFZ;OAIE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAe,EAAI;QAAU,CAAA,EAC1C,kBAAC,KAAD;QAAG,WAAU;kBAAb,CACG,EAAI,YAAY,MAAM,GAAG,GAAG,EAAC,MAC5B;UACA,EAAA,CAAA;OACN,kBAAC,QAAD;QAAM,WAAU;kBAAuB,EAAI;QAAgB,CAAA;OAC3D,kBAAC,GAAD;QAAO,SAAQ;QAAU,WAAU;kBAChC,EAAI;QACC,CAAA;OACR,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SAAyC;SACrC,EAAI,MAAM,gBAAgB;SAAC;SAAE,EAAI;SAC9B;;OACP,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,GAAD,EAAM,WAAU,oCAAqC,CAAA;SACpD,EAAI;SAAO;SAAG,EAAI;SAAQ;SACvB;;OACN,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD;SACE,SAAS,EAAI,WAAW,WAAW,YAAY;SAC/C,WAAU;mBAET,EAAI;SACC,CAAA;QACJ,CAAA;OACF;QA5BC,EAAI,GA4BL,CACF,CACD,EAAA,CAAA;KAEO,CAAA;IACJ,CAAA;GACR"}

package/dist/crewfoundry/pages/MarketplaceMessagingPagePage.js

@@ -2,90 +2,109 @@ import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { useMemo as t, useState as n } from "react";
 import { Search as r } from "lucide-react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Card as o, CardContent as s, Input as c } from "@burdenoff/fe-libs/ui";
+import { CardContent as o, GlassCard as s, GradientText as c, IllustratedEmptyState as l, Input as u, PagePurpose as d } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/MarketplaceMessagingPagePage.tsx
-var l = (e) => {
+var f = (e) => {
 	let t = new Date(e);
 	if (Number.isNaN(t.getTime())) return "recently";
 	let n = Math.max(1, Math.floor((Date.now() - t.getTime()) / (1e3 * 60 * 60)));
 	return n < 24 ? `${n} hours ago` : `${Math.floor(n / 24)} days ago`;
 };
-function u() {
-	let [u, d] = n(""), { marketplaceServices: f, notifications: p, clients: m, vendors: h } = e(), g = t(() => p.slice(0, 20).map((e, t) => {
-		let n = f[t % Math.max(f.length, 1)], r = m[t % Math.max(m.length, 1)]?.name || h[t % Math.max(h.length, 1)]?.name || "Marketplace Partner";
+function p() {
+	let [p, m] = n(""), { marketplaceServices: h, notifications: g, clients: _, vendors: v } = e(), y = t(() => g.slice(0, 20).map((e, t) => {
+		let n = h[t % Math.max(h.length, 1)], r = _[t % Math.max(_.length, 1)]?.name || v[t % Math.max(v.length, 1)]?.name || "Marketplace Partner";
 		return {
 			id: e.id,
 			from: n?.provider || r,
 			company: r,
 			message: e.message,
-			time: l(e.createdAt),
+			time: f(e.createdAt),
 			unread: !e.read
 		};
 	}), [
-		m,
-		f,
-		p,
-		h
-	]).filter((e) => `${e.from} ${e.company} ${e.message}`.toLowerCase().includes(u.toLowerCase()));
+		_,
+		h,
+		g,
+		v
+	]).filter((e) => `${e.from} ${e.company} ${e.message}`.toLowerCase().includes(p.toLowerCase()));
 	return /* @__PURE__ */ a("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("h1", {
-				className: "text-2xl font-semibold",
-				children: "Service Messages"
-			}), /* @__PURE__ */ i("p", {
-				className: "text-sm text-text-secondary",
-				children: "Communication with service providers"
-			})] }),
+			/* @__PURE__ */ a("div", { children: [
+				/* @__PURE__ */ i("h1", {
+					className: "text-2xl font-semibold",
+					children: /* @__PURE__ */ i(c, { children: "Service Messages" })
+				}),
+				/* @__PURE__ */ i("p", {
+					className: "text-sm text-text-secondary",
+					children: "Communication with service providers"
+				}),
+				/* @__PURE__ */ i(d, {
+					className: "mt-1",
+					children: "Message freelancers and clients about your engagements — keep all marketplace conversations in one organized inbox."
+				})
+			] }),
 			/* @__PURE__ */ a("div", {
 				className: "relative max-w-sm",
-				children: [/* @__PURE__ */ i(r, { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ i(c, {
+				children: [/* @__PURE__ */ i(r, { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ i(u, {
 					placeholder: "Search messages...",
 					className: "pl-9",
-					value: u,
-					onChange: (e) => d(e.target.value)
+					value: p,
+					onChange: (e) => m(e.target.value)
 				})]
 			}),
-			/* @__PURE__ */ i(o, { children: /* @__PURE__ */ i(s, {
-				className: "p-0",
-				children: g.map((e) => /* @__PURE__ */ a("div", {
-					className: `flex cursor-pointer items-center gap-3 border-b p-4 last:border-0 hover:bg-bg-sunken/50 ${e.unread ? "bg-blue-50/30" : ""}`,
-					children: [
-						/* @__PURE__ */ i("div", {
-							className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-action-primary-bg/10 text-sm font-bold",
-							children: e.from.split(" ").map((e) => e[0]).join("")
-						}),
-						/* @__PURE__ */ a("div", {
-							className: "min-w-0 flex-1",
-							children: [
-								/* @__PURE__ */ a("div", {
-									className: "flex items-center justify-between",
-									children: [/* @__PURE__ */ i("p", {
-										className: `text-sm ${e.unread ? "font-bold" : "font-medium"}`,
-										children: e.from
-									}), /* @__PURE__ */ i("span", {
+			/* @__PURE__ */ i(s, {
+				treatment: "glass",
+				glow: !0,
+				className: "border-border-seam",
+				children: /* @__PURE__ */ i(o, {
+					className: "p-0",
+					children: y.length === 0 ? /* @__PURE__ */ i("div", {
+						className: "p-6",
+						children: /* @__PURE__ */ i(l, {
+							illustration: "empty-notifications",
+							title: "No messages",
+							description: "Conversations with providers and clients will appear here."
+						})
+					}) : y.map((e) => /* @__PURE__ */ a("div", {
+						className: `flex cursor-pointer items-center gap-3 border-b p-4 last:border-0 hover:bg-bg-sunken/50 ${e.unread ? "bg-status-info-bg/30" : ""}`,
+						children: [
+							/* @__PURE__ */ i("div", {
+								className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-action-primary-bg/10 text-sm font-bold",
+								children: e.from.split(" ").map((e) => e[0]).join("")
+							}),
+							/* @__PURE__ */ a("div", {
+								className: "min-w-0 flex-1",
+								children: [
+									/* @__PURE__ */ a("div", {
+										className: "flex items-center justify-between",
+										children: [/* @__PURE__ */ i("p", {
+											className: `text-sm ${e.unread ? "font-bold" : "font-medium"}`,
+											children: e.from
+										}), /* @__PURE__ */ i("span", {
+											className: "text-xs text-text-secondary",
+											children: e.time
+										})]
+									}),
+									/* @__PURE__ */ i("p", {
 										className: "text-xs text-text-secondary",
-										children: e.time
-									})]
-								}),
-								/* @__PURE__ */ i("p", {
-									className: "text-xs text-text-secondary",
-									children: e.company
-								}),
-								/* @__PURE__ */ i("p", {
-									className: "mt-0.5 truncate text-xs text-text-secondary",
-									children: e.message
-								})
-							]
-						}),
-						e.unread ? /* @__PURE__ */ i("div", { className: "h-2 w-2 flex-shrink-0 rounded-full bg-blue-500" }) : null
-					]
-				}, e.id))
-			}) })
+										children: e.company
+									}),
+									/* @__PURE__ */ i("p", {
+										className: "mt-0.5 truncate text-xs text-text-secondary",
+										children: e.message
+									})
+								]
+							}),
+							e.unread ? /* @__PURE__ */ i("div", { className: "h-2 w-2 flex-shrink-0 rounded-full bg-status-info-text" }) : null
+						]
+					}, e.id))
+				})
+			})
 		]
 	});
 }
 //#endregion
-export { u as MarketplaceMessagingPagePage };
+export { p as MarketplaceMessagingPagePage };
 
 //# sourceMappingURL=MarketplaceMessagingPagePage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MarketplaceMessagingPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/MarketplaceMessagingPagePage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { Card, CardContent, Input } from '@burdenoff/fe-libs/ui';\nimport { Search } from 'lucide-react';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\ntype ServiceMessage = {\n  id: string;\n  from: string;\n  company: string;\n  message: string;\n  time: string;\n  unread: boolean;\n};\n\nconst timeAgo = (value: string): string => {\n  const parsed = new Date(value);\n  if (Number.isNaN(parsed.getTime())) {\n    return 'recently';\n  }\n  const hours = Math.max(1, Math.floor((Date.now() - parsed.getTime()) / (1000 * 60 * 60)));\n  return hours < 24 ? `${hours} hours ago` : `${Math.floor(hours / 24)} days ago`;\n};\n\nexport function MarketplaceMessagingPagePage() {\n  const [search, setSearch] = useState('');\n  const { marketplaceServices, notifications, clients, vendors } = useCrewFoundryStore();\n\n  const serviceMessages = useMemo<ServiceMessage[]>(() => {\n    return notifications.slice(0, 20).map((notification, index) => {\n      const service = marketplaceServices[index % Math.max(marketplaceServices.length, 1)];\n      const counterparty =\n        clients[index % Math.max(clients.length, 1)]?.name ||\n        vendors[index % Math.max(vendors.length, 1)]?.name ||\n        'Marketplace Partner';\n\n      return {\n        id: notification.id,\n        from: service?.provider || counterparty,\n        company: counterparty,\n        message: notification.message,\n        time: timeAgo(notification.createdAt),\n        unread: !notification.read,\n      };\n    });\n  }, [clients, marketplaceServices, notifications, vendors]);\n\n  const filtered = serviceMessages.filter((message) =>\n    `${message.from} ${message.company} ${message.message}`\n      .toLowerCase()\n      .includes(search.toLowerCase())\n  );\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div>\n        <h1 className=\"text-2xl font-semibold\">Service Messages</h1>\n        <p className=\"text-sm text-text-secondary\">Communication with service providers</p>\n      </div>\n\n      <div className=\"relative max-w-sm\">\n        <Search className=\"absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n        <Input\n          placeholder=\"Search messages...\"\n          className=\"pl-9\"\n          value={search}\n          onChange={(event) => setSearch(event.target.value)}\n        />\n      </div>\n\n      <Card>\n        <CardContent className=\"p-0\">\n          {filtered.map((message) => (\n            <div\n              key={message.id}\n              className={`flex cursor-pointer items-center gap-3 border-b p-4 last:border-0 hover:bg-bg-sunken/50 ${message.unread ? 'bg-blue-50/30' : ''}`}\n            >\n              <div className=\"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-action-primary-bg/10 text-sm font-bold\">\n                {message.from\n                  .split(' ')\n                  .map((part) => part[0])\n                  .join('')}\n              </div>\n              <div className=\"min-w-0 flex-1\">\n                <div className=\"flex items-center justify-between\">\n                  <p className={`text-sm ${message.unread ? 'font-bold' : 'font-medium'}`}>\n                    {message.from}\n                  </p>\n                  <span className=\"text-xs text-text-secondary\">{message.time}</span>\n                </div>\n                <p className=\"text-xs text-text-secondary\">{message.company}</p>\n                <p className=\"mt-0.5 truncate text-xs text-text-secondary\">{message.message}</p>\n              </div>\n              {message.unread ? (\n                <div className=\"h-2 w-2 flex-shrink-0 rounded-full bg-blue-500\" />\n              ) : null}\n            </div>\n          ))}\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAcA,IAAM,KAAW,MAA0B;CACzC,IAAM,IAAS,IAAI,KAAK,EAAM;AAC9B,KAAI,OAAO,MAAM,EAAO,SAAS,CAAC,CAChC,QAAO;CAET,IAAM,IAAQ,KAAK,IAAI,GAAG,KAAK,OAAO,KAAK,KAAK,GAAG,EAAO,SAAS,KAAK,MAAO,KAAK,IAAI,CAAC;AACzF,QAAO,IAAQ,KAAK,GAAG,EAAM,cAAc,GAAG,KAAK,MAAM,IAAQ,GAAG,CAAC;;AAGvE,SAAgB,IAA+B;CAC7C,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,EAAE,wBAAqB,kBAAe,YAAS,eAAY,GAAqB,EAqBhF,IAnBkB,QACf,EAAc,MAAM,GAAG,GAAG,CAAC,KAAK,GAAc,MAAU;EAC7D,IAAM,IAAU,EAAoB,IAAQ,KAAK,IAAI,EAAoB,QAAQ,EAAE,GAC7E,IACJ,EAAQ,IAAQ,KAAK,IAAI,EAAQ,QAAQ,EAAE,GAAG,QAC9C,EAAQ,IAAQ,KAAK,IAAI,EAAQ,QAAQ,EAAE,GAAG,QAC9C;AAEF,SAAO;GACL,IAAI,EAAa;GACjB,MAAM,GAAS,YAAY;GAC3B,SAAS;GACT,SAAS,EAAa;GACtB,MAAM,EAAQ,EAAa,UAAU;GACrC,QAAQ,CAAC,EAAa;GACvB;GACD,EACD;EAAC;EAAS;EAAqB;EAAe;EAAQ,CAAC,CAEzB,QAAQ,MACvC,GAAG,EAAQ,KAAK,GAAG,EAAQ,QAAQ,GAAG,EAAQ,UAC3C,aAAa,CACb,SAAS,EAAO,aAAa,CAAC,CAClC;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAAyB;IAAqB,CAAA,EAC5D,kBAAC,KAAD;IAAG,WAAU;cAA8B;IAAwC,CAAA,CAC/E,EAAA,CAAA;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,wEAAyE,CAAA,EAC3F,kBAAC,GAAD;KACE,aAAY;KACZ,WAAU;KACV,OAAO;KACP,WAAW,MAAU,EAAU,EAAM,OAAO,MAAM;KAClD,CAAA,CACE;;GAEN,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IAAa,WAAU;cACpB,EAAS,KAAK,MACb,kBAAC,OAAD;KAEE,WAAW,2FAA2F,EAAQ,SAAS,kBAAkB;eAF3I;MAIE,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAQ,KACN,MAAM,IAAI,CACV,KAAK,MAAS,EAAK,GAAG,CACtB,KAAK,GAAG;OACP,CAAA;MACN,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,KAAD;UAAG,WAAW,WAAW,EAAQ,SAAS,cAAc;oBACrD,EAAQ;UACP,CAAA,EACJ,kBAAC,QAAD;UAAM,WAAU;oBAA+B,EAAQ;UAAY,CAAA,CAC/D;;QACN,kBAAC,KAAD;SAAG,WAAU;mBAA+B,EAAQ;SAAY,CAAA;QAChE,kBAAC,KAAD;SAAG,WAAU;mBAA+C,EAAQ;SAAY,CAAA;QAC5E;;MACL,EAAQ,SACP,kBAAC,OAAD,EAAK,WAAU,kDAAmD,CAAA,GAChE;MACA;OAtBC,EAAQ,GAsBT,CACN;IACU,CAAA,EACT,CAAA;GACH"}
+{"version":3,"file":"MarketplaceMessagingPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/MarketplaceMessagingPagePage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport {\n  CardContent,\n  GlassCard,\n  GradientText,\n  IllustratedEmptyState,\n  Input,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { Search } from 'lucide-react';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\ntype ServiceMessage = {\n  id: string;\n  from: string;\n  company: string;\n  message: string;\n  time: string;\n  unread: boolean;\n};\n\nconst timeAgo = (value: string): string => {\n  const parsed = new Date(value);\n  if (Number.isNaN(parsed.getTime())) {\n    return 'recently';\n  }\n  const hours = Math.max(1, Math.floor((Date.now() - parsed.getTime()) / (1000 * 60 * 60)));\n  return hours < 24 ? `${hours} hours ago` : `${Math.floor(hours / 24)} days ago`;\n};\n\nexport function MarketplaceMessagingPagePage() {\n  const [search, setSearch] = useState('');\n  const { marketplaceServices, notifications, clients, vendors } = useCrewFoundryStore();\n\n  const serviceMessages = useMemo<ServiceMessage[]>(() => {\n    return notifications.slice(0, 20).map((notification, index) => {\n      const service = marketplaceServices[index % Math.max(marketplaceServices.length, 1)];\n      const counterparty =\n        clients[index % Math.max(clients.length, 1)]?.name ||\n        vendors[index % Math.max(vendors.length, 1)]?.name ||\n        'Marketplace Partner';\n\n      return {\n        id: notification.id,\n        from: service?.provider || counterparty,\n        company: counterparty,\n        message: notification.message,\n        time: timeAgo(notification.createdAt),\n        unread: !notification.read,\n      };\n    });\n  }, [clients, marketplaceServices, notifications, vendors]);\n\n  const filtered = serviceMessages.filter((message) =>\n    `${message.from} ${message.company} ${message.message}`\n      .toLowerCase()\n      .includes(search.toLowerCase())\n  );\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div>\n        <h1 className=\"text-2xl font-semibold\">\n          <GradientText>Service Messages</GradientText>\n        </h1>\n        <p className=\"text-sm text-text-secondary\">Communication with service providers</p>\n        <PagePurpose className=\"mt-1\">Message freelancers and clients about your engagements — keep all marketplace conversations in one organized inbox.</PagePurpose>\n      </div>\n\n      <div className=\"relative max-w-sm\">\n        <Search className=\"absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n        <Input\n          placeholder=\"Search messages...\"\n          className=\"pl-9\"\n          value={search}\n          onChange={(event) => setSearch(event.target.value)}\n        />\n      </div>\n\n      <GlassCard treatment=\"glass\" glow className=\"border-border-seam\">\n        <CardContent className=\"p-0\">\n          {filtered.length === 0 ? (\n            <div className=\"p-6\">\n              <IllustratedEmptyState\n                illustration=\"empty-notifications\"\n                title=\"No messages\"\n                description=\"Conversations with providers and clients will appear here.\"\n              />\n            </div>\n          ) : (\n            filtered.map((message) => (\n            <div\n              key={message.id}\n              className={`flex cursor-pointer items-center gap-3 border-b p-4 last:border-0 hover:bg-bg-sunken/50 ${message.unread ? 'bg-status-info-bg/30' : ''}`}\n            >\n              <div className=\"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-action-primary-bg/10 text-sm font-bold\">\n                {message.from\n                  .split(' ')\n                  .map((part) => part[0])\n                  .join('')}\n              </div>\n              <div className=\"min-w-0 flex-1\">\n                <div className=\"flex items-center justify-between\">\n                  <p className={`text-sm ${message.unread ? 'font-bold' : 'font-medium'}`}>\n                    {message.from}\n                  </p>\n                  <span className=\"text-xs text-text-secondary\">{message.time}</span>\n                </div>\n                <p className=\"text-xs text-text-secondary\">{message.company}</p>\n                <p className=\"mt-0.5 truncate text-xs text-text-secondary\">{message.message}</p>\n              </div>\n              {message.unread ? (\n                <div className=\"h-2 w-2 flex-shrink-0 rounded-full bg-status-info-text\" />\n              ) : null}\n            </div>\n            ))\n          )}\n        </CardContent>\n      </GlassCard>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAqBA,IAAM,KAAW,MAA0B;CACzC,IAAM,IAAS,IAAI,KAAK,EAAM;AAC9B,KAAI,OAAO,MAAM,EAAO,SAAS,CAAC,CAChC,QAAO;CAET,IAAM,IAAQ,KAAK,IAAI,GAAG,KAAK,OAAO,KAAK,KAAK,GAAG,EAAO,SAAS,KAAK,MAAO,KAAK,IAAI,CAAC;AACzF,QAAO,IAAQ,KAAK,GAAG,EAAM,cAAc,GAAG,KAAK,MAAM,IAAQ,GAAG,CAAC;;AAGvE,SAAgB,IAA+B;CAC7C,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,EAAE,wBAAqB,kBAAe,YAAS,eAAY,GAAqB,EAqBhF,IAnBkB,QACf,EAAc,MAAM,GAAG,GAAG,CAAC,KAAK,GAAc,MAAU;EAC7D,IAAM,IAAU,EAAoB,IAAQ,KAAK,IAAI,EAAoB,QAAQ,EAAE,GAC7E,IACJ,EAAQ,IAAQ,KAAK,IAAI,EAAQ,QAAQ,EAAE,GAAG,QAC9C,EAAQ,IAAQ,KAAK,IAAI,EAAQ,QAAQ,EAAE,GAAG,QAC9C;AAEF,SAAO;GACL,IAAI,EAAa;GACjB,MAAM,GAAS,YAAY;GAC3B,SAAS;GACT,SAAS,EAAa;GACtB,MAAM,EAAQ,EAAa,UAAU;GACrC,QAAQ,CAAC,EAAa;GACvB;GACD,EACD;EAAC;EAAS;EAAqB;EAAe;EAAQ,CAAC,CAEzB,QAAQ,MACvC,GAAG,EAAQ,KAAK,GAAG,EAAQ,QAAQ,GAAG,EAAQ,UAC3C,aAAa,CACb,SAAS,EAAO,aAAa,CAAC,CAClC;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,MAAD;KAAI,WAAU;eACZ,kBAAC,GAAD,EAAA,UAAc,oBAA+B,CAAA;KAC1C,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eAA8B;KAAwC,CAAA;IACnF,kBAAC,GAAD;KAAa,WAAU;eAAO;KAAiI,CAAA;IAC3J,EAAA,CAAA;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,wEAAyE,CAAA,EAC3F,kBAAC,GAAD;KACE,aAAY;KACZ,WAAU;KACV,OAAO;KACP,WAAW,MAAU,EAAU,EAAM,OAAO,MAAM;KAClD,CAAA,CACE;;GAEN,kBAAC,GAAD;IAAW,WAAU;IAAQ,MAAA;IAAK,WAAU;cAC1C,kBAAC,GAAD;KAAa,WAAU;eACpB,EAAS,WAAW,IACnB,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OACE,cAAa;OACb,OAAM;OACN,aAAY;OACZ,CAAA;MACE,CAAA,GAEN,EAAS,KAAK,MACd,kBAAC,OAAD;MAEE,WAAW,2FAA2F,EAAQ,SAAS,yBAAyB;gBAFlJ;OAIE,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAQ,KACN,MAAM,IAAI,CACV,KAAK,MAAS,EAAK,GAAG,CACtB,KAAK,GAAG;QACP,CAAA;OACN,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,KAAD;WAAG,WAAW,WAAW,EAAQ,SAAS,cAAc;qBACrD,EAAQ;WACP,CAAA,EACJ,kBAAC,QAAD;WAAM,WAAU;qBAA+B,EAAQ;WAAY,CAAA,CAC/D;;SACN,kBAAC,KAAD;UAAG,WAAU;oBAA+B,EAAQ;UAAY,CAAA;SAChE,kBAAC,KAAD;UAAG,WAAU;oBAA+C,EAAQ;UAAY,CAAA;SAC5E;;OACL,EAAQ,SACP,kBAAC,OAAD,EAAK,WAAU,0DAA2D,CAAA,GACxE;OACA;QAtBC,EAAQ,GAsBT,CACJ;KAEQ,CAAA;IACJ,CAAA;GACR"}

package/dist/crewfoundry/pages/MarketplaceMyServicesPagePage.js

@@ -1,80 +1,98 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { Plus as t, Star as n } from "lucide-react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Badge as a, Button as o, Card as s, CardContent as c, CardHeader as l, CardTitle as u } from "@burdenoff/fe-libs/ui";
+import { Badge as a, Button as o, CardContent as s, CardHeader as c, CardTitle as l, GlassCard as u, GradientText as d, IllustratedEmptyState as f, PagePurpose as p } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/MarketplaceMyServicesPagePage.tsx
-function d() {
-	let { marketplaceServices: d } = e(), f = d.slice(0, 3);
+function m() {
+	let { marketplaceServices: m } = e(), h = m.slice(0, 3);
 	return /* @__PURE__ */ i("div", {
 		className: "space-y-6 p-6",
 		children: [/* @__PURE__ */ i("div", {
 			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("h1", {
-				className: "text-2xl font-semibold",
-				children: "My Services"
-			}), /* @__PURE__ */ r("p", {
-				className: "text-sm text-text-secondary",
-				children: "Manage your listed services"
-			})] }), /* @__PURE__ */ i(o, {
+			children: [/* @__PURE__ */ i("div", { children: [
+				/* @__PURE__ */ r("h1", {
+					className: "text-2xl font-semibold",
+					children: /* @__PURE__ */ r(d, { children: "My Services" })
+				}),
+				/* @__PURE__ */ r("p", {
+					className: "text-sm text-text-secondary",
+					children: "Manage your listed services"
+				}),
+				/* @__PURE__ */ r(p, {
+					className: "mt-1",
+					children: "Manage the services you offer to clients — list, edit, and showcase your offerings to win more work on the marketplace."
+				})
+			] }), /* @__PURE__ */ i(o, {
 				size: "sm",
 				children: [/* @__PURE__ */ r(t, { className: "h-4 w-4 mr-1" }), "Create Service"]
 			})]
 		}), /* @__PURE__ */ r("div", {
 			className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-			children: f.map((e) => /* @__PURE__ */ i(s, { children: [/* @__PURE__ */ r(l, { children: /* @__PURE__ */ i("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ r(u, {
-					className: "text-base",
-					children: e.title
-				}), /* @__PURE__ */ r(a, {
-					variant: e.status === "active" ? "default" : "secondary",
-					className: "text-[10px]",
-					children: e.status
-				})]
-			}) }), /* @__PURE__ */ i(c, { children: [
-				/* @__PURE__ */ r("p", {
-					className: "text-sm text-text-secondary mb-3",
-					children: e.description
-				}),
-				/* @__PURE__ */ i("div", {
-					className: "flex items-center justify-between text-sm",
-					children: [/* @__PURE__ */ i("span", {
-						className: "font-bold",
-						children: [
-							"$",
-							e.price,
-							"/",
-							e.priceType
-						]
-					}), /* @__PURE__ */ i("span", {
-						className: "flex items-center gap-1",
-						children: [
-							/* @__PURE__ */ r(n, { className: "h-3 w-3 text-yellow-500" }),
-							e.rating,
-							" (",
-							e.reviews,
-							")"
-						]
-					})]
-				}),
-				/* @__PURE__ */ i("div", {
-					className: "flex gap-2 mt-3",
-					children: [/* @__PURE__ */ r(o, {
-						variant: "outline",
-						size: "sm",
-						className: "flex-1",
-						children: "Edit"
-					}), /* @__PURE__ */ r(o, {
-						size: "sm",
-						className: "flex-1",
-						children: "View"
-					})]
+			children: h.length === 0 ? /* @__PURE__ */ r("div", {
+				className: "col-span-full",
+				children: /* @__PURE__ */ r(f, {
+					illustration: "empty-generic",
+					title: "No services listed",
+					description: "List a service to start winning work on the marketplace."
 				})
-			] })] }, e.id))
+			}) : h.map((e, t) => /* @__PURE__ */ i(u, {
+				treatment: t === 0 ? "glass" : "plain",
+				glow: t === 0,
+				children: [/* @__PURE__ */ r(c, { children: /* @__PURE__ */ i("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ r(l, {
+						className: "text-base",
+						children: e.title
+					}), /* @__PURE__ */ r(a, {
+						variant: e.status === "active" ? "default" : "secondary",
+						className: "text-[10px]",
+						children: e.status
+					})]
+				}) }), /* @__PURE__ */ i(s, { children: [
+					/* @__PURE__ */ r("p", {
+						className: "text-sm text-text-secondary mb-3",
+						children: e.description
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "flex items-center justify-between text-sm",
+						children: [/* @__PURE__ */ i("span", {
+							className: "font-bold",
+							children: [
+								"$",
+								e.price,
+								"/",
+								e.priceType
+							]
+						}), /* @__PURE__ */ i("span", {
+							className: "flex items-center gap-1",
+							children: [
+								/* @__PURE__ */ r(n, { className: "h-3 w-3 text-status-warning-text" }),
+								e.rating,
+								" (",
+								e.reviews,
+								")"
+							]
+						})]
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "flex gap-2 mt-3",
+						children: [/* @__PURE__ */ r(o, {
+							variant: "outline",
+							size: "sm",
+							className: "flex-1",
+							children: "Edit"
+						}), /* @__PURE__ */ r(o, {
+							size: "sm",
+							className: "flex-1",
+							children: "View"
+						})]
+					})
+				] })]
+			}, e.id))
 		})]
 	});
 }
 //#endregion
-export { d as MarketplaceMyServicesPagePage };
+export { m as MarketplaceMyServicesPagePage };
 
 //# sourceMappingURL=MarketplaceMyServicesPagePage.js.map