@inkindcards/semantic-layer 0.1.3 → 0.2.0

package/dist/components.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkOJVM3RPD_cjs = require('./chunk-OJVM3RPD.cjs');
+var chunkZ5DR3TCI_cjs = require('./chunk-Z5DR3TCI.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -56,7 +56,7 @@ function MetricPicker({
   searchPlaceholder = "Search metrics and dimensions...",
   className
 }) {
-  const { fields, categories, isLoading, error } = chunkOJVM3RPD_cjs.useMetrics();
+  const { fields, categories, isLoading, error } = chunkZ5DR3TCI_cjs.useMetrics();
   const [search, setSearch] = react.useState("");
   const filtered = react.useMemo(() => {
     let result = fields;
@@ -191,7 +191,632 @@ function ResultsTable({
     ] })
   ] });
 }
+var rootStyle = {
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  maxWidth: 960,
+  margin: "0 auto",
+  padding: 24
+};
+var headingStyle = {
+  fontSize: 24,
+  fontWeight: 700,
+  color: "#111827",
+  margin: "0 0 4px"
+};
+var subStyle = {
+  fontSize: 14,
+  color: "#6b7280",
+  margin: "0 0 20px"
+};
+var searchBarStyle = {
+  display: "flex",
+  gap: 8,
+  marginBottom: 20
+};
+var searchInput = {
+  flex: 1,
+  padding: "10px 14px",
+  fontSize: 14,
+  border: "1px solid #d1d5db",
+  borderRadius: 8,
+  outline: "none",
+  boxSizing: "border-box"
+};
+var filterBtn = (active) => ({
+  padding: "8px 14px",
+  fontSize: 13,
+  fontWeight: 500,
+  borderRadius: 6,
+  border: "1px solid " + (active ? "#3b82f6" : "#d1d5db"),
+  backgroundColor: active ? "#eff6ff" : "#fff",
+  color: active ? "#1d4ed8" : "#374151",
+  cursor: "pointer"
+});
+var categoryStyle = {
+  marginBottom: 24
+};
+var categoryHeader = {
+  fontSize: 13,
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: "#6b7280",
+  marginBottom: 8,
+  paddingBottom: 6,
+  borderBottom: "1px solid #e5e7eb"
+};
+var fieldCard = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "flex-start",
+  padding: "10px 12px",
+  borderRadius: 6,
+  marginBottom: 4,
+  backgroundColor: "#fafafa",
+  border: "1px solid #f3f4f6"
+};
+var fieldNameStyle = {
+  fontSize: 15,
+  fontWeight: 600,
+  color: "#111827"
+};
+var fieldDescStyle = {
+  fontSize: 13,
+  color: "#6b7280",
+  marginTop: 2
+};
+var codeName = {
+  fontSize: 12,
+  color: "#6366f1",
+  fontFamily: "monospace",
+  marginTop: 2
+};
+var badgeStyle = (type) => ({
+  display: "inline-block",
+  padding: "2px 8px",
+  fontSize: 11,
+  fontWeight: 600,
+  borderRadius: 9999,
+  whiteSpace: "nowrap",
+  backgroundColor: type === "metric" ? "#eff6ff" : type === "time_dimension" ? "#f0fdf4" : "#f3f4f6",
+  color: type === "metric" ? "#1d4ed8" : type === "time_dimension" ? "#15803d" : "#6b7280"
+});
+var copyBtn = {
+  padding: "4px 8px",
+  fontSize: 11,
+  fontWeight: 500,
+  color: "#6366f1",
+  backgroundColor: "#eef2ff",
+  border: "1px solid #c7d2fe",
+  borderRadius: 4,
+  cursor: "pointer",
+  whiteSpace: "nowrap"
+};
+var statsBar = {
+  display: "flex",
+  gap: 16,
+  marginBottom: 16,
+  fontSize: 14
+};
+var statItem = {
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+  color: "#6b7280"
+};
+var statNum = { fontWeight: 700, color: "#111827" };
+var emptyStyle = {
+  padding: 40,
+  textAlign: "center",
+  color: "#9ca3af",
+  fontSize: 14
+};
+function DataCatalog({ className, showCopyButton = true, fieldTypes }) {
+  const { fields, metrics, dimensions, isLoading, error } = chunkZ5DR3TCI_cjs.useMetrics();
+  const [search, setSearch] = react.useState("");
+  const [typeFilter, setTypeFilter] = react.useState("all");
+  const [copiedField, setCopiedField] = react.useState(null);
+  const filtered = react.useMemo(() => {
+    let result = fields;
+    if (fieldTypes) result = result.filter((f) => fieldTypes.includes(f.type));
+    if (typeFilter !== "all") result = result.filter((f) => f.type === typeFilter);
+    if (search) {
+      const q = search.toLowerCase();
+      result = result.filter(
+        (f) => f.displayName.toLowerCase().includes(q) || f.name.toLowerCase().includes(q) || f.description.toLowerCase().includes(q) || f.category.toLowerCase().includes(q)
+      );
+    }
+    return result;
+  }, [fields, fieldTypes, typeFilter, search]);
+  const grouped = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const f of filtered) {
+      const list = map.get(f.category) || [];
+      list.push(f);
+      map.set(f.category, list);
+    }
+    return map;
+  }, [filtered]);
+  const handleCopy = react.useCallback(async (name) => {
+    try {
+      await navigator.clipboard.writeText(name);
+      setCopiedField(name);
+      setTimeout(() => setCopiedField(null), 1500);
+    } catch {
+    }
+  }, []);
+  if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...rootStyle, ...emptyStyle }, children: "Loading data catalog..." });
+  if (error) return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...rootStyle, padding: 24, color: "#ef4444" }, children: error });
+  const timeDims = fields.filter((f) => f.type === "time_dimension");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rootStyle, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { style: headingStyle, children: "Data Catalog" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: subStyle, children: "Browse available metrics and dimensions from the semantic layer" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: statsBar, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: statItem, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: statNum, children: metrics.length }),
+        " metrics"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: statItem, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: statNum, children: dimensions.length - timeDims.length }),
+        " dimensions"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: statItem, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: statNum, children: timeDims.length }),
+        " time dimensions"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: searchBarStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          style: searchInput,
+          placeholder: "Search by name, description, or category...",
+          value: search,
+          onChange: (e) => setSearch(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { style: filterBtn(typeFilter === "all"), onClick: () => setTypeFilter("all"), children: "All" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { style: filterBtn(typeFilter === "metric"), onClick: () => setTypeFilter("metric"), children: "Metrics" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { style: filterBtn(typeFilter === "dimension"), onClick: () => setTypeFilter("dimension"), children: "Dimensions" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { style: filterBtn(typeFilter === "time_dimension"), onClick: () => setTypeFilter("time_dimension"), children: "Time" })
+    ] }),
+    Array.from(grouped.entries()).map(([category, categoryFields]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: categoryStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: categoryHeader, children: [
+        category,
+        " (",
+        categoryFields.length,
+        ")"
+      ] }),
+      categoryFields.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldCard, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: fieldNameStyle, children: f.displayName }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeStyle(f.type), children: f.type })
+          ] }),
+          f.description && /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldDescStyle, children: f.description }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: codeName, children: f.name })
+        ] }),
+        showCopyButton && /* @__PURE__ */ jsxRuntime.jsx("button", { style: copyBtn, onClick: () => handleCopy(f.name), children: copiedField === f.name ? "Copied!" : "Copy name" })
+      ] }, f.id))
+    ] }, category)),
+    grouped.size === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: emptyStyle, children: search ? "No fields match your search." : "No data available. The gateway may not be configured yet." })
+  ] });
+}
+var rootStyle2 = {
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  maxWidth: 960,
+  margin: "0 auto",
+  padding: 24
+};
+var headingStyle2 = {
+  fontSize: 24,
+  fontWeight: 700,
+  color: "#111827",
+  margin: "0 0 4px"
+};
+var subStyle2 = {
+  fontSize: 14,
+  color: "#6b7280",
+  margin: "0 0 20px"
+};
+var tabBarStyle = {
+  display: "flex",
+  gap: 0,
+  borderBottom: "1px solid #e5e7eb",
+  marginBottom: 24
+};
+var tabBase = {
+  padding: "10px 20px",
+  fontSize: 14,
+  fontWeight: 500,
+  cursor: "pointer",
+  background: "none",
+  border: "none",
+  borderBottom: "2px solid transparent",
+  color: "#6b7280"
+};
+var tabActive = {
+  ...tabBase,
+  color: "#111827",
+  borderBottomColor: "#3b82f6"
+};
+var tableStyle2 = {
+  width: "100%",
+  borderCollapse: "collapse",
+  fontSize: 14
+};
+var thStyle2 = {
+  padding: "10px 12px",
+  textAlign: "left",
+  fontWeight: 600,
+  fontSize: 12,
+  color: "#6b7280",
+  backgroundColor: "#f9fafb",
+  borderBottom: "1px solid #e5e7eb"
+};
+var tdStyle2 = {
+  padding: "8px 12px",
+  borderBottom: "1px solid #f3f4f6",
+  color: "#111827"
+};
+var btnPrimary = {
+  padding: "8px 16px",
+  fontSize: 14,
+  fontWeight: 500,
+  color: "#fff",
+  backgroundColor: "#3b82f6",
+  border: "none",
+  borderRadius: 6,
+  cursor: "pointer"
+};
+var btnDanger = {
+  ...btnPrimary,
+  backgroundColor: "#ef4444"
+};
+var btnSecondary = {
+  ...btnPrimary,
+  backgroundColor: "#fff",
+  color: "#374151",
+  border: "1px solid #d1d5db"
+};
+var inputStyle = {
+  padding: "6px 10px",
+  fontSize: 14,
+  border: "1px solid #d1d5db",
+  borderRadius: 6,
+  width: "100%",
+  boxSizing: "border-box"
+};
+var selectStyle = { ...inputStyle, width: "auto" };
+var cardStyle = {
+  border: "1px solid #e5e7eb",
+  borderRadius: 8,
+  padding: 16,
+  marginBottom: 16,
+  backgroundColor: "#fff"
+};
+var errorBanner = {
+  padding: "10px 14px",
+  backgroundColor: "#fef2f2",
+  color: "#b91c1c",
+  borderRadius: 6,
+  fontSize: 14,
+  marginBottom: 16
+};
+var badgeStyle2 = {
+  display: "inline-block",
+  padding: "2px 8px",
+  fontSize: 11,
+  fontWeight: 600,
+  borderRadius: 9999,
+  backgroundColor: "#eff6ff",
+  color: "#1d4ed8"
+};
+var badgeGreen = { ...badgeStyle2, backgroundColor: "#f0fdf4", color: "#15803d" };
+var badgeGray = { ...badgeStyle2, backgroundColor: "#f3f4f6", color: "#6b7280" };
+var checkboxStyle = { width: 16, height: 16, cursor: "pointer" };
+var emptyStyle2 = {
+  padding: 24,
+  textAlign: "center",
+  color: "#9ca3af",
+  fontSize: 14
+};
+function FieldsTab() {
+  const { fields, isLoading, error, createField, updateField, deleteField } = chunkZ5DR3TCI_cjs.useAdminFields();
+  const [showAdd, setShowAdd] = react.useState(false);
+  const [newName, setNewName] = react.useState("");
+  const [newType, setNewType] = react.useState("metric");
+  const [newDisplay, setNewDisplay] = react.useState("");
+  const [newDesc, setNewDesc] = react.useState("");
+  const [actionError, setActionError] = react.useState(null);
+  const handleAdd = react.useCallback(async () => {
+    if (!newName.trim()) return;
+    setActionError(null);
+    try {
+      await createField({
+        field_name: newName.trim(),
+        field_type: newType,
+        display_name: newDisplay.trim() || void 0,
+        description: newDesc.trim() || void 0
+      });
+      setNewName("");
+      setNewDisplay("");
+      setNewDesc("");
+      setShowAdd(false);
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to create field");
+    }
+  }, [newName, newType, newDisplay, newDesc, createField]);
+  const handleToggle = react.useCallback(async (f) => {
+    try {
+      await updateField({ id: f.id, is_active: !f.is_active });
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to update");
+    }
+  }, [updateField]);
+  const handleDelete = react.useCallback(async (id) => {
+    if (!confirm("Delete this field? This also removes it from all roles.")) return;
+    try {
+      await deleteField(id);
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to delete");
+    }
+  }, [deleteField]);
+  if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx("div", { style: emptyStyle2, children: "Loading fields..." });
+  if (error) return /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBanner, children: error });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    actionError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBanner, children: actionError }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 14, color: "#6b7280" }, children: [
+        fields.length,
+        " curated field",
+        fields.length !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { style: btnPrimary, onClick: () => setShowAdd(!showAdd), children: showAdd ? "Cancel" : "+ Add field" })
+    ] }),
+    showAdd && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 8, marginBottom: 8 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { style: inputStyle, placeholder: "field_name (from dbt)", value: newName, onChange: (e) => setNewName(e.target.value) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("select", { style: selectStyle, value: newType, onChange: (e) => setNewType(e.target.value), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "metric", children: "metric" }),
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "dimension", children: "dimension" }),
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "time_dimension", children: "time_dimension" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { style: inputStyle, placeholder: "Display name (optional)", value: newDisplay, onChange: (e) => setNewDisplay(e.target.value) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { style: { ...inputStyle, flex: 1 }, placeholder: "Description (optional)", value: newDesc, onChange: (e) => setNewDesc(e.target.value), onKeyDown: (e) => e.key === "Enter" && handleAdd() }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { style: btnPrimary, onClick: handleAdd, children: "Save" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { style: tableStyle2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { style: thStyle2, children: "Field Name" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { style: thStyle2, children: "Type" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { style: thStyle2, children: "Display Name" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { style: thStyle2, children: "Active" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { style: { ...thStyle2, textAlign: "right" }, children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+        fields.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("td", { style: tdStyle2, children: /* @__PURE__ */ jsxRuntime.jsx("code", { style: { fontSize: 13 }, children: f.field_name }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { style: tdStyle2, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: f.field_type === "metric" ? badgeStyle2 : f.field_type === "time_dimension" ? badgeGreen : badgeGray, children: f.field_type }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { style: tdStyle2, children: f.display_name || /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#9ca3af" }, children: "\u2014" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { style: tdStyle2, children: /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: f.is_active, onChange: () => handleToggle(f), style: checkboxStyle }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { style: { ...tdStyle2, textAlign: "right" }, children: /* @__PURE__ */ jsxRuntime.jsx("button", { style: { ...btnDanger, padding: "4px 10px", fontSize: 12 }, onClick: () => handleDelete(f.id), children: "Delete" }) })
+        ] }, f.id)),
+        fields.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 5, style: emptyStyle2, children: "No curated fields yet. Add fields to start restricting access." }) })
+      ] })
+    ] })
+  ] });
+}
+function RolesTab() {
+  const { roles, isLoading, error, createRole, deleteRole, setRoleFields } = chunkZ5DR3TCI_cjs.useAdminRoles();
+  const { fields } = chunkZ5DR3TCI_cjs.useAdminFields();
+  const [showAdd, setShowAdd] = react.useState(false);
+  const [newName, setNewName] = react.useState("");
+  const [newDesc, setNewDesc] = react.useState("");
+  const [editingRole, setEditingRole] = react.useState(null);
+  const [actionError, setActionError] = react.useState(null);
+  const handleAdd = react.useCallback(async () => {
+    if (!newName.trim()) return;
+    setActionError(null);
+    try {
+      await createRole({ name: newName.trim(), description: newDesc.trim() || void 0 });
+      setNewName("");
+      setNewDesc("");
+      setShowAdd(false);
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to create role");
+    }
+  }, [newName, newDesc, createRole]);
+  const handleDelete = react.useCallback(async (id) => {
+    if (!confirm("Delete this role? Users assigned to it will lose this role's access.")) return;
+    try {
+      await deleteRole(id);
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to delete");
+    }
+  }, [deleteRole]);
+  const getFieldIds = (role) => new Set((role.role_field_access || []).map((rfa) => rfa.curated_field_id));
+  const handleToggleField = react.useCallback(async (role, fieldId) => {
+    const current = getFieldIds(role);
+    if (current.has(fieldId)) current.delete(fieldId);
+    else current.add(fieldId);
+    setActionError(null);
+    try {
+      await setRoleFields(role.id, Array.from(current));
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to update");
+    }
+  }, [setRoleFields]);
+  if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx("div", { style: emptyStyle2, children: "Loading roles..." });
+  if (error) return /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBanner, children: error });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    actionError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBanner, children: actionError }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 14, color: "#6b7280" }, children: [
+        roles.length,
+        " role",
+        roles.length !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { style: btnPrimary, onClick: () => setShowAdd(!showAdd), children: showAdd ? "Cancel" : "+ Add role" })
+    ] }),
+    showAdd && /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { style: { ...inputStyle, flex: 1 }, placeholder: "Role name", value: newName, onChange: (e) => setNewName(e.target.value) }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { style: { ...inputStyle, flex: 2 }, placeholder: "Description (optional)", value: newDesc, onChange: (e) => setNewDesc(e.target.value), onKeyDown: (e) => e.key === "Enter" && handleAdd() }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { style: btnPrimary, onClick: handleAdd, children: "Save" })
+    ] }) }),
+    roles.map((role) => {
+      const assignedIds = getFieldIds(role);
+      const isEditing = editingRole === role.id;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: isEditing ? 12 : 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { fontSize: 16 }, children: role.name }),
+            role.is_default && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...badgeGreen, marginLeft: 8 }, children: "default" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { ...badgeGray, marginLeft: 8 }, children: [
+              assignedIds.size,
+              " field",
+              assignedIds.size !== 1 ? "s" : ""
+            ] }),
+            role.description && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, color: "#6b7280", marginTop: 2 }, children: role.description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { style: btnSecondary, onClick: () => setEditingRole(isEditing ? null : role.id), children: isEditing ? "Done" : "Edit fields" }),
+            !role.is_default && /* @__PURE__ */ jsxRuntime.jsx("button", { style: { ...btnDanger, padding: "6px 12px", fontSize: 12 }, onClick: () => handleDelete(role.id), children: "Delete" })
+          ] })
+        ] }),
+        isEditing && fields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: 4 }, children: fields.filter((f) => f.is_active).map((f) => /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, padding: "4px 0", fontSize: 13, cursor: "pointer" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: assignedIds.has(f.id), onChange: () => handleToggleField(role, f.id), style: checkboxStyle }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: f.display_name || f.field_name }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: f.field_type === "metric" ? badgeStyle2 : badgeGray, children: f.field_type })
+        ] }, f.id)) }),
+        isEditing && fields.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: emptyStyle2, children: "No curated fields defined yet. Add fields in the Fields tab first." })
+      ] }, role.id);
+    }),
+    roles.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: emptyStyle2, children: "No roles defined." })
+  ] });
+}
+function UsersTab() {
+  const { users, isLoading, error, assignUserRole, removeUserRole } = chunkZ5DR3TCI_cjs.useAdminUsers();
+  const { roles } = chunkZ5DR3TCI_cjs.useAdminRoles();
+  const [showAdd, setShowAdd] = react.useState(false);
+  const [newUserId, setNewUserId] = react.useState("");
+  const [newEmail, setNewEmail] = react.useState("");
+  const [newRoleId, setNewRoleId] = react.useState(0);
+  const [newIsAdmin, setNewIsAdmin] = react.useState(false);
+  const [actionError, setActionError] = react.useState(null);
+  const handleAdd = react.useCallback(async () => {
+    if (!newUserId.trim() || !newEmail.trim() || !newRoleId) return;
+    setActionError(null);
+    try {
+      await assignUserRole({ user_id: newUserId.trim(), email: newEmail.trim(), role_id: newRoleId, is_admin: newIsAdmin });
+      setNewUserId("");
+      setNewEmail("");
+      setNewIsAdmin(false);
+      setShowAdd(false);
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to assign role");
+    }
+  }, [newUserId, newEmail, newRoleId, newIsAdmin, assignUserRole]);
+  const handleRemove = react.useCallback(async (u) => {
+    if (!confirm(`Remove ${u.email} from this role?`)) return;
+    try {
+      await removeUserRole({ user_id: u.user_id, role_id: u.role_id });
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to remove");
+    }
+  }, [removeUserRole]);
+  const grouped = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const u of users) {
+      const list = map.get(u.email) || [];
+      list.push(u);
+      map.set(u.email, list);
+    }
+    return map;
+  }, [users]);
+  if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx("div", { style: emptyStyle2, children: "Loading users..." });
+  if (error) return /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBanner, children: error });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    actionError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBanner, children: actionError }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 14, color: "#6b7280" }, children: [
+        grouped.size,
+        " user",
+        grouped.size !== 1 ? "s" : "",
+        " with role assignments"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { style: btnPrimary, onClick: () => setShowAdd(!showAdd), children: showAdd ? "Cancel" : "+ Assign user" })
+    ] }),
+    showAdd && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr auto", gap: 8, marginBottom: 8 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { style: inputStyle, placeholder: "User UUID (from Supabase Auth)", value: newUserId, onChange: (e) => setNewUserId(e.target.value) }),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { style: inputStyle, placeholder: "Email", value: newEmail, onChange: (e) => setNewEmail(e.target.value) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("select", { style: selectStyle, value: newRoleId, onChange: (e) => setNewRoleId(Number(e.target.value)), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: 0, children: "Select role..." }),
+          roles.map((r) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: r.id, children: r.name }, r.id))
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, cursor: "pointer" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: newIsAdmin, onChange: (e) => setNewIsAdmin(e.target.checked), style: checkboxStyle }),
+          "Admin access"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { style: btnPrimary, onClick: handleAdd, children: "Assign" })
+      ] })
+    ] }),
+    Array.from(grouped.entries()).map(([email, assignments]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { fontSize: 14 }, children: email }),
+          assignments.some((a) => a.is_admin) && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...badgeGreen, marginLeft: 8 }, children: "admin" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 12, color: "#9ca3af", fontFamily: "monospace" }, children: [
+          assignments[0].user_id.slice(0, 8),
+          "..."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 6, marginTop: 8, flexWrap: "wrap" }, children: assignments.map((a) => /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 4, ...badgeStyle2 }, children: [
+        a.access_roles?.name || `role #${a.role_id}`,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleRemove(a),
+            style: { background: "none", border: "none", cursor: "pointer", color: "#6b7280", fontSize: 14, padding: 0, lineHeight: 1 },
+            title: "Remove role",
+            children: "\xD7"
+          }
+        )
+      ] }, a.id)) })
+    ] }, email)),
+    grouped.size === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: emptyStyle2, children: "No user role assignments yet. Users without an explicit role get the default role's access." })
+  ] });
+}
+function AdminDashboard({ className }) {
+  const { isAuthenticated, isLoading: authLoading } = chunkZ5DR3TCI_cjs.useAuth();
+  const [tab, setTab] = react.useState("fields");
+  const [initError, setInitError] = react.useState(null);
+  if (authLoading) return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...rootStyle2, ...emptyStyle2 }, children: "Loading..." });
+  if (!isAuthenticated) return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...rootStyle2, ...emptyStyle2 }, children: "Sign in to access the admin dashboard." });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rootStyle2, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { style: headingStyle2, children: "Semantic Layer Admin" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: subStyle2, children: "Manage curated fields, roles, and user access" }),
+    initError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBanner, children: initError }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: tabBarStyle, children: ["fields", "roles", "users"].map((t) => /* @__PURE__ */ jsxRuntime.jsx("button", { style: tab === t ? tabActive : tabBase, onClick: () => {
+      setTab(t);
+      setInitError(null);
+    }, children: t.charAt(0).toUpperCase() + t.slice(1) }, t)) }),
+    tab === "fields" && /* @__PURE__ */ jsxRuntime.jsx(FieldsTab, {}),
+    tab === "roles" && /* @__PURE__ */ jsxRuntime.jsx(RolesTab, {}),
+    tab === "users" && /* @__PURE__ */ jsxRuntime.jsx(UsersTab, {})
+  ] });
+}
 
+exports.AdminDashboard = AdminDashboard;
+exports.DataCatalog = DataCatalog;
 exports.MetricPicker = MetricPicker;
 exports.ResultsTable = ResultsTable;
 //# sourceMappingURL=components.cjs.map