@burdenoff/microfe-coolandlovely 2026.624.1 → 2026.625.2

package/dist/coolandlovely/pages/customer/CartDetailPage.js

@@ -5,12 +5,13 @@ import { EmptyState as r } from "../../components/EmptyState.js";
 import { useInvestmentOpportunities as i, useOfferings as a, useProviders as o } from "../../hooks/useCoolAndLovelyApi.js";
 import { formatCurrency as s, formatDistance as c, formatDuration as l } from "../../utils/formatters.js";
 import { useMemo as u, useState as d } from "react";
-import { ArrowLeft as f, Calendar as p, CheckCircle2 as m, Clock as h, Flame as g, Home as _, Leaf as v, MapPin as y, Minus as b, Plus as x, Search as S, ShoppingCart as C, Star as w, TrendingUp as ee, X as T } from "lucide-react";
-import { useParams as E } from "react-router-dom";
-import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
+import { ArrowLeft as f, Calendar as p, CheckCircle2 as m, Clock as h, Flame as ee, Home as te, Leaf as g, MapPin as _, Minus as v, Plus as y, Search as b, ShoppingCart as x, Star as S, TrendingUp as C, X as w } from "lucide-react";
+import { useParams as T } from "react-router-dom";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { EmphasisPanel as k, PagePurpose as ne } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/customer/CartDetailPage.tsx
 function A() {
-	let { cartId: A } = E(), { navigateTo: j } = e(), { data: M = [], isLoading: te } = o(), { data: N = [], isLoading: ne } = a(A), { data: P = [], isLoading: re } = i(), F = u(() => M.find((e) => e.id === A), [M, A]), I = u(() => P.find((e) => e.cartId === A), [P, A]), [L, R] = d(""), [z, B] = d(""), [V, H] = d([]), [U, W] = d(!1), [G, K] = d(null), q = u(() => N.map((e) => ({
+	let { cartId: A } = T(), { navigateTo: j } = e(), { data: M = [], isLoading: re } = o(), { data: N = [], isLoading: ie } = a(A), { data: P = [], isLoading: ae } = i(), F = u(() => M.find((e) => e.id === A), [M, A]), I = u(() => P.find((e) => e.cartId === A), [P, A]), [L, R] = d(""), [z, B] = d(""), [V, H] = d([]), [U, W] = d(!1), [G, K] = d(null), q = u(() => N.map((e) => ({
 		id: e.id,
 		name: e.name,
 		price: e.price,
@@ -36,7 +37,7 @@ function A() {
 		return Y.forEach((t) => {
 			e[t.category] || (e[t.category] = []), e[t.category].push(t);
 		}), e;
-	}, [Y]), Z = (e, t = 1, n) => {
+	}, [Y]), oe = (e, t = 1, n) => {
 		H((r) => r.find((t) => t.productId === e.id) ? r.map((n) => n.productId === e.id ? {
 			...n,
 			quantity: n.quantity + t
@@ -48,61 +49,66 @@ function A() {
 			quantity: t,
 			specialInstructions: n
 		}]);
-	}, Q = (e, t) => {
+	}, Z = (e, t) => {
 		H((n) => n.map((n) => n.productId === e ? {
 			...n,
 			quantity: Math.max(0, n.quantity + t)
 		} : n).filter((e) => e.quantity > 0));
-	}, $ = (e) => {
+	}, Q = (e) => {
 		H((t) => t.filter((t) => t.productId !== e));
-	}, ie = (e) => V.find((t) => t.productId === e)?.quantity ?? 0, ae = V.reduce((e, t) => e + t.price * t.quantity, 0), oe = V.reduce((e, t) => e + t.quantity, 0), se = (e) => {
+	}, $ = (e) => V.find((t) => t.productId === e)?.quantity ?? 0, se = V.reduce((e, t) => e + t.price * t.quantity, 0), ce = V.reduce((e, t) => e + t.quantity, 0), le = (e) => {
 		K({
 			product: e,
 			quantity: 1,
 			specialInstructions: ""
 		}), W(!0);
 	};
-	return F ? /* @__PURE__ */ k(n, {
-		title: /* @__PURE__ */ k("div", {
+	return F ? /* @__PURE__ */ O(n, {
+		title: /* @__PURE__ */ O("div", {
 			className: "flex items-center gap-3",
 			children: [
-				/* @__PURE__ */ O("button", {
+				/* @__PURE__ */ D("button", {
 					type: "button",
 					onClick: () => j("/customer/carts"),
 					className: "rounded-md p-1 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
-					children: /* @__PURE__ */ O(f, { className: "h-5 w-5" })
+					children: /* @__PURE__ */ D(f, { className: "h-5 w-5" })
 				}),
-				/* @__PURE__ */ O("span", {
+				/* @__PURE__ */ D("span", {
 					className: "truncate",
 					children: F.name
 				}),
-				F.isVerified && /* @__PURE__ */ O(m, { className: "h-5 w-5 text-blue-500 shrink-0" })
+				F.isVerified && /* @__PURE__ */ D(m, { className: "h-5 w-5 text-accent-blue shrink-0" })
 			]
 		}),
 		description: F.category,
 		children: [
-			/* @__PURE__ */ k("div", {
+			/* @__PURE__ */ D(ne, {
+				className: "mb-6",
+				icon: /* @__PURE__ */ D(x, { className: "h-4 w-4" }),
+				children: "Everything this cart offers, in one place. Browse and search the menu or services, customise an item, then build your order in the basket on the right and head to checkout — plus see appointment, direct-service and investment options where available."
+			}),
+			/* @__PURE__ */ O("div", {
 				className: "relative h-48 rounded-lg bg-bg-sunken overflow-hidden",
-				children: [/* @__PURE__ */ O("img", {
+				children: [/* @__PURE__ */ D("img", {
 					src: F.image,
 					alt: F.name,
 					className: "h-full w-full object-cover"
-				}), /* @__PURE__ */ O("div", {
+				}), /* @__PURE__ */ D("div", {
 					className: "absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/60 to-transparent p-4",
-					children: /* @__PURE__ */ k("div", {
+					children: /* @__PURE__ */ O("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ O("span", {
-							className: t("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", F.isOpen ? "bg-green-500/20 text-green-300" : "bg-red-500/20 text-red-300"),
+						children: [/* @__PURE__ */ D("span", {
+							className: t("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", F.isOpen ? "bg-status-success-bg-subtle/20 text-status-success-text" : "bg-status-error-bg-subtle/20 text-status-error-text"),
 							children: F.isOpen ? "Open Now" : "Closed"
-						}), /* @__PURE__ */ k("div", {
+						}), /* @__PURE__ */ O("div", {
 							className: "flex items-center gap-1 text-white text-sm",
 							children: [
-								/* @__PURE__ */ O(w, { className: "h-3.5 w-3.5 fill-yellow-400 text-yellow-400" }),
-								/* @__PURE__ */ O("span", {
+								/* @__PURE__ */ D(S, { className: "h-3.5 w-3.5 fill-status-warning-text text-status-warning-text" }),
+								/* @__PURE__ */ D("span", {
 									className: "font-medium",
 									children: F.rating
 								}),
-								/* @__PURE__ */ k("span", {
+								/* @__PURE__ */ O("span", {
 									className: "text-white/70",
 									children: [
 										"(",
@@ -115,71 +121,71 @@ function A() {
 					})
 				})]
 			}),
-			!F.isOpen && /* @__PURE__ */ O("div", {
-				className: "mt-4 rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3",
-				children: /* @__PURE__ */ k("p", {
-					className: "text-sm text-yellow-700 dark:text-yellow-400",
-					children: [/* @__PURE__ */ O("strong", { children: "This cart is currently closed." }), " You can browse the offerings but orders are not being accepted."]
+			!F.isOpen && /* @__PURE__ */ D("div", {
+				className: "mt-4 rounded-lg border border-status-warning-border/30 bg-status-warning-bg-subtle/10 p-3",
+				children: /* @__PURE__ */ O("p", {
+					className: "text-sm text-status-warning-text",
+					children: [/* @__PURE__ */ D("strong", { children: "This cart is currently closed." }), " You can browse the offerings but orders are not being accepted."]
 				})
 			}),
-			/* @__PURE__ */ k("div", {
+			/* @__PURE__ */ O("div", {
 				className: "mt-4 grid grid-cols-1 gap-3 sm:grid-cols-3",
 				children: [
-					/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ O("div", {
 						className: "rounded-lg border border-border-subtle bg-bg-surface p-3",
 						children: [
-							/* @__PURE__ */ k("div", {
+							/* @__PURE__ */ O("div", {
 								className: "flex items-center gap-2 text-text-secondary text-xs mb-1",
-								children: [/* @__PURE__ */ O(y, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ O("span", {
+								children: [/* @__PURE__ */ D(_, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ D("span", {
 									className: "font-medium uppercase tracking-wider",
 									children: "Location"
 								})]
 							}),
-							/* @__PURE__ */ O("p", {
+							/* @__PURE__ */ D("p", {
 								className: "text-sm text-text-primary",
 								children: F.location.address
 							}),
-							/* @__PURE__ */ k("p", {
+							/* @__PURE__ */ O("p", {
 								className: "text-xs text-text-secondary",
 								children: [c(F.distance), " away"]
 							})
 						]
 					}),
-					/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ O("div", {
 						className: "rounded-lg border border-border-subtle bg-bg-surface p-3",
 						children: [
-							/* @__PURE__ */ k("div", {
+							/* @__PURE__ */ O("div", {
 								className: "flex items-center gap-2 text-text-secondary text-xs mb-1",
-								children: [/* @__PURE__ */ O(h, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ O("span", {
+								children: [/* @__PURE__ */ D(h, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ D("span", {
 									className: "font-medium uppercase tracking-wider",
 									children: "Estimated Time"
 								})]
 							}),
-							/* @__PURE__ */ O("p", {
+							/* @__PURE__ */ D("p", {
 								className: "text-sm text-text-primary",
 								children: l(F.estimatedTime)
 							}),
-							F.averageOrderValue && /* @__PURE__ */ k("p", {
+							F.averageOrderValue && /* @__PURE__ */ O("p", {
 								className: "text-xs text-text-secondary",
 								children: ["Avg ", s(F.averageOrderValue, { minimumFractionDigits: 0 })]
 							})
 						]
 					}),
-					/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ O("div", {
 						className: "rounded-lg border border-border-subtle bg-bg-surface p-3",
 						children: [
-							/* @__PURE__ */ k("div", {
+							/* @__PURE__ */ O("div", {
 								className: "flex items-center gap-2 text-text-secondary text-xs mb-1",
-								children: [/* @__PURE__ */ O(w, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ O("span", {
+								children: [/* @__PURE__ */ D(S, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ D("span", {
 									className: "font-medium uppercase tracking-wider",
 									children: "Rating"
 								})]
 							}),
-							/* @__PURE__ */ k("p", {
+							/* @__PURE__ */ O("p", {
 								className: "text-sm text-text-primary",
 								children: [F.rating, " / 5.0"]
 							}),
-							/* @__PURE__ */ k("p", {
+							/* @__PURE__ */ O("p", {
 								className: "text-xs text-text-secondary",
 								children: [F.totalRatings, " reviews"]
 							})
@@ -187,62 +193,62 @@ function A() {
 					})
 				]
 			}),
-			F.businessHours && Object.keys(F.businessHours).length > 0 && /* @__PURE__ */ k("section", {
+			F.businessHours && Object.keys(F.businessHours).length > 0 && /* @__PURE__ */ O("section", {
 				className: "mt-6",
-				children: [/* @__PURE__ */ O("h2", {
+				children: [/* @__PURE__ */ D("h2", {
 					className: "text-base font-semibold text-text-primary mb-2",
 					children: "Operating Hours"
-				}), /* @__PURE__ */ O("div", {
+				}), /* @__PURE__ */ D("div", {
 					className: "rounded-lg border border-border-subtle bg-bg-surface overflow-hidden",
-					children: Object.entries(F.businessHours).map(([e, t]) => /* @__PURE__ */ k("div", {
+					children: Object.entries(F.businessHours).map(([e, t]) => /* @__PURE__ */ O("div", {
 						className: "flex items-center justify-between px-4 py-2 border-b border-border-subtle last:border-b-0",
-						children: [/* @__PURE__ */ O("span", {
+						children: [/* @__PURE__ */ D("span", {
 							className: "text-sm font-medium text-text-primary capitalize",
 							children: e
-						}), t.isOpen ? /* @__PURE__ */ k("span", {
+						}), t.isOpen ? /* @__PURE__ */ O("span", {
 							className: "text-sm text-text-secondary",
 							children: [
 								t.open,
 								" - ",
 								t.close
 							]
-						}) : /* @__PURE__ */ O("span", {
+						}) : /* @__PURE__ */ D("span", {
 							className: "text-sm text-status-error-text",
 							children: "Closed"
 						})]
 					}, e))
 				})]
 			}),
-			/* @__PURE__ */ k("div", {
+			/* @__PURE__ */ O("div", {
 				className: "mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3",
-				children: [/* @__PURE__ */ k("div", {
+				children: [/* @__PURE__ */ O("div", {
 					className: "lg:col-span-2",
 					children: [
-						/* @__PURE__ */ k("div", {
+						/* @__PURE__ */ O("div", {
 							className: "flex flex-col gap-3 sm:flex-row mb-4",
-							children: [/* @__PURE__ */ k("div", {
+							children: [/* @__PURE__ */ O("div", {
 								className: "relative flex-1",
-								children: [/* @__PURE__ */ O(S, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ O("input", {
+								children: [/* @__PURE__ */ D(b, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ D("input", {
 									type: "text",
 									placeholder: "Search offerings...",
 									value: L,
 									onChange: (e) => R(e.target.value),
 									className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-10 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})]
-							}), /* @__PURE__ */ k("select", {
+							}), /* @__PURE__ */ O("select", {
 								value: z,
 								onChange: (e) => B(e.target.value),
 								className: "rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-								children: [/* @__PURE__ */ O("option", {
+								children: [/* @__PURE__ */ D("option", {
 									value: "",
 									children: "All Categories"
-								}), J.map((e) => /* @__PURE__ */ O("option", {
+								}), J.map((e) => /* @__PURE__ */ D("option", {
 									value: e,
 									children: e
 								}, e))]
 							})]
 						}),
-						/* @__PURE__ */ k("h2", {
+						/* @__PURE__ */ O("h2", {
 							className: "text-lg font-semibold text-text-primary mb-3",
 							children: [
 								"Menu & Services (",
@@ -250,102 +256,100 @@ function A() {
 								")"
 							]
 						}),
-						Y.length === 0 ? /* @__PURE__ */ k("div", {
-							className: "rounded-lg border border-border-subtle bg-bg-surface p-8 text-center",
-							children: [/* @__PURE__ */ O(S, { className: "mx-auto h-10 w-10 text-text-secondary/50" }), /* @__PURE__ */ O("p", {
-								className: "mt-3 text-sm text-text-secondary",
-								children: "No offerings found"
-							})]
-						}) : /* @__PURE__ */ O("div", {
+						Y.length === 0 ? /* @__PURE__ */ D(r, {
+							illustration: L || z ? "empty-search" : "empty-data",
+							title: "No offerings found",
+							description: L || z ? "Try a different search term or clear the category filter." : "This cart has not listed any offerings yet. Check back soon."
+						}) : /* @__PURE__ */ D("div", {
 							className: "space-y-6",
-							children: Object.entries(X).map(([e, n]) => /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("h3", {
+							children: Object.entries(X).map(([e, n]) => /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("h3", {
 								className: "text-sm font-semibold text-text-primary mb-2 px-1",
 								children: e
-							}), /* @__PURE__ */ O("div", {
+							}), /* @__PURE__ */ D("div", {
 								className: "space-y-2",
 								children: n.map((e) => {
-									let n = ie(e.id);
-									return /* @__PURE__ */ k("div", {
-										className: "flex gap-4 rounded-lg border border-border-subtle bg-bg-surface p-4",
-										children: [/* @__PURE__ */ O("div", {
+									let n = $(e.id);
+									return /* @__PURE__ */ O("div", {
+										className: "flex gap-4 rounded-lg border border-border-seam bg-bg-surface p-4 bg-gloss-card shadow-pop",
+										children: [/* @__PURE__ */ D("div", {
 											className: "h-20 w-20 shrink-0 rounded-md bg-bg-sunken overflow-hidden",
-											children: /* @__PURE__ */ O("img", {
+											children: /* @__PURE__ */ D("img", {
 												src: e.image,
 												alt: e.name,
 												className: "h-full w-full object-cover"
 											})
-										}), /* @__PURE__ */ k("div", {
+										}), /* @__PURE__ */ O("div", {
 											className: "flex-1 min-w-0",
 											children: [
-												/* @__PURE__ */ k("div", {
+												/* @__PURE__ */ O("div", {
 													className: "flex items-start justify-between gap-2",
-													children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ k("div", {
+													children: [/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ O("div", {
 														className: "flex items-center gap-2",
-														children: [/* @__PURE__ */ O("h4", {
+														children: [/* @__PURE__ */ D("h4", {
 															className: "text-sm font-semibold text-text-primary",
 															children: e.name
-														}), e.isVeg && /* @__PURE__ */ O(v, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400" })]
-													}), /* @__PURE__ */ O("p", {
+														}), e.isVeg && /* @__PURE__ */ D(g, { className: "h-3.5 w-3.5 text-status-success-text" })]
+													}), /* @__PURE__ */ D("p", {
 														className: "text-xs text-text-secondary mt-0.5",
 														children: e.category
-													})] }), /* @__PURE__ */ O("span", {
+													})] }), /* @__PURE__ */ D("span", {
 														className: "text-sm font-bold text-text-primary whitespace-nowrap",
 														children: s(e.price, { minimumFractionDigits: 0 })
 													})]
 												}),
-												/* @__PURE__ */ O("p", {
+												/* @__PURE__ */ D("p", {
 													className: "mt-1 text-xs text-text-secondary line-clamp-2",
 													children: e.description
 												}),
-												/* @__PURE__ */ k("div", {
+												/* @__PURE__ */ O("div", {
 													className: "mt-2 flex flex-wrap items-center gap-2 text-[10px] text-text-secondary",
 													children: [
-														e.duration != null && e.duration > 0 && /* @__PURE__ */ k("span", {
+														e.duration != null && e.duration > 0 && /* @__PURE__ */ O("span", {
 															className: "flex items-center gap-0.5",
-															children: [/* @__PURE__ */ O(h, { className: "h-3 w-3" }), l(e.duration)]
+															children: [/* @__PURE__ */ D(h, { className: "h-3 w-3" }), l(e.duration)]
 														}),
-														e.serviceType && /* @__PURE__ */ O("span", {
+														e.serviceType && /* @__PURE__ */ D("span", {
 															className: "rounded bg-bg-sunken px-1.5 py-0.5 capitalize",
 															children: e.serviceType
 														}),
-														e.spiceLevel && /* @__PURE__ */ k("span", {
+														e.spiceLevel && /* @__PURE__ */ O("span", {
 															className: "flex items-center gap-0.5 rounded bg-bg-sunken px-1.5 py-0.5 capitalize",
-															children: [/* @__PURE__ */ O(g, { className: "h-3 w-3" }), e.spiceLevel]
+															children: [/* @__PURE__ */ D(ee, { className: "h-3 w-3" }), e.spiceLevel]
 														})
 													]
 												}),
-												/* @__PURE__ */ O("div", {
+												/* @__PURE__ */ D("div", {
 													className: "mt-2 flex justify-end",
-													children: n > 0 ? /* @__PURE__ */ k("div", {
+													children: n > 0 ? /* @__PURE__ */ O("div", {
 														className: "flex items-center gap-2",
 														children: [
-															/* @__PURE__ */ O("button", {
+															/* @__PURE__ */ D("button", {
 																type: "button",
-																onClick: () => Q(e.id, -1),
+																onClick: () => Z(e.id, -1),
 																className: "flex h-7 w-7 items-center justify-center rounded-full bg-bg-sunken text-text-primary hover:bg-accent",
-																children: /* @__PURE__ */ O(b, { className: "h-3.5 w-3.5" })
+																children: /* @__PURE__ */ D(v, { className: "h-3.5 w-3.5" })
 															}),
-															/* @__PURE__ */ O("span", {
+															/* @__PURE__ */ D("span", {
 																className: "min-w-[2ch] text-center text-sm font-medium text-text-primary",
 																children: n
 															}),
-															/* @__PURE__ */ O("button", {
+															/* @__PURE__ */ D("button", {
 																type: "button",
-																onClick: () => Q(e.id, 1),
+																onClick: () => Z(e.id, 1),
 																className: "flex h-7 w-7 items-center justify-center rounded-full bg-foreground text-background hover:opacity-90",
-																children: /* @__PURE__ */ O(x, { className: "h-3.5 w-3.5" })
+																children: /* @__PURE__ */ D(y, { className: "h-3.5 w-3.5" })
 															}),
-															/* @__PURE__ */ O("button", {
+															/* @__PURE__ */ D("button", {
 																type: "button",
-																onClick: () => $(e.id),
+																onClick: () => Q(e.id),
 																className: "ml-1 flex h-7 w-7 items-center justify-center rounded-full text-status-error-text hover:bg-status-error-bg/10",
-																children: /* @__PURE__ */ O(T, { className: "h-3.5 w-3.5" })
+																children: /* @__PURE__ */ D(w, { className: "h-3.5 w-3.5" })
 															})
 														]
-													}) : /* @__PURE__ */ O("button", {
+													}) : /* @__PURE__ */ D("button", {
 														type: "button",
 														disabled: !F.isOpen,
-														onClick: () => se(e),
+														onClick: () => le(e),
 														className: t("rounded-lg px-4 py-1.5 text-xs font-medium transition-opacity", F.isOpen ? "bg-foreground text-background hover:opacity-90" : "bg-bg-sunken text-text-secondary cursor-not-allowed"),
 														children: "Add"
 													})
@@ -357,30 +361,29 @@ function A() {
 							})] }, e))
 						})
 					]
-				}), /* @__PURE__ */ k("div", {
+				}), /* @__PURE__ */ O("div", {
 					className: "space-y-4",
 					children: [
-						/* @__PURE__ */ k("div", {
-							className: "rounded-lg border border-border-subtle bg-bg-surface p-4 lg:sticky lg:top-6",
-							children: [/* @__PURE__ */ k("h3", {
+						/* @__PURE__ */ O(k, {
+							className: "p-4 lg:sticky lg:top-6",
+							children: [/* @__PURE__ */ O("h3", {
 								className: "text-base font-semibold text-text-primary mb-3 flex items-center gap-2",
-								children: [/* @__PURE__ */ O(C, { className: "h-4 w-4" }), "Your Order"]
-							}), V.length === 0 ? /* @__PURE__ */ k("div", {
-								className: "py-6 text-center",
-								children: [/* @__PURE__ */ O(C, { className: "mx-auto h-8 w-8 text-text-secondary/40" }), /* @__PURE__ */ O("p", {
-									className: "mt-2 text-sm text-text-secondary",
-									children: "Your cart is empty"
-								})]
-							}) : /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O("div", {
+								children: [/* @__PURE__ */ D(x, { className: "h-4 w-4" }), "Your Order"]
+							}), V.length === 0 ? /* @__PURE__ */ D(r, {
+								className: "py-2",
+								illustration: "empty-generic",
+								title: "Your cart is empty",
+								description: "Add items from the menu to start your order."
+							}) : /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D("div", {
 								className: "space-y-2 max-h-64 overflow-y-auto mb-3",
-								children: V.map((e) => /* @__PURE__ */ k("div", {
+								children: V.map((e) => /* @__PURE__ */ O("div", {
 									className: "flex items-center justify-between gap-2",
-									children: [/* @__PURE__ */ k("div", {
+									children: [/* @__PURE__ */ O("div", {
 										className: "flex-1 min-w-0",
-										children: [/* @__PURE__ */ O("p", {
+										children: [/* @__PURE__ */ D("p", {
 											className: "text-sm font-medium text-text-primary truncate",
 											children: e.name
-										}), /* @__PURE__ */ k("p", {
+										}), /* @__PURE__ */ O("p", {
 											className: "text-xs text-text-secondary",
 											children: [
 												s(e.price, { minimumFractionDigits: 0 }),
@@ -389,46 +392,46 @@ function A() {
 												e.quantity
 											]
 										})]
-									}), /* @__PURE__ */ k("div", {
+									}), /* @__PURE__ */ O("div", {
 										className: "flex items-center gap-1",
 										children: [
-											/* @__PURE__ */ O("button", {
+											/* @__PURE__ */ D("button", {
 												type: "button",
-												onClick: () => Q(e.productId, -1),
+												onClick: () => Z(e.productId, -1),
 												className: "flex h-6 w-6 items-center justify-center rounded bg-bg-sunken text-text-primary text-xs",
 												children: "-"
 											}),
-											/* @__PURE__ */ O("span", {
+											/* @__PURE__ */ D("span", {
 												className: "min-w-[2ch] text-center text-xs font-medium",
 												children: e.quantity
 											}),
-											/* @__PURE__ */ O("button", {
+											/* @__PURE__ */ D("button", {
 												type: "button",
-												onClick: () => Q(e.productId, 1),
+												onClick: () => Z(e.productId, 1),
 												className: "flex h-6 w-6 items-center justify-center rounded bg-bg-sunken text-text-primary text-xs",
 												children: "+"
 											}),
-											/* @__PURE__ */ O("button", {
+											/* @__PURE__ */ D("button", {
 												type: "button",
-												onClick: () => $(e.productId),
+												onClick: () => Q(e.productId),
 												className: "ml-1 text-status-error-text hover:text-status-error-text/80",
-												children: /* @__PURE__ */ O(T, { className: "h-3.5 w-3.5" })
+												children: /* @__PURE__ */ D(w, { className: "h-3.5 w-3.5" })
 											})
 										]
 									})]
 								}, e.id))
-							}), /* @__PURE__ */ k("div", {
+							}), /* @__PURE__ */ O("div", {
 								className: "border-t border-border-subtle pt-3",
-								children: [/* @__PURE__ */ k("div", {
+								children: [/* @__PURE__ */ O("div", {
 									className: "flex justify-between items-center mb-3",
-									children: [/* @__PURE__ */ k("span", {
+									children: [/* @__PURE__ */ O("span", {
 										className: "text-sm font-semibold text-text-primary",
-										children: ["Total: ", s(ae, { minimumFractionDigits: 0 })]
-									}), /* @__PURE__ */ k("span", {
+										children: ["Total: ", s(se, { minimumFractionDigits: 0 })]
+									}), /* @__PURE__ */ O("span", {
 										className: "text-xs text-text-secondary",
-										children: [oe, " items"]
+										children: [ce, " items"]
 									})]
-								}), /* @__PURE__ */ O("button", {
+								}), /* @__PURE__ */ D("button", {
 									type: "button",
 									onClick: () => j("/customer/checkout"),
 									className: "w-full rounded-lg bg-foreground py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity",
@@ -436,67 +439,67 @@ function A() {
 								})]
 							})] })]
 						}),
-						F.serviceTypes?.includes("direct_service") && /* @__PURE__ */ k("div", {
-							className: "rounded-lg border border-purple-500/30 bg-purple-500/10 p-4",
+						F.serviceTypes?.includes("direct_service") && /* @__PURE__ */ O("div", {
+							className: "rounded-lg border border-accent-purple-subtle/30 bg-accent-purple-subtle/10 p-4",
 							children: [
-								/* @__PURE__ */ k("h3", {
+								/* @__PURE__ */ O("h3", {
 									className: "text-sm font-semibold text-text-primary flex items-center gap-2 mb-2",
-									children: [/* @__PURE__ */ O(_, { className: "h-4 w-4 text-purple-600 dark:text-purple-400" }), "Direct Service"]
+									children: [/* @__PURE__ */ D(te, { className: "h-4 w-4 text-accent-purple" }), "Direct Service"]
 								}),
-								/* @__PURE__ */ O("p", {
+								/* @__PURE__ */ D("p", {
 									className: "text-xs text-text-secondary mb-3",
 									children: "Cart comes to your location!"
 								}),
-								/* @__PURE__ */ O("button", {
+								/* @__PURE__ */ D("button", {
 									type: "button",
 									onClick: () => j(`/customer/carts/${F.id}`),
-									className: "w-full rounded-lg bg-purple-600 py-2 text-xs font-medium text-white hover:bg-purple-700 transition-colors",
+									className: "w-full rounded-lg bg-accent-purple-subtle py-2 text-xs font-medium text-white hover:bg-accent-purple-subtle transition-colors",
 									children: "Book Direct Service"
 								})
 							]
 						}),
-						F.serviceTypes?.includes("appointment") && /* @__PURE__ */ k("div", {
-							className: "rounded-lg border border-blue-500/30 bg-blue-500/10 p-4",
-							children: [/* @__PURE__ */ k("h3", {
+						F.serviceTypes?.includes("appointment") && /* @__PURE__ */ O("div", {
+							className: "rounded-lg border border-accent-blue-subtle/30 bg-accent-blue-subtle/10 p-4",
+							children: [/* @__PURE__ */ O("h3", {
 								className: "text-sm font-semibold text-text-primary flex items-center gap-2 mb-2",
-								children: [/* @__PURE__ */ O(p, { className: "h-4 w-4 text-blue-600 dark:text-blue-400" }), "Appointments Available"]
-							}), /* @__PURE__ */ O("p", {
+								children: [/* @__PURE__ */ D(p, { className: "h-4 w-4 text-accent-blue" }), "Appointments Available"]
+							}), /* @__PURE__ */ D("p", {
 								className: "text-xs text-text-secondary",
 								children: "This service provider accepts appointments. Contact them to schedule."
 							})]
 						}),
-						I && /* @__PURE__ */ k("div", {
-							className: "rounded-lg border border-green-500/30 bg-green-500/10 p-4",
+						I && /* @__PURE__ */ O("div", {
+							className: "rounded-lg border border-status-success-border/30 bg-status-success-bg-subtle/10 p-4",
 							children: [
-								/* @__PURE__ */ k("h3", {
+								/* @__PURE__ */ O("h3", {
 									className: "text-sm font-semibold text-text-primary flex items-center gap-2 mb-2",
-									children: [/* @__PURE__ */ O(ee, { className: "h-4 w-4 text-green-600 dark:text-green-400" }), "Investment Opportunity"]
+									children: [/* @__PURE__ */ D(C, { className: "h-4 w-4 text-status-success-text" }), "Investment Opportunity"]
 								}),
-								/* @__PURE__ */ O("p", {
+								/* @__PURE__ */ D("p", {
 									className: "text-xs text-text-secondary mb-2",
 									children: I.description
 								}),
-								/* @__PURE__ */ k("div", {
+								/* @__PURE__ */ O("div", {
 									className: "space-y-1 text-xs text-text-secondary mb-3",
 									children: [
-										/* @__PURE__ */ k("p", { children: ["Target: ", s(I.targetAmount, { minimumFractionDigits: 0 })] }),
-										/* @__PURE__ */ k("p", { children: ["Raised: ", s(I.raisedAmount, { minimumFractionDigits: 0 })] }),
-										/* @__PURE__ */ k("p", { children: [
+										/* @__PURE__ */ O("p", { children: ["Target: ", s(I.targetAmount, { minimumFractionDigits: 0 })] }),
+										/* @__PURE__ */ O("p", { children: ["Raised: ", s(I.raisedAmount, { minimumFractionDigits: 0 })] }),
+										/* @__PURE__ */ O("p", { children: [
 											"Expected Returns: ",
 											I.expectedReturns,
 											"%"
 										] }),
-										/* @__PURE__ */ k("p", { children: [
+										/* @__PURE__ */ O("p", { children: [
 											"Min Investment:",
 											" ",
 											s(I.minimumInvestment, { minimumFractionDigits: 0 })
 										] })
 									]
 								}),
-								/* @__PURE__ */ O("button", {
+								/* @__PURE__ */ D("button", {
 									type: "button",
 									onClick: () => alert("Navigate to investor section to fund this business."),
-									className: "w-full rounded-lg bg-green-600 py-2 text-xs font-medium text-white hover:bg-green-700 transition-colors",
+									className: "w-full rounded-lg bg-status-success-bg-subtle py-2 text-xs font-medium text-white hover:bg-status-success-bg-subtle transition-colors",
 									children: "Fund This Business"
 								})
 							]
@@ -504,74 +507,74 @@ function A() {
 					]
 				})]
 			}),
-			U && G && /* @__PURE__ */ O("div", {
+			U && G && /* @__PURE__ */ D("div", {
 				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-				children: /* @__PURE__ */ O("div", {
+				children: /* @__PURE__ */ D("div", {
 					className: "w-full max-w-md max-h-[90vh] overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface",
-					children: /* @__PURE__ */ k("div", {
+					children: /* @__PURE__ */ O("div", {
 						className: "p-5",
 						children: [
-							/* @__PURE__ */ k("div", {
+							/* @__PURE__ */ O("div", {
 								className: "flex items-center justify-between mb-4",
-								children: [/* @__PURE__ */ O("h3", {
+								children: [/* @__PURE__ */ D("h3", {
 									className: "text-lg font-semibold text-text-primary",
 									children: G.product.name
-								}), /* @__PURE__ */ O("button", {
+								}), /* @__PURE__ */ D("button", {
 									type: "button",
 									onClick: () => {
 										W(!1), K(null);
 									},
 									className: "rounded-md p-1 text-text-secondary hover:text-text-primary",
-									children: /* @__PURE__ */ O(T, { className: "h-5 w-5" })
+									children: /* @__PURE__ */ D(w, { className: "h-5 w-5" })
 								})]
 							}),
-							/* @__PURE__ */ O("p", {
+							/* @__PURE__ */ D("p", {
 								className: "text-sm text-text-secondary mb-4",
 								children: G.product.description
 							}),
-							/* @__PURE__ */ O("p", {
+							/* @__PURE__ */ D("p", {
 								className: "text-lg font-bold text-text-primary mb-4",
 								children: s(G.product.price, { minimumFractionDigits: 0 })
 							}),
-							/* @__PURE__ */ k("div", {
+							/* @__PURE__ */ O("div", {
 								className: "mb-4",
-								children: [/* @__PURE__ */ O("label", {
+								children: [/* @__PURE__ */ D("label", {
 									className: "block text-sm font-medium text-text-primary mb-2",
 									children: "Quantity"
-								}), /* @__PURE__ */ k("div", {
+								}), /* @__PURE__ */ O("div", {
 									className: "flex items-center gap-3",
 									children: [
-										/* @__PURE__ */ O("button", {
+										/* @__PURE__ */ D("button", {
 											type: "button",
 											onClick: () => K((e) => e && {
 												...e,
 												quantity: Math.max(1, e.quantity - 1)
 											}),
 											className: "flex h-8 w-8 items-center justify-center rounded-full bg-bg-sunken text-text-primary",
-											children: /* @__PURE__ */ O(b, { className: "h-4 w-4" })
+											children: /* @__PURE__ */ D(v, { className: "h-4 w-4" })
 										}),
-										/* @__PURE__ */ O("span", {
+										/* @__PURE__ */ D("span", {
 											className: "min-w-[2ch] text-center font-medium text-text-primary",
 											children: G.quantity
 										}),
-										/* @__PURE__ */ O("button", {
+										/* @__PURE__ */ D("button", {
 											type: "button",
 											onClick: () => K((e) => e && {
 												...e,
 												quantity: e.quantity + 1
 											}),
 											className: "flex h-8 w-8 items-center justify-center rounded-full bg-bg-sunken text-text-primary",
-											children: /* @__PURE__ */ O(x, { className: "h-4 w-4" })
+											children: /* @__PURE__ */ D(y, { className: "h-4 w-4" })
 										})
 									]
 								})]
 							}),
-							/* @__PURE__ */ k("div", {
+							/* @__PURE__ */ O("div", {
 								className: "mb-4",
-								children: [/* @__PURE__ */ O("label", {
+								children: [/* @__PURE__ */ D("label", {
 									className: "block text-sm font-medium text-text-primary mb-2",
 									children: "Special Instructions"
-								}), /* @__PURE__ */ O("textarea", {
+								}), /* @__PURE__ */ D("textarea", {
 									value: G.specialInstructions,
 									onChange: (e) => K((t) => t && {
 										...t,
@@ -582,10 +585,10 @@ function A() {
 									rows: 3
 								})]
 							}),
-							/* @__PURE__ */ k("button", {
+							/* @__PURE__ */ O("button", {
 								type: "button",
 								onClick: () => {
-									G && (Z(G.product, G.quantity, G.specialInstructions), W(!1), K(null), alert(`${G.product.name} added to cart`));
+									G && (oe(G.product, G.quantity, G.specialInstructions), W(!1), K(null), alert(`${G.product.name} added to cart`));
 								},
 								className: "w-full rounded-lg bg-foreground py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity",
 								children: [
@@ -599,13 +602,13 @@ function A() {
 				})
 			})
 		]
-	}) : /* @__PURE__ */ O(n, {
+	}) : /* @__PURE__ */ D(n, {
 		title: "Cart Not Found",
-		children: /* @__PURE__ */ O(r, {
-			icon: /* @__PURE__ */ O(C, { className: "h-12 w-12" }),
+		children: /* @__PURE__ */ D(r, {
+			illustration: "empty-search",
 			title: "Cart not found",
-			description: `No cart found with ID "${A}".`,
-			action: /* @__PURE__ */ O("button", {
+			description: `No cart found with ID"${A}".`,
+			action: /* @__PURE__ */ D("button", {
 				type: "button",
 				onClick: () => j("/customer/carts"),
 				className: "rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity",