@burdenoff/microfe-adaptercloud 2026.614.1

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

@@ -0,0 +1,665 @@
+import { useAdapterCloud as e } from "../../context/AdapterCloudContext.js";
+import { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { EmptyState as r } from "../../components/EmptyState.js";
+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";
+//#region src/adaptercloud/pages/common/NotificationCenterPage.tsx
+var M = [
+	{
+		id: "n-001",
+		type: "order_update",
+		title: "Order Delivered Successfully!",
+		message: "Your order #ORD-001 from Dosa Express has been delivered. Rate your experience to help others!",
+		priority: "medium",
+		isRead: !1,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 480 * 1e3)).toISOString(),
+		actionUrl: "/customer/order/ORD-001",
+		actionText: "Rate Order",
+		metadata: {
+			orderId: "ORD-001",
+			cartId: "FOOD-001"
+		}
+	},
+	{
+		id: "n-002",
+		type: "payment",
+		title: "Payment Confirmed",
+		message: "Your payment of ₹495 for order #ORD-002 at Quick Cuts Salon has been processed successfully.",
+		priority: "medium",
+		isRead: !1,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 2100 * 1e3)).toISOString(),
+		metadata: {
+			orderId: "ORD-002",
+			amount: 495
+		}
+	},
+	{
+		id: "n-003",
+		type: "promotion",
+		title: "20% Off Beauty Services This Weekend!",
+		message: "Glow Beauty Services is offering 20% off on all treatments this weekend only. Don't miss out!",
+		priority: "low",
+		isRead: !1,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 7200 * 1e3)).toISOString(),
+		actionUrl: "/customer/cart/SERV-002",
+		actionText: "Book Now",
+		metadata: { cartId: "SERV-002" }
+	},
+	{
+		id: "n-004",
+		type: "review",
+		title: "New Review Response",
+		message: "Dosa Express replied to your review: \"Thank you so much for your kind words! We hope to serve you again soon.\"",
+		priority: "low",
+		isRead: !1,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 14400 * 1e3)).toISOString(),
+		actionUrl: "/customer/reviews",
+		actionText: "View Reply"
+	},
+	{
+		id: "n-005",
+		type: "system",
+		title: "App Update Available",
+		message: "Version 2.4.0 of AdapterCloud is available with improved performance, new category filters, and bug fixes.",
+		priority: "medium",
+		isRead: !1,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 420 * 60 * 1e3)).toISOString(),
+		actionUrl: "/settings",
+		actionText: "Update Now"
+	},
+	{
+		id: "n-006",
+		type: "order_update",
+		title: "Appointment Confirmed",
+		message: "Your appointment at Quick Cuts Salon has been confirmed for tomorrow at 3:00 PM. The stylist Suresh will be serving you.",
+		priority: "medium",
+		isRead: !0,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 1440 * 60 * 1e3)).toISOString(),
+		actionUrl: "/customer/order/ORD-002",
+		actionText: "View Details",
+		metadata: { orderId: "ORD-002" }
+	},
+	{
+		id: "n-007",
+		type: "investment",
+		title: "Monthly Returns Credited",
+		message: "You received ₹1,250 in monthly returns from your Quick Cuts Salon investment. Total portfolio value: ₹2,12,500.",
+		priority: "medium",
+		isRead: !0,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 1440 * 60 * 1e3)).toISOString(),
+		actionUrl: "/investor/portfolio",
+		actionText: "View Portfolio",
+		metadata: { amount: 1250 }
+	},
+	{
+		id: "n-008",
+		type: "delivery",
+		title: "Delivery Worker Assigned",
+		message: "Ravi Kumar (rated 4.8) has been assigned to deliver your order from Biryani Pot. Estimated arrival: 25 minutes.",
+		priority: "high",
+		isRead: !0,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 1.5 * 24 * 60 * 60 * 1e3)).toISOString(),
+		metadata: { orderId: "ORD-003" }
+	},
+	{
+		id: "n-009",
+		type: "alert",
+		title: "Unusual Login Attempt Detected",
+		message: "We detected a login attempt from a new device in Mumbai. If this was not you, please change your password immediately.",
+		priority: "urgent",
+		isRead: !0,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 2880 * 60 * 1e3)).toISOString(),
+		actionUrl: "/settings",
+		actionText: "Review Activity"
+	},
+	{
+		id: "n-010",
+		type: "promotion",
+		title: "Flash Sale: Mobile Accessories",
+		message: "Gadget Zone Brigade is running a flash sale! Up to 30% off on bluetooth headphones, cases, and chargers.",
+		priority: "low",
+		isRead: !0,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 4320 * 60 * 1e3)).toISOString(),
+		actionUrl: "/customer/cart/RETAIL-003",
+		actionText: "Shop Now",
+		metadata: { cartId: "RETAIL-003" }
+	},
+	{
+		id: "n-011",
+		type: "system",
+		title: "Scheduled Platform Maintenance",
+		message: "Platform maintenance is scheduled for Sunday 2:00 AM - 4:00 AM IST. Some services may be briefly unavailable during this window.",
+		priority: "high",
+		isRead: !0,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 5760 * 60 * 1e3)).toISOString()
+	},
+	{
+		id: "n-012",
+		type: "account",
+		title: "KYC Verification Complete",
+		message: "Your KYC verification has been completed successfully. You now have full access to all platform features including investments.",
+		priority: "medium",
+		isRead: !0,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 7200 * 60 * 1e3)).toISOString()
+	},
+	{
+		id: "n-013",
+		type: "staff",
+		title: "Staff Schedule Updated",
+		message: "Priya Sharma has updated her availability for this week. She will be unavailable on Wednesday and Thursday.",
+		priority: "medium",
+		isRead: !0,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 8640 * 60 * 1e3)).toISOString(),
+		actionUrl: "/owner/staff",
+		actionText: "View Schedule"
+	},
+	{
+		id: "n-014",
+		type: "payment",
+		title: "Refund Processed",
+		message: "Your refund of ₹280 for order #ORD-005 has been processed. The amount will reflect in your account within 3-5 business days.",
+		priority: "medium",
+		isRead: !0,
+		createdAt: (/* @__PURE__ */ new Date(Date.now() - 10080 * 60 * 1e3)).toISOString(),
+		metadata: {
+			orderId: "ORD-005",
+			amount: 280
+		}
+	}
+], N = {
+	order_update: {
+		icon: x,
+		color: "text-blue-600 dark:text-blue-400",
+		bg: "bg-blue-500/10",
+		label: "Order"
+	},
+	payment: {
+		icon: h,
+		color: "text-green-600 dark:text-green-400",
+		bg: "bg-green-500/10",
+		label: "Payment"
+	},
+	promotion: {
+		icon: v,
+		color: "text-orange-600 dark:text-orange-400",
+		bg: "bg-orange-500/10",
+		label: "Promo"
+	},
+	system: {
+		icon: c,
+		color: "text-purple-600 dark:text-purple-400",
+		bg: "bg-purple-500/10",
+		label: "System"
+	},
+	review: {
+		icon: S,
+		color: "text-yellow-600 dark:text-yellow-400",
+		bg: "bg-yellow-500/10",
+		label: "Review"
+	},
+	staff: {
+		icon: D,
+		color: "text-indigo-600 dark:text-indigo-400",
+		bg: "bg-indigo-500/10",
+		label: "Staff"
+	},
+	investment: {
+		icon: w,
+		color: "text-emerald-600 dark:text-emerald-400",
+		bg: "bg-emerald-500/10",
+		label: "Investment"
+	},
+	alert: {
+		icon: l,
+		color: "text-red-600 dark:text-red-400",
+		bg: "bg-red-500/10",
+		label: "Alert"
+	},
+	delivery: {
+		icon: T,
+		color: "text-cyan-600 dark:text-cyan-400",
+		bg: "bg-cyan-500/10",
+		label: "Delivery"
+	},
+	account: {
+		icon: E,
+		color: "text-teal-600 dark:text-teal-400",
+		bg: "bg-teal-500/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-muted text-muted-foreground"
+}, F = {
+	urgent: "border-l-red-500",
+	high: "border-l-orange-500",
+	medium: "border-l-blue-500",
+	low: "border-l-border"
+}, I = {
+	urgent: 4,
+	high: 3,
+	medium: 2,
+	low: 1
+}, L = [
+	{
+		id: "all",
+		label: "All",
+		icon: g
+	},
+	{
+		id: "orders",
+		label: "Orders",
+		icon: x
+	},
+	{
+		id: "promotions",
+		label: "Promotions",
+		icon: v
+	},
+	{
+		id: "system",
+		label: "System",
+		icon: c
+	},
+	{
+		id: "unread",
+		label: "Unread",
+		icon: d
+	}
+];
+function R(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) {
+	let t = [], n = /* @__PURE__ */ new Map(), r = [
+		"Today",
+		"Yesterday",
+		"Earlier"
+	];
+	for (let t of e) {
+		let e = R(t.createdAt);
+		n.has(e) || n.set(e, []), n.get(e).push(t);
+	}
+	for (let e of r) {
+		let r = n.get(e);
+		r && r.length > 0 && t.push({
+			label: e,
+			items: r
+		});
+	}
+	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(() => {
+		let e = /* @__PURE__ */ new Date(Date.now() - 10080 * 60 * 1e3);
+		return l.filter((t) => new Date(t.createdAt) >= e).length;
+	}, [l]), W = o(() => {
+		let e = {
+			all: 0,
+			orders: 0,
+			promotions: 0,
+			system: 0,
+			unread: 0
+		};
+		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(() => {
+		let e = [...l];
+		switch (g) {
+			case "orders":
+				e = e.filter((e) => e.type === "order_update" || e.type === "delivery");
+				break;
+			case "promotions":
+				e = e.filter((e) => e.type === "promotion");
+				break;
+			case "system":
+				e = e.filter((e) => e.type === "system" || e.type === "alert" || e.type === "account");
+				break;
+			case "unread":
+				e = e.filter((e) => !e.isRead);
+				break;
+		}
+		if (x) {
+			let t = x.toLowerCase();
+			e = e.filter((e) => e.title.toLowerCase().includes(t) || e.message.toLowerCase().includes(t));
+		}
+		switch (w) {
+			case "recent":
+				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]);
+				break;
+			case "unread":
+				e.sort((e, t) => e.isRead === t.isRead ? 0 : e.isRead ? 1 : -1);
+				break;
+		}
+		return e;
+	}, [
+		l,
+		g,
+		x,
+		w
+	]), K = o(() => z(G), [G]), q = a((e) => {
+		h((t) => t.map((t) => t.id === e ? {
+			...t,
+			isRead: !0
+		} : t));
+	}, []), J = 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(() => {
+		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!",
+		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 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground 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", {
+				type: "button",
+				onClick: J,
+				className: "flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-sm font-medium text-foreground 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 bg-card p-3 text-center",
+						children: [/* @__PURE__ */ A("p", {
+							className: "text-2xl font-bold text-foreground",
+							children: l.length
+						}), /* @__PURE__ */ A("p", {
+							className: "text-xs text-muted-foreground",
+							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-muted-foreground",
+							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-muted-foreground",
+							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-muted-foreground",
+							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-muted-foreground",
+							children: "This Week"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "flex items-center gap-2 mb-4 overflow-x-auto pb-1",
+				children: L.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-primary/10 text-foreground" : "border-border text-muted-foreground hover:text-foreground 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-primary text-primary-foreground" : "bg-muted text-muted-foreground"),
+								children: W[e.id]
+							})
+						]
+					}, e.id);
+				})
+			}),
+			/* @__PURE__ */ j("div", {
+				className: "flex items-center gap-3 mb-6",
+				children: [/* @__PURE__ */ j("div", {
+					className: "relative flex-1",
+					children: [
+						/* @__PURE__ */ A(b, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+						/* @__PURE__ */ A("input", {
+							type: "text",
+							placeholder: "Search notifications...",
+							value: x,
+							onChange: (e) => S(e.target.value),
+							className: "w-full rounded-lg border border-border bg-card py-2.5 pl-10 pr-9 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+						}),
+						x && /* @__PURE__ */ A("button", {
+							type: "button",
+							onClick: () => S(""),
+							className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+							children: /* @__PURE__ */ A(O, { className: "h-4 w-4" })
+						})
+					]
+				}), /* @__PURE__ */ j("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ j("button", {
+						type: "button",
+						onClick: () => D(!E),
+						className: "flex items-center gap-1.5 rounded-lg border border-border px-3 py-2.5 text-sm font-medium text-foreground hover:bg-accent transition-colors",
+						children: [/* @__PURE__ */ A(u, { className: "h-4 w-4" }), /* @__PURE__ */ A("span", {
+							className: "hidden sm:inline",
+							children: "Sort"
+						})]
+					}), E && /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A("div", {
+						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 bg-card shadow-lg py-1",
+						children: [
+							{
+								value: "recent",
+								label: "Most Recent"
+							},
+							{
+								value: "priority",
+								label: "By Priority"
+							},
+							{
+								value: "unread",
+								label: "Unread First"
+							}
+						].map((e) => /* @__PURE__ */ A("button", {
+							type: "button",
+							onClick: () => {
+								T(e.value), D(!1);
+							},
+							className: t("w-full text-left px-3 py-2 text-sm transition-colors", w === e.value ? "bg-primary/10 text-foreground font-medium" : "text-muted-foreground hover:bg-accent hover:text-foreground"),
+							children: e.label
+						}, e.value))
+					})] })]
+				})]
+			}),
+			G.length === 0 ? /* @__PURE__ */ A(r, {
+				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 px-4 py-2 text-sm font-medium text-foreground 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 px-4 py-2 text-sm font-medium text-foreground 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", {
+					className: "flex items-center gap-3 mb-2",
+					children: [
+						/* @__PURE__ */ A("h3", {
+							className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground",
+							children: e.label
+						}),
+						/* @__PURE__ */ A("div", { className: "flex-1 border-t border-border" }),
+						/* @__PURE__ */ j("span", {
+							className: "text-xs text-muted-foreground",
+							children: [
+								e.items.length,
+								" notification",
+								e.items.length === 1 ? "" : "s"
+							]
+						})
+					]
+				}), /* @__PURE__ */ A("div", {
+					className: "rounded-lg border border-border bg-card divide-y divide-border overflow-hidden",
+					children: e.items.map((e) => {
+						let n = N[e.type] ?? N.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"),
+							children: [
+								/* @__PURE__ */ A("div", {
+									className: t("flex h-10 w-10 shrink-0 items-center justify-center rounded-full", n.bg),
+									children: /* @__PURE__ */ A(r, { className: t("h-5 w-5", n.color) })
+								}),
+								/* @__PURE__ */ j("div", {
+									className: "flex-1 min-w-0",
+									children: [
+										/* @__PURE__ */ j("div", {
+											className: "flex items-center gap-2 flex-wrap",
+											children: [
+												/* @__PURE__ */ A("h4", {
+													className: t("text-sm text-foreground", e.isRead ? "font-medium" : "font-semibold"),
+													children: e.title
+												}),
+												!e.isRead && /* @__PURE__ */ A("span", { className: "h-2 w-2 rounded-full bg-primary 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]),
+													children: e.priority
+												})
+											]
+										}),
+										/* @__PURE__ */ A("p", {
+											className: "mt-1 text-sm text-muted-foreground leading-relaxed",
+											children: e.message
+										}),
+										/* @__PURE__ */ j("div", {
+											className: "mt-2 flex items-center gap-3 flex-wrap",
+											children: [
+												/* @__PURE__ */ j("span", {
+													className: "flex items-center gap-1 text-xs text-muted-foreground",
+													children: [/* @__PURE__ */ A(m, { className: "h-3 w-3" }), i(e.createdAt)]
+												}),
+												/* @__PURE__ */ A("span", {
+													className: t("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium", n.bg, n.color),
+													children: n.label
+												}),
+												e.metadata?.orderId && /* @__PURE__ */ j("span", {
+													className: "text-xs text-muted-foreground",
+													children: ["#", e.metadata.orderId]
+												})
+											]
+										}),
+										/* @__PURE__ */ j("div", {
+											className: "mt-3 flex items-center gap-2 flex-wrap",
+											children: [
+												e.actionUrl && /* @__PURE__ */ A("button", {
+													type: "button",
+													onClick: () => X(e),
+													className: "rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
+													children: e.actionText ?? "View"
+												}),
+												!e.isRead && /* @__PURE__ */ j("button", {
+													type: "button",
+													onClick: () => q(e.id),
+													title: "Mark as read",
+													className: "flex items-center gap-1 rounded-lg border border-border px-3 py-1.5 text-xs font-medium text-foreground 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),
+													title: "Delete notification",
+													className: "flex items-center gap-1 rounded-lg border border-border px-3 py-1.5 text-xs font-medium text-destructive hover:bg-destructive/10 transition-colors",
+													children: [/* @__PURE__ */ A(C, { className: "h-3 w-3" }), "Delete"]
+												})
+											]
+										})
+									]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "shrink-0 pt-1",
+									children: e.isRead ? /* @__PURE__ */ A(_, { className: "h-4 w-4 text-muted-foreground/40" }) : /* @__PURE__ */ A(d, { className: "h-4 w-4 text-primary" })
+								})
+							]
+						}, e.id);
+					})
+				})] }, e.label))
+			}),
+			G.length > 0 && /* @__PURE__ */ j("div", {
+				className: "mt-6 flex items-center justify-between rounded-lg border border-border bg-card px-4 py-3",
+				children: [/* @__PURE__ */ j("p", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						"Showing ",
+						G.length,
+						" of ",
+						l.length,
+						" notifications"
+					]
+				}), g !== "all" && /* @__PURE__ */ j("button", {
+					type: "button",
+					onClick: () => {
+						v("all"), S("");
+					},
+					className: "flex items-center gap-1.5 text-sm font-medium text-primary hover:underline",
+					children: [/* @__PURE__ */ A(y, { className: "h-3.5 w-3.5" }), "Show All"]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { B as NotificationCenterPage };
+
+//# sourceMappingURL=NotificationCenterPage.js.map