@burdenoff/microfe-proserviceworld 2026.525.1 → 2026.625.1

package/dist/proserviceworld/pages/BookingsPage.js

@@ -2,30 +2,30 @@ import { useProServiceWorldStore as e } from "../store/proserviceworldStore.js";
 import { useMemo as t, useState as n } from "react";
 import { ArrowUpDown as r, Calendar as i, CheckCircle2 as a, ChevronRight as o, Clock as s, DollarSign as c, Filter as l, Loader2 as u, Search as d, User as f, XCircle as p } from "lucide-react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { Badge as g, Button as _, Card as v, CardContent as y, CardHeader as b, CardTitle as x, Input as S } from "@burdenoff/fe-libs/ui";
+import { Badge as g, Button as _, Card as v, CardContent as y, GlassCard as b, IllustratedEmptyState as x, Input as S } from "@burdenoff/fe-libs/ui";
 //#region src/proserviceworld/pages/BookingsPage.tsx
 var C = {
 	pending: {
 		label: "Pending",
-		color: "text-yellow-600",
+		color: "text-status-warning-text",
 		icon: s,
 		badgeVariant: "secondary"
 	},
 	in_progress: {
 		label: "In Progress",
-		color: "text-blue-600",
+		color: "text-accent-blue",
 		icon: u,
 		badgeVariant: "default"
 	},
 	completed: {
 		label: "Completed",
-		color: "text-green-600",
+		color: "text-status-success-text",
 		icon: a,
 		badgeVariant: "outline"
 	},
 	cancelled: {
 		label: "Cancelled",
-		color: "text-red-600",
+		color: "text-status-error-text",
 		icon: p,
 		badgeVariant: "destructive"
 	}
@@ -55,15 +55,15 @@ function w() {
 		D === e ? A(!k) : (O(e), A(!1));
 	};
 	return /* @__PURE__ */ h("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 p-6 bg-bg-canvas min-h-screen",
 		children: [
 			/* @__PURE__ */ h("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h1", {
-					className: "text-2xl font-semibold",
+					className: "text-2xl font-semibold tracking-tight",
 					children: "Bookings"
 				}), /* @__PURE__ */ m("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: "Manage and track all your service bookings."
 				})] }), /* @__PURE__ */ h(_, {
 					size: "sm",
@@ -73,85 +73,90 @@ function w() {
 			/* @__PURE__ */ h("div", {
 				className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
 				children: [
-					/* @__PURE__ */ m(v, { children: /* @__PURE__ */ m(y, {
-						className: "pt-4",
+					/* @__PURE__ */ m(b, {
+						treatment: "metric",
+						className: "border-border-seam",
 						children: /* @__PURE__ */ h("div", {
 							className: "flex items-center gap-3",
 							children: [/* @__PURE__ */ m("div", {
-								className: "rounded-lg bg-blue-100 p-2 dark:bg-blue-950",
-								children: /* @__PURE__ */ m(i, { className: "h-5 w-5 text-blue-600" })
+								className: "rounded-lg bg-status-info-bg-subtle p-2",
+								children: /* @__PURE__ */ m(i, { className: "h-5 w-5 text-accent-blue" })
 							}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("p", {
-								className: "text-2xl font-bold",
+								className: "text-2xl font-bold tabular-nums",
 								children: s.length
 							}), /* @__PURE__ */ m("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: "Total Bookings"
 							})] })]
 						})
-					}) }),
-					/* @__PURE__ */ m(v, { children: /* @__PURE__ */ m(y, {
-						className: "pt-4",
+					}),
+					/* @__PURE__ */ m(b, {
+						treatment: "metric",
+						className: "border-border-seam",
 						children: /* @__PURE__ */ h("div", {
 							className: "flex items-center gap-3",
 							children: [/* @__PURE__ */ m("div", {
-								className: "rounded-lg bg-green-100 p-2 dark:bg-green-950",
-								children: /* @__PURE__ */ m(a, { className: "h-5 w-5 text-green-600" })
+								className: "rounded-lg bg-status-success-bg-subtle p-2",
+								children: /* @__PURE__ */ m(a, { className: "h-5 w-5 text-status-success-text" })
 							}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("p", {
-								className: "text-2xl font-bold",
+								className: "text-2xl font-bold tabular-nums",
 								children: F.completed ?? 0
 							}), /* @__PURE__ */ m("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: "Completed"
 							})] })]
 						})
-					}) }),
-					/* @__PURE__ */ m(v, { children: /* @__PURE__ */ m(y, {
-						className: "pt-4",
+					}),
+					/* @__PURE__ */ m(b, {
+						treatment: "metric",
+						className: "border-border-seam",
 						children: /* @__PURE__ */ h("div", {
 							className: "flex items-center gap-3",
 							children: [/* @__PURE__ */ m("div", {
-								className: "rounded-lg bg-yellow-100 p-2 dark:bg-yellow-950",
-								children: /* @__PURE__ */ m(u, { className: "h-5 w-5 text-yellow-600" })
+								className: "rounded-lg bg-status-warning-bg-subtle p-2",
+								children: /* @__PURE__ */ m(u, { className: "h-5 w-5 text-status-warning-text" })
 							}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("p", {
-								className: "text-2xl font-bold",
+								className: "text-2xl font-bold tabular-nums",
 								children: [L, "%"]
 							}), /* @__PURE__ */ m("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: "Avg. In-Progress"
 							})] })]
 						})
-					}) }),
-					/* @__PURE__ */ m(v, { children: /* @__PURE__ */ m(y, {
-						className: "pt-4",
+					}),
+					/* @__PURE__ */ m(b, {
+						treatment: "glass",
+						glow: !0,
+						className: "border-border-seam",
 						children: /* @__PURE__ */ h("div", {
 							className: "flex items-center gap-3",
 							children: [/* @__PURE__ */ m("div", {
-								className: "rounded-lg bg-purple-100 p-2 dark:bg-purple-950",
-								children: /* @__PURE__ */ m(c, { className: "h-5 w-5 text-purple-600" })
+								className: "rounded-lg bg-accent-purple-subtle p-2",
+								children: /* @__PURE__ */ m(c, { className: "h-5 w-5 text-accent-purple" })
 							}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("p", {
-								className: "text-2xl font-bold",
+								className: "text-2xl font-bold tabular-nums",
 								children: ["$", I.toLocaleString()]
 							}), /* @__PURE__ */ m("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: "Total Budget"
 							})] })]
 						})
-					}) })
+					})
 				]
 			}),
 			/* @__PURE__ */ h("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center",
 				children: [/* @__PURE__ */ h("div", {
 					className: "relative flex-1",
-					children: [/* @__PURE__ */ m(d, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ m(S, {
+					children: [/* @__PURE__ */ m(d, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ m(S, {
 						placeholder: "Search bookings by title, provider, or service...",
 						value: p,
 						onChange: (e) => w(e.target.value),
 						className: "pl-10"
 					})]
 				}), /* @__PURE__ */ h("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ m(l, { className: "h-4 w-4 text-muted-foreground" }), [
+					className: "flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ m(l, { className: "h-4 w-4 text-text-secondary" }), [
 						"all",
 						"pending",
 						"in_progress",
@@ -162,7 +167,7 @@ function w() {
 						size: "sm",
 						onClick: () => E(e),
 						children: [e === "all" ? "All" : C[e].label, /* @__PURE__ */ h("span", {
-							className: "ml-1 text-xs opacity-70",
+							className: "ml-1 text-xs opacity-70 tabular-nums",
 							children: [
 								"(",
 								F[e] ?? 0,
@@ -173,7 +178,7 @@ function w() {
 				})]
 			}),
 			/* @__PURE__ */ m("div", {
-				className: "flex gap-2",
+				className: "flex flex-wrap gap-2",
 				children: [
 					{
 						field: "date",
@@ -189,7 +194,8 @@ function w() {
 					}
 				].map(({ field: e, label: t }) => /* @__PURE__ */ h("button", {
 					onClick: () => R(e),
-					className: `flex items-center gap-1 rounded border px-3 py-1 text-xs ${D === e ? "border-primary bg-primary/5 text-primary" : "text-muted-foreground hover:bg-muted/50"}`,
+					"aria-pressed": D === e,
+					className: `flex items-center gap-1 rounded border px-3 py-1 text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${D === e ? "border-border-strong bg-accent-soft text-text-primary" : "border-border-seam text-text-secondary hover:bg-bg-sunken/50"}`,
 					children: [/* @__PURE__ */ m(r, { className: "h-3 w-3" }), t]
 				}, e))
 			}),
@@ -197,13 +203,20 @@ function w() {
 				className: "grid gap-6 lg:grid-cols-3",
 				children: [/* @__PURE__ */ m("div", {
 					className: `space-y-3 ${P ? "lg:col-span-2" : "lg:col-span-3"}`,
-					children: N.length === 0 ? /* @__PURE__ */ m(v, { children: /* @__PURE__ */ m(y, {
-						className: "py-12 text-center text-muted-foreground",
-						children: "No bookings match your filters."
-					}) }) : N.map((e) => {
+					children: N.length === 0 ? /* @__PURE__ */ m(v, {
+						className: "border-border-seam",
+						children: /* @__PURE__ */ m(y, {
+							className: "py-4",
+							children: /* @__PURE__ */ m(x, {
+								illustration: "empty-search",
+								title: "No bookings found",
+								description: "No bookings match your current filters."
+							})
+						})
+					}) : N.map((e) => {
 						let t = C[e.status], n = t.icon;
 						return /* @__PURE__ */ m(v, {
-							className: `cursor-pointer transition-colors hover:bg-muted/30 ${j === e.id ? "border-primary ring-1 ring-primary" : ""}`,
+							className: `cursor-pointer border-border-seam transition-shadow hover:shadow-pop ${j === e.id ? "border-border-strong ring-1 ring-border-focus" : ""}`,
 							onClick: () => M(j === e.id ? null : e.id),
 							children: /* @__PURE__ */ h(y, {
 								className: "pt-4",
@@ -220,11 +233,11 @@ function w() {
 												})]
 											}),
 											/* @__PURE__ */ m("p", {
-												className: "text-sm text-muted-foreground line-clamp-1",
+												className: "text-sm text-text-secondary line-clamp-1",
 												children: e.description
 											}),
 											/* @__PURE__ */ h("div", {
-												className: "flex flex-wrap items-center gap-4 text-xs text-muted-foreground",
+												className: "flex flex-wrap items-center gap-4 text-xs text-text-secondary",
 												children: [
 													/* @__PURE__ */ h("span", {
 														className: "flex items-center gap-1",
@@ -243,7 +256,7 @@ function w() {
 														]
 													}),
 													/* @__PURE__ */ h("span", {
-														className: "flex items-center gap-1",
+														className: "flex items-center gap-1 tabular-nums",
 														children: [
 															/* @__PURE__ */ m(c, { className: "h-3 w-3" }),
 															" $",
@@ -261,18 +274,18 @@ function w() {
 												children: t.label
 											}),
 											e.status === "in_progress" && /* @__PURE__ */ h("span", {
-												className: "text-sm font-medium",
+												className: "text-sm font-medium tabular-nums",
 												children: [e.progress, "%"]
 											}),
-											/* @__PURE__ */ m(o, { className: "h-4 w-4 text-muted-foreground" })
+											/* @__PURE__ */ m(o, { className: "h-4 w-4 text-text-secondary" })
 										]
 									})]
 								}), e.status === "in_progress" && /* @__PURE__ */ m("div", {
 									className: "mt-3",
 									children: /* @__PURE__ */ m("div", {
-										className: "h-2 w-full overflow-hidden rounded-full bg-muted",
+										className: "h-2 w-full overflow-hidden rounded-full bg-bg-sunken",
 										children: /* @__PURE__ */ m("div", {
-											className: "h-2 rounded-full bg-blue-500 transition-all",
+											className: "h-2 rounded-full bg-action-primary-bg transition-all",
 											style: { width: `${e.progress}%` }
 										})
 									})
@@ -282,138 +295,142 @@ function w() {
 					})
 				}), P && /* @__PURE__ */ m("div", {
 					className: "space-y-4",
-					children: /* @__PURE__ */ h(v, { children: [/* @__PURE__ */ m(b, { children: /* @__PURE__ */ h("div", {
-						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ m(x, {
-							className: "text-base",
-							children: "Booking Details"
-						}), /* @__PURE__ */ m(_, {
-							variant: "outline",
-							size: "sm",
-							onClick: () => M(null),
-							children: "Close"
-						})]
-					}) }), /* @__PURE__ */ h(y, {
-						className: "space-y-4",
-						children: [
-							/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h3", {
-								className: "font-semibold",
-								children: P.title
-							}), /* @__PURE__ */ m("p", {
-								className: "mt-1 text-sm text-muted-foreground",
-								children: P.description
-							})] }),
-							/* @__PURE__ */ m(g, {
-								variant: C[P.status].badgeVariant,
-								children: C[P.status].label
-							}),
-							P.status === "in_progress" && /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("div", {
-								className: "flex items-center justify-between text-sm",
-								children: [/* @__PURE__ */ m("span", {
-									className: "text-muted-foreground",
-									children: "Progress"
-								}), /* @__PURE__ */ h("span", {
-									className: "font-medium",
-									children: [P.progress, "%"]
-								})]
-							}), /* @__PURE__ */ m("div", {
-								className: "mt-1 h-2 w-full overflow-hidden rounded-full bg-muted",
-								children: /* @__PURE__ */ m("div", {
-									className: "h-2 rounded-full bg-blue-500",
-									style: { width: `${P.progress}%` }
-								})
-							})] }),
-							/* @__PURE__ */ h("div", {
-								className: "space-y-2 border-t pt-3 text-sm",
-								children: [
-									/* @__PURE__ */ h("div", {
-										className: "flex justify-between",
-										children: [/* @__PURE__ */ m("span", {
-											className: "text-muted-foreground",
-											children: "Service"
-										}), /* @__PURE__ */ m("span", {
-											className: "font-medium",
-											children: P.serviceName
-										})]
-									}),
-									/* @__PURE__ */ h("div", {
-										className: "flex justify-between",
-										children: [/* @__PURE__ */ m("span", {
-											className: "text-muted-foreground",
-											children: "Provider"
-										}), /* @__PURE__ */ m("span", {
-											className: "font-medium",
-											children: P.providerName
-										})]
-									}),
-									/* @__PURE__ */ h("div", {
-										className: "flex justify-between",
-										children: [/* @__PURE__ */ m("span", {
-											className: "text-muted-foreground",
-											children: "Budget"
-										}), /* @__PURE__ */ h("span", {
-											className: "font-medium",
-											children: ["$", P.budget.toLocaleString()]
-										})]
-									}),
-									/* @__PURE__ */ h("div", {
-										className: "flex justify-between",
-										children: [/* @__PURE__ */ m("span", {
-											className: "text-muted-foreground",
-											children: "Start Date"
-										}), /* @__PURE__ */ m("span", {
-											className: "font-medium",
-											children: P.startDate
-										})]
-									}),
-									/* @__PURE__ */ h("div", {
-										className: "flex justify-between",
-										children: [/* @__PURE__ */ m("span", {
-											className: "text-muted-foreground",
-											children: "End Date"
-										}), /* @__PURE__ */ m("span", {
-											className: "font-medium",
-											children: P.endDate
-										})]
-									}),
-									/* @__PURE__ */ h("div", {
-										className: "flex justify-between",
-										children: [/* @__PURE__ */ m("span", {
-											className: "text-muted-foreground",
-											children: "Payment"
-										}), /* @__PURE__ */ m(g, {
-											variant: "secondary",
-											children: P.paymentStatus
-										})]
-									}),
-									/* @__PURE__ */ h("div", {
-										className: "flex justify-between",
-										children: [/* @__PURE__ */ m("span", {
-											className: "text-muted-foreground",
-											children: "Method"
-										}), /* @__PURE__ */ m("span", {
-											className: "font-medium",
-											children: P.paymentMethod.replace("_", " ")
-										})]
+					children: /* @__PURE__ */ h(b, {
+						treatment: "glass",
+						className: "border-border-seam lg:sticky lg:top-6",
+						children: [/* @__PURE__ */ h("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ m("h2", {
+								className: "text-base font-semibold tracking-tight",
+								children: "Booking Details"
+							}), /* @__PURE__ */ m(_, {
+								variant: "outline",
+								size: "sm",
+								onClick: () => M(null),
+								children: "Close"
+							})]
+						}), /* @__PURE__ */ h("div", {
+							className: "mt-4 space-y-4",
+							children: [
+								/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h3", {
+									className: "font-semibold",
+									children: P.title
+								}), /* @__PURE__ */ m("p", {
+									className: "mt-1 text-sm text-text-secondary",
+									children: P.description
+								})] }),
+								/* @__PURE__ */ m(g, {
+									variant: C[P.status].badgeVariant,
+									children: C[P.status].label
+								}),
+								P.status === "in_progress" && /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("div", {
+									className: "flex items-center justify-between text-sm",
+									children: [/* @__PURE__ */ m("span", {
+										className: "text-text-secondary",
+										children: "Progress"
+									}), /* @__PURE__ */ h("span", {
+										className: "font-medium tabular-nums",
+										children: [P.progress, "%"]
+									})]
+								}), /* @__PURE__ */ m("div", {
+									className: "mt-1 h-2 w-full overflow-hidden rounded-full bg-bg-sunken",
+									children: /* @__PURE__ */ m("div", {
+										className: "h-2 rounded-full bg-action-primary-bg",
+										style: { width: `${P.progress}%` }
 									})
-								]
-							}),
-							/* @__PURE__ */ h("div", {
-								className: "flex gap-2 border-t pt-3",
-								children: [/* @__PURE__ */ m(_, {
-									className: "flex-1",
-									size: "sm",
-									variant: "outline",
-									children: "Message Provider"
-								}), P.status === "pending" && /* @__PURE__ */ m(_, {
-									className: "flex-1",
-									size: "sm",
-									variant: "destructive",
-									children: "Cancel"
-								})]
-							})
-						]
-					})] })
+								})] }),
+								/* @__PURE__ */ h("div", {
+									className: "space-y-2 border-t border-border-seam pt-3 text-sm",
+									children: [
+										/* @__PURE__ */ h("div", {
+											className: "flex justify-between",
+											children: [/* @__PURE__ */ m("span", {
+												className: "text-text-secondary",
+												children: "Service"
+											}), /* @__PURE__ */ m("span", {
+												className: "font-medium",
+												children: P.serviceName
+											})]
+										}),
+										/* @__PURE__ */ h("div", {
+											className: "flex justify-between",
+											children: [/* @__PURE__ */ m("span", {
+												className: "text-text-secondary",
+												children: "Provider"
+											}), /* @__PURE__ */ m("span", {
+												className: "font-medium",
+												children: P.providerName
+											})]
+										}),
+										/* @__PURE__ */ h("div", {
+											className: "flex justify-between",
+											children: [/* @__PURE__ */ m("span", {
+												className: "text-text-secondary",
+												children: "Budget"
+											}), /* @__PURE__ */ h("span", {
+												className: "font-medium tabular-nums",
+												children: ["$", P.budget.toLocaleString()]
+											})]
+										}),
+										/* @__PURE__ */ h("div", {
+											className: "flex justify-between",
+											children: [/* @__PURE__ */ m("span", {
+												className: "text-text-secondary",
+												children: "Start Date"
+											}), /* @__PURE__ */ m("span", {
+												className: "font-medium",
+												children: P.startDate
+											})]
+										}),
+										/* @__PURE__ */ h("div", {
+											className: "flex justify-between",
+											children: [/* @__PURE__ */ m("span", {
+												className: "text-text-secondary",
+												children: "End Date"
+											}), /* @__PURE__ */ m("span", {
+												className: "font-medium",
+												children: P.endDate
+											})]
+										}),
+										/* @__PURE__ */ h("div", {
+											className: "flex justify-between",
+											children: [/* @__PURE__ */ m("span", {
+												className: "text-text-secondary",
+												children: "Payment"
+											}), /* @__PURE__ */ m(g, {
+												variant: "secondary",
+												children: P.paymentStatus
+											})]
+										}),
+										/* @__PURE__ */ h("div", {
+											className: "flex justify-between",
+											children: [/* @__PURE__ */ m("span", {
+												className: "text-text-secondary",
+												children: "Method"
+											}), /* @__PURE__ */ m("span", {
+												className: "font-medium",
+												children: P.paymentMethod.replace("_", " ")
+											})]
+										})
+									]
+								}),
+								/* @__PURE__ */ h("div", {
+									className: "flex gap-2 border-t border-border-seam pt-3",
+									children: [/* @__PURE__ */ m(_, {
+										className: "flex-1",
+										size: "sm",
+										variant: "outline",
+										children: "Message Provider"
+									}), P.status === "pending" && /* @__PURE__ */ m(_, {
+										className: "flex-1",
+										size: "sm",
+										variant: "destructive",
+										children: "Cancel"
+									})]
+								})
+							]
+						})]
+					})
 				})]
 			})
 		]