@burdenoff/microfe-adaptercloud 2026.624.1 → 2026.625.2

package/dist/adaptercloud/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 } from "@burdenoff/fe-libs/ui";
 //#region src/adaptercloud/pages/common/NotificationCenterPage.tsx
-var M = [
+var N = [
 	{
 		id: "n-001",
 		type: "order_update",
@@ -169,83 +170,83 @@ var M = [
 			amount: 280
 		}
 	}
-], N = {
+], P = {
 	order_update: {
 		icon: x,
-		color: "text-blue-600 dark:text-blue-400",
-		bg: "bg-blue-500/10",
+		color: "text-accent-blue",
+		bg: "bg-accent-blue-subtle/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-subtle/10",
 		label: "Payment"
 	},
 	promotion: {
 		icon: v,
-		color: "text-orange-600 dark:text-orange-400",
-		bg: "bg-orange-500/10",
+		color: "text-accent-orange",
+		bg: "bg-accent-orange-subtle/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/10",
 		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-subtle/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/10",
 		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-subtle/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-subtle/10",
 		label: "Alert"
 	},
 	delivery: {
 		icon: T,
-		color: "text-cyan-600 dark:text-cyan-400",
-		bg: "bg-cyan-500/10",
+		color: "text-accent-cyan",
+		bg: "bg-accent-cyan-subtle/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/10",
 		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",
-	low: "bg-bg-sunken text-text-secondary"
 }, F = {
+	urgent: "bg-status-error-bg-subtle/20 text-status-error-text",
+	high: "bg-accent-orange-subtle/20 text-accent-orange",
+	medium: "bg-accent-blue-subtle/20 text-accent-blue",
+	low: "bg-bg-sunken text-text-secondary"
+}, I = {
 	urgent: "border-l-red-500",
 	high: "border-l-orange-500",
 	medium: "border-l-blue-500",
 	low: "border-l-border"
-}, I = {
+}, L = {
 	urgent: 4,
 	high: 3,
 	medium: 2,
 	low: 1
-}, L = [
+}, R = [
 	{
 		id: "all",
 		label: "All",
@@ -272,18 +273,18 @@ var M = [
 		icon: d
 	}
 ];
-function R(e) {
+function z(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 B(e) {
 	let t = [], n = /* @__PURE__ */ new Map(), r = [
 		"Today",
 		"Yesterday",
 		"Earlier"
 	];
 	for (let t of e) {
-		let e = R(t.createdAt);
+		let e = z(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 V() {
+	let { navigateTo: c } = e(), [l, h] = s(N), [g, v] = s("all"), [x, S] = s(""), [w, T] = s("recent"), [E, D] = s(!1), V = o(() => l.filter((e) => !e.isRead).length, [l]), H = o(() => l.filter((e) => e.priority === "urgent").length, [l]), U = o(() => l.filter((e) => z(e.createdAt) === "Today").length, [l]), W = 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]), G = 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]), K = 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) => L[t.priority] - L[e.priority]);
 				break;
 			case "unread":
 				e.sort((e, t) => e.isRead === t.isRead ? 0 : e.isRead ? 1 : -1);
@@ -346,102 +347,106 @@ function B() {
 		g,
 		x,
 		w
-	]), K = o(() => z(G), [G]), q = a((e) => {
+	]), q = o(() => B(K), [K]), J = a((e) => {
 		h((t) => t.map((t) => t.id === e ? {
 			...t,
 			isRead: !0
 		} : t));
-	}, []), J = a(() => {
+	}, []), Y = a(() => {
 		h((e) => e.map((e) => ({
 			...e,
 			isRead: !0
 		})));
-	}, []), Y = 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(() => {
+		h((t) => t.filter((t) => t.id !== e));
+	}, []), Z = a((e) => {
+		e.isRead || J(e.id), e.actionUrl && c(e.actionUrl);
+	}, [J, c]), Q = 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: V > 0 ? `${V} unread notification${V === 1 ? "" : "s"}` : "All caught up!",
+		purpose: "Your single feed of order updates, account alerts, and platform news. Filter by type, mark items read, and tap any notification to jump straight to what it's about so nothing important slips by.",
 		actions: /* @__PURE__ */ j("div", {
 			className: "flex items-center gap-2",
 			children: [l.length > 0 && /* @__PURE__ */ j("button", {
 				type: "button",
-				onClick: Z,
+				onClick: Q,
 				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",
 				children: [/* @__PURE__ */ A(C, { className: "h-4 w-4" }), /* @__PURE__ */ A("span", {
 					className: "hidden sm:inline",
 					children: "Clear All"
 				})]
-			}), B > 0 && /* @__PURE__ */ j("button", {
+			}), V > 0 && /* @__PURE__ */ j("button", {
 				type: "button",
-				onClick: J,
+				onClick: Y,
 				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",
 				children: [/* @__PURE__ */ A(p, { className: "h-4 w-4" }), "Mark All Read"]
 			})]
 		}),
 		children: [
-			/* @__PURE__ */ j("div", {
-				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",
-						children: [/* @__PURE__ */ A("p", {
-							className: "text-2xl font-bold text-text-primary",
-							children: l.length
-						}), /* @__PURE__ */ A("p", {
-							className: "text-xs text-text-secondary",
-							children: "Total"
-						})]
-					}),
-					/* @__PURE__ */ j("div", {
-						className: "rounded-lg border border-blue-500/30 bg-blue-500/5 p-3 text-center",
-						children: [/* @__PURE__ */ A("p", {
-							className: "text-2xl font-bold text-blue-600 dark:text-blue-400",
-							children: B
-						}), /* @__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",
-						children: [/* @__PURE__ */ A("p", {
-							className: "text-2xl font-bold text-red-600 dark:text-red-400",
-							children: V
-						}), /* @__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",
-						children: [/* @__PURE__ */ A("p", {
-							className: "text-2xl font-bold text-green-600 dark:text-green-400",
-							children: H
-						}), /* @__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",
-						children: [/* @__PURE__ */ A("p", {
-							className: "text-2xl font-bold text-yellow-600 dark:text-yellow-400",
-							children: U
-						}), /* @__PURE__ */ A("p", {
-							className: "text-xs text-text-secondary",
-							children: "This Week"
-						})]
-					})
-				]
+			/* @__PURE__ */ A(M, {
+				className: "mb-6",
+				children: /* @__PURE__ */ j("div", {
+					className: "grid grid-cols-2 gap-3 sm:grid-cols-5",
+					children: [
+						/* @__PURE__ */ j("div", {
+							className: "rounded-lg border border-border-subtle bg-bg-surface p-3 text-center",
+							children: [/* @__PURE__ */ A("p", {
+								className: "text-2xl font-bold text-text-primary",
+								children: l.length
+							}), /* @__PURE__ */ A("p", {
+								className: "text-xs text-text-secondary",
+								children: "Total"
+							})]
+						}),
+						/* @__PURE__ */ j("div", {
+							className: "rounded-lg border border-accent-blue-subtle/30 bg-accent-blue-subtle/5 p-3 text-center",
+							children: [/* @__PURE__ */ A("p", {
+								className: "text-2xl font-bold text-accent-blue",
+								children: V
+							}), /* @__PURE__ */ A("p", {
+								className: "text-xs text-text-secondary",
+								children: "Unread"
+							})]
+						}),
+						/* @__PURE__ */ j("div", {
+							className: "rounded-lg border border-status-error-border/30 bg-status-error-bg-subtle/5 p-3 text-center",
+							children: [/* @__PURE__ */ A("p", {
+								className: "text-2xl font-bold text-status-error-text",
+								children: H
+							}), /* @__PURE__ */ A("p", {
+								className: "text-xs text-text-secondary",
+								children: "Urgent"
+							})]
+						}),
+						/* @__PURE__ */ j("div", {
+							className: "rounded-lg border border-status-success-border/30 bg-status-success-bg-subtle/5 p-3 text-center",
+							children: [/* @__PURE__ */ A("p", {
+								className: "text-2xl font-bold text-status-success-text",
+								children: U
+							}), /* @__PURE__ */ A("p", {
+								className: "text-xs text-text-secondary",
+								children: "Today"
+							})]
+						}),
+						/* @__PURE__ */ j("div", {
+							className: "rounded-lg border border-status-warning-border/30 bg-status-warning-bg-subtle/5 p-3 text-center",
+							children: [/* @__PURE__ */ A("p", {
+								className: "text-2xl font-bold text-status-warning-text",
+								children: W
+							}), /* @__PURE__ */ A("p", {
+								className: "text-xs text-text-secondary",
+								children: "This Week"
+							})]
+						})
+					]
+				})
 			}),
 			/* @__PURE__ */ A("div", {
 				className: "flex items-center gap-2 mb-4 overflow-x-auto pb-1",
-				children: L.map((e) => {
+				children: R.map((e) => {
 					let n = e.icon;
 					return /* @__PURE__ */ j("button", {
 						type: "button",
@@ -452,7 +457,7 @@ function B() {
 							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: G[e.id]
 							})
 						]
 					}, e.id);
@@ -517,7 +522,8 @@ function B() {
 					})] })]
 				})]
 			}),
