@burdenoff/microfe-subscriberbot 2026.624.1 → 2026.626.1

package/dist/subscriberbot/pages/common/NotificationCenterPage.js

@@ -6,8 +6,9 @@ import { formatRelativeTime as i } from "../../utils/formatters.js";
 import { useCallback as a, useMemo as o, useState as s } from "react";
 import { AlertCircle as c, AlertTriangle as l, ArrowUpDown as u, Bell as d, Check as f, CheckCheck as p, Clock as m, CreditCard as h, Inbox as g, MailOpen as _, Megaphone as v, RefreshCw as y, Search as b, ShoppingBag as x, Star as S, Trash2 as C, TrendingUp as w, Truck as T, UserCheck as E, Users as D, X as O } from "lucide-react";
 import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+import { EmphasisPanel as M, PagePurpose as N } from "@burdenoff/fe-libs/ui";
 //#region src/subscriberbot/pages/common/NotificationCenterPage.tsx
-var M = [
+var P = [
 	{
 		id: "n-001",
 		type: "order_update",
@@ -169,83 +170,83 @@ var M = [
 			amount: 280
 		}
 	}
-], N = {
+], F = {
 	order_update: {
 		icon: x,
-		color: "text-blue-600 dark:text-blue-400",
-		bg: "bg-blue-500/10",
+		color: "text-status-info-text",
+		bg: "bg-status-info-bg/10",
 		label: "Order"
 	},
 	payment: {
 		icon: h,
-		color: "text-green-600 dark:text-green-400",
-		bg: "bg-green-500/10",
+		color: "text-status-success-text",
+		bg: "bg-status-success-bg/10",
 		label: "Payment"
 	},
 	promotion: {
 		icon: v,
-		color: "text-orange-600 dark:text-orange-400",
-		bg: "bg-orange-500/10",
+		color: "text-status-warning-text",
+		bg: "bg-status-warning-bg/10",
 		label: "Promo"
 	},
 	system: {
 		icon: c,
-		color: "text-purple-600 dark:text-purple-400",
-		bg: "bg-purple-500/10",
+		color: "text-accent-purple",
+		bg: "bg-accent-purple-subtle",
 		label: "System"
 	},
 	review: {
 		icon: S,
-		color: "text-yellow-600 dark:text-yellow-400",
-		bg: "bg-yellow-500/10",
+		color: "text-status-warning-text",
+		bg: "bg-status-warning-bg/10",
 		label: "Review"
 	},
 	staff: {
 		icon: D,
-		color: "text-indigo-600 dark:text-indigo-400",
-		bg: "bg-indigo-500/10",
+		color: "text-accent-indigo",
+		bg: "bg-accent-indigo-subtle",
 		label: "Staff"
 	},
 	investment: {
 		icon: w,
-		color: "text-emerald-600 dark:text-emerald-400",
-		bg: "bg-emerald-500/10",
+		color: "text-status-success-text",
+		bg: "bg-status-success-bg/10",
 		label: "Investment"
 	},
 	alert: {
 		icon: l,
-		color: "text-red-600 dark:text-red-400",
-		bg: "bg-red-500/10",
+		color: "text-status-error-text",
+		bg: "bg-status-error-bg/10",
 		label: "Alert"
 	},
 	delivery: {
 		icon: T,
-		color: "text-cyan-600 dark:text-cyan-400",
-		bg: "bg-cyan-500/10",
+		color: "text-status-info-text",
+		bg: "bg-status-info-bg/10",
 		label: "Delivery"
 	},
 	account: {
 		icon: E,
-		color: "text-teal-600 dark:text-teal-400",
-		bg: "bg-teal-500/10",
+		color: "text-accent-teal",
+		bg: "bg-accent-teal-subtle",
 		label: "Account"
 	}
-}, P = {
-	urgent: "bg-red-500/20 text-red-600 dark:text-red-400",
-	high: "bg-orange-500/20 text-orange-600 dark:text-orange-400",
-	medium: "bg-blue-500/20 text-blue-600 dark:text-blue-400",
+}, I = {
+	urgent: "bg-status-error-bg/20 text-status-error-text",
+	high: "bg-status-warning-bg/20 text-status-warning-text",
+	medium: "bg-status-info-bg/20 text-status-info-text",
 	low: "bg-bg-sunken text-text-secondary"
-}, F = {
+}, L = {
 	urgent: "border-l-red-500",
 	high: "border-l-orange-500",
 	medium: "border-l-blue-500",
 	low: "border-l-border"
-}, I = {
+}, R = {
 	urgent: 4,
 	high: 3,
 	medium: 2,
 	low: 1
-}, L = [
+}, z = [
 	{
 		id: "all",
 		label: "All",
@@ -272,18 +273,18 @@ var M = [
 		icon: d
 	}
 ];
-function R(e) {
+function B(e) {
 	let t = new Date(e), n = /* @__PURE__ */ new Date(), r = new Date(n.getFullYear(), n.getMonth(), n.getDate()), i = /* @__PURE__ */ new Date(r.getTime() - 1440 * 60 * 1e3);
 	return t >= r ? "Today" : t >= i ? "Yesterday" : "Earlier";
 }
-function z(e) {
+function V(e) {
 	let t = [], n = /* @__PURE__ */ new Map(), r = [
 		"Today",
 		"Yesterday",
 		"Earlier"
 	];
 	for (let t of e) {
-		let e = R(t.createdAt);
+		let e = B(t.createdAt);
 		n.has(e) || n.set(e, []), n.get(e).push(t);
 	}
 	for (let e of r) {
@@ -295,11 +296,11 @@ function z(e) {
 	}
 	return t;
 }
-function B() {
-	let { navigateTo: c } = e(), [l, h] = s(M), [g, v] = s("all"), [x, S] = s(""), [w, T] = s("recent"), [E, D] = s(!1), B = o(() => l.filter((e) => !e.isRead).length, [l]), V = o(() => l.filter((e) => e.priority === "urgent").length, [l]), H = o(() => l.filter((e) => R(e.createdAt) === "Today").length, [l]), U = o(() => {
+function H() {
+	let { navigateTo: c } = e(), [l, h] = s(P), [g, v] = s("all"), [x, S] = s(""), [w, T] = s("recent"), [E, D] = s(!1), H = o(() => l.filter((e) => !e.isRead).length, [l]), U = o(() => l.filter((e) => e.priority === "urgent").length, [l]), W = o(() => l.filter((e) => B(e.createdAt) === "Today").length, [l]), G = o(() => {
 		let e = /* @__PURE__ */ new Date(Date.now() - 10080 * 60 * 1e3);
 		return l.filter((t) => new Date(t.createdAt) >= e).length;
-	}, [l]), W = o(() => {
+	}, [l]), K = o(() => {
 		let e = {
 			all: 0,
 			orders: 0,
@@ -309,7 +310,7 @@ function B() {
 		};
 		for (let t of l) e.all++, t.isRead || e.unread++, (t.type === "order_update" || t.type === "delivery") && e.orders++, t.type === "promotion" && e.promotions++, (t.type === "system" || t.type === "alert" || t.type === "account") && e.system++;
 		return e;
-	}, [l]), G = o(() => {
+	}, [l]), q = o(() => {
 		let e = [...l];
 		switch (g) {
 			case "orders":
@@ -334,7 +335,7 @@ function B() {
 				e.sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime());
 				break;
 			case "priority":
-				e.sort((e, t) => I[t.priority] - I[e.priority]);
+				e.sort((e, t) => R[t.priority] - R[e.priority]);
 				break;
 			case "unread":
 				e.sort((e, t) => e.isRead === t.isRead ? 0 : e.isRead ? 1 : -1);
@@ -346,49 +347,54 @@ function B() {
 		g,
 		x,
 		w
-	]), K = o(() => z(G), [G]), q = a((e) => {
+	]), J = o(() => V(q), [q]), Y = a((e) => {
 		h((t) => t.map((t) => t.id === e ? {
 			...t,
 			isRead: !0
 		} : t));
-	}, []), J = a(() => {
+	}, []), X = a(() => {
 		h((e) => e.map((e) => ({
 			...e,
 			isRead: !0
 		})));
-	}, []), Y = a((e) => {
+	}, []), Z = a((e) => {
 		h((t) => t.filter((t) => t.id !== e));
-	}, []), X = a((e) => {
-		e.isRead || q(e.id), e.actionUrl && c(e.actionUrl);
-	}, [q, c]), Z = a(() => {
+	}, []), Q = a((e) => {
+		e.isRead || Y(e.id), e.actionUrl && c(e.actionUrl);
+	}, [Y, c]), $ = a(() => {
 		window.confirm("Are you sure you want to clear all notifications?") && h([]);
 	}, []);
 	return /* @__PURE__ */ j(n, {
 		title: "Notifications",
-		description: B > 0 ? `${B} unread notification${B === 1 ? "" : "s"}` : "All caught up!",
+		description: H > 0 ? `${H} unread notification${H === 1 ? "" : "s"}` : "All caught up!",
 		actions: /* @__PURE__ */ j("div", {
 			className: "flex items-center gap-2",
 			children: [l.length > 0 && /* @__PURE__ */ j("button", {
 				type: "button",
-				onClick: Z,
-				className: "flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-accent transition-colors",
+				onClick: $,
+				className: "flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-accent transition-colors",
 				children: [/* @__PURE__ */ A(C, { className: "h-4 w-4" }), /* @__PURE__ */ A("span", {
 					className: "hidden sm:inline",
 					children: "Clear All"
 				})]
-			}), B > 0 && /* @__PURE__ */ j("button", {
+			}), H > 0 && /* @__PURE__ */ j("button", {
 				type: "button",
-				onClick: J,
-				className: "flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
+				onClick: X,
+				className: "flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 				children: [/* @__PURE__ */ A(p, { className: "h-4 w-4" }), "Mark All Read"]
 			})]
 		}),
 		children: [
-			/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ A(N, {
+				icon: /* @__PURE__ */ A(d, { className: "h-4 w-4" }),
+				className: "mb-6",
+				children: "Every update from the platform in one feed — order status changes, promotions, system alerts and more. Filter by type or unread, search for a specific alert, and mark things read or clear them once you've dealt with them. Check here first whenever something needs your attention."
+			}),
+			/* @__PURE__ */ j(M, {
 				className: "grid grid-cols-2 gap-3 sm:grid-cols-5 mb-6",
 				children: [
 					/* @__PURE__ */ j("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-3 text-center",
+						className: "rounded-lg border border-border-seam bg-bg-surface p-3 text-center",
 						children: [/* @__PURE__ */ A("p", {
 							className: "text-2xl font-bold text-text-primary",
 							children: l.length
@@ -398,40 +404,40 @@ function B() {
 						})]
 					}),
 					/* @__PURE__ */ j("div", {
-						className: "rounded-lg border border-blue-500/30 bg-blue-500/5 p-3 text-center",
+						className: "rounded-lg border border-status-info-border/30 bg-status-info-bg/5 p-3 text-center",
 						children: [/* @__PURE__ */ A("p", {
-							className: "text-2xl font-bold text-blue-600 dark:text-blue-400",
-							children: B
+							className: "text-2xl font-bold text-status-info-text",
+							children: H
 						}), /* @__PURE__ */ A("p", {
 							className: "text-xs text-text-secondary",
 							children: "Unread"
 						})]
 					}),
 					/* @__PURE__ */ j("div", {
-						className: "rounded-lg border border-red-500/30 bg-red-500/5 p-3 text-center",
+						className: "rounded-lg border border-status-error-border/30 bg-status-error-bg/5 p-3 text-center",
 						children: [/* @__PURE__ */ A("p", {
-							className: "text-2xl font-bold text-red-600 dark:text-red-400",
-							children: V
+							className: "text-2xl font-bold text-status-error-text",
+							children: U
 						}), /* @__PURE__ */ A("p", {
 							className: "text-xs text-text-secondary",
 							children: "Urgent"
 						})]
 					}),
 					/* @__PURE__ */ j("div", {
-						className: "rounded-lg border border-green-500/30 bg-green-500/5 p-3 text-center",
+						className: "rounded-lg border border-status-success-border/30 bg-status-success-bg/5 p-3 text-center",
 						children: [/* @__PURE__ */ A("p", {
-							className: "text-2xl font-bold text-green-600 dark:text-green-400",
-							children: H
+							className: "text-2xl font-bold text-status-success-text",
+							children: W
 						}), /* @__PURE__ */ A("p", {
 							className: "text-xs text-text-secondary",
 							children: "Today"
 						})]
 					}),
 					/* @__PURE__ */ j("div", {
-						className: "rounded-lg border border-yellow-500/30 bg-yellow-500/5 p-3 text-center",
+						className: "rounded-lg border border-status-warning-border/30 bg-status-warning-bg/5 p-3 text-center",
 						children: [/* @__PURE__ */ A("p", {
-							className: "text-2xl font-bold text-yellow-600 dark:text-yellow-400",
-							children: U
+							className: "text-2xl font-bold text-status-warning-text",
+							children: G
 						}), /* @__PURE__ */ A("p", {
 							className: "text-xs text-text-secondary",
 							children: "This Week"
@@ -441,18 +447,18 @@ function B() {
 			}),
 			/* @__PURE__ */ A("div", {
 				className: "flex items-center gap-2 mb-4 overflow-x-auto pb-1",
-				children: L.map((e) => {
+				children: z.map((e) => {
 					let n = e.icon;
 					return /* @__PURE__ */ j("button", {
 						type: "button",
 						onClick: () => v(e.id),
-						className: t("flex items-center gap-1.5 whitespace-nowrap rounded-full border px-3 py-1.5 text-sm font-medium transition-colors", g === e.id ? "border-primary bg-action-primary-bg/10 text-text-primary" : "border-border-subtle text-text-secondary hover:text-text-primary hover:border-accent-foreground/20"),
+						className: t("flex items-center gap-1.5 whitespace-nowrap rounded-full border px-3 py-1.5 text-sm font-medium transition-colors", g === e.id ? "border-primary bg-action-primary-bg/10 text-text-primary" : "border-border-seam text-text-secondary hover:text-text-primary hover:border-accent-foreground/20"),
 						children: [
 							/* @__PURE__ */ A(n, { className: "h-3.5 w-3.5" }),
 							e.label,
 							/* @__PURE__ */ A("span", {
 								className: t("inline-flex h-5 min-w-[20px] items-center justify-center rounded-full px-1 text-xs", g === e.id ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary"),
-								children: W[e.id]
+								children: K[e.id]
 							})
 						]
 					}, e.id);
@@ -469,7 +475,7 @@ function B() {
 							placeholder: "Search notifications...",
 							value: x,
 							onChange: (e) => S(e.target.value),
-							className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2.5 pl-10 pr-9 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
+							className: "w-full rounded-lg border border-border-seam bg-bg-surface py-2.5 pl-10 pr-9 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 						}),
 						x && /* @__PURE__ */ A("button", {
 							type: "button",
@@ -483,7 +489,7 @@ function B() {
 					children: [/* @__PURE__ */ j("button", {
 						type: "button",
 						onClick: () => D(!E),
-						className: "flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
+						className: "flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 						children: [/* @__PURE__ */ A(u, { className: "h-4 w-4" }), /* @__PURE__ */ A("span", {
 							className: "hidden sm:inline",
 							children: "Sort"
@@ -492,7 +498,7 @@ function B() {
 						className: "fixed inset-0 z-10",
 						onClick: () => D(!1)
 					}), /* @__PURE__ */ A("div", {
-						className: "absolute right-0 top-full mt-1 z-20 w-44 rounded-lg border border-border-subtle bg-bg-surface shadow-lg py-1",
+						className: "absolute right-0 top-full mt-1 z-20 w-44 rounded-lg border border-border-seam bg-bg-surface shadow-lg py-1",
 						children: [
 							{
 								value: "recent",
@@ -517,31 +523,32 @@ function B() {
 					})] })]
 				})]
 			}),
-			G.length === 0 ? /* @__PURE__ */ A(r, {
+			q.length === 0 ? /* @__PURE__ */ A(r, {
+				illustration: "empty-notifications",
 				icon: /* @__PURE__ */ A(d, { className: "h-12 w-12" }),
 				title: "No notifications",
 				description: x ? "No notifications match your search. Try different keywords." : g === "unread" ? "You're all caught up! No unread notifications." : "No notifications in this category yet.",
 				action: x ? /* @__PURE__ */ A("button", {
 					type: "button",
 					onClick: () => S(""),
-					className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
+					className: "rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 					children: "Clear Search"
 				}) : g === "all" ? void 0 : /* @__PURE__ */ A("button", {
 					type: "button",
 					onClick: () => v("all"),
-					className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
+					className: "rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 					children: "View All Notifications"
 				})
 			}) : /* @__PURE__ */ A("div", {
 				className: "space-y-6",
-				children: K.map((e) => /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ j("div", {
+				children: J.map((e) => /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ j("div", {
 					className: "flex items-center gap-3 mb-2",
 					children: [
 						/* @__PURE__ */ A("h3", {
 							className: "text-xs font-semibold uppercase tracking-wider text-text-secondary",
 							children: e.label
 						}),
-						/* @__PURE__ */ A("div", { className: "flex-1 border-t border-border-subtle" }),
+						/* @__PURE__ */ A("div", { className: "flex-1 border-t border-border-seam" }),
 						/* @__PURE__ */ j("span", {
 							className: "text-xs text-text-secondary",
 							children: [
@@ -552,11 +559,11 @@ function B() {
 						})
 					]
 				}), /* @__PURE__ */ A("div", {
-					className: "rounded-lg border border-border-subtle bg-bg-surface divide-y divide-border overflow-hidden",
+					className: "rounded-lg border border-border-seam bg-bg-surface divide-y divide-border overflow-hidden",
 					children: e.items.map((e) => {
-						let n = N[e.type] ?? N.system, r = n.icon;
+						let n = F[e.type] ?? F.system, r = n.icon;
 						return /* @__PURE__ */ j("div", {
-							className: t("flex items-start gap-3 px-4 py-4 border-l-4 transition-colors", F[e.priority], !e.isRead && "bg-accent/30"),
+							className: t("flex items-start gap-3 px-4 py-4 border-l-4 transition-colors", L[e.priority], !e.isRead && "bg-accent/30"),
 							children: [
 								/* @__PURE__ */ A("div", {
 									className: t("flex h-10 w-10 shrink-0 items-center justify-center rounded-full", n.bg),
@@ -574,7 +581,7 @@ function B() {
 												}),
 												!e.isRead && /* @__PURE__ */ A("span", { className: "h-2 w-2 rounded-full bg-action-primary-bg shrink-0" }),
 												/* @__PURE__ */ A("span", {
-													className: t("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium", P[e.priority]),
+													className: t("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium", I[e.priority]),
 													children: e.priority
 												})
 											]
@@ -605,22 +612,22 @@ function B() {
 											children: [
 												e.actionUrl && /* @__PURE__ */ A("button", {
 													type: "button",
-													onClick: () => X(e),
+													onClick: () => Q(e),
 													className: "rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
 													children: e.actionText ?? "View"
 												}),
 												!e.isRead && /* @__PURE__ */ j("button", {
 													type: "button",
-													onClick: () => q(e.id),
+													onClick: () => Y(e.id),
 													title: "Mark as read",
-													className: "flex items-center gap-1 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-accent transition-colors",
+													className: "flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-accent transition-colors",
 													children: [/* @__PURE__ */ A(f, { className: "h-3 w-3" }), "Mark Read"]
 												}),
 												/* @__PURE__ */ j("button", {
 													type: "button",
-													onClick: () => Y(e.id),
+													onClick: () => Z(e.id),
 													title: "Delete notification",
-													className: "flex items-center gap-1 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-status-error-text hover:bg-status-error-bg/10 transition-colors",
+													className: "flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-xs font-medium text-status-error-text hover:bg-status-error-bg/10 transition-colors",
 													children: [/* @__PURE__ */ A(C, { className: "h-3 w-3" }), "Delete"]
 												})
 											]
@@ -636,13 +643,13 @@ function B() {
 					})
 				})] }, e.label))
 			}),
-			G.length > 0 && /* @__PURE__ */ j("div", {
-				className: "mt-6 flex items-center justify-between rounded-lg border border-border-subtle bg-bg-surface px-4 py-3",
+			q.length > 0 && /* @__PURE__ */ j("div", {
+				className: "mt-6 flex items-center justify-between rounded-lg border border-border-seam bg-bg-surface px-4 py-3",
 				children: [/* @__PURE__ */ j("p", {
 					className: "text-sm text-text-secondary",
 					children: [
 						"Showing ",
-						G.length,
+						q.length,
 						" of ",
 						l.length,
 						" notifications"
@@ -660,6 +667,6 @@ function B() {
 	});
 }
 //#endregion
-export { B as NotificationCenterPage };
+export { H as NotificationCenterPage };
 
 //# sourceMappingURL=NotificationCenterPage.js.map