@alepha/ui 0.18.1 → 0.18.3

package/dist/admin/AdminNotifications-ZPHCYrv7.js

@@ -0,0 +1,542 @@
+import { _ as ActionButton, b as useToast, d as DetailList, l as Flex$1, r as DataTable, s as Text$1 } from "./core-CYaRQ8O-.js";
+import { t } from "alepha";
+import { useI18n } from "alepha/react/i18n";
+import { Badge, Code, Paper } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { IconRefresh } from "@tabler/icons-react";
+import { useClient } from "alepha/react";
+
+//#region ../../src/admin/components/notifications/AdminNotifications.tsx
+const formatDuration = (start, end) => {
+	const startTime = new Date(start).getTime();
+	const duration = (end ? new Date(end).getTime() : Date.now()) - startTime;
+	if (duration < 1e3) return `${duration}ms`;
+	if (duration < 6e4) return `${(duration / 1e3).toFixed(1)}s`;
+	if (duration < 36e5) return `${Math.floor(duration / 6e4)}m ${Math.floor(duration % 6e4 / 1e3)}s`;
+	return `${Math.floor(duration / 36e5)}h ${Math.floor(duration % 36e5 / 6e4)}m`;
+};
+const notificationFilters = t.object({ status: t.optional(t.enum([
+	"pending",
+	"scheduled",
+	"retrying",
+	"running",
+	"completed",
+	"failed",
+	"dead",
+	"cancelled"
+])) });
+const AdminNotifications = () => {
+	const client = useClient();
+	const { l } = useI18n();
+	return /* @__PURE__ */ jsx(Flex$1, {
+		p: "md",
+		flex: 1,
+		direction: "column",
+		gap: "md",
+		children: /* @__PURE__ */ jsx(DataTable, {
+			submitOnInit: true,
+			defaultSize: 20,
+			typeFormProps: {
+				skipSubmitButton: true,
+				columns: 3
+			},
+			tableProps: {
+				horizontalSpacing: "sm",
+				verticalSpacing: "sm"
+			},
+			onFilterChange: (_key, _value, form) => form.submit(),
+			filters: notificationFilters,
+			defaultFilters: ["status"],
+			items: async (filters) => {
+				return await client.findNotifications({ query: { ...filters } });
+			},
+			columns: {
+				status: {
+					label: "Status",
+					value: (item) => {
+						return /* @__PURE__ */ jsx(Badge, {
+							size: "sm",
+							variant: "light",
+							color: item.status === "completed" ? "green" : item.status === "running" ? "blue" : item.status === "failed" || item.status === "dead" ? "red" : item.status === "cancelled" ? "yellow" : "gray",
+							children: item.status
+						});
+					}
+				},
+				template: {
+					label: "Template",
+					value: (item) => /* @__PURE__ */ jsx(Text$1, {
+						size: "sm",
+						fw: 500,
+						ff: "monospace",
+						children: item.template ?? "—"
+					})
+				},
+				type: {
+					label: "Type",
+					value: (item) => /* @__PURE__ */ jsx(Badge, {
+						size: "sm",
+						variant: "light",
+						color: item.type === "email" ? "blue" : "teal",
+						children: item.type ?? "—"
+					})
+				},
+				contact: {
+					label: "Contact",
+					value: (item) => /* @__PURE__ */ jsx(Text$1, {
+						size: "xs",
+						c: "dimmed",
+						lineClamp: 1,
+						children: item.contact ?? "—"
+					})
+				},
+				category: {
+					label: "Category",
+					defaultHidden: true,
+					value: (item) => /* @__PURE__ */ jsx(Text$1, {
+						size: "xs",
+						c: "dimmed",
+						children: item.category ?? "—"
+					})
+				},
+				flags: {
+					label: "Flags",
+					defaultHidden: true,
+					value: (item) => /* @__PURE__ */ jsxs(Flex$1, {
+						gap: 4,
+						children: [
+							item.critical && /* @__PURE__ */ jsx(Badge, {
+								size: "xs",
+								variant: "light",
+								color: "red",
+								children: "critical"
+							}),
+							item.sensitive && /* @__PURE__ */ jsx(Badge, {
+								size: "xs",
+								variant: "light",
+								color: "orange",
+								children: "sensitive"
+							}),
+							!item.critical && !item.sensitive && /* @__PURE__ */ jsx(Text$1, {
+								size: "xs",
+								c: "dimmed",
+								children: "—"
+							})
+						]
+					})
+				},
+				createdAt: {
+					label: "Created",
+					value: (item) => /* @__PURE__ */ jsx(Text$1, {
+						size: "xs",
+						c: "dimmed",
+						children: l(item.createdAt, { date: "fromNow" })
+					})
+				},
+				duration: {
+					label: "Duration",
+					defaultHidden: true,
+					value: (item) => /* @__PURE__ */ jsx(Text$1, {
+						size: "xs",
+						c: "dimmed",
+						ff: "monospace",
+						children: item.startedAt && (item.completedAt || item.status === "running") ? formatDuration(item.startedAt, item.completedAt) : "—"
+					})
+				},
+				error: {
+					label: "Error",
+					defaultHidden: true,
+					value: (item) => /* @__PURE__ */ jsx(Text$1, {
+						size: "xs",
+						c: "dimmed",
+						lineClamp: 1,
+						children: item.error ?? "—"
+					})
+				}
+			},
+			panel: {
+				can: (item) => Boolean(item.error),
+				render: (item) => /* @__PURE__ */ jsx(Flex$1, {
+					direction: "column",
+					gap: "sm",
+					p: "sm",
+					children: item.error && /* @__PURE__ */ jsxs(Flex$1, {
+						direction: "column",
+						gap: 2,
+						children: [/* @__PURE__ */ jsx(Text$1, {
+							size: "xs",
+							c: "dimmed",
+							tt: "uppercase",
+							fw: 600,
+							children: "Error"
+						}), /* @__PURE__ */ jsx(Paper, {
+							p: "xs",
+							radius: "sm",
+							withBorder: true,
+							children: /* @__PURE__ */ jsx(Text$1, {
+								size: "sm",
+								style: {
+									whiteSpace: "pre-wrap",
+									wordBreak: "break-word"
+								},
+								children: item.error
+							})
+						})]
+					})
+				})
+			},
+			drawer: (item) => /* @__PURE__ */ jsx(NotificationDetailContent, { item })
+		})
+	});
+};
+const NotificationDetailContent = ({ item }) => {
+	const client = useClient();
+	const { l } = useI18n();
+	const toast = useToast();
+	const [detail, setDetail] = useState(null);
+	const [loading, setLoading] = useState(false);
+	const loadDetail = useCallback(async (id) => {
+		setDetail(null);
+		setLoading(true);
+		try {
+			setDetail(await client.getNotification({ params: { id } }));
+		} catch {
+			toast.danger("Failed to load notification details");
+		} finally {
+			setLoading(false);
+		}
+	}, [client, toast]);
+	useEffect(() => {
+		loadDetail(item.id);
+	}, [item.id, loadDetail]);
+	if (loading) return /* @__PURE__ */ jsx(Flex$1, {
+		align: "center",
+		justify: "center",
+		py: "xl",
+		children: /* @__PURE__ */ jsx(Text$1, {
+			c: "dimmed",
+			children: "Loading..."
+		})
+	});
+	if (!detail) return null;
+	const rendered = detail.rendered;
+	const detailItems = [
+		{
+			label: "ID",
+			value: /* @__PURE__ */ jsx(Text$1, {
+				size: "sm",
+				ff: "monospace",
+				children: detail.id
+			}),
+			copyable: detail.id
+		},
+		{
+			label: "Status",
+			value: /* @__PURE__ */ jsx(Text$1, {
+				size: "sm",
+				tt: "capitalize",
+				children: detail.status
+			})
+		},
+		{
+			label: "Template",
+			value: /* @__PURE__ */ jsx(Text$1, {
+				size: "sm",
+				ff: "monospace",
+				children: detail.template
+			})
+		},
+		{
+			label: "Type",
+			value: /* @__PURE__ */ jsx(Badge, {
+				size: "sm",
+				variant: "light",
+				color: detail.type === "email" ? "blue" : "teal",
+				children: detail.type
+			})
+		},
+		{
+			label: "Contact",
+			value: detail.contact
+		},
+		{
+			label: "Category",
+			value: detail.category,
+			hidden: !detail.category
+		},
+		{
+			label: "Critical",
+			value: detail.critical ? "Yes" : "No",
+			hidden: !detail.critical
+		},
+		{
+			label: "Sensitive",
+			value: detail.sensitive ? "Yes" : "No",
+			hidden: !detail.sensitive
+		},
+		{
+			label: "Created",
+			value: String(l(detail.createdAt, { date: "lll" }))
+		},
+		{
+			label: "Started",
+			value: detail.startedAt ? String(l(detail.startedAt, { date: "lll" })) : void 0,
+			hidden: !detail.startedAt
+		},
+		{
+			label: "Duration",
+			value: detail.startedAt && (detail.completedAt || detail.status === "running") ? /* @__PURE__ */ jsx(Text$1, {
+				size: "sm",
+				ff: "monospace",
+				children: formatDuration(detail.startedAt, detail.completedAt)
+			}) : void 0,
+			hidden: !(detail.startedAt && (detail.completedAt || detail.status === "running"))
+		}
+	];
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		direction: "column",
+		gap: "md",
+		children: [
+			/* @__PURE__ */ jsxs(Flex$1, {
+				align: "center",
+				gap: "sm",
+				children: [
+					/* @__PURE__ */ jsx(Text$1, {
+						fw: 600,
+						ff: "monospace",
+						children: detail.template
+					}),
+					/* @__PURE__ */ jsx(Badge, {
+						size: "sm",
+						variant: "light",
+						color: detail.type === "email" ? "blue" : "teal",
+						children: detail.type
+					}),
+					/* @__PURE__ */ jsx(Text$1, {
+						size: "sm",
+						tt: "capitalize",
+						c: "dimmed",
+						children: detail.status
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Flex$1, {
+				gap: "xs",
+				children: /* @__PURE__ */ jsx(ActionButton, {
+					tooltip: "Refresh",
+					variant: "light",
+					size: "xs",
+					icon: IconRefresh,
+					onClick: () => loadDetail(item.id)
+				})
+			}),
+			/* @__PURE__ */ jsxs(Paper, {
+				p: "sm",
+				radius: "md",
+				withBorder: true,
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					fw: 600,
+					mb: "xs",
+					children: "Details"
+				}), /* @__PURE__ */ jsx(DetailList, {
+					items: detailItems,
+					columns: 2
+				})]
+			}),
+			rendered && /* @__PURE__ */ jsxs(Paper, {
+				p: "sm",
+				radius: "md",
+				withBorder: true,
+				children: [
+					/* @__PURE__ */ jsx(Text$1, {
+						size: "sm",
+						fw: 600,
+						mb: "xs",
+						children: "Content"
+					}),
+					rendered.type === "email" && /* @__PURE__ */ jsxs(Flex$1, {
+						direction: "column",
+						gap: "xs",
+						children: [
+							/* @__PURE__ */ jsxs(Flex$1, {
+								direction: "column",
+								gap: 2,
+								children: [/* @__PURE__ */ jsx(Text$1, {
+									size: "xs",
+									c: "dimmed",
+									tt: "uppercase",
+									fw: 600,
+									children: "To"
+								}), /* @__PURE__ */ jsx(Text$1, {
+									size: "sm",
+									children: String(rendered.to ?? "")
+								})]
+							}),
+							/* @__PURE__ */ jsxs(Flex$1, {
+								direction: "column",
+								gap: 2,
+								children: [/* @__PURE__ */ jsx(Text$1, {
+									size: "xs",
+									c: "dimmed",
+									tt: "uppercase",
+									fw: 600,
+									children: "Subject"
+								}), /* @__PURE__ */ jsx(Text$1, {
+									size: "sm",
+									children: String(rendered.subject ?? "")
+								})]
+							}),
+							/* @__PURE__ */ jsxs(Flex$1, {
+								direction: "column",
+								gap: 2,
+								children: [/* @__PURE__ */ jsx(Text$1, {
+									size: "xs",
+									c: "dimmed",
+									tt: "uppercase",
+									fw: 600,
+									children: "Body"
+								}), /* @__PURE__ */ jsx(Paper, {
+									p: "xs",
+									radius: "sm",
+									withBorder: true,
+									children: /* @__PURE__ */ jsx(Text$1, {
+										size: "sm",
+										style: {
+											whiteSpace: "pre-wrap",
+											wordBreak: "break-word"
+										},
+										children: String(rendered.body ?? "")
+									})
+								})]
+							})
+						]
+					}),
+					rendered.type === "sms" && /* @__PURE__ */ jsxs(Flex$1, {
+						direction: "column",
+						gap: "xs",
+						children: [/* @__PURE__ */ jsxs(Flex$1, {
+							direction: "column",
+							gap: 2,
+							children: [/* @__PURE__ */ jsx(Text$1, {
+								size: "xs",
+								c: "dimmed",
+								tt: "uppercase",
+								fw: 600,
+								children: "To"
+							}), /* @__PURE__ */ jsx(Text$1, {
+								size: "sm",
+								children: String(rendered.to ?? "")
+							})]
+						}), /* @__PURE__ */ jsxs(Flex$1, {
+							direction: "column",
+							gap: 2,
+							children: [/* @__PURE__ */ jsx(Text$1, {
+								size: "xs",
+								c: "dimmed",
+								tt: "uppercase",
+								fw: 600,
+								children: "Message"
+							}), /* @__PURE__ */ jsx(Paper, {
+								p: "xs",
+								radius: "sm",
+								withBorder: true,
+								children: /* @__PURE__ */ jsx(Text$1, {
+									size: "sm",
+									style: {
+										whiteSpace: "pre-wrap",
+										wordBreak: "break-word"
+									},
+									children: String(rendered.message ?? "")
+								})
+							})]
+						})]
+					})
+				]
+			}),
+			detail.variables && Object.keys(detail.variables).length > 0 && /* @__PURE__ */ jsxs(Paper, {
+				p: "sm",
+				radius: "md",
+				withBorder: true,
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					fw: 600,
+					mb: "xs",
+					children: "Variables"
+				}), /* @__PURE__ */ jsx(Code, {
+					block: true,
+					children: JSON.stringify(detail.variables, null, 2)
+				})]
+			}),
+			detail.error && /* @__PURE__ */ jsxs(Paper, {
+				p: "sm",
+				radius: "md",
+				withBorder: true,
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					fw: 600,
+					mb: "xs",
+					children: "Error"
+				}), /* @__PURE__ */ jsx(Paper, {
+					p: "xs",
+					radius: "sm",
+					withBorder: true,
+					children: /* @__PURE__ */ jsx(Text$1, {
+						size: "sm",
+						style: {
+							whiteSpace: "pre-wrap",
+							wordBreak: "break-word"
+						},
+						children: detail.error
+					})
+				})]
+			}),
+			detail.logs && detail.logs.length > 0 && /* @__PURE__ */ jsxs(Paper, {
+				p: "sm",
+				radius: "md",
+				withBorder: true,
+				children: [/* @__PURE__ */ jsxs(Text$1, {
+					size: "sm",
+					fw: 600,
+					mb: "xs",
+					children: [
+						"Logs (",
+						detail.logs.length,
+						")"
+					]
+				}), /* @__PURE__ */ jsx(Flex$1, {
+					direction: "column",
+					style: {
+						maxHeight: 300,
+						overflowY: "auto"
+					},
+					children: detail.logs.map((log, i) => /* @__PURE__ */ jsxs(Flex$1, {
+						gap: "sm",
+						py: 2,
+						children: [
+							/* @__PURE__ */ jsx(Badge, {
+								size: "xs",
+								variant: "default",
+								children: log.level
+							}),
+							/* @__PURE__ */ jsx(Text$1, {
+								size: "xs",
+								c: "dimmed",
+								ff: "monospace",
+								children: new Date(log.timestamp).toLocaleTimeString()
+							}),
+							/* @__PURE__ */ jsx(Text$1, {
+								size: "xs",
+								children: log.message
+							})
+						]
+					}, i))
+				})]
+			})
+		]
+	});
+};
+
+//#endregion
+export { AdminNotifications as default };
+//# sourceMappingURL=AdminNotifications-ZPHCYrv7.js.map