-			G.length === 0 ? /* @__PURE__ */ A(r, {
+			K.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.",
@@ -534,7 +540,7 @@ function B() {
 				})
 			}) : /* @__PURE__ */ A("div", {
 				className: "space-y-6",
-				children: K.map((e) => /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ j("div", {
+				children: q.map((e) => /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ j("div", {
 					className: "flex items-center gap-3 mb-2",
 					children: [
 						/* @__PURE__ */ A("h3", {
@@ -554,9 +560,9 @@ function B() {
 				}), /* @__PURE__ */ A("div", {
 					className: "rounded-lg border border-border-subtle 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 = P[e.type] ?? P.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", I[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 +580,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", F[e.priority]),
 													children: e.priority
 												})
 											]
@@ -605,20 +611,20 @@ function B() {
 											children: [
 												e.actionUrl && /* @__PURE__ */ A("button", {
 													type: "button",
-													onClick: () => X(e),
+													onClick: () => Z(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: () => J(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",
 													children: [/* @__PURE__ */ A(f, { className: "h-3 w-3" }), "Mark Read"]
 												}),
 												/* @__PURE__ */ j("button", {
 													type: "button",
-													onClick: () => Y(e.id),
+													onClick: () => X(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",
 													children: [/* @__PURE__ */ A(C, { className: "h-3 w-3" }), "Delete"]
@@ -636,13 +642,13 @@ function B() {
 					})
 				})] }, e.label))
 			}),
-			G.length > 0 && /* @__PURE__ */ j("div", {
+			K.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",
 				children: [/* @__PURE__ */ j("p", {
 					className: "text-sm text-text-secondary",
 					children: [
 						"Showing ",
-						G.length,
+						K.length,
 						" of ",
 						l.length,
 						" notifications"
@@ -660,6 +666,6 @@ function B() {
 	});
 }
 //#endregion
-export { B as NotificationCenterPage };
+export { V as NotificationCenterPage };
 
 //# sourceMappingURL=NotificationCenterPage.js.map