@contractspec/example.analytics-dashboard 1.57.0 → 1.59.0

package/dist/ui/AnalyticsDashboard.js

@@ -1,265 +1,395 @@
-'use client';
-
-import { useAnalyticsData } from "./hooks/useAnalyticsData.js";
-import { useState } from "react";
-import { Button, ErrorState, LoaderBlock, StatCard, StatCardGroup } from "@contractspec/lib.design-system";
-import { jsx, jsxs } from "react/jsx-runtime";
+// @bun
+// src/ui/hooks/useAnalyticsData.ts
+import { useCallback, useEffect, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+"use client";
+function useAnalyticsData(projectId = "local-project") {
+  const { handlers } = useTemplateRuntime();
+  const analytics = handlers.analytics;
+  const [dashboards, setDashboards] = useState([]);
+  const [queries, setQueries] = useState([]);
+  const [selectedDashboard, setSelectedDashboard] = useState(null);
+  const [widgets, setWidgets] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const [dashResult, queryResult] = await Promise.all([
+        analytics.listDashboards({ projectId, limit: 100 }),
+        analytics.listQueries({ projectId, limit: 100 })
+      ]);
+      setDashboards(dashResult.dashboards);
+      setQueries(queryResult.queries);
+      if (dashResult.dashboards.length > 0 && !selectedDashboard) {
+        const first = dashResult.dashboards[0];
+        if (first) {
+          setSelectedDashboard(first);
+          const dashboardWidgets = await analytics.getWidgets(first.id);
+          setWidgets(dashboardWidgets);
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to load analytics"));
+    } finally {
+      setLoading(false);
+    }
+  }, [analytics, projectId, selectedDashboard]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  const selectDashboard = useCallback(async (dashboard) => {
+    setSelectedDashboard(dashboard);
+    const dashboardWidgets = await analytics.getWidgets(dashboard.id);
+    setWidgets(dashboardWidgets);
+  }, [analytics]);
+  const stats = {
+    totalDashboards: dashboards.length,
+    publishedDashboards: dashboards.filter((d) => d.status === "PUBLISHED").length,
+    totalQueries: queries.length,
+    sharedQueries: queries.filter((q) => q.isShared).length
+  };
+  return {
+    dashboards,
+    queries,
+    selectedDashboard,
+    widgets,
+    loading,
+    error,
+    stats,
+    refetch: fetchData,
+    selectDashboard
+  };
+}
 
-//#region src/ui/AnalyticsDashboard.tsx
-/**
-* Analytics Dashboard
-*
-* Interactive dashboard for the analytics-dashboard template.
-* Displays dashboards, widgets, and queries.
-*/
-const STATUS_COLORS = {
-	PUBLISHED: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
-	DRAFT: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",
-	ARCHIVED: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
+// src/ui/AnalyticsDashboard.tsx
+import { useState as useState2 } from "react";
+import {
+  Button,
+  ErrorState,
+  LoaderBlock,
+  StatCard,
+  StatCardGroup
+} from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var STATUS_COLORS = {
+  PUBLISHED: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+  DRAFT: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",
+  ARCHIVED: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
 };
-const WIDGET_ICONS = {
-	LINE_CHART: "📈",
-	BAR_CHART: "📊",
-	PIE_CHART: "🥧",
-	AREA_CHART: "📉",
-	SCATTER_PLOT: "⚬",
-	METRIC: "🔢",
-	TABLE: "📋",
-	HEATMAP: "🗺️",
-	FUNNEL: "⏬",
-	MAP: "🌍",
-	TEXT: "📝",
-	EMBED: "🔗"
+var WIDGET_ICONS = {
+  LINE_CHART: "\uD83D\uDCC8",
+  BAR_CHART: "\uD83D\uDCCA",
+  PIE_CHART: "\uD83E\uDD67",
+  AREA_CHART: "\uD83D\uDCC9",
+  SCATTER_PLOT: "\u26AC",
+  METRIC: "\uD83D\uDD22",
+  TABLE: "\uD83D\uDCCB",
+  HEATMAP: "\uD83D\uDDFA\uFE0F",
+  FUNNEL: "\u23EC",
+  MAP: "\uD83C\uDF0D",
+  TEXT: "\uD83D\uDCDD",
+  EMBED: "\uD83D\uDD17"
 };
-const QUERY_TYPE_COLORS = {
-	SQL: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
-	METRIC: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
-	AGGREGATION: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
-	CUSTOM: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
+var QUERY_TYPE_COLORS = {
+  SQL: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+  METRIC: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
+  AGGREGATION: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
+  CUSTOM: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
 };
 function AnalyticsDashboard() {
-	const [activeTab, setActiveTab] = useState("dashboards");
-	const { dashboards, queries, selectedDashboard, widgets, loading, error, stats, refetch, selectDashboard } = useAnalyticsData();
-	const tabs = [{
-		id: "dashboards",
-		label: "Dashboards",
-		icon: "📊"
-	}, {
-		id: "queries",
-		label: "Queries",
-		icon: "🔍"
-	}];
-	if (loading) return /* @__PURE__ */ jsx(LoaderBlock, { label: "Loading Analytics..." });
-	if (error) return /* @__PURE__ */ jsx(ErrorState, {
-		title: "Failed to load Analytics",
-		description: error.message,
-		onRetry: refetch,
-		retryLabel: "Retry"
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-6",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-2xl font-bold",
-					children: "Analytics Dashboard"
-				}), /* @__PURE__ */ jsxs(Button, {
-					onClick: () => alert("Create dashboard modal"),
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "mr-2",
-						children: "+"
-					}), " New Dashboard"]
-				})]
-			}),
-			/* @__PURE__ */ jsxs(StatCardGroup, { children: [
-				/* @__PURE__ */ jsx(StatCard, {
-					label: "Dashboards",
-					value: stats.totalDashboards,
-					hint: `${stats.publishedDashboards} published`
-				}),
-				/* @__PURE__ */ jsx(StatCard, {
-					label: "Queries",
-					value: stats.totalQueries,
-					hint: `${stats.sharedQueries} shared`
-				}),
-				/* @__PURE__ */ jsx(StatCard, {
-					label: "Widgets",
-					value: widgets.length,
-					hint: "on current dashboard"
-				})
-			] }),
-			/* @__PURE__ */ jsx("nav", {
-				className: "bg-muted flex gap-1 rounded-lg p-1",
-				role: "tablist",
-				children: tabs.map((tab) => /* @__PURE__ */ jsxs(Button, {
-					type: "button",
-					role: "tab",
-					"aria-selected": activeTab === tab.id,
-					onClick: () => setActiveTab(tab.id),
-					className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
-					children: [/* @__PURE__ */ jsx("span", { children: tab.icon }), tab.label]
-				}, tab.id))
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "min-h-[400px]",
-				role: "tabpanel",
-				children: [activeTab === "dashboards" && /* @__PURE__ */ jsxs("div", {
-					className: "space-y-6",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
-						children: [dashboards.map((dashboard) => /* @__PURE__ */ jsxs("div", {
-							onClick: () => selectDashboard(dashboard),
-							className: `border-border bg-card cursor-pointer rounded-lg border p-4 transition-all ${selectedDashboard?.id === dashboard.id ? "ring-primary ring-2" : "hover:bg-muted/50"}`,
-							role: "button",
-							tabIndex: 0,
-							onKeyDown: (e) => {
-								if (e.key === "Enter" || e.key === " ") selectDashboard(dashboard);
-							},
-							children: [
-								/* @__PURE__ */ jsxs("div", {
-									className: "mb-2 flex items-center justify-between",
-									children: [/* @__PURE__ */ jsx("h3", {
-										className: "font-medium",
-										children: dashboard.name
-									}), /* @__PURE__ */ jsx("span", {
-										className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[dashboard.status] ?? ""}`,
-										children: dashboard.status
-									})]
-								}),
-								/* @__PURE__ */ jsx("p", {
-									className: "text-muted-foreground mb-3 text-sm",
-									children: dashboard.description
-								}),
-								/* @__PURE__ */ jsxs("div", {
-									className: "text-muted-foreground flex items-center justify-between text-xs",
-									children: [/* @__PURE__ */ jsxs("span", { children: ["/", dashboard.slug] }), dashboard.isPublic && /* @__PURE__ */ jsx("span", {
-										className: "text-green-600 dark:text-green-400",
-										children: "🌐 Public"
-									})]
-								})
-							]
-						}, dashboard.id)), dashboards.length === 0 && /* @__PURE__ */ jsx("div", {
-							className: "text-muted-foreground col-span-full flex h-64 items-center justify-center",
-							children: "No dashboards created yet"
-						})]
-					}), selectedDashboard && widgets.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h3", {
-						className: "mb-4 text-lg font-semibold",
-						children: [
-							"Widgets in \"",
-							selectedDashboard.name,
-							"\""
-						]
-					}), /* @__PURE__ */ jsx("div", {
-						className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
-						children: widgets.map((widget) => /* @__PURE__ */ jsxs("div", {
-							className: "border-border bg-card rounded-lg border p-4",
-							children: [
-								/* @__PURE__ */ jsxs("div", {
-									className: "mb-2 flex items-center gap-2",
-									children: [/* @__PURE__ */ jsx("span", {
-										className: "text-xl",
-										children: WIDGET_ICONS[widget.type] ?? "📊"
-									}), /* @__PURE__ */ jsx("span", {
-										className: "font-medium",
-										children: widget.name
-									})]
-								}),
-								/* @__PURE__ */ jsx("div", {
-									className: "text-muted-foreground text-sm",
-									children: widget.type.replace(/_/g, " ")
-								}),
-								/* @__PURE__ */ jsxs("div", {
-									className: "text-muted-foreground mt-2 text-xs",
-									children: [
-										"Position: (",
-										widget.gridX,
-										", ",
-										widget.gridY,
-										") •",
-										" ",
-										widget.gridWidth,
-										"x",
-										widget.gridHeight
-									]
-								})
-							]
-						}, widget.id))
-					})] })]
-				}), activeTab === "queries" && /* @__PURE__ */ jsx("div", {
-					className: "border-border rounded-lg border",
-					children: /* @__PURE__ */ jsxs("table", {
-						className: "w-full",
-						children: [/* @__PURE__ */ jsx("thead", {
-							className: "border-border bg-muted/30 border-b",
-							children: /* @__PURE__ */ jsxs("tr", { children: [
-								/* @__PURE__ */ jsx("th", {
-									className: "px-4 py-3 text-left text-sm font-medium",
-									children: "Query"
-								}),
-								/* @__PURE__ */ jsx("th", {
-									className: "px-4 py-3 text-left text-sm font-medium",
-									children: "Type"
-								}),
-								/* @__PURE__ */ jsx("th", {
-									className: "px-4 py-3 text-left text-sm font-medium",
-									children: "Cache TTL"
-								}),
-								/* @__PURE__ */ jsx("th", {
-									className: "px-4 py-3 text-left text-sm font-medium",
-									children: "Shared"
-								})
-							] })
-						}), /* @__PURE__ */ jsxs("tbody", {
-							className: "divide-border divide-y",
-							children: [queries.map((query) => /* @__PURE__ */ jsxs("tr", {
-								className: "hover:bg-muted/50",
-								children: [
-									/* @__PURE__ */ jsxs("td", {
-										className: "px-4 py-3",
-										children: [/* @__PURE__ */ jsx("div", {
-											className: "font-medium",
-											children: query.name
-										}), /* @__PURE__ */ jsx("div", {
-											className: "text-muted-foreground text-sm",
-											children: query.description
-										})]
-									}),
-									/* @__PURE__ */ jsx("td", {
-										className: "px-4 py-3",
-										children: /* @__PURE__ */ jsx("span", {
-											className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${QUERY_TYPE_COLORS[query.type] ?? ""}`,
-											children: query.type
-										})
-									}),
-									/* @__PURE__ */ jsxs("td", {
-										className: "text-muted-foreground px-4 py-3 text-sm",
-										children: [query.cacheTtlSeconds, "s"]
-									}),
-									/* @__PURE__ */ jsx("td", {
-										className: "px-4 py-3",
-										children: query.isShared ? /* @__PURE__ */ jsx("span", {
-											className: "text-green-600 dark:text-green-400",
-											children: "✓"
-										}) : /* @__PURE__ */ jsx("span", {
-											className: "text-muted-foreground",
-											children: "—"
-										})
-									})
-								]
-							}, query.id)), queries.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-								colSpan: 4,
-								className: "text-muted-foreground px-4 py-8 text-center",
-								children: "No queries saved"
-							}) })]
-						})]
-					})
-				})]
-			})
-		]
-	});
+  const [activeTab, setActiveTab] = useState2("dashboards");
+  const {
+    dashboards,
+    queries,
+    selectedDashboard,
+    widgets,
+    loading,
+    error,
+    stats,
+    refetch,
+    selectDashboard
+  } = useAnalyticsData();
+  const tabs = [
+    { id: "dashboards", label: "Dashboards", icon: "\uD83D\uDCCA" },
+    { id: "queries", label: "Queries", icon: "\uD83D\uDD0D" }
+  ];
+  if (loading) {
+    return /* @__PURE__ */ jsxDEV(LoaderBlock, {
+      label: "Loading Analytics..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV(ErrorState, {
+      title: "Failed to load Analytics",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Analytics Dashboard"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(Button, {
+            onClick: () => alert("Create dashboard modal"),
+            children: [
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "mr-2",
+                children: "+"
+              }, undefined, false, undefined, this),
+              " New Dashboard"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(StatCardGroup, {
+        children: [
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Dashboards",
+            value: stats.totalDashboards,
+            hint: `${stats.publishedDashboards} published`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Queries",
+            value: stats.totalQueries,
+            hint: `${stats.sharedQueries} shared`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Widgets",
+            value: widgets.length,
+            hint: "on current dashboard"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("nav", {
+        className: "bg-muted flex gap-1 rounded-lg p-1",
+        role: "tablist",
+        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV(Button, {
+          type: "button",
+          role: "tab",
+          "aria-selected": activeTab === tab.id,
+          onClick: () => setActiveTab(tab.id),
+          className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+          children: [
+            /* @__PURE__ */ jsxDEV("span", {
+              children: tab.icon
+            }, undefined, false, undefined, this),
+            tab.label
+          ]
+        }, tab.id, true, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "min-h-[400px]",
+        role: "tabpanel",
+        children: [
+          activeTab === "dashboards" && /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-6",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+                children: [
+                  dashboards.map((dashboard) => /* @__PURE__ */ jsxDEV("div", {
+                    onClick: () => selectDashboard(dashboard),
+                    className: `border-border bg-card cursor-pointer rounded-lg border p-4 transition-all ${selectedDashboard?.id === dashboard.id ? "ring-primary ring-2" : "hover:bg-muted/50"}`,
+                    role: "button",
+                    tabIndex: 0,
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ")
+                        selectDashboard(dashboard);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxDEV("div", {
+                        className: "mb-2 flex items-center justify-between",
+                        children: [
+                          /* @__PURE__ */ jsxDEV("h3", {
+                            className: "font-medium",
+                            children: dashboard.name
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("span", {
+                            className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[dashboard.status] ?? ""}`,
+                            children: dashboard.status
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "text-muted-foreground mb-3 text-sm",
+                        children: dashboard.description
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("div", {
+                        className: "text-muted-foreground flex items-center justify-between text-xs",
+                        children: [
+                          /* @__PURE__ */ jsxDEV("span", {
+                            children: [
+                              "/",
+                              dashboard.slug
+                            ]
+                          }, undefined, true, undefined, this),
+                          dashboard.isPublic && /* @__PURE__ */ jsxDEV("span", {
+                            className: "text-green-600 dark:text-green-400",
+                            children: "\uD83C\uDF10 Public"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, dashboard.id, true, undefined, this)),
+                  dashboards.length === 0 && /* @__PURE__ */ jsxDEV("div", {
+                    className: "text-muted-foreground col-span-full flex h-64 items-center justify-center",
+                    children: "No dashboards created yet"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              selectedDashboard && widgets.length > 0 && /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "mb-4 text-lg font-semibold",
+                    children: [
+                      'Widgets in "',
+                      selectedDashboard.name,
+                      '"'
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+                    children: widgets.map((widget) => /* @__PURE__ */ jsxDEV("div", {
+                      className: "border-border bg-card rounded-lg border p-4",
+                      children: [
+                        /* @__PURE__ */ jsxDEV("div", {
+                          className: "mb-2 flex items-center gap-2",
+                          children: [
+                            /* @__PURE__ */ jsxDEV("span", {
+                              className: "text-xl",
+                              children: WIDGET_ICONS[widget.type] ?? "\uD83D\uDCCA"
+                            }, undefined, false, undefined, this),
+                            /* @__PURE__ */ jsxDEV("span", {
+                              className: "font-medium",
+                              children: widget.name
+                            }, undefined, false, undefined, this)
+                          ]
+                        }, undefined, true, undefined, this),
+                        /* @__PURE__ */ jsxDEV("div", {
+                          className: "text-muted-foreground text-sm",
+                          children: widget.type.replace(/_/g, " ")
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("div", {
+                          className: "text-muted-foreground mt-2 text-xs",
+                          children: [
+                            "Position: (",
+                            widget.gridX,
+                            ", ",
+                            widget.gridY,
+                            ") \u2022",
+                            " ",
+                            widget.gridWidth,
+                            "x",
+                            widget.gridHeight
+                          ]
+                        }, undefined, true, undefined, this)
+                      ]
+                    }, widget.id, true, undefined, this))
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          activeTab === "queries" && /* @__PURE__ */ jsxDEV("div", {
+            className: "border-border rounded-lg border",
+            children: /* @__PURE__ */ jsxDEV("table", {
+              className: "w-full",
+              children: [
+                /* @__PURE__ */ jsxDEV("thead", {
+                  className: "border-border bg-muted/30 border-b",
+                  children: /* @__PURE__ */ jsxDEV("tr", {
+                    children: [
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 text-left text-sm font-medium",
+                        children: "Query"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 text-left text-sm font-medium",
+                        children: "Type"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 text-left text-sm font-medium",
+                        children: "Cache TTL"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 text-left text-sm font-medium",
+                        children: "Shared"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("tbody", {
+                  className: "divide-border divide-y",
+                  children: [
+                    queries.map((query) => /* @__PURE__ */ jsxDEV("tr", {
+                      className: "hover:bg-muted/50",
+                      children: [
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3",
+                          children: [
+                            /* @__PURE__ */ jsxDEV("div", {
+                              className: "font-medium",
+                              children: query.name
+                            }, undefined, false, undefined, this),
+                            /* @__PURE__ */ jsxDEV("div", {
+                              className: "text-muted-foreground text-sm",
+                              children: query.description
+                            }, undefined, false, undefined, this)
+                          ]
+                        }, undefined, true, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3",
+                          children: /* @__PURE__ */ jsxDEV("span", {
+                            className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${QUERY_TYPE_COLORS[query.type] ?? ""}`,
+                            children: query.type
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "text-muted-foreground px-4 py-3 text-sm",
+                          children: [
+                            query.cacheTtlSeconds,
+                            "s"
+                          ]
+                        }, undefined, true, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3",
+                          children: query.isShared ? /* @__PURE__ */ jsxDEV("span", {
+                            className: "text-green-600 dark:text-green-400",
+                            children: "\u2713"
+                          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("span", {
+                            className: "text-muted-foreground",
+                            children: "\u2014"
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, query.id, true, undefined, this)),
+                    queries.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
+                      children: /* @__PURE__ */ jsxDEV("td", {
+                        colSpan: 4,
+                        className: "text-muted-foreground px-4 py-8 text-center",
+                        children: "No queries saved"
+                      }, undefined, false, undefined, this)
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
-
-//#endregion
-export { AnalyticsDashboard };
-//# sourceMappingURL=AnalyticsDashboard.js.map
+export {
+  AnalyticsDashboard
+};