@burdenoff/microfe-channel 2026.510.112

package/dist/channel/modules/channels/pages/CreateConnectionPage.js

@@ -0,0 +1,219 @@
+import { useChannel as e } from "../../../providers/ChannelProvider.js";
+import { useChannel as t, useChannels as n } from "../../../hooks/useChannels.js";
+import { PermissionGuard as r } from "../../../components/PermissionGuard.js";
+import { CHANNEL_PERMISSIONS as i } from "../../../constants/permissions.js";
+import { useMemo as a, useState as o } from "react";
+import { useI18n as s } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as c, ArrowLeft as l, Loader2 as u, Save as d, Shield as f } from "lucide-react";
+import { useNavigate as p, useSearchParams as m } from "react-router-dom";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/channel/modules/channels/pages/CreateConnectionPage.tsx
+var v = [
+	{
+		value: "OAUTH2",
+		label: "OAuth 2.0",
+		help: "Authorization code flow"
+	},
+	{
+		value: "API_KEY",
+		label: "API Key",
+		help: "Static API key"
+	},
+	{
+		value: "BOT_TOKEN",
+		label: "Bot Token",
+		help: "Slack/Discord/Teams bot token"
+	},
+	{
+		value: "WEBHOOK",
+		label: "Webhook",
+		help: "Shared secret for HMAC verification"
+	},
+	{
+		value: "SMTP_IMAP",
+		label: "SMTP / IMAP",
+		help: "Mail server credentials"
+	}
+];
+function y() {
+	let y = p(), [b] = m(), { organizationId: x } = e(), { channels: S, isLoading: C } = n(), { t: w } = s(), T = (e, t) => {
+		let n = w(e);
+		return n === e ? t : n;
+	}, [E, D] = o(b.get("channelId") ?? ""), { createConnection: O } = t(E), [k, A] = o("OAUTH2"), [j, M] = o(""), [N, P] = o(""), [F, I] = o(""), [L, R] = o(""), [z, B] = o(!1), [V, H] = o(null), U = a(() => S.find((e) => e.id === E) ?? null, [S, E]);
+	return /* @__PURE__ */ g(r, {
+		permission: i.CHANNEL_CONNECTION_CREATE,
+		children: /* @__PURE__ */ _("div", {
+			className: "container mx-auto p-6 max-w-2xl",
+			children: [
+				/* @__PURE__ */ _("button", {
+					onClick: () => y(-1),
+					className: "flex items-center gap-2 text-fg-muted hover:text-fg mb-6",
+					children: [/* @__PURE__ */ g(l, { className: "w-4 h-4" }), T("common.back", "Back")]
+				}),
+				/* @__PURE__ */ _("div", {
+					className: "flex items-center gap-3 mb-6",
+					children: [/* @__PURE__ */ g(f, { className: "w-7 h-7 text-accent-blue" }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
+						className: "text-2xl font-bold text-fg",
+						children: T("connection.create.title", "Create Connection")
+					}), /* @__PURE__ */ g("p", {
+						className: "text-sm text-fg-muted",
+						children: T("connection.create.subtitle", "Authenticate a channel against its platform provider.")
+					})] })]
+				}),
+				V && /* @__PURE__ */ _("div", {
+					className: "bg-status-error-bg-subtle border border-status-error-bg-subtle rounded-lg p-4 mb-6 flex gap-3",
+					children: [/* @__PURE__ */ g(c, { className: "w-5 h-5 text-status-error-text shrink-0" }), /* @__PURE__ */ g("p", {
+						className: "text-sm text-status-error-text",
+						children: V
+					})]
+				}),
+				/* @__PURE__ */ _("form", {
+					onSubmit: async (e) => {
+						if (e.preventDefault(), H(null), !E) {
+							H(T("connection.validation.channelRequired", "Pick a channel to connect"));
+							return;
+						}
+						if (!x) {
+							H(T("connection.validation.organizationRequired", "Organization context missing"));
+							return;
+						}
+						let t;
+						if (L.trim()) try {
+							t = JSON.parse(L);
+						} catch {
+							H(T("connection.validation.credentialsJson", "Credentials must be valid JSON"));
+							return;
+						}
+						B(!0);
+						try {
+							let e = await O({
+								authType: k,
+								authCode: j.trim() || void 0,
+								apiKey: N.trim() || void 0,
+								redirectUri: F.trim() || void 0,
+								credentials: t
+							});
+							e ? y(`../${e.id}`) : H(T("connection.createFailed", "Failed to create connection"));
+						} catch (e) {
+							H(e instanceof Error ? e.message : T("connection.createFailed", "Failed to create connection"));
+						} finally {
+							B(!1);
+						}
+					},
+					className: "space-y-6 bg-bg-elevated rounded-lg p-6 border border-border",
+					children: [
+						/* @__PURE__ */ _("div", { children: [
+							/* @__PURE__ */ _("label", {
+								className: "block text-sm font-medium text-fg mb-2",
+								children: [T("connection.field.channel", "Channel"), " *"]
+							}),
+							/* @__PURE__ */ _("select", {
+								value: E,
+								onChange: (e) => D(e.target.value),
+								className: "w-full px-3 py-2 bg-bg border border-border rounded-md text-fg",
+								required: !0,
+								disabled: C,
+								children: [/* @__PURE__ */ g("option", {
+									value: "",
+									children: C ? T("common.loading", "Loading...") : T("connection.field.channelPlaceholder", "Select a channel")
+								}), S.map((e) => /* @__PURE__ */ _("option", {
+									value: e.id,
+									children: [
+										e.name,
+										" (",
+										e.platform,
+										")"
+									]
+								}, e.id))]
+							}),
+							U && /* @__PURE__ */ _("p", {
+								className: "mt-1 text-xs text-fg-muted",
+								children: [T("connection.field.channelHint", "Adapter: "), U.adapterType ?? "—"]
+							})
+						] }),
+						/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
+							className: "block text-sm font-medium text-fg mb-2",
+							children: [T("connection.field.authType", "Authentication Type"), " *"]
+						}), /* @__PURE__ */ g("select", {
+							value: k,
+							onChange: (e) => A(e.target.value),
+							className: "w-full px-3 py-2 bg-bg border border-border rounded-md text-fg",
+							required: !0,
+							children: v.map((e) => /* @__PURE__ */ _("option", {
+								value: e.value,
+								children: [
+									e.label,
+									" — ",
+									e.help
+								]
+							}, e.value))
+						})] }),
+						k === "OAUTH2" && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+							className: "block text-sm font-medium text-fg mb-2",
+							children: T("connection.field.authCode", "OAuth Authorization Code")
+						}), /* @__PURE__ */ g("input", {
+							type: "text",
+							value: j,
+							onChange: (e) => M(e.target.value),
+							className: "w-full px-3 py-2 bg-bg border border-border rounded-md text-fg",
+							autoComplete: "off"
+						})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+							className: "block text-sm font-medium text-fg mb-2",
+							children: T("connection.field.redirectUri", "Redirect URI")
+						}), /* @__PURE__ */ g("input", {
+							type: "url",
+							value: F,
+							onChange: (e) => I(e.target.value),
+							className: "w-full px-3 py-2 bg-bg border border-border rounded-md text-fg"
+						})] })] }),
+						(k === "API_KEY" || k === "BOT_TOKEN") && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+							className: "block text-sm font-medium text-fg mb-2",
+							children: T("connection.field.apiKey", "API Key / Token")
+						}), /* @__PURE__ */ g("input", {
+							type: "password",
+							value: N,
+							onChange: (e) => P(e.target.value),
+							className: "w-full px-3 py-2 bg-bg border border-border rounded-md text-fg",
+							autoComplete: "new-password"
+						})] }),
+						/* @__PURE__ */ _("div", { children: [
+							/* @__PURE__ */ g("label", {
+								className: "block text-sm font-medium text-fg mb-2",
+								children: T("connection.field.credentials", "Additional Credentials (JSON)")
+							}),
+							/* @__PURE__ */ g("textarea", {
+								value: L,
+								onChange: (e) => R(e.target.value),
+								rows: 6,
+								className: "w-full px-3 py-2 bg-bg border border-border rounded-md font-mono text-sm text-fg",
+								placeholder: "{\"smtpHost\": \"smtp.example.com\"}"
+							}),
+							/* @__PURE__ */ g("p", {
+								className: "mt-1 text-xs text-fg-muted",
+								children: T("connection.field.credentialsHint", "Encrypted at rest with AES-256-GCM. Never logged in plaintext.")
+							})
+						] }),
+						/* @__PURE__ */ _("div", {
+							className: "flex gap-3 pt-2",
+							children: [/* @__PURE__ */ _("button", {
+								type: "submit",
+								disabled: z || !E,
+								className: "flex items-center gap-2 px-4 py-2 bg-accent-blue text-fg-on-accent rounded-md disabled:opacity-50",
+								children: [z ? /* @__PURE__ */ g(u, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ g(d, { className: "w-4 h-4" }), T("connection.create.submit", "Create Connection")]
+							}), /* @__PURE__ */ g("button", {
+								type: "button",
+								onClick: () => y(-1),
+								className: "px-4 py-2 text-fg border border-border rounded-md",
+								children: T("common.cancel", "Cancel")
+							})]
+						})
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { y as CreateConnectionPage };
+
+//# sourceMappingURL=CreateConnectionPage.js.map

package/dist/channel/modules/channels/pages/CreateConnectionPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateConnectionPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/CreateConnectionPage.tsx"],"sourcesContent":["/**\n * Create Connection Page\n *\n * Standalone page mounted at /channels/connections/create.\n * User picks a target channel, then provides auth details.\n *\n * Form fields match CreateConnectionInput exactly (less channelId which is\n * resolved from the selector).\n */\n\nimport { useMemo, useState } from 'react';\nimport { useNavigate, useSearchParams } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { ArrowLeft, Loader2, AlertCircle, Save, Shield } from 'lucide-react';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { useChannel, useChannels, type ChannelAuthType } from '../../../hooks/useChannels';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\n\nconst AUTH_TYPES: { value: ChannelAuthType; label: string; help: string }[] = [\n  { value: 'OAUTH2', label: 'OAuth 2.0', help: 'Authorization code flow' },\n  { value: 'API_KEY', label: 'API Key', help: 'Static API key' },\n  { value: 'BOT_TOKEN', label: 'Bot Token', help: 'Slack/Discord/Teams bot token' },\n  { value: 'WEBHOOK', label: 'Webhook', help: 'Shared secret for HMAC verification' },\n  { value: 'SMTP_IMAP', label: 'SMTP / IMAP', help: 'Mail server credentials' },\n];\n\nexport function CreateConnectionPage() {\n  const navigate = useNavigate();\n  const [searchParams] = useSearchParams();\n  const { organizationId } = useChannelContext();\n  const { channels, isLoading: channelsLoading } = useChannels();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  const initialChannelId = searchParams.get('channelId') ?? '';\n  const [selectedChannelId, setSelectedChannelId] = useState<string>(initialChannelId);\n  const { createConnection } = useChannel(selectedChannelId);\n\n  const [authType, setAuthType] = useState<ChannelAuthType>('OAUTH2');\n  const [authCode, setAuthCode] = useState('');\n  const [apiKey, setApiKey] = useState('');\n  const [redirectUri, setRedirectUri] = useState('');\n  const [credentials, setCredentials] = useState('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const selectedChannel = useMemo(\n    () => channels.find((c) => c.id === selectedChannelId) ?? null,\n    [channels, selectedChannelId]\n  );\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n\n    if (!selectedChannelId) {\n      setError(tr('connection.validation.channelRequired', 'Pick a channel to connect'));\n      return;\n    }\n    if (!organizationId) {\n      setError(tr('connection.validation.organizationRequired', 'Organization context missing'));\n      return;\n    }\n\n    let parsedCredentials: Record<string, unknown> | undefined;\n    if (credentials.trim()) {\n      try {\n        parsedCredentials = JSON.parse(credentials);\n      } catch {\n        setError(tr('connection.validation.credentialsJson', 'Credentials must be valid JSON'));\n        return;\n      }\n    }\n\n    setIsSubmitting(true);\n    try {\n      const result = await createConnection({\n        authType,\n        authCode: authCode.trim() || undefined,\n        apiKey: apiKey.trim() || undefined,\n        redirectUri: redirectUri.trim() || undefined,\n        credentials: parsedCredentials,\n      });\n      if (result) {\n        navigate(`../${result.id}`);\n      } else {\n        setError(tr('connection.createFailed', 'Failed to create connection'));\n      }\n    } catch (err: unknown) {\n      setError(\n        err instanceof Error\n          ? err.message\n          : tr('connection.createFailed', 'Failed to create connection')\n      );\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_CONNECTION_CREATE}>\n      <div className=\"container mx-auto p-6 max-w-2xl\">\n        <button\n          onClick={() => navigate(-1)}\n          className=\"flex items-center gap-2 text-fg-muted hover:text-fg mb-6\"\n        >\n          <ArrowLeft className=\"w-4 h-4\" />\n          {tr('common.back', 'Back')}\n        </button>\n\n        <div className=\"flex items-center gap-3 mb-6\">\n          <Shield className=\"w-7 h-7 text-accent-blue\" />\n          <div>\n            <h1 className=\"text-2xl font-bold text-fg\">\n              {tr('connection.create.title', 'Create Connection')}\n            </h1>\n            <p className=\"text-sm text-fg-muted\">\n              {tr(\n                'connection.create.subtitle',\n                'Authenticate a channel against its platform provider.'\n              )}\n            </p>\n          </div>\n        </div>\n\n        {error && (\n          <div className=\"bg-status-error-bg-subtle border border-status-error-bg-subtle rounded-lg p-4 mb-6 flex gap-3\">\n            <AlertCircle className=\"w-5 h-5 text-status-error-text shrink-0\" />\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n\n        <form\n          onSubmit={handleSubmit}\n          className=\"space-y-6 bg-bg-elevated rounded-lg p-6 border border-border\"\n        >\n          <div>\n            <label className=\"block text-sm font-medium text-fg mb-2\">\n              {tr('connection.field.channel', 'Channel')} *\n            </label>\n            <select\n              value={selectedChannelId}\n              onChange={(e) => setSelectedChannelId(e.target.value)}\n              className=\"w-full px-3 py-2 bg-bg border border-border rounded-md text-fg\"\n              required\n              disabled={channelsLoading}\n            >\n              <option value=\"\">\n                {channelsLoading\n                  ? tr('common.loading', 'Loading...')\n                  : tr('connection.field.channelPlaceholder', 'Select a channel')}\n              </option>\n              {channels.map((c) => (\n                <option key={c.id} value={c.id}>\n                  {c.name} ({c.platform})\n                </option>\n              ))}\n            </select>\n            {selectedChannel && (\n              <p className=\"mt-1 text-xs text-fg-muted\">\n                {tr('connection.field.channelHint', 'Adapter: ')}\n                {selectedChannel.adapterType ?? '—'}\n              </p>\n            )}\n          </div>\n\n          <div>\n            <label className=\"block text-sm font-medium text-fg mb-2\">\n              {tr('connection.field.authType', 'Authentication Type')} *\n            </label>\n            <select\n              value={authType}\n              onChange={(e) => setAuthType(e.target.value as ChannelAuthType)}\n              className=\"w-full px-3 py-2 bg-bg border border-border rounded-md text-fg\"\n              required\n            >\n              {AUTH_TYPES.map((a) => (\n                <option key={a.value} value={a.value}>\n                  {a.label} — {a.help}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          {authType === 'OAUTH2' && (\n            <>\n              <div>\n                <label className=\"block text-sm font-medium text-fg mb-2\">\n                  {tr('connection.field.authCode', 'OAuth Authorization Code')}\n                </label>\n                <input\n                  type=\"text\"\n                  value={authCode}\n                  onChange={(e) => setAuthCode(e.target.value)}\n                  className=\"w-full px-3 py-2 bg-bg border border-border rounded-md text-fg\"\n                  autoComplete=\"off\"\n                />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-fg mb-2\">\n                  {tr('connection.field.redirectUri', 'Redirect URI')}\n                </label>\n                <input\n                  type=\"url\"\n                  value={redirectUri}\n                  onChange={(e) => setRedirectUri(e.target.value)}\n                  className=\"w-full px-3 py-2 bg-bg border border-border rounded-md text-fg\"\n                />\n              </div>\n            </>\n          )}\n\n          {(authType === 'API_KEY' || authType === 'BOT_TOKEN') && (\n            <div>\n              <label className=\"block text-sm font-medium text-fg mb-2\">\n                {tr('connection.field.apiKey', 'API Key / Token')}\n              </label>\n              <input\n                type=\"password\"\n                value={apiKey}\n                onChange={(e) => setApiKey(e.target.value)}\n                className=\"w-full px-3 py-2 bg-bg border border-border rounded-md text-fg\"\n                autoComplete=\"new-password\"\n              />\n            </div>\n          )}\n\n          <div>\n            <label className=\"block text-sm font-medium text-fg mb-2\">\n              {tr('connection.field.credentials', 'Additional Credentials (JSON)')}\n            </label>\n            <textarea\n              value={credentials}\n              onChange={(e) => setCredentials(e.target.value)}\n              rows={6}\n              className=\"w-full px-3 py-2 bg-bg border border-border rounded-md font-mono text-sm text-fg\"\n              placeholder='{\"smtpHost\": \"smtp.example.com\"}'\n            />\n            <p className=\"mt-1 text-xs text-fg-muted\">\n              {tr(\n                'connection.field.credentialsHint',\n                'Encrypted at rest with AES-256-GCM. Never logged in plaintext.'\n              )}\n            </p>\n          </div>\n\n          <div className=\"flex gap-3 pt-2\">\n            <button\n              type=\"submit\"\n              disabled={isSubmitting || !selectedChannelId}\n              className=\"flex items-center gap-2 px-4 py-2 bg-accent-blue text-fg-on-accent rounded-md disabled:opacity-50\"\n            >\n              {isSubmitting ? (\n                <Loader2 className=\"w-4 h-4 animate-spin\" />\n              ) : (\n                <Save className=\"w-4 h-4\" />\n              )}\n              {tr('connection.create.submit', 'Create Connection')}\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => navigate(-1)}\n              className=\"px-4 py-2 text-fg border border-border rounded-md\"\n            >\n              {tr('common.cancel', 'Cancel')}\n            </button>\n          </div>\n        </form>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}

package/dist/channel/modules/channels/pages/DeliveryHistoryPage.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Delivery History Page
+ *
+ * Displays message delivery attempts for a specific channel with retry capability
+ */
+export declare function DeliveryHistoryPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DeliveryHistoryPage.d.ts.map

package/dist/channel/modules/channels/pages/DeliveryHistoryPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeliveryHistoryPage.d.ts","sourceRoot":"","sources":["../../../../../src/channel/modules/channels/pages/DeliveryHistoryPage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAiDH,wBAAgB,mBAAmB,4CA6SlC"}

package/dist/channel/modules/channels/pages/DeliveryHistoryPage.js

@@ -0,0 +1,375 @@
+import { useChannel as e } from "../../../providers/ChannelProvider.js";
+import { DELIVERY_UPDATED_SUBSCRIPTION as t, useChannelSubscription as n } from "../../../hooks/useChannelSubscription.js";
+import { useChannel as r } from "../../../hooks/useChannels.js";
+import { PermissionGuard as i } from "../../../components/PermissionGuard.js";
+import { CHANNEL_PERMISSIONS as a } from "../../../constants/permissions.js";
+import { useExportDeliveryAttempts as o } from "../hooks/useExport.js";
+import { useCallback as s, useEffect as c, useState as l } from "react";
+import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as d, ArrowLeft as f, CheckCircle2 as p, Clock as m, Download as h, Loader2 as g, RefreshCw as _, RotateCcw as v, Send as y, XCircle as b } from "lucide-react";
+import { useNavigate as x, useParams as S } from "react-router-dom";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+//#region src/channel/modules/channels/pages/DeliveryHistoryPage.tsx
+var T = {
+	PENDING: {
+		label: "Pending",
+		color: "text-muted-foreground bg-muted",
+		icon: m
+	},
+	QUEUED: {
+		label: "Queued",
+		color: "text-info-500 bg-info-100",
+		icon: m
+	},
+	SENDING: {
+		label: "Sending",
+		color: "text-accent-primary bg-accent-primary/10",
+		icon: y
+	},
+	SENT: {
+		label: "Sent",
+		color: "text-success-500 bg-success-100",
+		icon: p
+	},
+	DELIVERED: {
+		label: "Delivered",
+		color: "text-success-500 bg-success-100",
+		icon: p
+	},
+	FAILED: {
+		label: "Failed",
+		color: "text-error-500 bg-error-100",
+		icon: b
+	},
+	BOUNCED: {
+		label: "Bounced",
+		color: "text-warning-500 bg-warning-100",
+		icon: d
+	},
+	REJECTED: {
+		label: "Rejected",
+		color: "text-error-500 bg-error-100",
+		icon: b
+	},
+	RATE_LIMITED: {
+		label: "Rate Limited",
+		color: "text-warning-500 bg-warning-100",
+		icon: m
+	},
+	RETRYING: {
+		label: "Retrying",
+		color: "text-accent-primary bg-accent-primary/10",
+		icon: _
+	},
+	OPENED: {
+		label: "Opened",
+		color: "text-success-500 bg-success-100",
+		icon: p
+	},
+	CLICKED: {
+		label: "Clicked",
+		color: "text-success-500 bg-success-100",
+		icon: p
+	}
+};
+function E() {
+	let { channelId: p } = S(), m = x(), { t: b } = u(), E = (e, t) => {
+		let n = b(e);
+		return n === e ? t : n;
+	}, { organizationId: D } = e(), { triggerExport: O, isExporting: k, exportError: A } = o(D ?? void 0, p), [j, M] = l(!0), [N, P] = l([]), [F, I] = l(null), [L, R] = l(null), [z, B] = l(25), { channel: V, isLoading: H, error: U, fetchDeliveryAttempts: W, retryDelivery: G } = r(p), K = s(async () => {
+		if (p) {
+			M(!0), R(null);
+			try {
+				P(await W(z));
+			} finally {
+				M(!1);
+			}
+		}
+	}, [
+		p,
+		W,
+		z
+	]);
+	c(() => {
+		Promise.resolve().then(() => K());
+	}, [K]), n({
+		query: t,
+		variables: { channelId: p },
+		operationName: "DeliveryUpdated",
+		enabled: !!p,
+		onData: () => void K(),
+		pollFn: K,
+		pollIntervalMs: 6e4
+	});
+	let q = async (e) => {
+		I(e), R(null);
+		try {
+			let t = await G(e);
+			t.success || R(t.error || "Retry failed");
+		} finally {
+			I(null);
+		}
+	}, J = (e) => T[e] || T.PENDING;
+	return H ? /* @__PURE__ */ C("div", {
+		className: "flex items-center justify-center min-h-screen",
+		children: /* @__PURE__ */ C(g, {
+			size: 32,
+			className: "animate-spin text-accent-primary"
+		})
+	}) : U || !V ? /* @__PURE__ */ C("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ w("div", {
+			className: "flex items-center gap-3 p-4 bg-error-100 border border-error-500 rounded-lg",
+			children: [
+				/* @__PURE__ */ C(d, {
+					size: 20,
+					className: "text-error-500"
+				}),
+				/* @__PURE__ */ C("div", { children: /* @__PURE__ */ C("p", {
+					className: "text-sm font-medium text-error-700",
+					children: U || "Channel not found"
+				}) }),
+				/* @__PURE__ */ C("button", {
+					onClick: () => m(`/channels/${p}`),
+					className: "ml-auto px-3 py-1 text-sm text-error-700 hover:bg-error-200 rounded transition-colors",
+					children: "Go Back"
+				})
+			]
+		})
+	}) : /* @__PURE__ */ C(i, {
+		permission: a.CHANNEL_DELIVERY_READ,
+		children: /* @__PURE__ */ w("div", {
+			className: "space-y-6 p-3 sm:p-6",
+			children: [
+				/* @__PURE__ */ w("div", {
+					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+					children: [/* @__PURE__ */ w("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ C("button", {
+							onClick: () => m(`/channels/${p}`),
+							className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors",
+							children: /* @__PURE__ */ C(f, { size: 20 })
+						}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("h1", {
+							className: "text-xl sm:text-2xl font-bold text-foreground",
+							children: E("channel.deliveryHistory", "Delivery History")
+						}), /* @__PURE__ */ w("p", {
+							className: "text-sm text-muted-foreground mt-1",
+							children: [V.name, " - Message deliveries"]
+						})] })]
+					}), /* @__PURE__ */ w("div", {
+						className: "flex items-center gap-3",
+						children: [
+							/* @__PURE__ */ w("select", {
+								value: z,
+								onChange: (e) => B(Number(e.target.value)),
+								className: "px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-foreground",
+								children: [
+									/* @__PURE__ */ C("option", {
+										value: 10,
+										children: "10 results"
+									}),
+									/* @__PURE__ */ C("option", {
+										value: 25,
+										children: "25 results"
+									}),
+									/* @__PURE__ */ C("option", {
+										value: 50,
+										children: "50 results"
+									}),
+									/* @__PURE__ */ C("option", {
+										value: 100,
+										children: "100 results"
+									})
+								]
+							}),
+							/* @__PURE__ */ w("button", {
+								onClick: K,
+								disabled: j,
+								className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50",
+								children: [/* @__PURE__ */ C(_, {
+									size: 16,
+									className: j ? "animate-spin" : ""
+								}), E("channel.refresh", "Refresh")]
+							}),
+							/* @__PURE__ */ C(i, {
+								permission: a.CHANNEL_ADMIN,
+								children: /* @__PURE__ */ w("button", {
+									onClick: () => void O(),
+									disabled: k,
+									className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-fg border border-border hover:bg-bg-elevated rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+									title: E("channel.exportCSV", "Export to CSV"),
+									children: [k ? /* @__PURE__ */ C(g, {
+										size: 16,
+										className: "animate-spin"
+									}) : /* @__PURE__ */ C(h, { size: 16 }), E("channel.export", "Export")]
+								})
+							})
+						]
+					})]
+				}),
+				A && /* @__PURE__ */ w("div", {
+					className: "p-4 bg-error-100 border border-error-500 rounded-lg flex items-center gap-3",
+					children: [/* @__PURE__ */ C(d, {
+						size: 20,
+						className: "text-error-500"
+					}), /* @__PURE__ */ C("p", {
+						className: "text-sm text-error-700 flex-1",
+						children: A
+					})]
+				}),
+				L && /* @__PURE__ */ w("div", {
+					className: "p-4 bg-error-100 border border-error-500 rounded-lg flex items-center gap-3",
+					children: [
+						/* @__PURE__ */ C(d, {
+							size: 20,
+							className: "text-error-500"
+						}),
+						/* @__PURE__ */ C("p", {
+							className: "text-sm text-error-700 flex-1",
+							children: L
+						}),
+						/* @__PURE__ */ C("button", {
+							onClick: () => R(null),
+							className: "text-error-500 hover:text-error-700",
+							children: E("channel.dismiss", "Dismiss")
+						})
+					]
+				}),
+				/* @__PURE__ */ C("div", {
+					className: "p-4 bg-surface border border-border rounded-lg",
+					children: /* @__PURE__ */ C("p", {
+						className: "text-sm text-muted-foreground",
+						children: "Delivery history shows all message attempts sent through this channel. Data is retained for 7 days. Click retry on a failed delivery to attempt sending again."
+					})
+				}),
+				/* @__PURE__ */ C("div", {
+					className: "bg-surface border border-border rounded-lg overflow-hidden",
+					children: /* @__PURE__ */ C("div", {
+						className: "overflow-x-auto min-w-full",
+						children: /* @__PURE__ */ w("table", {
+							className: "w-full min-w-[700px]",
+							children: [/* @__PURE__ */ C("thead", {
+								className: "bg-muted/50 border-b border-border",
+								children: /* @__PURE__ */ w("tr", { children: [
+									/* @__PURE__ */ C("th", {
+										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: E("channel.status", "Status")
+									}),
+									/* @__PURE__ */ C("th", {
+										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: E("channel.content", "Content")
+									}),
+									/* @__PURE__ */ C("th", {
+										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: E("channel.sentAt", "Sent At")
+									}),
+									/* @__PURE__ */ C("th", {
+										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: E("channel.retries", "Retries")
+									}),
+									/* @__PURE__ */ C("th", {
+										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: E("channel.error", "Error")
+									}),
+									/* @__PURE__ */ C("th", {
+										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: E("channel.actions", "Actions")
+									})
+								] })
+							}), /* @__PURE__ */ C("tbody", {
+								className: "divide-y divide-border",
+								children: j ? /* @__PURE__ */ C("tr", { children: /* @__PURE__ */ w("td", {
+									colSpan: 6,
+									className: "px-4 py-12 text-center",
+									children: [/* @__PURE__ */ C(g, {
+										size: 24,
+										className: "animate-spin text-accent-primary mx-auto"
+									}), /* @__PURE__ */ C("p", {
+										className: "text-sm text-muted-foreground mt-2",
+										children: "Loading delivery attempts..."
+									})]
+								}) }) : N.length === 0 ? /* @__PURE__ */ C("tr", { children: /* @__PURE__ */ C("td", {
+									colSpan: 6,
+									className: "px-4 py-12 text-center",
+									children: /* @__PURE__ */ w("div", {
+										className: "flex flex-col items-center gap-2",
+										children: [
+											/* @__PURE__ */ C(y, {
+												size: 32,
+												className: "text-muted-foreground"
+											}),
+											/* @__PURE__ */ C("p", {
+												className: "text-sm font-medium text-foreground",
+												children: E("channel.noDeliveryAttempts", "No delivery attempts yet")
+											}),
+											/* @__PURE__ */ C("p", {
+												className: "text-xs text-muted-foreground",
+												children: E("channel.sendMessageToSeeHistory", "Send a message through this channel to see delivery history")
+											})
+										]
+									})
+								}) }) : N.map((e) => {
+									let t = J(e.status), n = t.icon, r = e.status === "FAILED" || e.status === "BOUNCED" || e.status === "REJECTED";
+									return /* @__PURE__ */ w("tr", {
+										className: "hover:bg-muted/30 transition-colors",
+										children: [
+											/* @__PURE__ */ C("td", {
+												className: "px-4 py-3",
+												children: /* @__PURE__ */ w("div", {
+													className: "flex items-center gap-2",
+													children: [/* @__PURE__ */ C(n, {
+														size: 14,
+														className: t.color.split(" ")[0]
+													}), /* @__PURE__ */ C("span", {
+														className: `text-sm font-medium ${t.color}`,
+														children: t.label
+													})]
+												})
+											}),
+											/* @__PURE__ */ C("td", {
+												className: "px-4 py-3 text-sm text-foreground truncate max-w-xs",
+												children: e.content
+											}),
+											/* @__PURE__ */ C("td", {
+												className: "px-4 py-3 text-sm text-muted-foreground",
+												children: e.sentAt ? new Date(e.sentAt).toLocaleString() : "-"
+											}),
+											/* @__PURE__ */ C("td", {
+												className: "px-4 py-3 text-sm text-muted-foreground",
+												children: e.retryCount
+											}),
+											/* @__PURE__ */ C("td", {
+												className: "px-4 py-3 text-sm text-error-500 max-w-xs truncate",
+												children: e.errorMessage || "-"
+											}),
+											/* @__PURE__ */ C("td", {
+												className: "px-4 py-3",
+												children: r && /* @__PURE__ */ C(i, {
+													permission: a.CHANNEL_DELIVERY_EXECUTE,
+													children: /* @__PURE__ */ w("button", {
+														onClick: () => q(e.id),
+														disabled: F === e.id,
+														className: "flex items-center gap-1 px-2 py-1 text-xs font-medium text-accent-primary hover:bg-accent-primary/10 rounded transition-colors disabled:opacity-50",
+														title: E("channel.retryDelivery", "Retry this delivery"),
+														children: [/* @__PURE__ */ C(v, {
+															size: 12,
+															className: F === e.id ? "animate-spin" : ""
+														}), F === e.id ? E("channel.retrying", "Retrying...") : E("channel.retry", "Retry")]
+													})
+												})
+											})
+										]
+									}, e.id);
+								})
+							})]
+						})
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { E as DeliveryHistoryPage };
+
+//# sourceMappingURL=DeliveryHistoryPage.js.map