@burdenoff/microfe-channel 2026.510.112

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

@@ -0,0 +1,949 @@
+import { nativeImpact as e, nativeNotify as t } from "../../../../utils/nativeBridge.js";
+import { useChannel as n } from "../../../hooks/useChannels.js";
+import { PermissionGuard as r } from "../../../components/PermissionGuard.js";
+import { CHANNEL_PERMISSIONS as i } from "../../../constants/permissions.js";
+import { AUTH_TYPE_I18N as a, HEALTH_I18N as ee, PLATFORM_I18N as te, STATUS_I18N as o, translateLabel as s } from "../i18n.js";
+import { AdapterCredentialsForm as ne, CredentialValidationStatus as re } from "../../../components/AdapterCredentialsForm.js";
+import { useEffect as ie, useState as c } from "react";
+import { useI18n as ae } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as l, AlertTriangle as u, ArrowLeft as oe, ArrowRight as d, Cable as f, CheckCircle2 as p, Clock as se, HelpCircle as m, Key as ce, Loader2 as h, Mail as le, MessageSquare as ue, Pencil as g, Phone as de, Play as fe, Plus as pe, Power as me, PowerOff as _, Radio as he, RefreshCw as ge, Save as v, Send as y, Trash2 as _e, Truck as ve, Users as ye, X as b, XCircle as x } from "lucide-react";
+import { useLocation as be, useNavigate as xe, useParams as S } from "react-router-dom";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { TagBadge as Se } from "@burdenoff/fe-libs/tag";
+//#region src/channel/modules/channels/pages/ChannelDetailsPage.tsx
+var T = {
+	EMAIL: {
+		label: "Email",
+		color: "bg-accent-blue-subtle text-accent-blue"
+	},
+	SMS: {
+		label: "SMS",
+		color: "bg-status-success-bg-subtle text-status-success-text"
+	},
+	PUSH: {
+		label: "Push",
+		color: "bg-accent-purple-subtle text-accent-purple"
+	},
+	INAPP: {
+		label: "In-App",
+		color: "bg-accent-indigo-subtle text-accent-indigo"
+	},
+	WEBHOOK: {
+		label: "Webhook",
+		color: "bg-accent-orange-subtle text-accent-orange"
+	},
+	SLACK: {
+		label: "Slack",
+		color: "bg-accent-pink-subtle text-accent-pink"
+	},
+	TEAMS: {
+		label: "Teams",
+		color: "bg-accent-cyan-subtle text-accent-cyan"
+	},
+	DISCORD: {
+		label: "Discord",
+		color: "bg-accent-violet-subtle text-accent-violet"
+	},
+	WHATSAPP: {
+		label: "WhatsApp",
+		color: "bg-accent-emerald-subtle text-accent-emerald"
+	},
+	WEBCHAT: {
+		label: "Webchat",
+		color: "bg-accent-teal-subtle text-accent-teal"
+	}
+}, E = {
+	ACTIVE: {
+		label: "Active",
+		color: "text-success-500 bg-success-100",
+		icon: p
+	},
+	INACTIVE: {
+		label: "Inactive",
+		color: "text-muted-foreground bg-muted",
+		icon: _
+	},
+	ERROR: {
+		label: "Error",
+		color: "text-error-500 bg-error-100",
+		icon: x
+	},
+	SUSPENDED: {
+		label: "Suspended",
+		color: "text-warning-500 bg-warning-100",
+		icon: u
+	},
+	ARCHIVED: {
+		label: "Archived",
+		color: "text-muted-foreground bg-muted",
+		icon: _
+	}
+}, D = {
+	HEALTHY: {
+		label: "Healthy",
+		color: "text-success-500",
+		icon: p
+	},
+	DEGRADED: {
+		label: "Degraded",
+		color: "text-warning-500",
+		icon: u
+	},
+	UNHEALTHY: {
+		label: "Unhealthy",
+		color: "text-error-500",
+		icon: x
+	},
+	UNKNOWN: {
+		label: "Unknown",
+		color: "text-muted-foreground",
+		icon: m
+	}
+};
+function O() {
+	let { channelId: u } = S(), m = xe(), O = be(), { t: k } = ae(), A = (e, t) => {
+		let n = k(e);
+		return n === e ? t : n;
+	}, j = O.state, [M, N] = c(null), [P, F] = c(j?.showCredentialsForm || !1), [I, L] = c(j?.pendingCredentials || {}), [Ce, R] = c(!1), [z, B] = c(null), [we, V] = c(!1), [H, U] = c(""), [W, Te] = c(() => A("channel.testNotificationSubject", "Test Notification")), [G, Ee] = c(() => A("channel.testNotificationBody", "This is a test notification from Burdenoff Channel Service.")), [K, q] = c(null);
+	ie(() => {
+		(j?.pendingCredentials || j?.showCredentialsForm) && m(O.pathname, {
+			replace: !0,
+			state: null
+		});
+	}, []);
+	let { channel: J, isLoading: De, error: Y, updateChannel: Oe, runHealthCheck: ke, createConnection: Ae, updateConnection: je, deleteConnection: Me, testConnection: Ne, sendTestNotification: Pe } = n(u), Fe = async () => {
+		N("health");
+		try {
+			await ke();
+		} catch (e) {
+			console.error("[channel] Failed to run health check", e);
+		} finally {
+			N(null);
+		}
+	}, Ie = async () => {
+		if (J) {
+			N("status");
+			try {
+				await Oe({ status: J.status === "ACTIVE" ? "INACTIVE" : "ACTIVE" });
+			} catch (e) {
+				console.error("[channel] Failed to toggle channel status", e);
+			} finally {
+				N(null);
+			}
+		}
+	}, Le = async () => {
+		if (J) {
+			N("connection");
+			try {
+				let e = "API_KEY", t = J.adapterType;
+				t?.includes("BOT") ? e = "BOT_TOKEN" : t?.includes("WEBHOOK") ? e = "WEBHOOK" : t === "SMTP" && (e = "SMTP_IMAP"), await Ae({
+					authType: e,
+					credentials: I
+				}), F(!1), L({}), R(!1);
+			} catch (e) {
+				console.error("[channel] Failed to create connection", e);
+			} finally {
+				N(null);
+			}
+		}
+	}, Re = async (e) => {
+		N("connection");
+		try {
+			await je(e, { credentials: I }), F(!1), L({}), R(!1);
+		} catch (e) {
+			console.error("[channel] Failed to update connection", e);
+		} finally {
+			N(null);
+		}
+	}, ze = async (n) => {
+		e("medium"), N("delete-connection");
+		try {
+			await Me(n), t("success");
+		} catch (e) {
+			t("error"), console.error("[channel] Failed to delete connection", e);
+		} finally {
+			N(null);
+		}
+	}, Be = async (e) => {
+		N("test"), B(null);
+		try {
+			let t = await Ne(e);
+			t && B({
+				success: t.success,
+				message: t.message || (t.success ? A("channel.connectionTestSuccess", "Connection successful!") : A("channel.connectionTestFailed", "Connection failed"))
+			});
+		} catch (e) {
+			console.error("[channel] Failed to test connection", e), B({
+				success: !1,
+				message: A("channel.connectionTestRequestFailed", "Failed to test connection")
+			});
+		} finally {
+			N(null);
+		}
+	}, Ve = async () => {
+		if (H.trim()) {
+			N("send-test"), q(null);
+			try {
+				let e = J?.platform === "EMAIL" ? {
+					subject: W,
+					html: `<p>${G}</p>`
+				} : void 0, t = await Pe(H.trim(), G, e);
+				t && q({
+					success: t.success,
+					messageId: t.messageId,
+					externalId: t.externalId,
+					status: t.status,
+					sentAt: t.sentAt,
+					error: t.error ? {
+						code: t.error.code,
+						message: t.error.message,
+						retryable: t.error.retryable
+					} : null
+				});
+			} catch (e) {
+				let t = e instanceof Error ? e.message : A("channel.sendTestNotificationFailed", "Failed to send test notification");
+				console.error("[channel] Failed to send test notification", e), q({
+					success: !1,
+					error: {
+						code: "SEND_FAILED",
+						message: t,
+						retryable: !1
+					}
+				});
+			} finally {
+				N(null);
+			}
+		}
+	}, He = (e) => {
+		switch (e) {
+			case "EMAIL": return A("channel.recipientPlaceholder.email", "email@example.com");
+			case "SMS": return A("channel.recipientPlaceholder.phone", "+1234567890");
+			case "PUSH": return A("channel.recipientPlaceholder.deviceToken", "Device token");
+			case "SLACK": return A("channel.recipientPlaceholder.slack", "Channel ID or User ID");
+			case "TEAMS": return A("channel.recipientPlaceholder.channelId", "Channel ID");
+			case "DISCORD": return A("channel.recipientPlaceholder.channelId", "Channel ID");
+			case "WHATSAPP": return A("channel.recipientPlaceholder.phone", "+1234567890");
+			default: return A("channel.recipientPlaceholder.default", "Recipient");
+		}
+	}, Ue = (e) => {
+		switch (e) {
+			case "EMAIL": return A("channel.recipientLabel.email", "Email Address");
+			case "SMS":
+			case "WHATSAPP": return A("channel.recipientLabel.phone", "Phone Number");
+			case "PUSH": return A("channel.recipientLabel.deviceToken", "Device Token");
+			case "SLACK":
+			case "TEAMS":
+			case "DISCORD": return A("channel.recipientLabel.channelOrUserId", "Channel/User ID");
+			default: return A("channel.recipientLabel.default", "Recipient");
+		}
+	}, We = (e) => ({
+		...T[e] || {
+			label: e,
+			color: "bg-bg-sunken text-text-secondary"
+		},
+		label: s(e, te, A)
+	}), Ge = (e) => ({
+		...E[e] || E.INACTIVE,
+		label: s(e, o, A)
+	}), Ke = (e) => ({
+		...D[e] || D.UNKNOWN,
+		label: s(e, ee, A)
+	});
+	if (De) return /* @__PURE__ */ C("div", {
+		className: "flex items-center justify-center min-h-screen",
+		children: /* @__PURE__ */ C(h, {
+			size: 32,
+			className: "animate-spin text-accent-primary"
+		})
+	});
+	if (Y || !J) return /* @__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(l, {
+					size: 20,
+					className: "text-error-500"
+				}),
+				/* @__PURE__ */ C("div", { children: /* @__PURE__ */ C("p", {
+					className: "text-sm font-medium text-error-700",
+					children: Y || A("channel.channelNotFound", "Channel not found")
+				}) }),
+				/* @__PURE__ */ C("button", {
+					onClick: () => m(-1),
+					className: "ml-auto px-3 py-1 text-sm text-error-700 hover:bg-error-200 rounded transition-colors",
+					children: A("channel.goBack", "Go Back")
+				})
+			]
+		})
+	});
+	let X = We(J.platform), Z = Ge(J.status), Q = Ke(J.connectionHealth), qe = Z.icon, Je = Q.icon, $ = J.connection;
+	return /* @__PURE__ */ C(r, {
+		permission: i.CHANNEL_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(-1),
+							className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors",
+							children: /* @__PURE__ */ C(oe, { size: 20 })
+						}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ w("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ C(he, {
+								size: 24,
+								className: "text-accent-primary"
+							}), /* @__PURE__ */ C("h1", {
+								className: "text-xl sm:text-2xl font-bold text-foreground",
+								children: J.name
+							})]
+						}), J.description && /* @__PURE__ */ C("p", {
+							className: "text-sm text-muted-foreground mt-1",
+							children: J.description
+						})] })]
+					}), /* @__PURE__ */ w("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ C(r, {
+								permission: i.CHANNEL_EXECUTE,
+								children: /* @__PURE__ */ w("button", {
+									onClick: Fe,
+									disabled: M === "health",
+									className: "flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-info-500 hover:bg-info-100 rounded-lg transition-colors disabled:opacity-50",
+									children: [M === "health" ? /* @__PURE__ */ C(h, {
+										size: 16,
+										className: "animate-spin"
+									}) : /* @__PURE__ */ C(ge, { size: 16 }), A("channel.healthCheck", "Health Check")]
+								})
+							}),
+							/* @__PURE__ */ C(r, {
+								permission: i.CHANNEL_UPDATE,
+								children: /* @__PURE__ */ w("button", {
+									onClick: Ie,
+									disabled: M === "status",
+									className: `flex items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors disabled:opacity-50 ${J.status === "ACTIVE" ? "text-warning-500 hover:bg-warning-100" : "text-success-500 hover:bg-success-100"}`,
+									children: [M === "status" ? /* @__PURE__ */ C(h, {
+										size: 16,
+										className: "animate-spin"
+									}) : J.status === "ACTIVE" ? /* @__PURE__ */ C(_, { size: 16 }) : /* @__PURE__ */ C(me, { size: 16 }), J.status === "ACTIVE" ? A("channel.deactivate", "Deactivate") : A("channel.activate", "Activate")]
+								})
+							}),
+							/* @__PURE__ */ w("button", {
+								onClick: () => {
+									V(!0), q(null), U("");
+								},
+								disabled: !J.connection,
+								className: "flex items-center gap-2 px-3 py-2 text-sm text-accent-primary hover:bg-accent-primary/10 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+								title: J.connection ? A("channel.sendTestNotification", "Send test notification") : A("channel.configureCredentialsFirst", "Configure credentials first"),
+								children: [/* @__PURE__ */ C(y, { size: 16 }), A("channel.testChannel", "Test Channel")]
+							}),
+							/* @__PURE__ */ w("button", {
+								onClick: () => m("./edit"),
+								className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors shadow-sm",
+								children: [/* @__PURE__ */ C(g, { size: 16 }), A("channel.edit", "Edit")]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ w("div", {
+					className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
+					children: [
+						/* @__PURE__ */ w("div", {
+							className: "p-4 bg-surface border border-border rounded-lg",
+							children: [/* @__PURE__ */ C("p", {
+								className: "text-xs text-muted-foreground mb-1",
+								children: A("channel.platform", "Platform")
+							}), /* @__PURE__ */ C("span", {
+								className: `inline-flex px-2 py-1 text-sm font-semibold rounded-full ${X.color}`,
+								children: X.label
+							})]
+						}),
+						/* @__PURE__ */ w("div", {
+							className: "p-4 bg-surface border border-border rounded-lg",
+							children: [/* @__PURE__ */ C("p", {
+								className: "text-xs text-muted-foreground mb-1",
+								children: A("channel.status", "Status")
+							}), /* @__PURE__ */ w("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ C(qe, {
+									size: 16,
+									className: Z.color.split(" ")[0]
+								}), /* @__PURE__ */ C("span", {
+									className: `px-2 py-1 text-sm font-medium rounded-full ${Z.color}`,
+									children: Z.label
+								})]
+							})]
+						}),
+						/* @__PURE__ */ w("div", {
+							className: "p-4 bg-surface border border-border rounded-lg",
+							children: [
+								/* @__PURE__ */ C("p", {
+									className: "text-xs text-muted-foreground mb-1",
+									children: A("channel.connectionHealth", "Connection Health")
+								}),
+								/* @__PURE__ */ w("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ C(Je, {
+										size: 16,
+										className: Q.color
+									}), /* @__PURE__ */ C("span", {
+										className: `text-sm font-medium ${Q.color}`,
+										children: Q.label
+									})]
+								}),
+								J.lastHealthCheckAt && /* @__PURE__ */ w("p", {
+									className: "text-xs text-muted-foreground mt-1",
+									children: [
+										A("channel.lastCheck", "Last check"),
+										":",
+										" ",
+										new Date(J.lastHealthCheckAt).toLocaleString()
+									]
+								})
+							]
+						}),
+						/* @__PURE__ */ w("div", {
+							className: "p-4 bg-surface border border-border rounded-lg",
+							children: [/* @__PURE__ */ C("p", {
+								className: "text-xs text-muted-foreground mb-1",
+								children: A("channel.connection", "Connection")
+							}), /* @__PURE__ */ w("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ C(f, {
+									size: 16,
+									className: J.isConnected ? "text-success-500" : "text-muted-foreground"
+								}), /* @__PURE__ */ C("span", {
+									className: `text-sm font-medium ${J.isConnected ? "text-success-500" : "text-muted-foreground"}`,
+									children: J.isConnected ? A("channel.connected", "Connected") : A("channel.notConnected", "Not Connected")
+								})]
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ w("div", {
+					className: "p-4 bg-surface border border-border rounded-lg",
+					children: [
+						/* @__PURE__ */ C("h2", {
+							className: "text-lg font-semibold text-foreground mb-4",
+							children: A("channel.channelDetails", "Channel Details")
+						}),
+						/* @__PURE__ */ w("div", {
+							className: "grid gap-4 sm:grid-cols-2",
+							children: [
+								/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+									className: "text-xs text-muted-foreground",
+									children: A("channel.adapterType", "Adapter Type")
+								}), /* @__PURE__ */ C("p", {
+									className: "text-sm font-medium text-foreground",
+									children: J.adapterType?.replace(/_/g, " ") || A("channel.notConfigured", "Not configured")
+								})] }),
+								/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+									className: "text-xs text-muted-foreground",
+									children: A("channel.priority", "Priority")
+								}), /* @__PURE__ */ C("p", {
+									className: "text-sm font-medium text-foreground",
+									children: J.priority
+								})] }),
+								/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+									className: "text-xs text-muted-foreground",
+									children: A("channel.consecutiveFailures", "Consecutive Failures")
+								}), /* @__PURE__ */ C("p", {
+									className: "text-sm font-medium text-foreground",
+									children: J.consecutiveFailures
+								})] }),
+								/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+									className: "text-xs text-muted-foreground",
+									children: A("channel.messages24h", "Messages (24h)")
+								}), /* @__PURE__ */ C("p", {
+									className: "text-sm font-medium text-foreground",
+									children: J.messageCount24h
+								})] }),
+								/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+									className: "text-xs text-muted-foreground",
+									children: A("channel.createdAt", "Created At")
+								}), /* @__PURE__ */ C("p", {
+									className: "text-sm font-medium text-foreground",
+									children: new Date(J.createdAt).toLocaleString()
+								})] }),
+								/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+									className: "text-xs text-muted-foreground",
+									children: A("channel.updatedAt", "Updated At")
+								}), /* @__PURE__ */ C("p", {
+									className: "text-sm font-medium text-foreground",
+									children: new Date(J.updatedAt).toLocaleString()
+								})] })
+							]
+						}),
+						J.tagAssignments && J.tagAssignments.length > 0 && /* @__PURE__ */ w("div", {
+							className: "mt-4",
+							children: [/* @__PURE__ */ C("p", {
+								className: "text-xs text-muted-foreground mb-1.5",
+								children: A("channel.tags", "Tags")
+							}), /* @__PURE__ */ C("div", {
+								className: "flex flex-wrap gap-1.5",
+								"aria-label": "Channel tags",
+								children: J.tagAssignments.map((e) => /* @__PURE__ */ C(Se, {
+									id: e.tagId,
+									label: e.tagId,
+									size: "md"
+								}, e.id))
+							})]
+						}),
+						J.healthCheckError && /* @__PURE__ */ w("div", {
+							className: "mt-4 p-3 bg-error-100 border border-error-300 rounded-lg",
+							children: [/* @__PURE__ */ C("p", {
+								className: "text-xs text-error-700 font-medium",
+								children: A("channel.lastHealthCheckError", "Last Health Check Error")
+							}), /* @__PURE__ */ C("p", {
+								className: "text-sm text-error-600",
+								children: J.healthCheckError
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ w("div", {
+					className: "grid gap-3 sm:grid-cols-3",
+					children: [
+						/* @__PURE__ */ w("button", {
+							onClick: () => m("./deliveries"),
+							className: "flex items-center gap-3 p-3 bg-surface border border-border rounded-lg hover:bg-action-primary-bg/10 transition-colors text-left",
+							children: [
+								/* @__PURE__ */ C("div", {
+									className: "p-2 bg-accent-orange/10 rounded-lg",
+									children: /* @__PURE__ */ C(ve, {
+										size: 18,
+										className: "text-accent-orange"
+									})
+								}),
+								/* @__PURE__ */ w("div", {
+									className: "flex-1 min-w-0",
+									children: [/* @__PURE__ */ C("p", {
+										className: "text-sm font-medium text-foreground",
+										children: A("channel.deliveryHistory", "Delivery History")
+									}), /* @__PURE__ */ C("p", {
+										className: "text-xs text-muted-foreground truncate",
+										children: A("channel.viewMessageDeliveries", "View message deliveries")
+									})]
+								}),
+								/* @__PURE__ */ C(d, {
+									size: 16,
+									className: "text-muted-foreground shrink-0"
+								})
+							]
+						}),
+						/* @__PURE__ */ w("button", {
+							onClick: () => m("./webhooks"),
+							className: "flex items-center gap-3 p-3 bg-surface border border-border rounded-lg hover:bg-action-primary-bg/10 transition-colors text-left",
+							children: [
+								/* @__PURE__ */ C("div", {
+									className: "p-2 bg-accent-purple/10 rounded-lg",
+									children: /* @__PURE__ */ C(se, {
+										size: 18,
+										className: "text-accent-purple"
+									})
+								}),
+								/* @__PURE__ */ w("div", {
+									className: "flex-1 min-w-0",
+									children: [/* @__PURE__ */ C("p", {
+										className: "text-sm font-medium text-foreground",
+										children: A("channel.webhookEvents", "Webhook Events")
+									}), /* @__PURE__ */ C("p", {
+										className: "text-xs text-muted-foreground truncate",
+										children: A("channel.viewIncomingWebhooks", "View incoming webhooks")
+									})]
+								}),
+								/* @__PURE__ */ C(d, {
+									size: 16,
+									className: "text-muted-foreground shrink-0"
+								})
+							]
+						}),
+						/* @__PURE__ */ w("button", {
+							onClick: () => m("./users"),
+							className: "flex items-center gap-3 p-3 bg-surface border border-border rounded-lg hover:bg-action-primary-bg/10 transition-colors text-left",
+							children: [
+								/* @__PURE__ */ C("div", {
+									className: "p-2 bg-accent-blue/10 rounded-lg",
+									children: /* @__PURE__ */ C(ye, {
+										size: 18,
+										className: "text-accent-blue"
+									})
+								}),
+								/* @__PURE__ */ w("div", {
+									className: "flex-1 min-w-0",
+									children: [/* @__PURE__ */ C("p", {
+										className: "text-sm font-medium text-foreground",
+										children: A("channel.channelUsers", "Channel Users")
+									}), /* @__PURE__ */ C("p", {
+										className: "text-xs text-muted-foreground truncate",
+										children: A("channel.viewConnectedUsers", "View connected users")
+									})]
+								}),
+								/* @__PURE__ */ C(d, {
+									size: 16,
+									className: "text-muted-foreground shrink-0"
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ w("div", {
+					className: "p-4 bg-surface border border-border rounded-lg",
+					children: [
+						/* @__PURE__ */ w("div", {
+							className: "flex items-center justify-between mb-4",
+							children: [/* @__PURE__ */ w("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ C(ce, {
+									size: 20,
+									className: "text-accent-primary"
+								}), /* @__PURE__ */ C("h2", {
+									className: "text-lg font-semibold text-foreground",
+									children: A("channel.connectionAndCredentials", "Connection & Credentials")
+								})]
+							}), !$ && !P && /* @__PURE__ */ w("button", {
+								onClick: () => F(!0),
+								className: "flex items-center gap-2 px-3 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors",
+								children: [/* @__PURE__ */ C(pe, { size: 16 }), A("channel.addCredentials", "Add Credentials")]
+							})]
+						}),
+						$ && !P && /* @__PURE__ */ w("div", {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ w("div", {
+									className: "grid gap-4 sm:grid-cols-2",
+									children: [
+										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+											className: "text-xs text-muted-foreground",
+											children: A("channel.authType", "Auth Type")
+										}), /* @__PURE__ */ C("p", {
+											className: "text-sm font-medium text-foreground",
+											children: s($.authType, a, A)
+										})] }),
+										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+											className: "text-xs text-muted-foreground",
+											children: A("channel.status", "Status")
+										}), /* @__PURE__ */ w("div", {
+											className: "flex items-center gap-2",
+											children: [$.isHealthy ? /* @__PURE__ */ C(p, {
+												size: 14,
+												className: "text-success-500"
+											}) : /* @__PURE__ */ C(x, {
+												size: 14,
+												className: "text-error-500"
+											}), /* @__PURE__ */ C("span", {
+												className: `text-sm font-medium ${$.isHealthy ? "text-success-500" : "text-error-500"}`,
+												children: $.isHealthy ? A("channel.healthy", "Healthy") : A("channel.unhealthy", "Unhealthy")
+											})]
+										})] }),
+										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+											className: "text-xs text-muted-foreground",
+											children: A("channel.lastTested", "Last Tested")
+										}), /* @__PURE__ */ C("p", {
+											className: "text-sm font-medium text-foreground",
+											children: $.lastTestedAt ? new Date($.lastTestedAt).toLocaleString() : A("channel.never", "Never")
+										})] }),
+										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+											className: "text-xs text-muted-foreground",
+											children: A("channel.testStatus", "Test Status")
+										}), /* @__PURE__ */ C("p", {
+											className: "text-sm font-medium text-foreground",
+											children: $.testStatus || A("channel.notTested", "Not tested")
+										})] }),
+										$.tokenExpiresAt && /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+											className: "text-xs text-muted-foreground",
+											children: A("channel.tokenExpires", "Token Expires")
+										}), /* @__PURE__ */ w("p", {
+											className: `text-sm font-medium ${$.needsTokenRefresh ? "text-warning-500" : "text-foreground"}`,
+											children: [new Date($.tokenExpiresAt).toLocaleString(), $.daysUntilExpiry !== void 0 && /* @__PURE__ */ w("span", {
+												className: "text-xs text-muted-foreground ml-1",
+												children: [
+													"(",
+													$.daysUntilExpiry,
+													" ",
+													A("channel.days", "days"),
+													")"
+												]
+											})]
+										})] })
+									]
+								}),
+								z && /* @__PURE__ */ C("div", {
+									className: `p-3 rounded-lg ${z.success ? "bg-success-100 border border-success-300" : "bg-error-100 border border-error-300"}`,
+									children: /* @__PURE__ */ w("div", {
+										className: "flex items-center gap-2",
+										children: [z.success ? /* @__PURE__ */ C(p, {
+											size: 16,
+											className: "text-success-500"
+										}) : /* @__PURE__ */ C(x, {
+											size: 16,
+											className: "text-error-500"
+										}), /* @__PURE__ */ C("p", {
+											className: `text-sm font-medium ${z.success ? "text-success-700" : "text-error-700"}`,
+											children: z.message
+										})]
+									})
+								}),
+								/* @__PURE__ */ w("div", {
+									className: "flex items-center gap-2 pt-2",
+									children: [
+										/* @__PURE__ */ C(r, {
+											permission: i.CHANNEL_CONNECTION_UPDATE,
+											children: /* @__PURE__ */ w("button", {
+												onClick: () => Be($.id),
+												disabled: M === "test",
+												className: "flex items-center gap-2 px-3 py-2 text-sm text-info-500 hover:bg-info-100 rounded-lg transition-colors disabled:opacity-50",
+												children: [M === "test" ? /* @__PURE__ */ C(h, {
+													size: 16,
+													className: "animate-spin"
+												}) : /* @__PURE__ */ C(fe, { size: 16 }), A("channel.testConnection", "Test Connection")]
+											})
+										}),
+										/* @__PURE__ */ w("button", {
+											onClick: () => {
+												F(!0), L($?.platformMetadata ?? {});
+											},
+											className: "flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-accent-primary hover:bg-accent-primary/10 rounded-lg transition-colors",
+											children: [/* @__PURE__ */ C(g, { size: 16 }), A("channel.updateCredentials", "Update Credentials")]
+										}),
+										/* @__PURE__ */ C(r, {
+											permission: i.CHANNEL_CONNECTION_DELETE,
+											children: /* @__PURE__ */ w("button", {
+												onClick: () => ze($.id),
+												disabled: M === "delete-connection",
+												className: "flex items-center gap-2 px-3 py-2 text-sm text-error-500 hover:bg-error-100 rounded-lg transition-colors disabled:opacity-50",
+												children: [M === "delete-connection" ? /* @__PURE__ */ C(h, {
+													size: 16,
+													className: "animate-spin"
+												}) : /* @__PURE__ */ C(_e, { size: 16 }), A("channel.remove", "Remove")]
+											})
+										})
+									]
+								})
+							]
+						}),
+						!$ && !P && /* @__PURE__ */ w("div", {
+							className: "text-center py-8",
+							children: [
+								/* @__PURE__ */ C(f, {
+									size: 32,
+									className: "mx-auto text-muted-foreground mb-3"
+								}),
+								/* @__PURE__ */ C("p", {
+									className: "text-sm text-muted-foreground mb-2",
+									children: A("channel.noCredentialsConfigured", "No credentials configured for this channel")
+								}),
+								/* @__PURE__ */ C("p", {
+									className: "text-xs text-muted-foreground",
+									children: A("channel.addCredentialsHint", "Add credentials to enable message delivery through this channel")
+								})
+							]
+						}),
+						P && /* @__PURE__ */ w("div", {
+							className: "space-y-4",
+							children: [
+								!J.adapterType && /* @__PURE__ */ C("div", {
+									className: "p-3 bg-accent-orange/10 border border-accent-orange/30 rounded-lg",
+									children: /* @__PURE__ */ w("div", {
+										className: "flex items-start gap-2",
+										children: [/* @__PURE__ */ C(l, {
+											size: 16,
+											className: "text-accent-orange mt-0.5"
+										}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+											className: "text-sm font-medium text-accent-orange",
+											children: A("channel.noAdapterTypeConfigured", "No adapter type configured")
+										}), /* @__PURE__ */ C("p", {
+											className: "text-xs text-muted-foreground mt-1",
+											children: A("channel.noAdapterTypeConfiguredHint", "You can still add credentials below. The system will attempt to validate them when the channel is configured with an adapter type.")
+										})] })]
+									})
+								}),
+								/* @__PURE__ */ C(ne, {
+									adapterType: J.adapterType ?? void 0,
+									credentials: I,
+									onChange: L,
+									onValidationChange: (e) => R(e),
+									disabled: M === "connection"
+								}),
+								J.adapterType && /* @__PURE__ */ C("div", {
+									className: "pt-2",
+									children: /* @__PURE__ */ C(re, {
+										adapterType: J.adapterType,
+										credentials: I
+									})
+								}),
+								/* @__PURE__ */ w("div", {
+									className: "flex items-center gap-2 pt-2 border-t border-border",
+									children: [/* @__PURE__ */ C(r, {
+										permission: i.CHANNEL_CONNECTION_UPDATE,
+										children: /* @__PURE__ */ w("button", {
+											onClick: () => {
+												$ ? Re($.id) : Le();
+											},
+											disabled: M === "connection" || !Ce && !!J.adapterType,
+											className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+											children: [M === "connection" ? /* @__PURE__ */ C(h, {
+												size: 16,
+												className: "animate-spin"
+											}) : /* @__PURE__ */ C(v, { size: 16 }), $ ? A("channel.updateCredentials", "Update Credentials") : A("channel.saveCredentials", "Save Credentials")]
+										})
+									}), /* @__PURE__ */ w("button", {
+										onClick: () => {
+											F(!1), L({}), R(!1);
+										},
+										className: "flex items-center gap-2 px-4 py-2 text-sm text-muted-foreground hover:bg-muted rounded-lg transition-colors",
+										children: [/* @__PURE__ */ C(b, { size: 16 }), A("channel.cancel", "Cancel")]
+									})]
+								})
+							]
+						})
+					]
+				}),
+				we && /* @__PURE__ */ C("div", {
+					className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
+					children: /* @__PURE__ */ w("div", {
+						className: "w-full max-w-md mx-4 p-6 bg-surface border border-border rounded-lg shadow-xl",
+						children: [/* @__PURE__ */ w("div", {
+							className: "flex items-center justify-between mb-4",
+							children: [/* @__PURE__ */ w("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ C(y, {
+									size: 20,
+									className: "text-accent-primary"
+								}), /* @__PURE__ */ w("h3", {
+									className: "text-lg font-semibold text-foreground",
+									children: [
+										"Test ",
+										T[J.platform]?.label || J.platform,
+										" Channel"
+									]
+								})]
+							}), /* @__PURE__ */ C("button", {
+								onClick: () => V(!1),
+								className: "p-1 text-muted-foreground hover:text-foreground rounded",
+								children: /* @__PURE__ */ C(b, { size: 20 })
+							})]
+						}), /* @__PURE__ */ w("div", {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ w("label", {
+									className: "block text-sm font-medium text-foreground mb-1.5",
+									children: [
+										Ue(J.platform),
+										" ",
+										/* @__PURE__ */ C("span", {
+											className: "text-error-500",
+											children: "*"
+										})
+									]
+								}), /* @__PURE__ */ w("div", {
+									className: "relative",
+									children: [/* @__PURE__ */ C("input", {
+										type: "text",
+										value: H,
+										onChange: (e) => U(e.target.value),
+										placeholder: He(J.platform),
+										className: "w-full pl-9 pr-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
+									}), /* @__PURE__ */ C("div", {
+										className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground",
+										children: J.platform === "EMAIL" ? /* @__PURE__ */ C(le, { size: 16 }) : J.platform === "SMS" || J.platform === "WHATSAPP" ? /* @__PURE__ */ C(de, { size: 16 }) : /* @__PURE__ */ C(ue, { size: 16 })
+									})]
+								})] }),
+								J.platform === "EMAIL" && /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("label", {
+									className: "block text-sm font-medium text-foreground mb-1.5",
+									children: "Subject"
+								}), /* @__PURE__ */ C("input", {
+									type: "text",
+									value: W,
+									onChange: (e) => Te(e.target.value),
+									placeholder: "Email subject",
+									className: "w-full px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
+								})] }),
+								/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("label", {
+									className: "block text-sm font-medium text-foreground mb-1.5",
+									children: "Message"
+								}), /* @__PURE__ */ C("textarea", {
+									value: G,
+									onChange: (e) => Ee(e.target.value),
+									placeholder: "Test message content",
+									rows: 3,
+									className: "w-full px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg resize-none"
+								})] }),
+								K && /* @__PURE__ */ C("div", {
+									className: `p-3 rounded-lg ${K.success ? "bg-success-100 border border-success-300" : "bg-error-100 border border-error-300"}`,
+									children: /* @__PURE__ */ w("div", {
+										className: "flex items-start gap-2",
+										children: [K.success ? /* @__PURE__ */ C(p, {
+											size: 16,
+											className: "text-success-500 mt-0.5"
+										}) : /* @__PURE__ */ C(x, {
+											size: 16,
+											className: "text-error-500 mt-0.5"
+										}), /* @__PURE__ */ w("div", {
+											className: "flex-1",
+											children: [
+												/* @__PURE__ */ C("p", {
+													className: `text-sm font-medium ${K.success ? "text-success-700" : "text-error-700"}`,
+													children: K.success ? A("channel.messageSentSuccess", "Message sent successfully!") : A("channel.messageSendFailed", "Failed to send message")
+												}),
+												K.messageId && /* @__PURE__ */ w("p", {
+													className: "text-xs text-success-600 mt-1",
+													children: ["Message ID: ", K.messageId]
+												}),
+												K.externalId && /* @__PURE__ */ w("p", {
+													className: "text-xs text-muted-foreground mt-1",
+													children: ["External ID: ", K.externalId]
+												}),
+												K.status && /* @__PURE__ */ w("p", {
+													className: "text-xs text-muted-foreground mt-1",
+													children: ["Status: ", K.status]
+												}),
+												K.error && /* @__PURE__ */ w("p", {
+													className: "text-xs text-error-600 mt-1",
+													children: [K.error.message, K.error.retryable && /* @__PURE__ */ C("span", {
+														className: "text-warning-600 ml-1",
+														children: "(will retry)"
+													})]
+												}),
+												K.sentAt && /* @__PURE__ */ w("p", {
+													className: "text-xs text-muted-foreground mt-1",
+													children: ["Sent at: ", new Date(K.sentAt).toLocaleString()]
+												})
+											]
+										})]
+									})
+								}),
+								/* @__PURE__ */ w("div", {
+									className: "flex items-center gap-2 pt-2",
+									children: [/* @__PURE__ */ C(r, {
+										permission: i.CHANNEL_DELIVERY_SEND,
+										children: /* @__PURE__ */ w("button", {
+											onClick: Ve,
+											disabled: M === "send-test" || !H.trim(),
+											className: "flex-1 flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+											children: [M === "send-test" ? /* @__PURE__ */ C(h, {
+												size: 16,
+												className: "animate-spin"
+											}) : /* @__PURE__ */ C(y, { size: 16 }), A("channel.sendTest", "Send Test")]
+										})
+									}), /* @__PURE__ */ C("button", {
+										onClick: () => V(!1),
+										className: "px-4 py-2 text-sm text-muted-foreground hover:bg-muted rounded-lg transition-colors",
+										children: A("channel.close", "Close")
+									})]
+								})
+							]
+						})]
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { O as ChannelDetailsPage };
+
+//# sourceMappingURL=ChannelDetailsPage.js.map