@burdenoff/microfe-bigconsole 2026.510.54

package/dist/bigconsole/components/widgets/WidgetConfigDialog.js

@@ -0,0 +1,882 @@
+import { useDataSinkStore as e } from "../../store/dataSinkStore.js";
+import "../../store/index.js";
+import { getWidgetDefinition as t } from "./WidgetRegistry.js";
+import n from "./chart/ChartConfig.js";
+import r from "./gauge/GaugeConfig.js";
+import i from "./list/ListConfig.js";
+import a from "./metric-card/MetricCardConfig.js";
+import o from "./progress/ProgressConfig.js";
+import s from "./table/TableConfig.js";
+import ee from "./WidgetTypeSelector.js";
+import te from "../parser/DataSinkSelector.js";
+import ne from "../parser/ParserSelector.js";
+import { memo as c, useCallback as l, useEffect as re, useMemo as ie, useState as u } from "react";
+import { Code as ae, CreditCard as d, ExternalLink as f, Layout as p, MessageSquare as oe } from "lucide-react";
+import { Fragment as se, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Button as g, Card as ce, CardDescription as le, CardHeader as ue, CardTitle as de, Dialog as fe, DialogContent as pe, DialogDescription as me, DialogFooter as he, DialogHeader as ge, DialogTitle as _e, Input as _, Label as v, Tabs as ve, TabsContent as y, TabsList as ye, TabsTrigger as be, Textarea as b } from "@burdenoff/fe-libs/ui";
+//#region src/bigconsole/components/widgets/WidgetConfigDialog.tsx
+var x = [
+	"kpi_card_comparison",
+	"metric_card",
+	"chart",
+	"funnel_chart",
+	"table",
+	"pivot_table",
+	"gauge",
+	"progress",
+	"list",
+	"form",
+	"text",
+	"iframe",
+	"map",
+	"heatmap",
+	"calendar",
+	"kanban",
+	"timeline",
+	"custom"
+], xe = [
+	{
+		type: "BIGCONSOLE",
+		name: "BigConsole Native",
+		description: "Full-featured native widgets with all configuration options",
+		icon: p,
+		supportedTypes: x
+	},
+	{
+		type: "ADAPTIVE_CARD",
+		name: "Microsoft Adaptive Cards",
+		description: "Use Microsoft Adaptive Cards format for Teams/Outlook integration",
+		icon: d,
+		supportedTypes: x
+	},
+	{
+		type: "BLOCKKIT",
+		name: "Slack Block Kit",
+		description: "Use Slack Block Kit format for Slack integration",
+		icon: oe,
+		supportedTypes: x
+	},
+	{
+		type: "CUSTOM",
+		name: "Custom Component",
+		description: "Use a custom React component registered in the frontend",
+		icon: ae,
+		supportedTypes: x
+	}
+], Se = [
+	{
+		id: "ac-simple-text",
+		name: "Simple Text Card",
+		description: "Basic text display",
+		renderer: "ADAPTIVE_CARD",
+		template: {
+			type: "AdaptiveCard",
+			version: "1.4",
+			body: [{
+				type: "TextBlock",
+				text: "Hello World!",
+				size: "Large",
+				weight: "Bolder"
+			}]
+		}
+	},
+	{
+		id: "ac-metric-card",
+		name: "Metric Display",
+		description: "Show a key metric with comparison",
+		renderer: "ADAPTIVE_CARD",
+		template: {
+			type: "AdaptiveCard",
+			version: "1.4",
+			body: [
+				{
+					type: "TextBlock",
+					text: "${title}",
+					size: "Medium",
+					weight: "Bolder"
+				},
+				{
+					type: "TextBlock",
+					text: "${value}",
+					size: "ExtraLarge",
+					weight: "Bolder",
+					color: "Accent"
+				},
+				{
+					type: "TextBlock",
+					text: "${change} from last period",
+					size: "Small",
+					color: "Good"
+				}
+			]
+		}
+	},
+	{
+		id: "bk-status-update",
+		name: "Status Update",
+		description: "System status display",
+		renderer: "BLOCKKIT",
+		template: { blocks: [
+			{
+				type: "header",
+				text: {
+					type: "plain_text",
+					text: "System Status"
+				}
+			},
+			{
+				type: "section",
+				text: {
+					type: "mrkdwn",
+					text: "*Status:* All systems operational"
+				}
+			},
+			{ type: "divider" },
+			{
+				type: "section",
+				fields: [{
+					type: "mrkdwn",
+					text: "*API:* Online"
+				}, {
+					type: "mrkdwn",
+					text: "*Database:* Online"
+				}]
+			}
+		] }
+	},
+	{
+		id: "custom-placeholder",
+		name: "Custom Component",
+		description: "Placeholder for custom React component",
+		renderer: "CUSTOM",
+		template: {
+			componentName: "MyCustomWidget",
+			props: {
+				color: "blue",
+				size: "medium"
+			}
+		}
+	}
+];
+function Ce(e) {
+	switch (e) {
+		case "metric_card":
+		case "kpi_card_comparison": return a;
+		case "chart":
+		case "funnel_chart": return n;
+		case "table":
+		case "pivot_table": return s;
+		case "gauge": return r;
+		case "progress": return o;
+		case "list": return i;
+		default: return null;
+	}
+}
+var we = c(function({ renderer: e, template: t, onChange: n }) {
+	let [r, i] = u(null), [a, o] = u(() => {
+		try {
+			return t && typeof t == "object" ? JSON.stringify(t, null, 2) : "";
+		} catch {
+			return "";
+		}
+	}), s = ie(() => Se.filter((t) => t.renderer === e), [e]), ee = l((e) => {
+		o(e);
+		try {
+			e.trim() && n(JSON.parse(e)), i(null);
+		} catch (e) {
+			i(e.message);
+		}
+	}, [n]), te = l((e) => {
+		o(JSON.stringify(e.template, null, 2)), n(e.template), i(null);
+	}, [n]);
+	return re(() => {
+		if (t && typeof t == "object") try {
+			o(JSON.stringify(t, null, 2)), i(null);
+		} catch {}
+		else t || o("");
+	}, [t]), /* @__PURE__ */ h("div", {
+		className: "space-y-4",
+		children: [
+			s.length > 0 && /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m(v, {
+				className: "mb-2",
+				children: "Quick Start Templates"
+			}), /* @__PURE__ */ m("div", {
+				className: "grid grid-cols-2 gap-2",
+				children: s.map((e) => /* @__PURE__ */ m(ce, {
+					className: "cursor-pointer hover:border-primary transition-colors",
+					onClick: () => te(e),
+					children: /* @__PURE__ */ h(ue, {
+						className: "p-3",
+						children: [/* @__PURE__ */ m(de, {
+							className: "text-sm",
+							children: e.name
+						}), /* @__PURE__ */ m(le, {
+							className: "text-xs",
+							children: e.description
+						})]
+					})
+				}, e.id))
+			})] }),
+			/* @__PURE__ */ h("div", { children: [
+				/* @__PURE__ */ m(v, {
+					className: "mb-2",
+					children: "Template JSON"
+				}),
+				/* @__PURE__ */ m(b, {
+					value: a,
+					onChange: (e) => ee(e.target.value),
+					placeholder: `Enter ${e} template JSON...`,
+					rows: 12,
+					spellCheck: !1,
+					className: `font-mono text-sm ${r ? "border-destructive focus-visible:ring-destructive" : ""}`
+				}),
+				r && /* @__PURE__ */ h("p", {
+					className: "mt-1 text-xs text-destructive",
+					children: ["Invalid JSON: ", r]
+				})
+			] }),
+			/* @__PURE__ */ h("div", {
+				className: "flex items-center justify-between rounded-lg bg-muted p-3",
+				children: [
+					/* @__PURE__ */ h("p", {
+						className: "text-xs text-muted-foreground",
+						children: [
+							e === "ADAPTIVE_CARD" && "Use Microsoft Adaptive Cards format with data binding.",
+							e === "BLOCKKIT" && "Use Slack Block Kit format for Slack integration.",
+							e === "CUSTOM" && "Specify componentName and props for your custom React component."
+						]
+					}),
+					e === "ADAPTIVE_CARD" && /* @__PURE__ */ m(g, {
+						variant: "ghost",
+						size: "sm",
+						asChild: !0,
+						children: /* @__PURE__ */ h("a", {
+							href: "https://adaptivecards.io/designer/",
+							target: "_blank",
+							rel: "noopener noreferrer",
+							children: [/* @__PURE__ */ m(f, { className: "size-3.5" }), "Designer"]
+						})
+					}),
+					e === "BLOCKKIT" && /* @__PURE__ */ m(g, {
+						variant: "ghost",
+						size: "sm",
+						asChild: !0,
+						children: /* @__PURE__ */ h("a", {
+							href: "https://app.slack.com/block-kit-builder",
+							target: "_blank",
+							rel: "noopener noreferrer",
+							children: [/* @__PURE__ */ m(f, { className: "size-3.5" }), "Builder"]
+						})
+					})
+				]
+			})
+		]
+	});
+}), S = c(function({ isOpen: n, widget: r, preselectedType: i, preselectedDefinition: a, onClose: o, onSave: s, dashboardId: c, installedWidgets: ae }) {
+	let d = !r, [f, p] = u(d ? i ? "general" : "type" : "general"), oe = e((e) => e.dataSinks), [x, S] = u(r?.type || i), [C, w] = u(r?.title || ""), [Te, T] = u(r?.description || ""), [Ee, E] = u(r?.refreshInterval ?? void 0), [D, O] = u(r?.config || {}), [k, A] = u(r?.renderer || "BIGCONSOLE"), [j, M] = u(r?.template || null), [N, P] = u(r?.config?.dataSourceType || "MOCK"), [F, I] = u(r?.config?.dataSinkKey || ""), [De, L] = u(r?.parserId || ""), [Oe, R] = u(r?.config?.endpointUrl || ""), [z, B] = u(r?.config?.httpMethod || "GET"), [V, H] = u(r?.config?.headers || ""), [U, W] = u(r?.config?.authType || "none"), [ke, G] = u(r?.config?.authValue || ""), [Ae, K] = u(r?.config?.requestBody || ""), [q, J] = u(r?.config?.dataPath || ""), [je, Y] = u(r?.config?.graphqlEndpoint || ""), [Me, X] = u(r?.config?.graphqlQuery || ""), [Z, Q] = u(r?.config?.graphqlVariables || ""), Ne = ie(() => x ? xe.filter((e) => e.supportedTypes.includes(x)) : xe, [x]);
+	re(() => {
+		x && !Ne.find((e) => e.type === k) && (A("BIGCONSOLE"), M(null));
+	}, [
+		x,
+		Ne,
+		k
+	]), re(() => {
+		if (r) {
+			S(r.type), w(r.title), T(r.description || ""), E(r.refreshInterval ?? void 0), O(r.config || {}), A(r.renderer || "BIGCONSOLE"), M(r.template || null);
+			let e = r.config || {};
+			P(e.dataSourceType || "MOCK"), I(e.dataSinkKey || ""), L(r.parserId || ""), R(e.endpointUrl || ""), B(e.httpMethod || "GET"), H(e.headers || ""), W(e.authType || "none"), G(e.authValue || ""), K(e.requestBody || ""), J(e.dataPath || ""), Y(e.graphqlEndpoint || ""), X(e.graphqlQuery || ""), Q(e.graphqlVariables || ""), p("general");
+		} else if (i) {
+			let e = a || t(i);
+			S(i), w(e.name), T(""), E(void 0), O(e.defaultConfig || {}), A(e.category === "Installed" ? "CUSTOM" : "BIGCONSOLE"), M(null), P("MOCK"), I(""), L(""), R(""), B("GET"), H(""), W("none"), G(""), K(""), J(""), Y(""), X(""), Q(""), p("general");
+		} else S(void 0), w(""), T(""), E(void 0), O({}), A("BIGCONSOLE"), M(null), P("MOCK"), I(""), L(""), R(""), B("GET"), H(""), W("none"), G(""), K(""), J(""), Y(""), X(""), Q(""), p("type");
+	}, [
+		r,
+		i,
+		a,
+		n
+	]);
+	let Pe = l((e, n) => {
+		S(e);
+		let r = n || t(e);
+		r && (w(r.name), O(r.defaultConfig || {}), r.category === "Installed" && A("CUSTOM"));
+	}, []), Fe = l((e) => {
+		if (A(e), e === "BIGCONSOLE") M(null);
+		else {
+			let t = Se.find((t) => t.renderer === e);
+			M(t ? t.template : {});
+		}
+	}, []), Ie = l(() => {
+		if (!x) return;
+		let e;
+		if (F) {
+			for (let t of oe.values()) if (t.key === F) {
+				e = t.id;
+				break;
+			}
+		}
+		s({
+			type: x,
+			title: C,
+			description: Te || void 0,
+			refreshInterval: Ee,
+			config: {
+				...D,
+				dataSourceType: N,
+				dataSinkKey: F || void 0,
+				...N === "REST_API" ? {
+					endpointUrl: Oe || void 0,
+					httpMethod: z || "GET",
+					headers: V || void 0,
+					authType: U || "none",
+					authValue: ke || void 0,
+					requestBody: Ae || void 0,
+					dataPath: q || void 0
+				} : {},
+				...N === "GRAPHQL" ? {
+					graphqlEndpoint: je || void 0,
+					graphqlQuery: Me || void 0,
+					graphqlVariables: Z || void 0,
+					headers: V || void 0,
+					dataPath: q || void 0
+				} : {}
+			},
+			renderer: k,
+			template: k === "BIGCONSOLE" ? void 0 : j,
+			dataSinkId: e || void 0,
+			parserId: De || void 0
+		}), o();
+	}, [
+		x,
+		C,
+		Te,
+		Ee,
+		D,
+		k,
+		j,
+		N,
+		F,
+		oe,
+		De,
+		Oe,
+		z,
+		V,
+		U,
+		ke,
+		Ae,
+		q,
+		je,
+		Me,
+		Z,
+		s,
+		o
+	]), Le = x ? t(x) : null, Re = x ? Ce(x) : null, ze = k !== "BIGCONSOLE", Be = k === "BIGCONSOLE" && Re, $ = ie(() => [
+		{
+			id: "type",
+			label: "Type",
+			show: d
+		},
+		{
+			id: "general",
+			label: "General",
+			show: !0
+		},
+		{
+			id: "renderer",
+			label: "Template",
+			show: ze
+		},
+		{
+			id: "config",
+			label: "Data Source",
+			show: !0
+		}
+	].filter((e) => e.show), [
+		d,
+		ze,
+		!0
+	]);
+	return /* @__PURE__ */ m(fe, {
+		open: n,
+		onOpenChange: (e) => !e && o(),
+		children: /* @__PURE__ */ h(pe, {
+			style: {
+				maxWidth: "520px",
+				width: "95vw",
+				maxHeight: "85vh",
+				display: "flex",
+				flexDirection: "column",
+				padding: 0,
+				overflow: "hidden"
+			},
+			children: [
+				/* @__PURE__ */ h(ge, {
+					style: {
+						padding: "16px 16px 8px 16px",
+						flexShrink: 0
+					},
+					children: [/* @__PURE__ */ m(_e, {
+						style: { fontSize: "16px" },
+						children: d ? "Add Widget" : "Edit Widget"
+					}), /* @__PURE__ */ m(me, {
+						className: "text-xs",
+						children: Le ? /* @__PURE__ */ h(se, { children: [Le.name, k !== "BIGCONSOLE" && /* @__PURE__ */ m("span", {
+							className: "ml-2 px-1.5 py-0.5 text-xs bg-primary/10 text-primary rounded",
+							children: xe.find((e) => e.type === k)?.name
+						})] }) : "Configure the widget data source, appearance, and actions."
+					})]
+				}),
+				/* @__PURE__ */ h(ve, {
+					value: f,
+					onValueChange: (e) => p(e),
+					style: {
+						flex: 1,
+						display: "flex",
+						flexDirection: "column",
+						minHeight: 0,
+						overflow: "hidden"
+					},
+					children: [/* @__PURE__ */ m(ye, {
+						style: {
+							margin: "0 16px",
+							width: "auto",
+							justifyContent: "flex-start",
+							height: "32px",
+							flexShrink: 0
+						},
+						children: $.map((e) => /* @__PURE__ */ m(be, {
+							value: e.id,
+							disabled: e.id !== "type" && !x,
+							style: {
+								fontSize: "12px",
+								padding: "4px 12px"
+							},
+							children: e.label
+						}, e.id))
+					}), /* @__PURE__ */ h("div", {
+						style: {
+							flex: 1,
+							minHeight: 0,
+							marginTop: "8px",
+							overflow: "auto",
+							display: "flex",
+							flexDirection: "column"
+						},
+						children: [
+							/* @__PURE__ */ m(y, {
+								value: "type",
+								style: {
+									marginTop: 0,
+									height: "100%",
+									overflow: "hidden"
+								},
+								children: /* @__PURE__ */ m(ee, {
+									selectedType: x,
+									selectedRenderer: k,
+									onSelect: (e, t) => {
+										Pe(e, t), p("general");
+									},
+									onRendererSelect: Fe,
+									installedWidgets: ae
+								})
+							}),
+							/* @__PURE__ */ m(y, {
+								value: "general",
+								style: {
+									marginTop: 0,
+									flex: 1,
+									overflowY: "auto",
+									padding: "12px 16px",
+									minHeight: "300px"
+								},
+								children: /* @__PURE__ */ h("div", {
+									className: "space-y-4",
+									children: [
+										/* @__PURE__ */ h("div", {
+											className: "space-y-2",
+											children: [/* @__PURE__ */ m(v, {
+												htmlFor: "title",
+												children: "Title"
+											}), /* @__PURE__ */ m(_, {
+												id: "title",
+												value: C,
+												onChange: (e) => w(e.target.value),
+												placeholder: "Widget title"
+											})]
+										}),
+										/* @__PURE__ */ h("div", {
+											className: "space-y-2",
+											children: [/* @__PURE__ */ m(v, {
+												htmlFor: "description",
+												children: "Description (optional)"
+											}), /* @__PURE__ */ m(b, {
+												id: "description",
+												value: Te,
+												onChange: (e) => T(e.target.value),
+												placeholder: "Brief description of this widget",
+												rows: 2
+											})]
+										}),
+										/* @__PURE__ */ h("div", {
+											className: "space-y-2",
+											children: [/* @__PURE__ */ m(v, { children: "Renderer" }), /* @__PURE__ */ m("div", {
+												className: "grid grid-cols-2 gap-2",
+												children: Ne.map((e) => {
+													let t = e.icon;
+													return /* @__PURE__ */ m(ce, {
+														className: `cursor-pointer transition-colors ${k === e.type ? "border-primary bg-primary/5" : "hover:border-primary/50"}`,
+														onClick: () => Fe(e.type),
+														children: /* @__PURE__ */ m(ue, {
+															className: "p-3",
+															children: /* @__PURE__ */ h("div", {
+																className: "flex items-start gap-3",
+																children: [/* @__PURE__ */ m("div", {
+																	className: `p-2 rounded-md ${k === e.type ? "bg-primary text-primary-foreground" : "bg-muted"}`,
+																	children: /* @__PURE__ */ m(t, { className: "size-4" })
+																}), /* @__PURE__ */ h("div", {
+																	className: "flex-1 min-w-0",
+																	children: [/* @__PURE__ */ m(de, {
+																		className: "text-sm",
+																		children: e.name
+																	}), /* @__PURE__ */ m(le, {
+																		className: "text-xs line-clamp-2",
+																		children: e.description
+																	})]
+																})]
+															})
+														})
+													}, e.type);
+												})
+											})]
+										}),
+										/* @__PURE__ */ h("div", {
+											className: "space-y-2",
+											children: [/* @__PURE__ */ m(v, {
+												htmlFor: "refresh",
+												children: "Auto-Refresh Interval (seconds)"
+											}), /* @__PURE__ */ m(_, {
+												id: "refresh",
+												type: "number",
+												value: Ee || "",
+												onChange: (e) => E(e.target.value ? Number(e.target.value) : void 0),
+												min: 0,
+												placeholder: "No auto-refresh"
+											})]
+										})
+									]
+								})
+							}),
+							/* @__PURE__ */ m(y, {
+								value: "renderer",
+								style: {
+									marginTop: 0,
+									flex: 1,
+									overflowY: "auto",
+									padding: "12px 16px",
+									minHeight: "300px"
+								},
+								children: /* @__PURE__ */ m(we, {
+									renderer: k,
+									template: j,
+									onChange: M
+								})
+							}),
+							/* @__PURE__ */ m(y, {
+								value: "config",
+								style: {
+									marginTop: 0,
+									flex: 1,
+									overflowY: "auto",
+									padding: "12px 16px",
+									minHeight: "300px"
+								},
+								children: /* @__PURE__ */ h("div", {
+									className: "space-y-4",
+									children: [/* @__PURE__ */ h("div", {
+										className: "space-y-3 p-3 border border-border rounded-lg bg-muted/30",
+										children: [
+											/* @__PURE__ */ m("h4", {
+												className: "text-sm font-medium",
+												children: "Data Source"
+											}),
+											/* @__PURE__ */ h("div", {
+												className: "space-y-2",
+												children: [/* @__PURE__ */ m(v, {
+													htmlFor: "dataSourceType",
+													children: "Source Type"
+												}), /* @__PURE__ */ h("select", {
+													id: "dataSourceType",
+													value: N,
+													onChange: (e) => P(e.target.value),
+													className: "w-full h-9 px-3 rounded-md border border-input bg-background text-sm",
+													children: [
+														/* @__PURE__ */ m("option", {
+															value: "MOCK",
+															children: "Sample JSON"
+														}),
+														/* @__PURE__ */ m("option", {
+															value: "DATASINK",
+															children: "DataSink"
+														}),
+														/* @__PURE__ */ m("option", {
+															value: "REST_API",
+															children: "REST API"
+														}),
+														/* @__PURE__ */ m("option", {
+															value: "GRAPHQL",
+															children: "GraphQL"
+														})
+													]
+												})]
+											}),
+											N === "DATASINK" && /* @__PURE__ */ h("div", {
+												className: "space-y-2",
+												children: [/* @__PURE__ */ m(v, {
+													htmlFor: "dataSinkKey",
+													children: "DataSink"
+												}), /* @__PURE__ */ m(te, {
+													value: F || null,
+													onChange: (e) => I(e || ""),
+													placeholder: "Select a DataSink..."
+												})]
+											}),
+											N === "REST_API" && /* @__PURE__ */ h("div", {
+												className: "space-y-3",
+												children: [
+													/* @__PURE__ */ h("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ m(v, { children: "Endpoint URL *" }), /* @__PURE__ */ m(_, {
+															value: Oe,
+															onChange: (e) => R(e.target.value),
+															placeholder: "https://api.example.com/data"
+														})]
+													}),
+													/* @__PURE__ */ h("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ m(v, { children: "HTTP Method" }), /* @__PURE__ */ h("select", {
+															value: z,
+															onChange: (e) => B(e.target.value),
+															className: "w-full h-9 px-3 rounded-md border border-input bg-background text-sm",
+															children: [
+																/* @__PURE__ */ m("option", {
+																	value: "GET",
+																	children: "GET"
+																}),
+																/* @__PURE__ */ m("option", {
+																	value: "POST",
+																	children: "POST"
+																}),
+																/* @__PURE__ */ m("option", {
+																	value: "PUT",
+																	children: "PUT"
+																}),
+																/* @__PURE__ */ m("option", {
+																	value: "DELETE",
+																	children: "DELETE"
+																})
+															]
+														})]
+													}),
+													/* @__PURE__ */ h("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ m(v, { children: "Headers (JSON)" }), /* @__PURE__ */ m(b, {
+															value: V,
+															onChange: (e) => H(e.target.value),
+															rows: 2,
+															placeholder: "{\"Content-Type\": \"application/json\"}",
+															className: "font-mono text-xs"
+														})]
+													}),
+													/* @__PURE__ */ h("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ m(v, { children: "Authentication" }), /* @__PURE__ */ h("select", {
+															value: U,
+															onChange: (e) => W(e.target.value),
+															className: "w-full h-9 px-3 rounded-md border border-input bg-background text-sm",
+															children: [
+																/* @__PURE__ */ m("option", {
+																	value: "none",
+																	children: "None"
+																}),
+																/* @__PURE__ */ m("option", {
+																	value: "api_key",
+																	children: "API Key"
+																}),
+																/* @__PURE__ */ m("option", {
+																	value: "bearer",
+																	children: "Bearer Token"
+																}),
+																/* @__PURE__ */ m("option", {
+																	value: "basic",
+																	children: "Basic Auth"
+																})
+															]
+														})]
+													}),
+													U !== "none" && /* @__PURE__ */ h("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ m(v, { children: U === "basic" ? "Credentials (user:pass)" : "Token/Key" }), /* @__PURE__ */ m(_, {
+															type: "password",
+															value: ke,
+															onChange: (e) => G(e.target.value),
+															placeholder: U === "basic" ? "username:password" : "Enter token or API key"
+														})]
+													}),
+													(z === "POST" || z === "PUT") && /* @__PURE__ */ h("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ m(v, { children: "Request Body (JSON)" }), /* @__PURE__ */ m(b, {
+															value: Ae,
+															onChange: (e) => K(e.target.value),
+															rows: 3,
+															placeholder: "{\"key\": \"value\"}",
+															className: "font-mono text-xs"
+														})]
+													}),
+													/* @__PURE__ */ h("div", {
+														className: "space-y-2",
+														children: [
+															/* @__PURE__ */ m(v, { children: "Data Path (optional)" }),
+															/* @__PURE__ */ m(_, {
+																value: q,
+																onChange: (e) => J(e.target.value),
+																placeholder: "$.data.items or .data.items"
+															}),
+															/* @__PURE__ */ m("p", {
+																className: "text-xs text-muted-foreground",
+																children: "Extract data from response using JSONPath"
+															})
+														]
+													})
+												]
+											}),
+											N === "GRAPHQL" && /* @__PURE__ */ h("div", {
+												className: "space-y-3",
+												children: [
+													/* @__PURE__ */ h("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ m(v, { children: "GraphQL Endpoint *" }), /* @__PURE__ */ m(_, {
+															value: je,
+															onChange: (e) => Y(e.target.value),
+															placeholder: "https://api.example.com/graphql"
+														})]
+													}),
+													/* @__PURE__ */ h("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ m(v, { children: "Query *" }), /* @__PURE__ */ m(b, {
+															value: Me,
+															onChange: (e) => X(e.target.value),
+															rows: 5,
+															placeholder: "query GetData($limit: Int) {\n  items(limit: $limit) {\n    id\n    name\n  }\n}",
+															className: "font-mono text-xs"
+														})]
+													}),
+													/* @__PURE__ */ h("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ m(v, { children: "Variables (JSON, optional)" }), /* @__PURE__ */ m(b, {
+															value: Z,
+															onChange: (e) => Q(e.target.value),
+															rows: 2,
+															placeholder: "{\"limit\": 10}",
+															className: "font-mono text-xs"
+														})]
+													}),
+													/* @__PURE__ */ h("div", {
+														className: "space-y-2",
+														children: [/* @__PURE__ */ m(v, { children: "Headers (JSON, optional)" }), /* @__PURE__ */ m(b, {
+															value: V,
+															onChange: (e) => H(e.target.value),
+															rows: 2,
+															placeholder: "{\"Authorization\": \"Bearer token\"}",
+															className: "font-mono text-xs"
+														})]
+													}),
+													/* @__PURE__ */ h("div", {
+														className: "space-y-2",
+														children: [
+															/* @__PURE__ */ m(v, { children: "Data Path (optional)" }),
+															/* @__PURE__ */ m(_, {
+																value: q,
+																onChange: (e) => J(e.target.value),
+																placeholder: ".data.items"
+															}),
+															/* @__PURE__ */ m("p", {
+																className: "text-xs text-muted-foreground",
+																children: "Extract data from GraphQL response"
+															})
+														]
+													})
+												]
+											}),
+											c && /* @__PURE__ */ h("div", {
+												className: "space-y-2",
+												children: [
+													/* @__PURE__ */ m(v, {
+														htmlFor: "parserId",
+														children: "Parser (optional)"
+													}),
+													/* @__PURE__ */ m(ne, {
+														consoleId: c,
+														value: De || null,
+														onChange: (e) => L(e || ""),
+														filterInputSinkKey: N === "DATASINK" ? F : void 0,
+														filterStatus: void 0,
+														placeholder: "Select a parser..."
+													}),
+													/* @__PURE__ */ m("p", {
+														className: "text-xs text-muted-foreground",
+														children: "Transform data using a parser before display"
+													})
+												]
+											})
+										]
+									}), Be && Re && /* @__PURE__ */ m(Re, {
+										config: D,
+										onChange: O
+									})]
+								})
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ h(he, {
+					style: {
+						display: "flex",
+						flexDirection: "row",
+						justifyContent: "space-between",
+						padding: "12px 16px",
+						borderTop: "1px solid var(--border)",
+						flexShrink: 0
+					},
+					children: [/* @__PURE__ */ m(g, {
+						variant: "ghost",
+						size: "sm",
+						onClick: () => {
+							let e = $.findIndex((e) => e.id === f);
+							e > 0 ? p($[e - 1].id) : o();
+						},
+						children: f === $[0]?.id ? "Cancel" : "Back"
+					}), /* @__PURE__ */ h("div", {
+						className: "flex gap-2",
+						children: [f !== $[$.length - 1]?.id && x && /* @__PURE__ */ m(g, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => {
+								let e = $.findIndex((e) => e.id === f);
+								e < $.length - 1 && p($[e + 1].id);
+							},
+							children: "Next"
+						}), /* @__PURE__ */ m(g, {
+							size: "sm",
+							onClick: Ie,
+							disabled: !x || !C.trim() || k !== "BIGCONSOLE" && !j,
+							children: d ? "Add Widget" : "Save"
+						})]
+					})]
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { S as default };
+
+//# sourceMappingURL=WidgetConfigDialog.js.map