@burdenoff/microfe-bigconsole 2026.805.2 → 2026.805.3

package/dist/bigconsole/components/widgets/webhook-config/WebhookConfigPanel.js

@@ -1,8 +1,9 @@
 import e from "../../../hooks/useEventWebhooks.js";
 import { memo as t, useCallback as n, useState as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useI18n as i } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/webhook-config/WebhookConfigPanel.tsx
-var s = {
+var c = {
 	container: {
 		padding: "16px",
 		backgroundColor: "var(--color-bg-surface)",
@@ -202,299 +203,305 @@ var s = {
 		color: "var(--color-text-placeholder)",
 		marginTop: "4px"
 	}
-}, c = t(function({ webhook: e, dashboardId: t, widgetId: n, onSave: i, onCancel: c, loading: l }) {
-	let [u, d] = r(e?.eventPattern || "widget:*:clicked"), [f, p] = r(e?.webhookUrl || ""), [m, h] = r(e?.method || "POST"), [g, _] = r(e?.headers ? JSON.stringify(e.headers, null, 2) : "");
-	return /* @__PURE__ */ o("form", {
-		style: s.form,
+}, l = t(function({ webhook: e, dashboardId: t, widgetId: n, onSave: a, onCancel: l, loading: u }) {
+	let { t: d } = i(), [f, p] = r(e?.eventPattern || "widget:*:clicked"), [m, h] = r(e?.webhookUrl || ""), [g, _] = r(e?.method || "POST"), [v, y] = r(e?.headers ? JSON.stringify(e.headers, null, 2) : "");
+	return /* @__PURE__ */ s("form", {
+		style: c.form,
 		onSubmit: async (r) => {
 			r.preventDefault();
-			let a;
-			if (g.trim()) try {
-				a = JSON.parse(g);
+			let i;
+			if (v.trim()) try {
+				i = JSON.parse(v);
 			} catch {
-				alert("Invalid JSON in headers field");
+				alert(d("bigconsole.widget.webhookConfig.invalidJson", "Invalid JSON in headers field"));
 				return;
 			}
-			e ? await i({
+			e ? await a({
 				id: e.id,
-				eventPattern: u,
-				webhookUrl: f,
-				method: m,
-				headers: a || null
-			}) : await i({
+				eventPattern: f,
+				webhookUrl: m,
+				method: g,
+				headers: i || null
+			}) : await a({
 				dashboardId: t,
 				widgetId: n,
-				eventPattern: u,
-				webhookUrl: f,
-				method: m,
-				headers: a
+				eventPattern: f,
+				webhookUrl: m,
+				method: g,
+				headers: i
 			});
 		},
 		children: [
-			/* @__PURE__ */ o("div", {
-				style: s.formGroup,
+			/* @__PURE__ */ s("div", {
+				style: c.formGroup,
 				children: [
-					/* @__PURE__ */ a("label", {
-						style: s.label,
-						children: "Event Pattern *"
+					/* @__PURE__ */ o("label", {
+						style: c.label,
+						children: d("bigconsole.widget.webhookConfig.eventPatternLabel", "Event Pattern *")
 					}),
-					/* @__PURE__ */ a("input", {
+					/* @__PURE__ */ o("input", {
 						type: "text",
-						value: u,
-						onChange: (e) => d(e.target.value),
+						value: f,
+						onChange: (e) => p(e.target.value),
 						placeholder: "widget:*:clicked",
-						style: s.input,
+						style: c.input,
 						required: !0
 					}),
-					/* @__PURE__ */ a("p", {
-						style: s.helpText,
-						children: "Use * as wildcard. Examples: widget:*:clicked, *:submit, button:save:*"
+					/* @__PURE__ */ o("p", {
+						style: c.helpText,
+						children: d("bigconsole.widget.webhookConfig.eventPatternHelp", "Use * as wildcard. Examples: widget:*:clicked, *:submit, button:save:*")
 					})
 				]
 			}),
-			/* @__PURE__ */ o("div", {
-				style: s.formGroup,
-				children: [/* @__PURE__ */ a("label", {
-					style: s.label,
-					children: "Webhook URL *"
-				}), /* @__PURE__ */ a("input", {
+			/* @__PURE__ */ s("div", {
+				style: c.formGroup,
+				children: [/* @__PURE__ */ o("label", {
+					style: c.label,
+					children: d("bigconsole.widget.webhookConfig.webhookUrlLabel", "Webhook URL *")
+				}), /* @__PURE__ */ o("input", {
 					type: "url",
-					value: f,
-					onChange: (e) => p(e.target.value),
+					value: m,
+					onChange: (e) => h(e.target.value),
 					placeholder: "https://your-api.com/webhooks/bigconsole",
-					style: s.input,
+					style: c.input,
 					required: !0
 				})]
 			}),
-			/* @__PURE__ */ o("div", {
-				style: s.formGroup,
-				children: [/* @__PURE__ */ a("label", {
-					style: s.label,
-					children: "HTTP Method"
-				}), /* @__PURE__ */ o("select", {
-					value: m,
-					onChange: (e) => h(e.target.value),
-					style: s.select,
+			/* @__PURE__ */ s("div", {
+				style: c.formGroup,
+				children: [/* @__PURE__ */ o("label", {
+					style: c.label,
+					children: d("bigconsole.widget.webhookConfig.httpMethodLabel", "HTTP Method")
+				}), /* @__PURE__ */ s("select", {
+					value: g,
+					onChange: (e) => _(e.target.value),
+					style: c.select,
 					children: [
-						/* @__PURE__ */ a("option", {
+						/* @__PURE__ */ o("option", {
 							value: "POST",
 							children: "POST"
 						}),
-						/* @__PURE__ */ a("option", {
+						/* @__PURE__ */ o("option", {
 							value: "PUT",
 							children: "PUT"
 						}),
-						/* @__PURE__ */ a("option", {
+						/* @__PURE__ */ o("option", {
 							value: "PATCH",
 							children: "PATCH"
 						}),
-						/* @__PURE__ */ a("option", {
+						/* @__PURE__ */ o("option", {
 							value: "GET",
 							children: "GET"
 						}),
-						/* @__PURE__ */ a("option", {
+						/* @__PURE__ */ o("option", {
 							value: "DELETE",
 							children: "DELETE"
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ o("div", {
-				style: s.formGroup,
-				children: [/* @__PURE__ */ a("label", {
-					style: s.label,
-					children: "Custom Headers (JSON)"
-				}), /* @__PURE__ */ a("textarea", {
-					value: g,
-					onChange: (e) => _(e.target.value),
+			/* @__PURE__ */ s("div", {
+				style: c.formGroup,
+				children: [/* @__PURE__ */ o("label", {
+					style: c.label,
+					children: d("bigconsole.widget.webhookConfig.customHeadersLabel", "Custom Headers (JSON)")
+				}), /* @__PURE__ */ o("textarea", {
+					value: v,
+					onChange: (e) => y(e.target.value),
 					placeholder: "{\n  \"Authorization\": \"Bearer your-token\"\n}",
-					style: s.textarea
+					style: c.textarea
 				})]
 			}),
-			/* @__PURE__ */ o("div", {
-				style: s.formActions,
-				children: [/* @__PURE__ */ a("button", {
+			/* @__PURE__ */ s("div", {
+				style: c.formActions,
+				children: [/* @__PURE__ */ o("button", {
 					type: "button",
-					onClick: c,
-					style: s.cancelButton,
-					children: "Cancel"
-				}), /* @__PURE__ */ a("button", {
+					onClick: l,
+					style: c.cancelButton,
+					children: d("bigconsole.widget.webhookConfig.cancel", "Cancel")
+				}), /* @__PURE__ */ o("button", {
 					type: "submit",
-					disabled: l,
-					style: s.saveButton,
-					children: l ? "Saving..." : e ? "Update Webhook" : "Create Webhook"
+					disabled: u,
+					style: c.saveButton,
+					children: u ? d("bigconsole.widget.webhookConfig.saving", "Saving...") : e ? d("bigconsole.widget.webhookConfig.updateWebhook", "Update Webhook") : d("bigconsole.widget.webhookConfig.createWebhook", "Create Webhook")
 				})]
 			})
 		]
 	});
-}), l = t(function({ webhook: e, onEdit: t, onDelete: n, onToggle: r, onTest: c, testResult: l, testing: u }) {
-	return /* @__PURE__ */ o("div", {
-		style: s.webhookCard,
+}), u = t(function({ webhook: e, onEdit: t, onDelete: n, onToggle: r, onTest: l, testResult: u, testing: d }) {
+	let { t: f } = i();
+	return /* @__PURE__ */ s("div", {
+		style: c.webhookCard,
 		children: [
-			/* @__PURE__ */ a("div", {
-				style: s.webhookHeader,
-				children: /* @__PURE__ */ o("div", {
-					style: s.webhookTitle,
+			/* @__PURE__ */ o("div", {
+				style: c.webhookHeader,
+				children: /* @__PURE__ */ s("div", {
+					style: c.webhookTitle,
 					children: [
-						/* @__PURE__ */ a("span", {
+						/* @__PURE__ */ o("span", {
 							style: { fontSize: "16px" },
 							children: "📡"
 						}),
-						/* @__PURE__ */ a("span", {
-							style: s.webhookName,
+						/* @__PURE__ */ o("span", {
+							style: c.webhookName,
 							children: e.eventPattern
 						}),
-						/* @__PURE__ */ a("span", {
+						/* @__PURE__ */ o("span", {
 							style: {
-								...s.statusBadge,
-								...e.isActive ? s.activeBadge : s.inactiveBadge
+								...c.statusBadge,
+								...e.isActive ? c.activeBadge : c.inactiveBadge
 							},
-							children: e.isActive ? "Active" : "Inactive"
+							children: e.isActive ? f("bigconsole.widget.webhookConfig.active", "Active") : f("bigconsole.widget.webhookConfig.inactive", "Inactive")
 						})
 					]
 				})
 			}),
-			/* @__PURE__ */ o("div", {
-				style: s.webhookDetails,
-				children: ["Method: ", /* @__PURE__ */ a("strong", { children: e.method })]
+			/* @__PURE__ */ s("div", {
+				style: c.webhookDetails,
+				children: [
+					f("bigconsole.widget.webhookConfig.methodLabel", "Method:"),
+					" ",
+					/* @__PURE__ */ o("strong", { children: e.method })
+				]
 			}),
-			/* @__PURE__ */ a("div", {
-				style: s.webhookUrl,
+			/* @__PURE__ */ o("div", {
+				style: c.webhookUrl,
 				children: e.webhookUrl
 			}),
-			l && /* @__PURE__ */ a("div", {
+			u && /* @__PURE__ */ o("div", {
 				style: {
-					...s.testResult,
-					...l.success ? s.testSuccess : s.testFailure
+					...c.testResult,
+					...u.success ? c.testSuccess : c.testFailure
 				},
-				children: l.success ? /* @__PURE__ */ o(i, { children: [
-					"✅ Test successful! Status: ",
-					l.statusCode,
-					", Latency: ",
-					l.latencyMs,
-					"ms"
-				] }) : /* @__PURE__ */ o(i, { children: ["❌ Test failed: ", l.errorMessage || "Unknown error"] })
+				children: u.success ? /* @__PURE__ */ o(a, { children: f("bigconsole.widget.webhookConfig.testSuccess", "✅ Test successful! Status: {{statusCode}}, Latency: {{latencyMs}}ms", {
+					statusCode: u.statusCode ?? "",
+					latencyMs: u.latencyMs ?? ""
+				}) }) : /* @__PURE__ */ o(a, { children: f("bigconsole.widget.webhookConfig.testFailure", "❌ Test failed: {{error}}", { error: u.errorMessage || f("bigconsole.widget.webhookConfig.unknownError", "Unknown error") }) })
 			}),
-			/* @__PURE__ */ o("div", {
-				style: s.webhookActions,
+			/* @__PURE__ */ s("div", {
+				style: c.webhookActions,
 				children: [
-					/* @__PURE__ */ a("button", {
+					/* @__PURE__ */ o("button", {
 						onClick: t,
 						style: {
-							...s.actionButton,
-							...s.editButton
+							...c.actionButton,
+							...c.editButton
 						},
-						children: "Edit"
+						children: f("bigconsole.widget.webhookConfig.edit", "Edit")
 					}),
-					/* @__PURE__ */ a("button", {
-						onClick: c,
-						disabled: u,
+					/* @__PURE__ */ o("button", {
+						onClick: l,
+						disabled: d,
 						style: {
-							...s.actionButton,
-							...s.testButton
+							...c.actionButton,
+							...c.testButton
 						},
-						children: u ? "Testing..." : "Test"
+						children: d ? f("bigconsole.widget.webhookConfig.testing", "Testing...") : f("bigconsole.widget.webhookConfig.test", "Test")
 					}),
-					/* @__PURE__ */ a("button", {
+					/* @__PURE__ */ o("button", {
 						onClick: r,
 						style: {
-							...s.actionButton,
-							...s.toggleButton
+							...c.actionButton,
+							...c.toggleButton
 						},
-						children: e.isActive ? "Disable" : "Enable"
+						children: e.isActive ? f("bigconsole.widget.webhookConfig.disable", "Disable") : f("bigconsole.widget.webhookConfig.enable", "Enable")
 					}),
-					/* @__PURE__ */ a("button", {
+					/* @__PURE__ */ o("button", {
 						onClick: n,
 						style: {
-							...s.actionButton,
-							...s.deleteButton
+							...c.actionButton,
+							...c.deleteButton
 						},
-						children: "Delete"
+						children: f("bigconsole.widget.webhookConfig.delete", "Delete")
 					})
 				]
 			})
 		]
 	});
-}), u = t(function({ dashboardId: t, widgetId: i, onWebhookCreated: u, onWebhookDeleted: d }) {
-	let [f, p] = r(!1), [m, h] = r(null), [g, _] = r({}), [v, y] = r(null), { webhooks: b, loading: x, createWebhook: S, updateWebhook: C, deleteWebhook: w, toggleWebhook: T, testWebhook: E } = e({
+}), d = t(function({ dashboardId: t, widgetId: a, onWebhookCreated: d, onWebhookDeleted: f }) {
+	let { t: p } = i(), [m, h] = r(!1), [g, _] = r(null), [v, y] = r({}), [b, x] = r(null), { webhooks: S, loading: C, createWebhook: w, updateWebhook: T, deleteWebhook: E, toggleWebhook: D, testWebhook: O } = e({
 		dashboardId: t,
-		widgetId: i
-	}), D = n(async (e) => {
-		if ("id" in e) await C(e) && (h(null), p(!1));
+		widgetId: a
+	}), k = n(async (e) => {
+		if ("id" in e) await T(e) && (_(null), h(!1));
 		else {
-			let t = await S(e);
-			t && (p(!1), u?.(t));
+			let t = await w(e);
+			t && (h(!1), d?.(t));
 		}
 	}, [
-		S,
-		C,
-		u
-	]), O = n(async (e) => {
-		confirm("Are you sure you want to delete this webhook?") && await w(e) && d?.(e);
-	}, [w, d]), k = n(async (e) => {
-		await T(e.id, !e.isActive);
-	}, [T]), A = n(async (e) => {
-		y(e);
-		let t = await E(e);
-		_((n) => ({
+		w,
+		T,
+		d
+	]), A = n(async (e) => {
+		confirm(p("bigconsole.widget.webhookConfig.deleteConfirm", "Are you sure you want to delete this webhook?")) && await E(e) && f?.(e);
+	}, [
+		E,
+		f,
+		p
+	]), j = n(async (e) => {
+		await D(e.id, !e.isActive);
+	}, [D]), M = n(async (e) => {
+		x(e);
+		let t = await O(e);
+		y((n) => ({
 			...n,
 			[e]: t
-		})), y(null);
-	}, [E]), j = n((e) => {
-		h(e), p(!0);
-	}, []), M = n(() => {
-		p(!1), h(null);
+		})), x(null);
+	}, [O]), N = n((e) => {
+		_(e), h(!0);
+	}, []), P = n(() => {
+		h(!1), _(null);
 	}, []);
-	return /* @__PURE__ */ o("div", {
-		style: s.container,
+	return /* @__PURE__ */ s("div", {
+		style: c.container,
 		children: [
-			/* @__PURE__ */ o("div", {
-				style: s.header,
-				children: [/* @__PURE__ */ a("h3", {
-					style: s.title,
-					children: "Webhook Configuration"
-				}), !f && /* @__PURE__ */ a("button", {
-					onClick: () => p(!0),
-					style: s.addButton,
-					children: "+ Add Webhook"
+			/* @__PURE__ */ s("div", {
+				style: c.header,
+				children: [/* @__PURE__ */ o("h3", {
+					style: c.title,
+					children: p("bigconsole.widget.webhookConfig.title", "Webhook Configuration")
+				}), !m && /* @__PURE__ */ o("button", {
+					onClick: () => h(!0),
+					style: c.addButton,
+					children: p("bigconsole.widget.webhookConfig.addWebhook", "+ Add Webhook")
 				})]
 			}),
-			f && /* @__PURE__ */ a(c, {
-				webhook: m || void 0,
+			m && /* @__PURE__ */ o(l, {
+				webhook: g || void 0,
 				dashboardId: t,
-				widgetId: i,
-				onSave: D,
-				onCancel: M,
-				loading: x
+				widgetId: a,
+				onSave: k,
+				onCancel: P,
+				loading: C
 			}),
-			x && b.length === 0 ? /* @__PURE__ */ a("div", {
-				style: s.emptyState,
-				children: "Loading..."
-			}) : b.length === 0 ? /* @__PURE__ */ o("div", {
-				style: s.emptyState,
-				children: [/* @__PURE__ */ a("p", { children: "No webhooks configured" }), /* @__PURE__ */ a("p", {
+			C && S.length === 0 ? /* @__PURE__ */ o("div", {
+				style: c.emptyState,
+				children: p("bigconsole.widget.webhookConfig.loading", "Loading...")
+			}) : S.length === 0 ? /* @__PURE__ */ s("div", {
+				style: c.emptyState,
+				children: [/* @__PURE__ */ o("p", { children: p("bigconsole.widget.webhookConfig.noWebhooks", "No webhooks configured") }), /* @__PURE__ */ o("p", {
 					style: {
 						fontSize: "13px",
 						marginTop: "8px"
 					},
-					children: "Add a webhook to receive events when actions are triggered."
+					children: p("bigconsole.widget.webhookConfig.noWebhooksHelp", "Add a webhook to receive events when actions are triggered.")
 				})]
-			}) : /* @__PURE__ */ a("div", {
-				style: s.webhookList,
-				children: b.map((e) => /* @__PURE__ */ a(l, {
+			}) : /* @__PURE__ */ o("div", {
+				style: c.webhookList,
+				children: S.map((e) => /* @__PURE__ */ o(u, {
 					webhook: e,
-					onEdit: () => j(e),
-					onDelete: () => O(e.id),
-					onToggle: () => k(e),
-					onTest: () => A(e.id),
-					testResult: g[e.id],
-					testing: v === e.id
+					onEdit: () => N(e),
+					onDelete: () => A(e.id),
+					onToggle: () => j(e),
+					onTest: () => M(e.id),
+					testResult: v[e.id],
+					testing: b === e.id
 				}, e.id))
 			})
 		]
 	});
 });
 //#endregion
-export { u as default };
+export { d as default };
 
 //# sourceMappingURL=WebhookConfigPanel.js.map

package/dist/bigconsole/components/widgets/webhook-config/WebhookConfigPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"WebhookConfigPanel.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/webhook-config/WebhookConfigPanel.tsx"],"sourcesContent":["/**\n * WebhookConfigPanel Component (v2.0)\n *\n * Panel for managing event webhook mappings.\n * Allows creating, editing, testing, and deleting webhooks.\n */\n\nimport React, { memo, useState, useCallback } from 'react';\nimport {\n  useEventWebhooks,\n  type HttpMethod,\n  type EventWebhookMapping,\n  type CreateEventWebhookMappingInput,\n  type UpdateEventWebhookMappingInput,\n  type WebhookTestResult,\n} from '../../../hooks/useEventWebhooks';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WebhookConfigPanelProps {\n  /** Dashboard ID for webhook scope */\n  dashboardId?: string;\n  /** Widget ID for webhook scope */\n  widgetId?: string;\n  /** Callback when webhook is created */\n  onWebhookCreated?: (webhook: EventWebhookMapping) => void;\n  /** Callback when webhook is deleted */\n  onWebhookDeleted?: (id: string) => void;\n}\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst styles = {\n  container: {\n    padding: '16px',\n    backgroundColor: 'var(--color-bg-surface)',\n    borderRadius: '8px',\n  } as React.CSSProperties,\n  header: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    marginBottom: '16px',\n  } as React.CSSProperties,\n  title: {\n    fontSize: '16px',\n    fontWeight: 600,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  addButton: {\n    padding: '8px 16px',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-text-inverse)',\n    border: 'none',\n    borderRadius: '6px',\n    fontSize: '14px',\n    fontWeight: 500,\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  webhookList: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n  } as React.CSSProperties,\n  webhookCard: {\n    padding: '16px',\n    backgroundColor: 'var(--color-bg-subtle)',\n    borderRadius: '8px',\n    border: '1px solid var(--color-border-subtle)',\n  } as React.CSSProperties,\n  webhookHeader: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'flex-start',\n    marginBottom: '8px',\n  } as React.CSSProperties,\n  webhookTitle: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  } as React.CSSProperties,\n  webhookName: {\n    fontSize: '14px',\n    fontWeight: 600,\n    color: 'var(--color-text-primary)',\n  } as React.CSSProperties,\n  statusBadge: {\n    padding: '2px 8px',\n    borderRadius: '12px',\n    fontSize: '12px',\n    fontWeight: 500,\n  } as React.CSSProperties,\n  activeBadge: {\n    backgroundColor: 'var(--color-status-success-bgSubtle)',\n    color: 'var(--color-status-success-text)',\n  } as React.CSSProperties,\n  inactiveBadge: {\n    backgroundColor: 'var(--color-status-warning-bgSubtle)',\n    color: 'var(--color-status-warning-text)',\n  } as React.CSSProperties,\n  webhookDetails: {\n    fontSize: '13px',\n    color: 'var(--color-text-muted)',\n    marginBottom: '4px',\n  } as React.CSSProperties,\n  webhookUrl: {\n    fontSize: '12px',\n    color: 'var(--color-text-placeholder)',\n    fontFamily: 'monospace',\n    wordBreak: 'break-all',\n  } as React.CSSProperties,\n  webhookActions: {\n    display: 'flex',\n    gap: '8px',\n    marginTop: '12px',\n  } as React.CSSProperties,\n  actionButton: {\n    padding: '6px 12px',\n    fontSize: '12px',\n    fontWeight: 500,\n    borderRadius: '4px',\n    border: 'none',\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  editButton: {\n    backgroundColor: 'var(--color-bg-sunken)',\n    color: 'var(--color-text-primary)',\n  } as React.CSSProperties,\n  testButton: {\n    backgroundColor: 'var(--color-status-info-bgSubtle)',\n    color: 'var(--color-status-info-text)',\n  } as React.CSSProperties,\n  deleteButton: {\n    backgroundColor: 'var(--color-status-error-bgSubtle)',\n    color: 'var(--color-status-error-text)',\n  } as React.CSSProperties,\n  toggleButton: {\n    backgroundColor: 'var(--color-bg-sunken)',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  emptyState: {\n    textAlign: 'center',\n    padding: '32px',\n    color: 'var(--color-text-placeholder)',\n  } as React.CSSProperties,\n  form: {\n    padding: '16px',\n    backgroundColor: 'var(--color-bg-subtle)',\n    borderRadius: '8px',\n    marginBottom: '16px',\n  } as React.CSSProperties,\n  formGroup: {\n    marginBottom: '12px',\n  } as React.CSSProperties,\n  label: {\n    display: 'block',\n    fontSize: '13px',\n    fontWeight: 500,\n    color: 'var(--color-text-primary)',\n    marginBottom: '4px',\n  } as React.CSSProperties,\n  input: {\n    width: '100%',\n    padding: '8px 12px',\n    fontSize: '14px',\n    border: '1px solid var(--color-border-default)',\n    borderRadius: '6px',\n    boxSizing: 'border-box',\n  } as React.CSSProperties,\n  select: {\n    width: '100%',\n    padding: '8px 12px',\n    fontSize: '14px',\n    border: '1px solid var(--color-border-default)',\n    borderRadius: '6px',\n    boxSizing: 'border-box',\n    backgroundColor: 'var(--color-bg-surface)',\n  } as React.CSSProperties,\n  textarea: {\n    width: '100%',\n    padding: '8px 12px',\n    fontSize: '14px',\n    border: '1px solid var(--color-border-default)',\n    borderRadius: '6px',\n    boxSizing: 'border-box',\n    fontFamily: 'monospace',\n    minHeight: '80px',\n    resize: 'vertical',\n  } as React.CSSProperties,\n  formActions: {\n    display: 'flex',\n    gap: '8px',\n    justifyContent: 'flex-end',\n    marginTop: '16px',\n  } as React.CSSProperties,\n  cancelButton: {\n    padding: '8px 16px',\n    backgroundColor: 'var(--color-bg-sunken)',\n    color: 'var(--color-text-primary)',\n    border: 'none',\n    borderRadius: '6px',\n    fontSize: '14px',\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  saveButton: {\n    padding: '8px 16px',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-text-inverse)',\n    border: 'none',\n    borderRadius: '6px',\n    fontSize: '14px',\n    fontWeight: 500,\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  testResult: {\n    marginTop: '12px',\n    padding: '12px',\n    borderRadius: '6px',\n    fontSize: '13px',\n  } as React.CSSProperties,\n  testSuccess: {\n    backgroundColor: 'var(--color-status-success-bgSubtle)',\n    color: 'var(--color-status-success-text)',\n  } as React.CSSProperties,\n  testFailure: {\n    backgroundColor: 'var(--color-status-error-bgSubtle)',\n    color: 'var(--color-status-error-text)',\n  } as React.CSSProperties,\n  helpText: {\n    fontSize: '12px',\n    color: 'var(--color-text-placeholder)',\n    marginTop: '4px',\n  } as React.CSSProperties,\n};\n\n// ============================================================================\n// Webhook Form Component\n// ============================================================================\n\ninterface WebhookFormProps {\n  webhook?: EventWebhookMapping;\n  dashboardId?: string;\n  widgetId?: string;\n  onSave: (data: CreateEventWebhookMappingInput | UpdateEventWebhookMappingInput) => Promise<void>;\n  onCancel: () => void;\n  loading?: boolean;\n}\n\nconst WebhookForm: React.FC<WebhookFormProps> = memo(function WebhookForm({\n  webhook,\n  dashboardId,\n  widgetId,\n  onSave,\n  onCancel,\n  loading,\n}) {\n  const [eventPattern, setEventPattern] = useState(webhook?.eventPattern || 'widget:*:clicked');\n  const [webhookUrl, setWebhookUrl] = useState(webhook?.webhookUrl || '');\n  const [method, setMethod] = useState(webhook?.method || 'POST');\n  const [headers, setHeaders] = useState(webhook?.headers ? JSON.stringify(webhook.headers, null, 2) : '');\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    let parsedHeaders: Record<string, string> | undefined;\n    if (headers.trim()) {\n      try {\n        parsedHeaders = JSON.parse(headers);\n      } catch {\n        alert('Invalid JSON in headers field');\n        return;\n      }\n    }\n\n    if (webhook) {\n      // Update\n      await onSave({\n        id: webhook.id,\n        eventPattern,\n        webhookUrl,\n        method: method as 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',\n        headers: parsedHeaders || null,\n      });\n    } else {\n      // Create\n      await onSave({\n        dashboardId,\n        widgetId,\n        eventPattern,\n        webhookUrl,\n        method: method as 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',\n        headers: parsedHeaders,\n      });\n    }\n  };\n\n  return (\n    <form style={styles.form} onSubmit={handleSubmit}>\n      <div style={styles.formGroup}>\n        <label style={styles.label}>Event Pattern *</label>\n        <input\n          type=\"text\"\n          value={eventPattern}\n          onChange={(e) => setEventPattern(e.target.value)}\n          placeholder=\"widget:*:clicked\"\n          style={styles.input}\n          required\n        />\n        <p style={styles.helpText}>Use * as wildcard. Examples: widget:*:clicked, *:submit, button:save:*</p>\n      </div>\n\n      <div style={styles.formGroup}>\n        <label style={styles.label}>Webhook URL *</label>\n        <input\n          type=\"url\"\n          value={webhookUrl}\n          onChange={(e) => setWebhookUrl(e.target.value)}\n          placeholder=\"https://your-api.com/webhooks/bigconsole\"\n          style={styles.input}\n          required\n        />\n      </div>\n\n      <div style={styles.formGroup}>\n        <label style={styles.label}>HTTP Method</label>\n        <select value={method} onChange={(e) => setMethod(e.target.value as HttpMethod)} style={styles.select}>\n          <option value=\"POST\">POST</option>\n          <option value=\"PUT\">PUT</option>\n          <option value=\"PATCH\">PATCH</option>\n          <option value=\"GET\">GET</option>\n          <option value=\"DELETE\">DELETE</option>\n        </select>\n      </div>\n\n      <div style={styles.formGroup}>\n        <label style={styles.label}>Custom Headers (JSON)</label>\n        <textarea\n          value={headers}\n          onChange={(e) => setHeaders(e.target.value)}\n          placeholder={'{\\n  \"Authorization\": \"Bearer your-token\"\\n}'}\n          style={styles.textarea as React.CSSProperties}\n        />\n      </div>\n\n      <div style={styles.formActions}>\n        <button type=\"button\" onClick={onCancel} style={styles.cancelButton}>\n          Cancel\n        </button>\n        <button type=\"submit\" disabled={loading} style={styles.saveButton}>\n          {loading ? 'Saving...' : webhook ? 'Update Webhook' : 'Create Webhook'}\n        </button>\n      </div>\n    </form>\n  );\n});\n\n// ============================================================================\n// Webhook Card Component\n// ============================================================================\n\ninterface WebhookCardProps {\n  webhook: EventWebhookMapping;\n  onEdit: () => void;\n  onDelete: () => void;\n  onToggle: () => void;\n  onTest: () => void;\n  testResult?: WebhookTestResult | null;\n  testing?: boolean;\n}\n\nconst WebhookCard: React.FC<WebhookCardProps> = memo(function WebhookCard({\n  webhook,\n  onEdit,\n  onDelete,\n  onToggle,\n  onTest,\n  testResult,\n  testing,\n}) {\n  return (\n    <div style={styles.webhookCard}>\n      <div style={styles.webhookHeader}>\n        <div style={styles.webhookTitle}>\n          <span style={{ fontSize: '16px' }}>📡</span>\n          <span style={styles.webhookName}>{webhook.eventPattern}</span>\n          <span\n            style={{\n              ...styles.statusBadge,\n              ...(webhook.isActive ? styles.activeBadge : styles.inactiveBadge),\n            }}\n          >\n            {webhook.isActive ? 'Active' : 'Inactive'}\n          </span>\n        </div>\n      </div>\n\n      <div style={styles.webhookDetails}>\n        Method: <strong>{webhook.method}</strong>\n      </div>\n      <div style={styles.webhookUrl}>{webhook.webhookUrl}</div>\n\n      {testResult && (\n        <div\n          style={{\n            ...styles.testResult,\n            ...(testResult.success ? styles.testSuccess : styles.testFailure),\n          }}\n        >\n          {testResult.success ? (\n            <>\n              ✅ Test successful! Status: {testResult.statusCode}, Latency: {testResult.latencyMs}ms\n            </>\n          ) : (\n            <>❌ Test failed: {testResult.errorMessage || 'Unknown error'}</>\n          )}\n        </div>\n      )}\n\n      <div style={styles.webhookActions}>\n        <button onClick={onEdit} style={{ ...styles.actionButton, ...styles.editButton }}>\n          Edit\n        </button>\n        <button onClick={onTest} disabled={testing} style={{ ...styles.actionButton, ...styles.testButton }}>\n          {testing ? 'Testing...' : 'Test'}\n        </button>\n        <button onClick={onToggle} style={{ ...styles.actionButton, ...styles.toggleButton }}>\n          {webhook.isActive ? 'Disable' : 'Enable'}\n        </button>\n        <button onClick={onDelete} style={{ ...styles.actionButton, ...styles.deleteButton }}>\n          Delete\n        </button>\n      </div>\n    </div>\n  );\n});\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport const WebhookConfigPanel: React.FC<WebhookConfigPanelProps> = memo(function WebhookConfigPanel({\n  dashboardId,\n  widgetId,\n  onWebhookCreated,\n  onWebhookDeleted,\n}) {\n  const [showForm, setShowForm] = useState(false);\n  const [editingWebhook, setEditingWebhook] = useState<EventWebhookMapping | null>(null);\n  const [testResults, setTestResults] = useState<Record<string, WebhookTestResult | null>>({});\n  const [testingId, setTestingId] = useState<string | null>(null);\n\n  const { webhooks, loading, createWebhook, updateWebhook, deleteWebhook, toggleWebhook, testWebhook } =\n    useEventWebhooks({ dashboardId, widgetId });\n\n  const handleSave = useCallback(\n    async (data: CreateEventWebhookMappingInput | UpdateEventWebhookMappingInput) => {\n      if ('id' in data) {\n        const result = await updateWebhook(data);\n        if (result) {\n          setEditingWebhook(null);\n          setShowForm(false);\n        }\n      } else {\n        const result = await createWebhook(data);\n        if (result) {\n          setShowForm(false);\n          onWebhookCreated?.(result);\n        }\n      }\n    },\n    [createWebhook, updateWebhook, onWebhookCreated]\n  );\n\n  const handleDelete = useCallback(\n    async (id: string) => {\n      if (confirm('Are you sure you want to delete this webhook?')) {\n        const success = await deleteWebhook(id);\n        if (success) {\n          onWebhookDeleted?.(id);\n        }\n      }\n    },\n    [deleteWebhook, onWebhookDeleted]\n  );\n\n  const handleToggle = useCallback(\n    async (webhook: EventWebhookMapping) => {\n      await toggleWebhook(webhook.id, !webhook.isActive);\n    },\n    [toggleWebhook]\n  );\n\n  const handleTest = useCallback(\n    async (id: string) => {\n      setTestingId(id);\n      const result = await testWebhook(id);\n      setTestResults((prev) => ({ ...prev, [id]: result }));\n      setTestingId(null);\n    },\n    [testWebhook]\n  );\n\n  const handleEdit = useCallback((webhook: EventWebhookMapping) => {\n    setEditingWebhook(webhook);\n    setShowForm(true);\n  }, []);\n\n  const handleCancel = useCallback(() => {\n    setShowForm(false);\n    setEditingWebhook(null);\n  }, []);\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.header}>\n        <h3 style={styles.title}>Webhook Configuration</h3>\n        {!showForm && (\n          <button onClick={() => setShowForm(true)} style={styles.addButton}>\n            + Add Webhook\n          </button>\n        )}\n      </div>\n\n      {showForm && (\n        <WebhookForm\n          webhook={editingWebhook || undefined}\n          dashboardId={dashboardId}\n          widgetId={widgetId}\n          onSave={handleSave}\n          onCancel={handleCancel}\n          loading={loading}\n        />\n      )}\n\n      {loading && webhooks.length === 0 ? (\n        <div style={styles.emptyState}>Loading...</div>\n      ) : webhooks.length === 0 ? (\n        <div style={styles.emptyState}>\n          <p>No webhooks configured</p>\n          <p style={{ fontSize: '13px', marginTop: '8px' }}>\n            Add a webhook to receive events when actions are triggered.\n          </p>\n        </div>\n      ) : (\n        <div style={styles.webhookList as React.CSSProperties}>\n          {webhooks.map((webhook) => (\n            <WebhookCard\n              key={webhook.id}\n              webhook={webhook}\n              onEdit={() => handleEdit(webhook)}\n              onDelete={() => handleDelete(webhook.id)}\n              onToggle={() => handleToggle(webhook)}\n              onTest={() => handleTest(webhook.id)}\n              testResult={testResults[webhook.id]}\n              testing={testingId === webhook.id}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default WebhookConfigPanel;\n"],"mappings":";;;;AAoCA,IAAM,IAAS;CACb,WAAW;EACT,SAAS;EACT,iBAAiB;EACjB,cAAc;EACf;CACD,QAAQ;EACN,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,cAAc;EACf;CACD,OAAO;EACL,UAAU;EACV,YAAY;EACZ,OAAO;EACP,QAAQ;EACT;CACD,WAAW;EACT,SAAS;EACT,iBAAiB;EACjB,OAAO;EACP,QAAQ;EACR,cAAc;EACd,UAAU;EACV,YAAY;EACZ,QAAQ;EACT;CACD,aAAa;EACX,SAAS;EACT,eAAe;EACf,KAAK;EACN;CACD,aAAa;EACX,SAAS;EACT,iBAAiB;EACjB,cAAc;EACd,QAAQ;EACT;CACD,eAAe;EACb,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,cAAc;EACf;CACD,cAAc;EACZ,SAAS;EACT,YAAY;EACZ,KAAK;EACN;CACD,aAAa;EACX,UAAU;EACV,YAAY;EACZ,OAAO;EACR;CACD,aAAa;EACX,SAAS;EACT,cAAc;EACd,UAAU;EACV,YAAY;EACb;CACD,aAAa;EACX,iBAAiB;EACjB,OAAO;EACR;CACD,eAAe;EACb,iBAAiB;EACjB,OAAO;EACR;CACD,gBAAgB;EACd,UAAU;EACV,OAAO;EACP,cAAc;EACf;CACD,YAAY;EACV,UAAU;EACV,OAAO;EACP,YAAY;EACZ,WAAW;EACZ;CACD,gBAAgB;EACd,SAAS;EACT,KAAK;EACL,WAAW;EACZ;CACD,cAAc;EACZ,SAAS;EACT,UAAU;EACV,YAAY;EACZ,cAAc;EACd,QAAQ;EACR,QAAQ;EACT;CACD,YAAY;EACV,iBAAiB;EACjB,OAAO;EACR;CACD,YAAY;EACV,iBAAiB;EACjB,OAAO;EACR;CACD,cAAc;EACZ,iBAAiB;EACjB,OAAO;EACR;CACD,cAAc;EACZ,iBAAiB;EACjB,OAAO;EACR;CACD,YAAY;EACV,WAAW;EACX,SAAS;EACT,OAAO;EACR;CACD,MAAM;EACJ,SAAS;EACT,iBAAiB;EACjB,cAAc;EACd,cAAc;EACf;CACD,WAAW,EACT,cAAc,QACf;CACD,OAAO;EACL,SAAS;EACT,UAAU;EACV,YAAY;EACZ,OAAO;EACP,cAAc;EACf;CACD,OAAO;EACL,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,cAAc;EACd,WAAW;EACZ;CACD,QAAQ;EACN,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,cAAc;EACd,WAAW;EACX,iBAAiB;EAClB;CACD,UAAU;EACR,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,cAAc;EACd,WAAW;EACX,YAAY;EACZ,WAAW;EACX,QAAQ;EACT;CACD,aAAa;EACX,SAAS;EACT,KAAK;EACL,gBAAgB;EAChB,WAAW;EACZ;CACD,cAAc;EACZ,SAAS;EACT,iBAAiB;EACjB,OAAO;EACP,QAAQ;EACR,cAAc;EACd,UAAU;EACV,QAAQ;EACT;CACD,YAAY;EACV,SAAS;EACT,iBAAiB;EACjB,OAAO;EACP,QAAQ;EACR,cAAc;EACd,UAAU;EACV,YAAY;EACZ,QAAQ;EACT;CACD,YAAY;EACV,WAAW;EACX,SAAS;EACT,cAAc;EACd,UAAU;EACX;CACD,aAAa;EACX,iBAAiB;EACjB,OAAO;EACR;CACD,aAAa;EACX,iBAAiB;EACjB,OAAO;EACR;CACD,UAAU;EACR,UAAU;EACV,OAAO;EACP,WAAW;EACZ;CACF,EAeK,IAA0C,EAAK,SAAqB,EACxE,YACA,gBACA,aACA,WACA,aACA,cACC;CACD,IAAM,CAAC,GAAc,KAAmB,EAAS,GAAS,gBAAgB,mBAAmB,EACvF,CAAC,GAAY,KAAiB,EAAS,GAAS,cAAc,GAAG,EACjE,CAAC,GAAQ,KAAa,EAAS,GAAS,UAAU,OAAO,EACzD,CAAC,GAAS,KAAc,EAAS,GAAS,UAAU,KAAK,UAAU,EAAQ,SAAS,MAAM,EAAE,GAAG,GAAG;AAqCxG,QACE,kBAAC,QAAD;EAAM,OAAO,EAAO;EAAM,UApCP,OAAO,MAAuB;AACjD,KAAE,gBAAgB;GAElB,IAAI;AACJ,OAAI,EAAQ,MAAM,CAChB,KAAI;AACF,QAAgB,KAAK,MAAM,EAAQ;WAC7B;AACN,UAAM,gCAAgC;AACtC;;AAIJ,GAAI,IAEF,MAAM,EAAO;IACX,IAAI,EAAQ;IACZ;IACA;IACQ;IACR,SAAS,KAAiB;IAC3B,CAAC,GAGF,MAAM,EAAO;IACX;IACA;IACA;IACA;IACQ;IACR,SAAS;IACV,CAAC;;YAKJ;GACE,kBAAC,OAAD;IAAK,OAAO,EAAO;cAAnB;KACE,kBAAC,SAAD;MAAO,OAAO,EAAO;gBAAO;MAAuB,CAAA;KACnD,kBAAC,SAAD;MACE,MAAK;MACL,OAAO;MACP,WAAW,MAAM,EAAgB,EAAE,OAAO,MAAM;MAChD,aAAY;MACZ,OAAO,EAAO;MACd,UAAA;MACA,CAAA;KACF,kBAAC,KAAD;MAAG,OAAO,EAAO;gBAAU;MAA0E,CAAA;KACjG;;GAEN,kBAAC,OAAD;IAAK,OAAO,EAAO;cAAnB,CACE,kBAAC,SAAD;KAAO,OAAO,EAAO;eAAO;KAAqB,CAAA,EACjD,kBAAC,SAAD;KACE,MAAK;KACL,OAAO;KACP,WAAW,MAAM,EAAc,EAAE,OAAO,MAAM;KAC9C,aAAY;KACZ,OAAO,EAAO;KACd,UAAA;KACA,CAAA,CACE;;GAEN,kBAAC,OAAD;IAAK,OAAO,EAAO;cAAnB,CACE,kBAAC,SAAD;KAAO,OAAO,EAAO;eAAO;KAAmB,CAAA,EAC/C,kBAAC,UAAD;KAAQ,OAAO;KAAQ,WAAW,MAAM,EAAU,EAAE,OAAO,MAAoB;KAAE,OAAO,EAAO;eAA/F;MACE,kBAAC,UAAD;OAAQ,OAAM;iBAAO;OAAa,CAAA;MAClC,kBAAC,UAAD;OAAQ,OAAM;iBAAM;OAAY,CAAA;MAChC,kBAAC,UAAD;OAAQ,OAAM;iBAAQ;OAAc,CAAA;MACpC,kBAAC,UAAD;OAAQ,OAAM;iBAAM;OAAY,CAAA;MAChC,kBAAC,UAAD;OAAQ,OAAM;iBAAS;OAAe,CAAA;MAC/B;OACL;;GAEN,kBAAC,OAAD;IAAK,OAAO,EAAO;cAAnB,CACE,kBAAC,SAAD;KAAO,OAAO,EAAO;eAAO;KAA6B,CAAA,EACzD,kBAAC,YAAD;KACE,OAAO;KACP,WAAW,MAAM,EAAW,EAAE,OAAO,MAAM;KAC3C,aAAa;KACb,OAAO,EAAO;KACd,CAAA,CACE;;GAEN,kBAAC,OAAD;IAAK,OAAO,EAAO;cAAnB,CACE,kBAAC,UAAD;KAAQ,MAAK;KAAS,SAAS;KAAU,OAAO,EAAO;eAAc;KAE5D,CAAA,EACT,kBAAC,UAAD;KAAQ,MAAK;KAAS,UAAU;KAAS,OAAO,EAAO;eACpD,IAAU,cAAc,IAAU,mBAAmB;KAC/C,CAAA,CACL;;GACD;;EAET,EAgBI,IAA0C,EAAK,SAAqB,EACxE,YACA,WACA,aACA,aACA,WACA,eACA,cACC;AACD,QACE,kBAAC,OAAD;EAAK,OAAO,EAAO;YAAnB;GACE,kBAAC,OAAD;IAAK,OAAO,EAAO;cACjB,kBAAC,OAAD;KAAK,OAAO,EAAO;eAAnB;MACE,kBAAC,QAAD;OAAM,OAAO,EAAE,UAAU,QAAQ;iBAAE;OAAS,CAAA;MAC5C,kBAAC,QAAD;OAAM,OAAO,EAAO;iBAAc,EAAQ;OAAoB,CAAA;MAC9D,kBAAC,QAAD;OACE,OAAO;QACL,GAAG,EAAO;QACV,GAAI,EAAQ,WAAW,EAAO,cAAc,EAAO;QACpD;iBAEA,EAAQ,WAAW,WAAW;OAC1B,CAAA;MACH;;IACF,CAAA;GAEN,kBAAC,OAAD;IAAK,OAAO,EAAO;cAAnB,CAAmC,YACzB,kBAAC,UAAD,EAAA,UAAS,EAAQ,QAAgB,CAAA,CACrC;;GACN,kBAAC,OAAD;IAAK,OAAO,EAAO;cAAa,EAAQ;IAAiB,CAAA;GAExD,KACC,kBAAC,OAAD;IACE,OAAO;KACL,GAAG,EAAO;KACV,GAAI,EAAW,UAAU,EAAO,cAAc,EAAO;KACtD;cAEA,EAAW,UACV,kBAAA,GAAA,EAAA,UAAA;KAAE;KAC4B,EAAW;KAAW;KAAY,EAAW;KAAU;KAClF,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CAAE,mBAAgB,EAAW,gBAAgB,gBAAmB,EAAA,CAAA;IAE9D,CAAA;GAGR,kBAAC,OAAD;IAAK,OAAO,EAAO;cAAnB;KACE,kBAAC,UAAD;MAAQ,SAAS;MAAQ,OAAO;OAAE,GAAG,EAAO;OAAc,GAAG,EAAO;OAAY;gBAAE;MAEzE,CAAA;KACT,kBAAC,UAAD;MAAQ,SAAS;MAAQ,UAAU;MAAS,OAAO;OAAE,GAAG,EAAO;OAAc,GAAG,EAAO;OAAY;gBAChG,IAAU,eAAe;MACnB,CAAA;KACT,kBAAC,UAAD;MAAQ,SAAS;MAAU,OAAO;OAAE,GAAG,EAAO;OAAc,GAAG,EAAO;OAAc;gBACjF,EAAQ,WAAW,YAAY;MACzB,CAAA;KACT,kBAAC,UAAD;MAAQ,SAAS;MAAU,OAAO;OAAE,GAAG,EAAO;OAAc,GAAG,EAAO;OAAc;gBAAE;MAE7E,CAAA;KACL;;GACF;;EAER,EAMW,IAAwD,EAAK,SAA4B,EACpG,gBACA,aACA,qBACA,uBACC;CACD,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAgB,KAAqB,EAAqC,KAAK,EAChF,CAAC,GAAa,KAAkB,EAAmD,EAAE,CAAC,EACtF,CAAC,GAAW,KAAgB,EAAwB,KAAK,EAEzD,EAAE,aAAU,YAAS,kBAAe,kBAAe,kBAAe,kBAAe,mBACrF,EAAiB;EAAE;EAAa;EAAU,CAAC,EAEvC,IAAa,EACjB,OAAO,MAA0E;AAC/E,MAAI,QAAQ,GACK,MAAM,EAAc,EAAK,KAEtC,EAAkB,KAAK,EACvB,EAAY,GAAM;OAEf;GACL,IAAM,IAAS,MAAM,EAAc,EAAK;AACxC,GAAI,MACF,EAAY,GAAM,EAClB,IAAmB,EAAO;;IAIhC;EAAC;EAAe;EAAe;EAAiB,CACjD,EAEK,IAAe,EACnB,OAAO,MAAe;AACpB,EAAI,QAAQ,gDAAgD,IAC1C,MAAM,EAAc,EAAG,IAErC,IAAmB,EAAG;IAI5B,CAAC,GAAe,EAAiB,CAClC,EAEK,IAAe,EACnB,OAAO,MAAiC;AACtC,QAAM,EAAc,EAAQ,IAAI,CAAC,EAAQ,SAAS;IAEpD,CAAC,EAAc,CAChB,EAEK,IAAa,EACjB,OAAO,MAAe;AACpB,IAAa,EAAG;EAChB,IAAM,IAAS,MAAM,EAAY,EAAG;AAEpC,EADA,GAAgB,OAAU;GAAE,GAAG;IAAO,IAAK;GAAQ,EAAE,EACrD,EAAa,KAAK;IAEpB,CAAC,EAAY,CACd,EAEK,IAAa,GAAa,MAAiC;AAE/D,EADA,EAAkB,EAAQ,EAC1B,EAAY,GAAK;IAChB,EAAE,CAAC,EAEA,IAAe,QAAkB;AAErC,EADA,EAAY,GAAM,EAClB,EAAkB,KAAK;IACtB,EAAE,CAAC;AAEN,QACE,kBAAC,OAAD;EAAK,OAAO,EAAO;YAAnB;GACE,kBAAC,OAAD;IAAK,OAAO,EAAO;cAAnB,CACE,kBAAC,MAAD;KAAI,OAAO,EAAO;eAAO;KAA0B,CAAA,EAClD,CAAC,KACA,kBAAC,UAAD;KAAQ,eAAe,EAAY,GAAK;KAAE,OAAO,EAAO;eAAW;KAE1D,CAAA,CAEP;;GAEL,KACC,kBAAC,GAAD;IACE,SAAS,KAAkB,KAAA;IACd;IACH;IACV,QAAQ;IACR,UAAU;IACD;IACT,CAAA;GAGH,KAAW,EAAS,WAAW,IAC9B,kBAAC,OAAD;IAAK,OAAO,EAAO;cAAY;IAAgB,CAAA,GAC7C,EAAS,WAAW,IACtB,kBAAC,OAAD;IAAK,OAAO,EAAO;cAAnB,CACE,kBAAC,KAAD,EAAA,UAAG,0BAA0B,CAAA,EAC7B,kBAAC,KAAD;KAAG,OAAO;MAAE,UAAU;MAAQ,WAAW;MAAO;eAAE;KAE9C,CAAA,CACA;QAEN,kBAAC,OAAD;IAAK,OAAO,EAAO;cAChB,EAAS,KAAK,MACb,kBAAC,GAAD;KAEW;KACT,cAAc,EAAW,EAAQ;KACjC,gBAAgB,EAAa,EAAQ,GAAG;KACxC,gBAAgB,EAAa,EAAQ;KACrC,cAAc,EAAW,EAAQ,GAAG;KACpC,YAAY,EAAY,EAAQ;KAChC,SAAS,MAAc,EAAQ;KAC/B,EARK,EAAQ,GAQb,CACF;IACE,CAAA;GAEJ;;EAER"}
+{"version":3,"file":"WebhookConfigPanel.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/webhook-config/WebhookConfigPanel.tsx"],"sourcesContent":["/**\n * WebhookConfigPanel Component (v2.0)\n *\n * Panel for managing event webhook mappings.\n * Allows creating, editing, testing, and deleting webhooks.\n */\n\nimport React, { memo, useState, useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  useEventWebhooks,\n  type HttpMethod,\n  type EventWebhookMapping,\n  type CreateEventWebhookMappingInput,\n  type UpdateEventWebhookMappingInput,\n  type WebhookTestResult,\n} from '../../../hooks/useEventWebhooks';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WebhookConfigPanelProps {\n  /** Dashboard ID for webhook scope */\n  dashboardId?: string;\n  /** Widget ID for webhook scope */\n  widgetId?: string;\n  /** Callback when webhook is created */\n  onWebhookCreated?: (webhook: EventWebhookMapping) => void;\n  /** Callback when webhook is deleted */\n  onWebhookDeleted?: (id: string) => void;\n}\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst styles = {\n  container: {\n    padding: '16px',\n    backgroundColor: 'var(--color-bg-surface)',\n    borderRadius: '8px',\n  } as React.CSSProperties,\n  header: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    marginBottom: '16px',\n  } as React.CSSProperties,\n  title: {\n    fontSize: '16px',\n    fontWeight: 600,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  addButton: {\n    padding: '8px 16px',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-text-inverse)',\n    border: 'none',\n    borderRadius: '6px',\n    fontSize: '14px',\n    fontWeight: 500,\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  webhookList: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n  } as React.CSSProperties,\n  webhookCard: {\n    padding: '16px',\n    backgroundColor: 'var(--color-bg-subtle)',\n    borderRadius: '8px',\n    border: '1px solid var(--color-border-subtle)',\n  } as React.CSSProperties,\n  webhookHeader: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'flex-start',\n    marginBottom: '8px',\n  } as React.CSSProperties,\n  webhookTitle: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  } as React.CSSProperties,\n  webhookName: {\n    fontSize: '14px',\n    fontWeight: 600,\n    color: 'var(--color-text-primary)',\n  } as React.CSSProperties,\n  statusBadge: {\n    padding: '2px 8px',\n    borderRadius: '12px',\n    fontSize: '12px',\n    fontWeight: 500,\n  } as React.CSSProperties,\n  activeBadge: {\n    backgroundColor: 'var(--color-status-success-bgSubtle)',\n    color: 'var(--color-status-success-text)',\n  } as React.CSSProperties,\n  inactiveBadge: {\n    backgroundColor: 'var(--color-status-warning-bgSubtle)',\n    color: 'var(--color-status-warning-text)',\n  } as React.CSSProperties,\n  webhookDetails: {\n    fontSize: '13px',\n    color: 'var(--color-text-muted)',\n    marginBottom: '4px',\n  } as React.CSSProperties,\n  webhookUrl: {\n    fontSize: '12px',\n    color: 'var(--color-text-placeholder)',\n    fontFamily: 'monospace',\n    wordBreak: 'break-all',\n  } as React.CSSProperties,\n  webhookActions: {\n    display: 'flex',\n    gap: '8px',\n    marginTop: '12px',\n  } as React.CSSProperties,\n  actionButton: {\n    padding: '6px 12px',\n    fontSize: '12px',\n    fontWeight: 500,\n    borderRadius: '4px',\n    border: 'none',\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  editButton: {\n    backgroundColor: 'var(--color-bg-sunken)',\n    color: 'var(--color-text-primary)',\n  } as React.CSSProperties,\n  testButton: {\n    backgroundColor: 'var(--color-status-info-bgSubtle)',\n    color: 'var(--color-status-info-text)',\n  } as React.CSSProperties,\n  deleteButton: {\n    backgroundColor: 'var(--color-status-error-bgSubtle)',\n    color: 'var(--color-status-error-text)',\n  } as React.CSSProperties,\n  toggleButton: {\n    backgroundColor: 'var(--color-bg-sunken)',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  emptyState: {\n    textAlign: 'center',\n    padding: '32px',\n    color: 'var(--color-text-placeholder)',\n  } as React.CSSProperties,\n  form: {\n    padding: '16px',\n    backgroundColor: 'var(--color-bg-subtle)',\n    borderRadius: '8px',\n    marginBottom: '16px',\n  } as React.CSSProperties,\n  formGroup: {\n    marginBottom: '12px',\n  } as React.CSSProperties,\n  label: {\n    display: 'block',\n    fontSize: '13px',\n    fontWeight: 500,\n    color: 'var(--color-text-primary)',\n    marginBottom: '4px',\n  } as React.CSSProperties,\n  input: {\n    width: '100%',\n    padding: '8px 12px',\n    fontSize: '14px',\n    border: '1px solid var(--color-border-default)',\n    borderRadius: '6px',\n    boxSizing: 'border-box',\n  } as React.CSSProperties,\n  select: {\n    width: '100%',\n    padding: '8px 12px',\n    fontSize: '14px',\n    border: '1px solid var(--color-border-default)',\n    borderRadius: '6px',\n    boxSizing: 'border-box',\n    backgroundColor: 'var(--color-bg-surface)',\n  } as React.CSSProperties,\n  textarea: {\n    width: '100%',\n    padding: '8px 12px',\n    fontSize: '14px',\n    border: '1px solid var(--color-border-default)',\n    borderRadius: '6px',\n    boxSizing: 'border-box',\n    fontFamily: 'monospace',\n    minHeight: '80px',\n    resize: 'vertical',\n  } as React.CSSProperties,\n  formActions: {\n    display: 'flex',\n    gap: '8px',\n    justifyContent: 'flex-end',\n    marginTop: '16px',\n  } as React.CSSProperties,\n  cancelButton: {\n    padding: '8px 16px',\n    backgroundColor: 'var(--color-bg-sunken)',\n    color: 'var(--color-text-primary)',\n    border: 'none',\n    borderRadius: '6px',\n    fontSize: '14px',\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  saveButton: {\n    padding: '8px 16px',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-text-inverse)',\n    border: 'none',\n    borderRadius: '6px',\n    fontSize: '14px',\n    fontWeight: 500,\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  testResult: {\n    marginTop: '12px',\n    padding: '12px',\n    borderRadius: '6px',\n    fontSize: '13px',\n  } as React.CSSProperties,\n  testSuccess: {\n    backgroundColor: 'var(--color-status-success-bgSubtle)',\n    color: 'var(--color-status-success-text)',\n  } as React.CSSProperties,\n  testFailure: {\n    backgroundColor: 'var(--color-status-error-bgSubtle)',\n    color: 'var(--color-status-error-text)',\n  } as React.CSSProperties,\n  helpText: {\n    fontSize: '12px',\n    color: 'var(--color-text-placeholder)',\n    marginTop: '4px',\n  } as React.CSSProperties,\n};\n\n// ============================================================================\n// Webhook Form Component\n// ============================================================================\n\ninterface WebhookFormProps {\n  webhook?: EventWebhookMapping;\n  dashboardId?: string;\n  widgetId?: string;\n  onSave: (data: CreateEventWebhookMappingInput | UpdateEventWebhookMappingInput) => Promise<void>;\n  onCancel: () => void;\n  loading?: boolean;\n}\n\nconst WebhookForm: React.FC<WebhookFormProps> = memo(function WebhookForm({\n  webhook,\n  dashboardId,\n  widgetId,\n  onSave,\n  onCancel,\n  loading,\n}) {\n  const { t } = useI18n();\n  const [eventPattern, setEventPattern] = useState(webhook?.eventPattern || 'widget:*:clicked');\n  const [webhookUrl, setWebhookUrl] = useState(webhook?.webhookUrl || '');\n  const [method, setMethod] = useState(webhook?.method || 'POST');\n  const [headers, setHeaders] = useState(webhook?.headers ? JSON.stringify(webhook.headers, null, 2) : '');\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    let parsedHeaders: Record<string, string> | undefined;\n    if (headers.trim()) {\n      try {\n        parsedHeaders = JSON.parse(headers);\n      } catch {\n        alert(t('bigconsole.widget.webhookConfig.invalidJson', 'Invalid JSON in headers field'));\n        return;\n      }\n    }\n\n    if (webhook) {\n      // Update\n      await onSave({\n        id: webhook.id,\n        eventPattern,\n        webhookUrl,\n        method: method as 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',\n        headers: parsedHeaders || null,\n      });\n    } else {\n      // Create\n      await onSave({\n        dashboardId,\n        widgetId,\n        eventPattern,\n        webhookUrl,\n        method: method as 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',\n        headers: parsedHeaders,\n      });\n    }\n  };\n\n  return (\n    <form style={styles.form} onSubmit={handleSubmit}>\n      <div style={styles.formGroup}>\n        <label style={styles.label}>{t('bigconsole.widget.webhookConfig.eventPatternLabel', 'Event Pattern *')}</label>\n        <input\n          type=\"text\"\n          value={eventPattern}\n          onChange={(e) => setEventPattern(e.target.value)}\n          placeholder=\"widget:*:clicked\"\n          style={styles.input}\n          required\n        />\n        <p style={styles.helpText}>\n          {t(\n            'bigconsole.widget.webhookConfig.eventPatternHelp',\n            'Use * as wildcard. Examples: widget:*:clicked, *:submit, button:save:*'\n          )}\n        </p>\n      </div>\n\n      <div style={styles.formGroup}>\n        <label style={styles.label}>{t('bigconsole.widget.webhookConfig.webhookUrlLabel', 'Webhook URL *')}</label>\n        <input\n          type=\"url\"\n          value={webhookUrl}\n          onChange={(e) => setWebhookUrl(e.target.value)}\n          placeholder=\"https://your-api.com/webhooks/bigconsole\"\n          style={styles.input}\n          required\n        />\n      </div>\n\n      <div style={styles.formGroup}>\n        <label style={styles.label}>{t('bigconsole.widget.webhookConfig.httpMethodLabel', 'HTTP Method')}</label>\n        <select value={method} onChange={(e) => setMethod(e.target.value as HttpMethod)} style={styles.select}>\n          <option value=\"POST\">POST</option>\n          <option value=\"PUT\">PUT</option>\n          <option value=\"PATCH\">PATCH</option>\n          <option value=\"GET\">GET</option>\n          <option value=\"DELETE\">DELETE</option>\n        </select>\n      </div>\n\n      <div style={styles.formGroup}>\n        <label style={styles.label}>\n          {t('bigconsole.widget.webhookConfig.customHeadersLabel', 'Custom Headers (JSON)')}\n        </label>\n        <textarea\n          value={headers}\n          onChange={(e) => setHeaders(e.target.value)}\n          placeholder={'{\\n  \"Authorization\": \"Bearer your-token\"\\n}'}\n          style={styles.textarea as React.CSSProperties}\n        />\n      </div>\n\n      <div style={styles.formActions}>\n        <button type=\"button\" onClick={onCancel} style={styles.cancelButton}>\n          {t('bigconsole.widget.webhookConfig.cancel', 'Cancel')}\n        </button>\n        <button type=\"submit\" disabled={loading} style={styles.saveButton}>\n          {loading\n            ? t('bigconsole.widget.webhookConfig.saving', 'Saving...')\n            : webhook\n              ? t('bigconsole.widget.webhookConfig.updateWebhook', 'Update Webhook')\n              : t('bigconsole.widget.webhookConfig.createWebhook', 'Create Webhook')}\n        </button>\n      </div>\n    </form>\n  );\n});\n\n// ============================================================================\n// Webhook Card Component\n// ============================================================================\n\ninterface WebhookCardProps {\n  webhook: EventWebhookMapping;\n  onEdit: () => void;\n  onDelete: () => void;\n  onToggle: () => void;\n  onTest: () => void;\n  testResult?: WebhookTestResult | null;\n  testing?: boolean;\n}\n\nconst WebhookCard: React.FC<WebhookCardProps> = memo(function WebhookCard({\n  webhook,\n  onEdit,\n  onDelete,\n  onToggle,\n  onTest,\n  testResult,\n  testing,\n}) {\n  const { t } = useI18n();\n  return (\n    <div style={styles.webhookCard}>\n      <div style={styles.webhookHeader}>\n        <div style={styles.webhookTitle}>\n          <span style={{ fontSize: '16px' }}>📡</span>\n          <span style={styles.webhookName}>{webhook.eventPattern}</span>\n          <span\n            style={{\n              ...styles.statusBadge,\n              ...(webhook.isActive ? styles.activeBadge : styles.inactiveBadge),\n            }}\n          >\n            {webhook.isActive\n              ? t('bigconsole.widget.webhookConfig.active', 'Active')\n              : t('bigconsole.widget.webhookConfig.inactive', 'Inactive')}\n          </span>\n        </div>\n      </div>\n\n      <div style={styles.webhookDetails}>\n        {t('bigconsole.widget.webhookConfig.methodLabel', 'Method:')} <strong>{webhook.method}</strong>\n      </div>\n      <div style={styles.webhookUrl}>{webhook.webhookUrl}</div>\n\n      {testResult && (\n        <div\n          style={{\n            ...styles.testResult,\n            ...(testResult.success ? styles.testSuccess : styles.testFailure),\n          }}\n        >\n          {testResult.success ? (\n            <>\n              {t(\n                'bigconsole.widget.webhookConfig.testSuccess',\n                '✅ Test successful! Status: {{statusCode}}, Latency: {{latencyMs}}ms',\n                { statusCode: testResult.statusCode ?? '', latencyMs: testResult.latencyMs ?? '' }\n              )}\n            </>\n          ) : (\n            <>\n              {t('bigconsole.widget.webhookConfig.testFailure', '❌ Test failed: {{error}}', {\n                error: testResult.errorMessage || t('bigconsole.widget.webhookConfig.unknownError', 'Unknown error'),\n              })}\n            </>\n          )}\n        </div>\n      )}\n\n      <div style={styles.webhookActions}>\n        <button onClick={onEdit} style={{ ...styles.actionButton, ...styles.editButton }}>\n          {t('bigconsole.widget.webhookConfig.edit', 'Edit')}\n        </button>\n        <button onClick={onTest} disabled={testing} style={{ ...styles.actionButton, ...styles.testButton }}>\n          {testing\n            ? t('bigconsole.widget.webhookConfig.testing', 'Testing...')\n            : t('bigconsole.widget.webhookConfig.test', 'Test')}\n        </button>\n        <button onClick={onToggle} style={{ ...styles.actionButton, ...styles.toggleButton }}>\n          {webhook.isActive\n            ? t('bigconsole.widget.webhookConfig.disable', 'Disable')\n            : t('bigconsole.widget.webhookConfig.enable', 'Enable')}\n        </button>\n        <button onClick={onDelete} style={{ ...styles.actionButton, ...styles.deleteButton }}>\n          {t('bigconsole.widget.webhookConfig.delete', 'Delete')}\n        </button>\n      </div>\n    </div>\n  );\n});\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport const WebhookConfigPanel: React.FC<WebhookConfigPanelProps> = memo(function WebhookConfigPanel({\n  dashboardId,\n  widgetId,\n  onWebhookCreated,\n  onWebhookDeleted,\n}) {\n  const { t } = useI18n();\n  const [showForm, setShowForm] = useState(false);\n  const [editingWebhook, setEditingWebhook] = useState<EventWebhookMapping | null>(null);\n  const [testResults, setTestResults] = useState<Record<string, WebhookTestResult | null>>({});\n  const [testingId, setTestingId] = useState<string | null>(null);\n\n  const { webhooks, loading, createWebhook, updateWebhook, deleteWebhook, toggleWebhook, testWebhook } =\n    useEventWebhooks({ dashboardId, widgetId });\n\n  const handleSave = useCallback(\n    async (data: CreateEventWebhookMappingInput | UpdateEventWebhookMappingInput) => {\n      if ('id' in data) {\n        const result = await updateWebhook(data);\n        if (result) {\n          setEditingWebhook(null);\n          setShowForm(false);\n        }\n      } else {\n        const result = await createWebhook(data);\n        if (result) {\n          setShowForm(false);\n          onWebhookCreated?.(result);\n        }\n      }\n    },\n    [createWebhook, updateWebhook, onWebhookCreated]\n  );\n\n  const handleDelete = useCallback(\n    async (id: string) => {\n      if (\n        confirm(t('bigconsole.widget.webhookConfig.deleteConfirm', 'Are you sure you want to delete this webhook?'))\n      ) {\n        const success = await deleteWebhook(id);\n        if (success) {\n          onWebhookDeleted?.(id);\n        }\n      }\n    },\n    [deleteWebhook, onWebhookDeleted, t]\n  );\n\n  const handleToggle = useCallback(\n    async (webhook: EventWebhookMapping) => {\n      await toggleWebhook(webhook.id, !webhook.isActive);\n    },\n    [toggleWebhook]\n  );\n\n  const handleTest = useCallback(\n    async (id: string) => {\n      setTestingId(id);\n      const result = await testWebhook(id);\n      setTestResults((prev) => ({ ...prev, [id]: result }));\n      setTestingId(null);\n    },\n    [testWebhook]\n  );\n\n  const handleEdit = useCallback((webhook: EventWebhookMapping) => {\n    setEditingWebhook(webhook);\n    setShowForm(true);\n  }, []);\n\n  const handleCancel = useCallback(() => {\n    setShowForm(false);\n    setEditingWebhook(null);\n  }, []);\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.header}>\n        <h3 style={styles.title}>{t('bigconsole.widget.webhookConfig.title', 'Webhook Configuration')}</h3>\n        {!showForm && (\n          <button onClick={() => setShowForm(true)} style={styles.addButton}>\n            {t('bigconsole.widget.webhookConfig.addWebhook', '+ Add Webhook')}\n          </button>\n        )}\n      </div>\n\n      {showForm && (\n        <WebhookForm\n          webhook={editingWebhook || undefined}\n          dashboardId={dashboardId}\n          widgetId={widgetId}\n          onSave={handleSave}\n          onCancel={handleCancel}\n          loading={loading}\n        />\n      )}\n\n      {loading && webhooks.length === 0 ? (\n        <div style={styles.emptyState}>{t('bigconsole.widget.webhookConfig.loading', 'Loading...')}</div>\n      ) : webhooks.length === 0 ? (\n        <div style={styles.emptyState}>\n          <p>{t('bigconsole.widget.webhookConfig.noWebhooks', 'No webhooks configured')}</p>\n          <p style={{ fontSize: '13px', marginTop: '8px' }}>\n            {t(\n              'bigconsole.widget.webhookConfig.noWebhooksHelp',\n              'Add a webhook to receive events when actions are triggered.'\n            )}\n          </p>\n        </div>\n      ) : (\n        <div style={styles.webhookList as React.CSSProperties}>\n          {webhooks.map((webhook) => (\n            <WebhookCard\n              key={webhook.id}\n              webhook={webhook}\n              onEdit={() => handleEdit(webhook)}\n              onDelete={() => handleDelete(webhook.id)}\n              onToggle={() => handleToggle(webhook)}\n              onTest={() => handleTest(webhook.id)}\n              testResult={testResults[webhook.id]}\n              testing={testingId === webhook.id}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default WebhookConfigPanel;\n"],"mappings":"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"}