@burdenoff/microfe-bigconsole 2026.510.54

package/dist/bigconsole/pages/DataSinksPage.js

@@ -0,0 +1,835 @@
+import { useDataSinkStore as e } from "../store/dataSinkStore.js";
+import { useAppNavigate as t } from "../contexts/NavigationContext.js";
+import "../contexts/index.js";
+import n from "../hooks/useDataSinkOperations.js";
+import ee from "../hooks/useExportDataSink.js";
+import te from "../components/datasink/DataSinkStatusBadge.js";
+import { isNative as r, nativeNotify as i } from "../../utils/nativeBridge.js";
+import ne from "../components/datasink/DataSinkCard.js";
+import re from "../components/datasink/DataSinkDeleteDialog.js";
+import ie from "../components/datasink/DataSinkRefreshDialog.js";
+import ae from "../components/datasink/ImportDataSinkDialog.js";
+import oe from "../components/datasink/SetupStateBadge.js";
+import { memo as a, useCallback as o, useMemo as s, useState as c } from "react";
+import { AlertCircle as se, Container as ce, Download as le, Eye as ue, FolderOpen as de, LayoutGrid as fe, Pencil as pe, Plus as l, RefreshCw as me, Search as he, Table2 as ge, Trash2 as _e, Upload as ve, X as ye } from "lucide-react";
+import { useI18n as be } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { getProfileScopedKey as u } from "@burdenoff/fe-libs/shared/utils";
+import { Fragment as xe, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Badge as Se, Button as p, Card as m, CardContent as h, Input as Ce, Select as g, SelectContent as _, SelectItem as v, SelectTrigger as y, SelectValue as b, Spinner as we } from "@burdenoff/fe-libs/ui";
+//#region src/bigconsole/pages/DataSinksPage.tsx
+var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "completed" || e.ttl !== null && e.ttl !== void 0 && e.ttl > 0 || e.fluidGridsWorkflowId && e.data && Object.keys(e.data).length > 0 ? "completed" : e.fluidGridsWorkflowId ? "workflow_running" : "workflow_pending", S = a(function() {
+	let a = t(), { t: S } = be(), C = o((e, t) => {
+		let n = S(e);
+		return n === e ? t : n;
+	}, [S]), [w, T] = c("all"), [Ee, E] = c(!1), [D, De] = c(() => localStorage.getItem(u(x)) || "grid"), O = o((e) => {
+		De(e), localStorage.setItem(u(x), e);
+	}, []), k = e((e) => e.statusFilter), A = e((e) => e.activeFilter), j = e((e) => e.searchQuery), M = e((e) => e.setStatusFilter), N = e((e) => e.setActiveFilter), P = e((e) => e.setSearchQuery), Oe = e((e) => e.deleteDialogOpen), ke = e((e) => e.refreshDialogOpen), F = e((e) => e.currentDataSink), I = e((e) => e.openDeleteDialog), L = e((e) => e.closeDeleteDialog), R = e((e) => e.openRefreshDialog), z = e((e) => e.closeRefreshDialog), { loading: B, error: V, dataSinks: H, deleteDataSink: U, refreshDataSink: W, refetch: G } = n(), { downloadDataSink: K } = ee(), q = s(() => H.map((e) => ({
+		dataSink: e,
+		setupState: Te(e)
+	})), [H]), J = s(() => {
+		let e = [...q];
+		if (w === "in_progress" ? e = e.filter((e) => e.setupState !== "completed") : w === "completed" && (e = e.filter((e) => e.setupState === "completed")), k !== null && (e = e.filter((e) => e.dataSink.status === k)), A !== null && (e = e.filter((e) => e.dataSink.isActive === A)), j.trim()) {
+			let t = j.toLowerCase();
+			e = e.filter((e) => e.dataSink.name?.toLowerCase().includes(t) || e.dataSink.key.toLowerCase().includes(t) || e.dataSink.description?.toLowerCase().includes(t));
+		}
+		return e.sort((e, t) => new Date(t.dataSink.updatedAt).getTime() - new Date(e.dataSink.updatedAt).getTime());
+	}, [
+		q,
+		w,
+		k,
+		A,
+		j
+	]), Y = o(() => {
+		a("/datasinks/new");
+	}, [a]), X = o((e) => {
+		a(`/datasinks/${e}`);
+	}, [a]), Z = o((e) => {
+		a(`/datasinks/${e}/edit`);
+	}, [a]), Q = o((e) => {
+		let t = H.find((t) => t.id === e);
+		t && R(t);
+	}, [H, R]), Ae = o(async (e) => {
+		F && (await W({
+			id: F.id,
+			forceRefresh: e
+		}), z());
+	}, [
+		F,
+		W,
+		z
+	]), $ = o((e) => {
+		let t = H.find((t) => t.id === e);
+		t && I(t);
+	}, [H, I]), je = o(async () => {
+		if (F) {
+			try {
+				await U(F.id), r() && i("success");
+			} catch (e) {
+				throw r() && i("error"), e;
+			}
+			L();
+		}
+	}, [
+		F,
+		U,
+		L
+	]), Me = o(async (e) => {
+		let t = H.find((t) => t.id === e);
+		t && await K(e, t.name || t.key);
+	}, [H, K]), Ne = o(() => {
+		E(!0);
+	}, []), Pe = o((e, t, n) => {
+		G();
+	}, [G]), Fe = s(() => w !== "all" || k !== null || A !== null || j.trim() !== "", [
+		w,
+		k,
+		A,
+		j
+	]), Ie = o(() => {
+		T("all"), M(null), N(null), P("");
+	}, [
+		M,
+		N,
+		P
+	]), Le = [
+		{
+			value: "all",
+			label: C("bigconsole.dataSinks.filters.setupState.all", "All")
+		},
+		{
+			value: "in_progress",
+			label: C("bigconsole.dataSinks.filters.setupState.inProgress", "In Progress")
+		},
+		{
+			value: "completed",
+			label: C("bigconsole.dataSinks.filters.setupState.completed", "Completed")
+		}
+	];
+	return V ? /* @__PURE__ */ d("div", {
+		style: { padding: "var(--space-pagePadding)" },
+		children: /* @__PURE__ */ d(m, {
+			style: {
+				borderColor: "var(--color-status-error-border)",
+				backgroundColor: "var(--color-status-error-bgSubtle)"
+			},
+			children: /* @__PURE__ */ d(h, {
+				style: { padding: "var(--space-pagePadding)" },
+				children: /* @__PURE__ */ f("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						textAlign: "center"
+					},
+					children: [
+						/* @__PURE__ */ d("div", {
+							style: {
+								padding: "var(--space-controlGap)",
+								borderRadius: "50%",
+								backgroundColor: "var(--color-status-error-bgSubtle)",
+								marginBottom: "var(--space-formGap)"
+							},
+							children: /* @__PURE__ */ d(se, { style: {
+								height: "var(--size-icon-xl)",
+								width: "var(--size-icon-xl)",
+								color: "var(--color-status-error-text)"
+							} })
+						}),
+						/* @__PURE__ */ d("h3", {
+							style: {
+								fontSize: "var(--font-size-body-lg)",
+								fontWeight: "var(--font-weight-medium)",
+								color: "var(--color-status-error-text)",
+								marginBottom: "var(--space-controlGap)"
+							},
+							children: C("bigconsole.dataSinks.error.title", "Failed to load Data Sinks")
+						}),
+						/* @__PURE__ */ d("p", {
+							style: {
+								fontSize: "var(--font-size-body-sm)",
+								color: "var(--color-text-secondary)",
+								marginBottom: "var(--space-formGap)"
+							},
+							children: V.message
+						}),
+						/* @__PURE__ */ d(p, {
+							size: "sm",
+							onClick: () => G(),
+							children: C("bigconsole.dataSinks.error.retry", "Try Again")
+						})
+					]
+				})
+			})
+		})
+	}) : /* @__PURE__ */ f("div", {
+		style: {
+			minHeight: "100vh",
+			backgroundColor: "var(--color-bg-canvas)"
+		},
+		children: [
+			/* @__PURE__ */ d("div", {
+				style: {
+					borderBottom: "1px solid var(--color-border)",
+					backgroundColor: "var(--color-bg-surface)"
+				},
+				children: /* @__PURE__ */ d("div", {
+					style: { padding: "var(--space-pagePadding)" },
+					children: /* @__PURE__ */ f("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between"
+						},
+						children: [/* @__PURE__ */ f("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "var(--space-formGap)"
+							},
+							children: [/* @__PURE__ */ d("div", {
+								style: {
+									display: "flex",
+									height: "var(--size-controlHeight-lg)",
+									width: "var(--size-controlHeight-lg)",
+									alignItems: "center",
+									justifyContent: "center",
+									borderRadius: "var(--radius-card)",
+									backgroundColor: "var(--color-action-primary-bg)"
+								},
+								children: /* @__PURE__ */ d(ce, { style: {
+									height: "var(--size-icon-lg)",
+									width: "var(--size-icon-lg)",
+									color: "var(--color-action-primary-text)"
+								} })
+							}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h1", {
+								style: {
+									fontSize: "var(--font-size-heading-h4)",
+									fontWeight: "var(--font-weight-bold)",
+									margin: 0,
+									color: "var(--color-text-primary)"
+								},
+								children: C("bigconsole.dataSinks.title", "Data Sinks")
+							}), /* @__PURE__ */ d("p", {
+								style: {
+									fontSize: "var(--font-size-body-sm)",
+									color: "var(--color-text-secondary)",
+									margin: 0
+								},
+								children: C("bigconsole.dataSinks.subtitle", "Manage pre-processed data from FluidGrids workflows")
+							})] })]
+						}), /* @__PURE__ */ f("div", {
+							style: {
+								display: "flex",
+								gap: "var(--space-controlGap)"
+							},
+							children: [/* @__PURE__ */ f(p, {
+								variant: "outline",
+								onClick: Ne,
+								children: [/* @__PURE__ */ d(ve, { style: {
+									marginRight: "var(--space-iconGap)",
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), C("bigconsole.dataSinks.actions.import", "Import")]
+							}), /* @__PURE__ */ f(p, {
+								onClick: Y,
+								children: [/* @__PURE__ */ d(l, { style: {
+									marginRight: "var(--space-iconGap)",
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), C("bigconsole.dataSinks.actions.create", "Create Data Sink")]
+							})]
+						})]
+					})
+				})
+			}),
+			/* @__PURE__ */ f("div", {
+				style: { padding: "var(--space-pagePadding)" },
+				children: [
+					/* @__PURE__ */ d("div", {
+						style: { marginBottom: "var(--space-formGap)" },
+						children: /* @__PURE__ */ d("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "2px",
+								padding: "4px",
+								backgroundColor: "var(--color-bg-sunken)",
+								borderRadius: "var(--radius-card)",
+								width: "fit-content"
+							},
+							children: Le.map((e) => /* @__PURE__ */ d("button", {
+								type: "button",
+								onClick: () => T(e.value),
+								style: {
+									padding: "var(--space-controlGap) var(--space-formGap)",
+									fontSize: "var(--font-size-body-sm)",
+									fontWeight: "var(--font-weight-medium)",
+									borderRadius: "var(--radius-button)",
+									border: "none",
+									cursor: "pointer",
+									transition: "all 0.2s ease",
+									backgroundColor: w === e.value ? "var(--color-bg-surface)" : "transparent",
+									color: w === e.value ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+									boxShadow: w === e.value ? "0 1px 2px rgba(0,0,0,0.05)" : "none"
+								},
+								children: e.label
+							}, e.value))
+						})
+					}),
+					/* @__PURE__ */ f("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "var(--space-controlGap)",
+							marginBottom: "var(--space-sectionGap)",
+							flexWrap: "wrap"
+						},
+						children: [
+							/* @__PURE__ */ f("div", {
+								style: {
+									position: "relative",
+									maxWidth: "400px",
+									flex: 1
+								},
+								children: [/* @__PURE__ */ d(he, { style: {
+									position: "absolute",
+									left: "var(--space-controlGap)",
+									top: "50%",
+									transform: "translateY(-50%)",
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)",
+									color: "var(--color-text-muted)"
+								} }), /* @__PURE__ */ d(Ce, {
+									type: "text",
+									placeholder: C("bigconsole.dataSinks.search.placeholder", "Search data sinks..."),
+									value: j,
+									onChange: (e) => P(e.target.value),
+									style: {
+										paddingLeft: "var(--size-controlHeight-md)",
+										height: "var(--size-controlHeight-md)"
+									}
+								})]
+							}),
+							/* @__PURE__ */ f(g, {
+								value: k || "all",
+								onValueChange: (e) => M(e === "all" ? null : e),
+								children: [/* @__PURE__ */ d(y, {
+									style: { width: "150px" },
+									children: /* @__PURE__ */ d(b, { placeholder: C("bigconsole.dataSinks.filters.status.placeholder", "All Statuses") })
+								}), /* @__PURE__ */ f(_, { children: [
+									/* @__PURE__ */ d(v, {
+										value: "all",
+										children: C("bigconsole.dataSinks.filters.status.all", "All Statuses")
+									}),
+									/* @__PURE__ */ d(v, {
+										value: "ready",
+										children: C("bigconsole.dataSinks.filters.status.ready", "Ready")
+									}),
+									/* @__PURE__ */ d(v, {
+										value: "error",
+										children: C("bigconsole.dataSinks.filters.status.error", "Error")
+									}),
+									/* @__PURE__ */ d(v, {
+										value: "stale",
+										children: C("bigconsole.dataSinks.filters.status.stale", "Stale")
+									}),
+									/* @__PURE__ */ d(v, {
+										value: "refreshing",
+										children: C("bigconsole.dataSinks.filters.status.refreshing", "Refreshing")
+									})
+								] })]
+							}),
+							/* @__PURE__ */ f(g, {
+								value: A === null ? "all" : A ? "true" : "false",
+								onValueChange: (e) => N(e === "all" ? null : e === "true"),
+								children: [/* @__PURE__ */ d(y, {
+									style: { width: "130px" },
+									children: /* @__PURE__ */ d(b, { placeholder: C("bigconsole.dataSinks.filters.active.placeholder", "All") })
+								}), /* @__PURE__ */ f(_, { children: [
+									/* @__PURE__ */ d(v, {
+										value: "all",
+										children: C("bigconsole.dataSinks.filters.active.all", "All")
+									}),
+									/* @__PURE__ */ d(v, {
+										value: "true",
+										children: C("bigconsole.dataSinks.filters.active.active", "Active")
+									}),
+									/* @__PURE__ */ d(v, {
+										value: "false",
+										children: C("bigconsole.dataSinks.filters.active.inactive", "Inactive")
+									})
+								] })]
+							}),
+							Fe && /* @__PURE__ */ f(p, {
+								variant: "ghost",
+								size: "sm",
+								onClick: Ie,
+								children: [/* @__PURE__ */ d(ye, { style: {
+									marginRight: "var(--space-iconGap)",
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), C("bigconsole.dataSinks.filters.clear", "Clear Filters")]
+							}),
+							/* @__PURE__ */ f("div", {
+								style: {
+									marginLeft: "auto",
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-controlGap)"
+								},
+								children: [/* @__PURE__ */ f(Se, {
+									variant: "secondary",
+									children: [
+										J.length,
+										" ",
+										J.length === 1 ? C("bigconsole.dataSinks.count.single", "Data Sink") : C("bigconsole.dataSinks.count.plural", "Data Sinks")
+									]
+								}), /* @__PURE__ */ f("div", {
+									style: {
+										display: "flex",
+										borderRadius: "var(--radius-button)",
+										border: "1px solid var(--color-border)",
+										overflow: "hidden"
+									},
+									children: [/* @__PURE__ */ d("button", {
+										type: "button",
+										onClick: () => O("grid"),
+										title: C("bigconsole.dataSinks.view.grid", "Grid view"),
+										style: {
+											padding: "6px 8px",
+											border: "none",
+											cursor: "pointer",
+											backgroundColor: D === "grid" ? "var(--color-bg-sunken)" : "transparent",
+											color: D === "grid" ? "var(--color-text-primary)" : "var(--color-text-muted)"
+										},
+										children: /* @__PURE__ */ d(fe, { size: 16 })
+									}), /* @__PURE__ */ d("button", {
+										type: "button",
+										onClick: () => O("table"),
+										title: C("bigconsole.dataSinks.view.table", "Table view"),
+										style: {
+											padding: "6px 8px",
+											border: "none",
+											borderLeft: "1px solid var(--color-border)",
+											cursor: "pointer",
+											backgroundColor: D === "table" ? "var(--color-bg-sunken)" : "transparent",
+											color: D === "table" ? "var(--color-text-primary)" : "var(--color-text-muted)"
+										},
+										children: /* @__PURE__ */ d(ge, { size: 16 })
+									})]
+								})]
+							})
+						]
+					}),
+					B && H.length === 0 && /* @__PURE__ */ d("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							padding: "80px 0"
+						},
+						children: /* @__PURE__ */ f("div", {
+							style: { textAlign: "center" },
+							children: [/* @__PURE__ */ d(we, { style: {
+								height: "var(--size-icon-xl)",
+								width: "var(--size-icon-xl)",
+								margin: "0 auto var(--space-formGap)"
+							} }), /* @__PURE__ */ d("p", {
+								style: {
+									fontSize: "var(--font-size-body-sm)",
+									color: "var(--color-text-muted)"
+								},
+								children: C("bigconsole.dataSinks.loading", "Loading data sinks...")
+							})]
+						})
+					}),
+					!B && H.length === 0 && /* @__PURE__ */ d(m, {
+						className: "border-dashed",
+						children: /* @__PURE__ */ f(h, {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								alignItems: "center",
+								justifyContent: "center",
+								padding: "64px var(--space-pagePadding)"
+							},
+							children: [
+								/* @__PURE__ */ d("div", {
+									style: {
+										display: "flex",
+										height: "80px",
+										width: "80px",
+										alignItems: "center",
+										justifyContent: "center",
+										borderRadius: "50%",
+										backgroundColor: "var(--color-bg-sunken)",
+										marginBottom: "var(--space-sectionGap)"
+									},
+									children: /* @__PURE__ */ d(de, { style: {
+										height: "var(--size-icon-xl)",
+										width: "var(--size-icon-xl)",
+										color: "var(--color-text-muted)"
+									} })
+								}),
+								/* @__PURE__ */ d("h3", {
+									style: {
+										fontSize: "var(--font-size-heading-h4)",
+										fontWeight: "var(--font-weight-semibold)",
+										marginBottom: "var(--space-controlGap)"
+									},
+									children: C("bigconsole.dataSinks.empty.title", "No Data Sinks yet")
+								}),
+								/* @__PURE__ */ d("p", {
+									style: {
+										fontSize: "var(--font-size-body-sm)",
+										color: "var(--color-text-muted)",
+										marginBottom: "var(--space-sectionGap)",
+										textAlign: "center",
+										maxWidth: "400px"
+									},
+									children: C("bigconsole.dataSinks.empty.description", "Data Sinks store pre-processed data from FluidGrids workflows for fast access in widgets.")
+								}),
+								/* @__PURE__ */ f(p, {
+									onClick: Y,
+									children: [/* @__PURE__ */ d(l, { style: {
+										marginRight: "var(--space-iconGap)",
+										height: "var(--size-icon-sm)",
+										width: "var(--size-icon-sm)"
+									} }), C("bigconsole.dataSinks.actions.create", "Create Data Sink")]
+								})
+							]
+						})
+					}),
+					!B && J.length === 0 && H.length > 0 && /* @__PURE__ */ f("div", {
+						style: {
+							padding: "64px 0",
+							textAlign: "center"
+						},
+						children: [/* @__PURE__ */ d("p", {
+							style: {
+								fontSize: "var(--font-size-body-sm)",
+								color: "var(--color-text-muted)"
+							},
+							children: C("bigconsole.dataSinks.empty.filtered", "No data sinks match your filters")
+						}), /* @__PURE__ */ d(p, {
+							variant: "ghost",
+							size: "sm",
+							onClick: Ie,
+							style: { marginTop: "var(--space-formGap)" },
+							children: C("bigconsole.dataSinks.filters.clear", "Clear Filters")
+						})]
+					}),
+					J.length > 0 && D === "grid" && /* @__PURE__ */ d("div", {
+						style: {
+							display: "grid",
+							gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
+							gap: "var(--space-formGap)"
+						},
+						children: J.map((e) => /* @__PURE__ */ d(ne, {
+							dataSink: e.dataSink,
+							setupState: e.setupState,
+							onView: X,
+							onEdit: Z,
+							onRefresh: Q,
+							onExport: Me,
+							onDelete: $
+						}, e.dataSink.id))
+					}),
+					J.length > 0 && D === "table" && /* @__PURE__ */ d("div", {
+						style: {
+							border: "1px solid var(--color-border)",
+							borderRadius: "var(--radius-card)",
+							overflow: "hidden"
+						},
+						children: /* @__PURE__ */ d("div", {
+							style: { overflowX: "auto" },
+							children: /* @__PURE__ */ f("table", {
+								style: {
+									width: "100%",
+									borderCollapse: "collapse",
+									fontSize: "var(--font-size-body-sm)"
+								},
+								children: [/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ f("tr", {
+									style: {
+										backgroundColor: "var(--color-bg-sunken)",
+										borderBottom: "1px solid var(--color-border)"
+									},
+									children: [
+										/* @__PURE__ */ d("th", {
+											style: {
+												padding: "10px 12px",
+												textAlign: "left",
+												fontWeight: "var(--font-weight-medium)",
+												color: "var(--color-text-secondary)",
+												whiteSpace: "nowrap"
+											},
+											children: C("bigconsole.dataSinks.table.name", "Name")
+										}),
+										/* @__PURE__ */ d("th", {
+											style: {
+												padding: "10px 12px",
+												textAlign: "left",
+												fontWeight: "var(--font-weight-medium)",
+												color: "var(--color-text-secondary)",
+												whiteSpace: "nowrap"
+											},
+											children: C("bigconsole.dataSinks.table.key", "Key")
+										}),
+										/* @__PURE__ */ d("th", {
+											style: {
+												padding: "10px 12px",
+												textAlign: "left",
+												fontWeight: "var(--font-weight-medium)",
+												color: "var(--color-text-secondary)",
+												whiteSpace: "nowrap"
+											},
+											children: C("bigconsole.dataSinks.table.status", "Status")
+										}),
+										/* @__PURE__ */ d("th", {
+											style: {
+												padding: "10px 12px",
+												textAlign: "left",
+												fontWeight: "var(--font-weight-medium)",
+												color: "var(--color-text-secondary)",
+												whiteSpace: "nowrap"
+											},
+											children: C("bigconsole.dataSinks.table.setup", "Setup")
+										}),
+										/* @__PURE__ */ d("th", {
+											style: {
+												padding: "10px 12px",
+												textAlign: "center",
+												fontWeight: "var(--font-weight-medium)",
+												color: "var(--color-text-secondary)",
+												whiteSpace: "nowrap"
+											},
+											children: C("bigconsole.dataSinks.table.active", "Active")
+										}),
+										/* @__PURE__ */ d("th", {
+											style: {
+												padding: "10px 12px",
+												textAlign: "left",
+												fontWeight: "var(--font-weight-medium)",
+												color: "var(--color-text-secondary)",
+												whiteSpace: "nowrap"
+											},
+											children: C("bigconsole.dataSinks.table.version", "Version")
+										}),
+										/* @__PURE__ */ d("th", {
+											style: {
+												padding: "10px 12px",
+												textAlign: "left",
+												fontWeight: "var(--font-weight-medium)",
+												color: "var(--color-text-secondary)",
+												whiteSpace: "nowrap"
+											},
+											children: C("bigconsole.dataSinks.table.updated", "Updated")
+										}),
+										/* @__PURE__ */ d("th", {
+											style: {
+												padding: "10px 12px",
+												textAlign: "right",
+												fontWeight: "var(--font-weight-medium)",
+												color: "var(--color-text-secondary)",
+												whiteSpace: "nowrap"
+											},
+											children: C("bigconsole.dataSinks.table.actions", "Actions")
+										})
+									]
+								}) }), /* @__PURE__ */ d("tbody", { children: J.map((e) => {
+									let t = e.dataSink;
+									return /* @__PURE__ */ f("tr", {
+										onClick: () => X(t.id),
+										style: {
+											borderBottom: "1px solid var(--color-border)",
+											cursor: "pointer",
+											transition: "background-color 0.15s"
+										},
+										onMouseEnter: (e) => {
+											e.currentTarget.style.backgroundColor = "var(--color-bg-sunken)";
+										},
+										onMouseLeave: (e) => {
+											e.currentTarget.style.backgroundColor = "transparent";
+										},
+										children: [
+											/* @__PURE__ */ d("td", {
+												style: {
+													padding: "10px 12px",
+													fontWeight: "var(--font-weight-medium)",
+													color: "var(--color-text-primary)",
+													maxWidth: 200,
+													overflow: "hidden",
+													textOverflow: "ellipsis",
+													whiteSpace: "nowrap"
+												},
+												children: t.name || t.key
+											}),
+											/* @__PURE__ */ d("td", {
+												style: {
+													padding: "10px 12px",
+													color: "var(--color-text-muted)",
+													fontFamily: "monospace",
+													fontSize: "12px",
+													maxWidth: 160,
+													overflow: "hidden",
+													textOverflow: "ellipsis",
+													whiteSpace: "nowrap"
+												},
+												children: t.key
+											}),
+											/* @__PURE__ */ d("td", {
+												style: { padding: "10px 12px" },
+												children: /* @__PURE__ */ d(te, { status: t.status })
+											}),
+											/* @__PURE__ */ d("td", {
+												style: { padding: "10px 12px" },
+												children: /* @__PURE__ */ d(oe, { state: e.setupState })
+											}),
+											/* @__PURE__ */ d("td", {
+												style: {
+													padding: "10px 12px",
+													textAlign: "center"
+												},
+												children: /* @__PURE__ */ d("span", {
+													style: {
+														display: "inline-block",
+														width: 8,
+														height: 8,
+														borderRadius: "50%",
+														backgroundColor: t.isActive ? "#22c55e" : "var(--color-text-muted)"
+													},
+													title: t.isActive ? C("bigconsole.dataSinks.badges.active", "Active") : C("bigconsole.dataSinks.badges.inactive", "Inactive")
+												})
+											}),
+											/* @__PURE__ */ f("td", {
+												style: {
+													padding: "10px 12px",
+													color: "var(--color-text-muted)"
+												},
+												children: ["v", t.version ?? 0]
+											}),
+											/* @__PURE__ */ d("td", {
+												style: {
+													padding: "10px 12px",
+													color: "var(--color-text-muted)",
+													whiteSpace: "nowrap"
+												},
+												children: new Date(t.updatedAt).toLocaleDateString()
+											}),
+											/* @__PURE__ */ d("td", {
+												style: {
+													padding: "10px 12px",
+													textAlign: "right"
+												},
+												children: /* @__PURE__ */ f("div", {
+													style: {
+														display: "flex",
+														gap: 4,
+														justifyContent: "flex-end"
+													},
+													onClick: (e) => e.stopPropagation(),
+													children: [
+														/* @__PURE__ */ d("button", {
+															type: "button",
+															title: C("bigconsole.dataSinks.actions.view", "View"),
+															onClick: () => X(t.id),
+															style: {
+																padding: 4,
+																border: "none",
+																background: "none",
+																cursor: "pointer",
+																color: "var(--color-text-muted)",
+																borderRadius: 4
+															},
+															children: /* @__PURE__ */ d(ue, { size: 14 })
+														}),
+														/* @__PURE__ */ d("button", {
+															type: "button",
+															title: C("bigconsole.dataSinks.actions.edit", "Edit"),
+															onClick: () => Z(t.id),
+															style: {
+																padding: 4,
+																border: "none",
+																background: "none",
+																cursor: "pointer",
+																color: "var(--color-text-muted)",
+																borderRadius: 4
+															},
+															children: /* @__PURE__ */ d(pe, { size: 14 })
+														}),
+														/* @__PURE__ */ d("button", {
+															type: "button",
+															title: C("bigconsole.dataSinks.actions.refresh", "Refresh"),
+															onClick: () => Q(t.id),
+															style: {
+																padding: 4,
+																border: "none",
+																background: "none",
+																cursor: "pointer",
+																color: "var(--color-text-muted)",
+																borderRadius: 4
+															},
+															children: /* @__PURE__ */ d(me, { size: 14 })
+														}),
+														/* @__PURE__ */ d("button", {
+															type: "button",
+															title: C("bigconsole.dataSinks.actions.export", "Export"),
+															onClick: () => Me(t.id),
+															style: {
+																padding: 4,
+																border: "none",
+																background: "none",
+																cursor: "pointer",
+																color: "var(--color-text-muted)",
+																borderRadius: 4
+															},
+															children: /* @__PURE__ */ d(le, { size: 14 })
+														}),
+														/* @__PURE__ */ d("button", {
+															type: "button",
+															title: C("bigconsole.dataSinks.actions.delete", "Delete"),
+															onClick: () => $(t.id),
+															style: {
+																padding: 4,
+																border: "none",
+																background: "none",
+																cursor: "pointer",
+																color: "var(--color-text-muted)",
+																borderRadius: 4
+															},
+															children: /* @__PURE__ */ d(_e, { size: 14 })
+														})
+													]
+												})
+											})
+										]
+									}, t.id);
+								}) })]
+							})
+						})
+					})
+				]
+			}),
+			F && /* @__PURE__ */ f(xe, { children: [/* @__PURE__ */ d(re, {
+				dataSink: F,
+				isOpen: Oe,
+				onClose: L,
+				onConfirm: je
+			}), /* @__PURE__ */ d(ie, {
+				dataSink: F,
+				isOpen: ke,
+				onClose: z,
+				onConfirm: Ae
+			})] }),
+			/* @__PURE__ */ d(ae, {
+				isOpen: Ee,
+				onClose: () => E(!1),
+				onSuccess: Pe
+			})
+		]
+	});
+});
+//#endregion
+export { S as DataSinksPage, S as default };
+
+//# sourceMappingURL=DataSinksPage.js.map