package/dist/admin/AdminNotifications-ZPHCYrv7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminNotifications-ZPHCYrv7.js","names":["Flex","Text"],"sources":["../../src/admin/components/notifications/AdminNotifications.tsx"],"sourcesContent":["import type { DetailListItem } from \"@alepha/ui\";\nimport {\n  ActionButton,\n  DataTable,\n  DetailList,\n  Flex,\n  Text,\n  useToast,\n} from \"@alepha/ui\";\nimport { Badge, Code, Paper } from \"@mantine/core\";\nimport { IconRefresh } from \"@tabler/icons-react\";\nimport { type Page, t } from \"alepha\";\nimport type {\n  AdminNotificationController,\n  NotificationDetailResource,\n  NotificationResource,\n} from \"alepha/api/notifications\";\nimport type { LogEntry } from \"alepha/logger\";\nimport { useClient } from \"alepha/react\";\nimport { useI18n } from \"alepha/react/i18n\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n// ─────────────────────────────────────────────────────────────────────────────\n\nconst formatDuration = (\n  start: Date | string,\n  end?: Date | string | null,\n): string => {\n  const startTime = new Date(start).getTime();\n  const endTime = end ? new Date(end).getTime() : Date.now();\n  const duration = endTime - startTime;\n\n  if (duration < 1000) return `${duration}ms`;\n  if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`;\n  if (duration < 3600000)\n    return `${Math.floor(duration / 60000)}m ${Math.floor((duration % 60000) / 1000)}s`;\n  return `${Math.floor(duration / 3600000)}h ${Math.floor((duration % 3600000) / 60000)}m`;\n};\n\n// ─────────────────────────────────────────────────────────────────────────────\n\nconst notificationFilters = t.object({\n  status: t.optional(\n    t.enum([\n      \"pending\",\n      \"scheduled\",\n      \"retrying\",\n      \"running\",\n      \"completed\",\n      \"failed\",\n      \"dead\",\n      \"cancelled\",\n    ]),\n  ),\n});\n\n// ─────────────────────────────────────────────────────────────────────────────\n\nconst AdminNotifications = () => {\n  const client = useClient<AdminNotificationController>();\n  const { l } = useI18n();\n\n  return (\n    <Flex p=\"md\" flex={1} direction=\"column\" gap=\"md\">\n      <DataTable<NotificationResource, typeof notificationFilters>\n        submitOnInit\n        defaultSize={20}\n        typeFormProps={{\n          skipSubmitButton: true,\n          columns: 3,\n        }}\n        tableProps={{\n          horizontalSpacing: \"sm\",\n          verticalSpacing: \"sm\",\n        }}\n        onFilterChange={(_key, _value, form) => form.submit()}\n        filters={notificationFilters}\n        defaultFilters={[\"status\"]}\n        items={async (filters) => {\n          const response = await client.findNotifications({\n            query: { ...filters },\n          });\n          return response as Page<NotificationResource>;\n        }}\n        columns={{\n          status: {\n            label: \"Status\",\n            value: (item) => {\n              const color =\n                item.status === \"completed\"\n                  ? \"green\"\n                  : item.status === \"running\"\n                    ? \"blue\"\n                    : item.status === \"failed\" || item.status === \"dead\"\n                      ? \"red\"\n                      : item.status === \"cancelled\"\n                        ? \"yellow\"\n                        : \"gray\";\n              return (\n                <Badge size=\"sm\" variant=\"light\" color={color}>\n                  {item.status}\n                </Badge>\n              );\n            },\n          },\n          template: {\n            label: \"Template\",\n            value: (item) => (\n              <Text size=\"sm\" fw={500} ff=\"monospace\">\n                {item.template ?? \"\\u2014\"}\n              </Text>\n            ),\n          },\n          type: {\n            label: \"Type\",\n            value: (item) => (\n              <Badge\n                size=\"sm\"\n                variant=\"light\"\n                color={item.type === \"email\" ? \"blue\" : \"teal\"}\n              >\n                {item.type ?? \"\\u2014\"}\n              </Badge>\n            ),\n          },\n          contact: {\n            label: \"Contact\",\n            value: (item) => (\n              <Text size=\"xs\" c=\"dimmed\" lineClamp={1}>\n                {item.contact ?? \"\\u2014\"}\n              </Text>\n            ),\n          },\n          category: {\n            label: \"Category\",\n            defaultHidden: true,\n            value: (item) => (\n              <Text size=\"xs\" c=\"dimmed\">\n                {item.category ?? \"\\u2014\"}\n              </Text>\n            ),\n          },\n          flags: {\n            label: \"Flags\",\n            defaultHidden: true,\n            value: (item) => (\n              <Flex gap={4}>\n                {item.critical && (\n                  <Badge size=\"xs\" variant=\"light\" color=\"red\">\n                    critical\n                  </Badge>\n                )}\n                {item.sensitive && (\n                  <Badge size=\"xs\" variant=\"light\" color=\"orange\">\n                    sensitive\n                  </Badge>\n                )}\n                {!item.critical && !item.sensitive && (\n                  <Text size=\"xs\" c=\"dimmed\">\n                    {\"\\u2014\"}\n                  </Text>\n                )}\n              </Flex>\n            ),\n          },\n          createdAt: {\n            label: \"Created\",\n            value: (item) => (\n              <Text size=\"xs\" c=\"dimmed\">\n                {l(item.createdAt, { date: \"fromNow\" })}\n              </Text>\n            ),\n          },\n          duration: {\n            label: \"Duration\",\n            defaultHidden: true,\n            value: (item) => (\n              <Text size=\"xs\" c=\"dimmed\" ff=\"monospace\">\n                {item.startedAt &&\n                (item.completedAt || item.status === \"running\")\n                  ? formatDuration(item.startedAt, item.completedAt)\n                  : \"\\u2014\"}\n              </Text>\n            ),\n          },\n          error: {\n            label: \"Error\",\n            defaultHidden: true,\n            value: (item) => (\n              <Text size=\"xs\" c=\"dimmed\" lineClamp={1}>\n                {item.error ?? \"\\u2014\"}\n              </Text>\n            ),\n          },\n        }}\n        panel={{\n          can: (item) => Boolean(item.error),\n          render: (item) => (\n            <Flex direction=\"column\" gap=\"sm\" p=\"sm\">\n              {item.error && (\n                <Flex direction=\"column\" gap={2}>\n                  <Text size=\"xs\" c=\"dimmed\" tt=\"uppercase\" fw={600}>\n                    Error\n                  </Text>\n                  <Paper p=\"xs\" radius=\"sm\" withBorder>\n                    <Text\n                      size=\"sm\"\n                      style={{\n                        whiteSpace: \"pre-wrap\",\n                        wordBreak: \"break-word\",\n                      }}\n                    >\n                      {item.error}\n                    </Text>\n                  </Paper>\n                </Flex>\n              )}\n            </Flex>\n          ),\n        }}\n        drawer={(item) => <NotificationDetailContent item={item} />}\n      />\n    </Flex>\n  );\n};\n\n// ─────────────────────────────────────────────────────────────────────────────\n\nconst NotificationDetailContent = ({\n  item,\n}: {\n  item: NotificationResource;\n}) => {\n  const client = useClient<AdminNotificationController>();\n  const { l } = useI18n();\n  const toast = useToast();\n  const [detail, setDetail] = useState<NotificationDetailResource | null>(null);\n  const [loading, setLoading] = useState(false);\n\n  const loadDetail = useCallback(\n    async (id: string) => {\n      setDetail(null);\n      setLoading(true);\n      try {\n        const data = await client.getNotification({ params: { id } });\n        setDetail(data);\n      } catch {\n        toast.danger(\"Failed to load notification details\");\n      } finally {\n        setLoading(false);\n      }\n    },\n    [client, toast],\n  );\n\n  useEffect(() => {\n    loadDetail(item.id);\n  }, [item.id, loadDetail]);\n\n  if (loading) {\n    return (\n      <Flex align=\"center\" justify=\"center\" py=\"xl\">\n        <Text c=\"dimmed\">Loading...</Text>\n      </Flex>\n    );\n  }\n\n  if (!detail) return null;\n\n  const rendered = detail.rendered as Record<string, unknown> | undefined;\n\n  const detailItems: DetailListItem[] = [\n    {\n      label: \"ID\",\n      value: (\n        <Text size=\"sm\" ff=\"monospace\">\n          {detail.id}\n        </Text>\n      ),\n      copyable: detail.id,\n    },\n    {\n      label: \"Status\",\n      value: (\n        <Text size=\"sm\" tt=\"capitalize\">\n          {detail.status}\n        </Text>\n      ),\n    },\n    {\n      label: \"Template\",\n      value: (\n        <Text size=\"sm\" ff=\"monospace\">\n          {detail.template}\n        </Text>\n      ),\n    },\n    {\n      label: \"Type\",\n      value: (\n        <Badge\n          size=\"sm\"\n          variant=\"light\"\n          color={detail.type === \"email\" ? \"blue\" : \"teal\"}\n        >\n          {detail.type}\n        </Badge>\n      ),\n    },\n    {\n      label: \"Contact\",\n      value: detail.contact,\n    },\n    {\n      label: \"Category\",\n      value: detail.category,\n      hidden: !detail.category,\n    },\n    {\n      label: \"Critical\",\n      value: detail.critical ? \"Yes\" : \"No\",\n      hidden: !detail.critical,\n    },\n    {\n      label: \"Sensitive\",\n      value: detail.sensitive ? \"Yes\" : \"No\",\n      hidden: !detail.sensitive,\n    },\n    {\n      label: \"Created\",\n      value: String(l(detail.createdAt, { date: \"lll\" })),\n    },\n    {\n      label: \"Started\",\n      value: detail.startedAt\n        ? String(l(detail.startedAt, { date: \"lll\" }))\n        : undefined,\n      hidden: !detail.startedAt,\n    },\n    {\n      label: \"Duration\",\n      value:\n        detail.startedAt &&\n        (detail.completedAt || detail.status === \"running\") ? (\n          <Text size=\"sm\" ff=\"monospace\">\n            {formatDuration(detail.startedAt, detail.completedAt)}\n          </Text>\n        ) : undefined,\n      hidden: !(\n        detail.startedAt &&\n        (detail.completedAt || detail.status === \"running\")\n      ),\n    },\n  ];\n\n  return (\n    <Flex direction=\"column\" gap=\"md\">\n      {/* Header */}\n      <Flex align=\"center\" gap=\"sm\">\n        <Text fw={600} ff=\"monospace\">\n          {detail.template}\n        </Text>\n        <Badge\n          size=\"sm\"\n          variant=\"light\"\n          color={detail.type === \"email\" ? \"blue\" : \"teal\"}\n        >\n          {detail.type}\n        </Badge>\n        <Text size=\"sm\" tt=\"capitalize\" c=\"dimmed\">\n          {detail.status}\n        </Text>\n      </Flex>\n\n      {/* Actions */}\n      <Flex gap=\"xs\">\n        <ActionButton\n          tooltip=\"Refresh\"\n          variant=\"light\"\n          size=\"xs\"\n          icon={IconRefresh}\n          onClick={() => loadDetail(item.id)}\n        />\n      </Flex>\n\n      {/* Details */}\n      <Paper p=\"sm\" radius=\"md\" withBorder>\n        <Text size=\"sm\" fw={600} mb=\"xs\">\n          Details\n        </Text>\n        <DetailList items={detailItems} columns={2} />\n      </Paper>\n\n      {/* Rendered Content */}\n      {rendered && (\n        <Paper p=\"sm\" radius=\"md\" withBorder>\n          <Text size=\"sm\" fw={600} mb=\"xs\">\n            Content\n          </Text>\n          {rendered.type === \"email\" && (\n            <Flex direction=\"column\" gap=\"xs\">\n              <Flex direction=\"column\" gap={2}>\n                <Text size=\"xs\" c=\"dimmed\" tt=\"uppercase\" fw={600}>\n                  To\n                </Text>\n                <Text size=\"sm\">{String(rendered.to ?? \"\")}</Text>\n              </Flex>\n              <Flex direction=\"column\" gap={2}>\n                <Text size=\"xs\" c=\"dimmed\" tt=\"uppercase\" fw={600}>\n                  Subject\n                </Text>\n                <Text size=\"sm\">{String(rendered.subject ?? \"\")}</Text>\n              </Flex>\n              <Flex direction=\"column\" gap={2}>\n                <Text size=\"xs\" c=\"dimmed\" tt=\"uppercase\" fw={600}>\n                  Body\n                </Text>\n                <Paper p=\"xs\" radius=\"sm\" withBorder>\n                  <Text\n                    size=\"sm\"\n                    style={{\n                      whiteSpace: \"pre-wrap\",\n                      wordBreak: \"break-word\",\n                    }}\n                  >\n                    {String(rendered.body ?? \"\")}\n                  </Text>\n                </Paper>\n              </Flex>\n            </Flex>\n          )}\n          {rendered.type === \"sms\" && (\n            <Flex direction=\"column\" gap=\"xs\">\n              <Flex direction=\"column\" gap={2}>\n                <Text size=\"xs\" c=\"dimmed\" tt=\"uppercase\" fw={600}>\n                  To\n                </Text>\n                <Text size=\"sm\">{String(rendered.to ?? \"\")}</Text>\n              </Flex>\n              <Flex direction=\"column\" gap={2}>\n                <Text size=\"xs\" c=\"dimmed\" tt=\"uppercase\" fw={600}>\n                  Message\n                </Text>\n                <Paper p=\"xs\" radius=\"sm\" withBorder>\n                  <Text\n                    size=\"sm\"\n                    style={{\n                      whiteSpace: \"pre-wrap\",\n                      wordBreak: \"break-word\",\n                    }}\n                  >\n                    {String(rendered.message ?? \"\")}\n                  </Text>\n                </Paper>\n              </Flex>\n            </Flex>\n          )}\n        </Paper>\n      )}\n\n      {/* Variables */}\n      {detail.variables && Object.keys(detail.variables).length > 0 && (\n        <Paper p=\"sm\" radius=\"md\" withBorder>\n          <Text size=\"sm\" fw={600} mb=\"xs\">\n            Variables\n          </Text>\n          <Code block>{JSON.stringify(detail.variables, null, 2)}</Code>\n        </Paper>\n      )}\n\n      {/* Error */}\n      {detail.error && (\n        <Paper p=\"sm\" radius=\"md\" withBorder>\n          <Text size=\"sm\" fw={600} mb=\"xs\">\n            Error\n          </Text>\n          <Paper p=\"xs\" radius=\"sm\" withBorder>\n            <Text\n              size=\"sm\"\n              style={{\n                whiteSpace: \"pre-wrap\",\n                wordBreak: \"break-word\",\n              }}\n            >\n              {detail.error}\n            </Text>\n          </Paper>\n        </Paper>\n      )}\n\n      {/* Logs */}\n      {detail.logs && detail.logs.length > 0 && (\n        <Paper p=\"sm\" radius=\"md\" withBorder>\n          <Text size=\"sm\" fw={600} mb=\"xs\">\n            Logs ({detail.logs.length})\n          </Text>\n          <Flex\n            direction=\"column\"\n            style={{ maxHeight: 300, overflowY: \"auto\" }}\n          >\n            {detail.logs.map((log: LogEntry, i: number) => (\n              <Flex key={i} gap=\"sm\" py={2}>\n                <Badge size=\"xs\" variant=\"default\">\n                  {log.level}\n                </Badge>\n                <Text size=\"xs\" c=\"dimmed\" ff=\"monospace\">\n                  {new Date(log.timestamp).toLocaleTimeString()}\n                </Text>\n                <Text size=\"xs\">{log.message}</Text>\n              </Flex>\n            ))}\n          </Flex>\n        </Paper>\n      )}\n    </Flex>\n  );\n};\n\nexport default AdminNotifications;\n"],"mappings":"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"}