@useatlas/create 0.0.1

package/templates/docker/src/ui/components/admin/entity-detail.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+
+export interface Dimension {
+  name: string;
+  type: string;
+  description?: string;
+  sample_values?: string[];
+  primary_key?: boolean;
+  foreign_key?: boolean;
+}
+
+export interface Join {
+  to: string;
+  description?: string;
+  relationship?: string;
+  on?: string;
+}
+
+export interface Measure {
+  name: string;
+  sql: string;
+  type?: string;
+  description?: string;
+}
+
+export interface QueryPattern {
+  name: string;
+  description: string;
+  sql: string;
+}
+
+export interface EntityData {
+  name: string;
+  table: string;
+  description: string;
+  type?: "table" | "view";
+  dimensions: Record<string, Dimension> | Dimension[];
+  joins?: Join[] | Record<string, Join>;
+  measures?: Record<string, Measure> | Measure[];
+  query_patterns?: Record<string, QueryPattern> | QueryPattern[];
+}
+
+/**
+ * Normalize a record-or-array field from the API into a flat array.
+ * When the data is a Record, the key is merged in under `keyName`.
+ */
+function normalizeList<T>(
+  data: Record<string, T> | T[] | undefined,
+  keyName: string,
+): (T & Record<string, unknown>)[] {
+  if (!data) return [];
+  if (Array.isArray(data)) return data;
+  return Object.entries(data).map(([key, value]) => ({ ...value, [keyName]: key }));
+}
+
+export function EntityDetail({ entity }: { entity: EntityData }) {
+  const dimensions = normalizeList(entity.dimensions, "name") as Dimension[];
+  const joins = normalizeList(entity.joins, "to") as Join[];
+  const measures = normalizeList(entity.measures, "name") as Measure[];
+  const patterns = normalizeList(entity.query_patterns, "name") as QueryPattern[];
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-6 p-6">
+        {/* Header */}
+        <div>
+          <div className="flex items-center gap-2">
+            <h2 className="text-lg font-semibold">{entity.name}</h2>
+            {entity.type === "view" && <Badge variant="outline">view</Badge>}
+          </div>
+          <p className="mt-1 text-sm text-muted-foreground">{entity.description}</p>
+          {entity.table !== entity.name && (
+            <p className="mt-1 text-xs text-muted-foreground">
+              Table: <code className="rounded bg-muted px-1 py-0.5">{entity.table}</code>
+            </p>
+          )}
+        </div>
+
+        <Separator />
+
+        {/* Dimensions */}
+        <section>
+          <h3 className="mb-3 text-sm font-semibold">Dimensions ({dimensions.length})</h3>
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[180px]">Column</TableHead>
+                  <TableHead className="w-[100px]">Type</TableHead>
+                  <TableHead>Description</TableHead>
+                  <TableHead className="w-[200px]">Sample Values</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {dimensions.map((dim) => (
+                  <TableRow key={dim.name}>
+                    <TableCell className="font-mono text-xs">
+                      <span className="flex items-center gap-1.5">
+                        {dim.name}
+                        {dim.primary_key && (
+                          <Badge className="bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 text-[10px] px-1 py-0">
+                            PK
+                          </Badge>
+                        )}
+                        {dim.foreign_key && (
+                          <Badge className="bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 text-[10px] px-1 py-0">
+                            FK
+                          </Badge>
+                        )}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary" className="font-mono text-[10px]">
+                        {dim.type}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-xs text-muted-foreground">
+                      {dim.description || "—"}
+                    </TableCell>
+                    <TableCell className="text-xs text-muted-foreground">
+                      {dim.sample_values?.length
+                        ? dim.sample_values.slice(0, 3).join(", ")
+                        : "—"}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </section>
+
+        {/* Joins */}
+        {joins.length > 0 && (
+          <section>
+            <h3 className="mb-3 text-sm font-semibold">Joins ({joins.length})</h3>
+            <div className="space-y-2">
+              {joins.map((join, i) => (
+                <Card key={i} className="shadow-none">
+                  <CardContent className="py-3">
+                    <div className="flex items-start gap-2">
+                      <Badge variant="outline" className="mt-0.5 shrink-0 text-[10px]">
+                        {join.relationship || "many_to_one"}
+                      </Badge>
+                      <div>
+                        <p className="text-sm font-medium">{join.to}</p>
+                        {join.description && (
+                          <p className="mt-0.5 text-xs text-muted-foreground">{join.description}</p>
+                        )}
+                        {join.on && (
+                          <code className="mt-1 block rounded bg-muted px-2 py-1 text-xs">{join.on}</code>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* Measures */}
+        {measures.length > 0 && (
+          <section>
+            <h3 className="mb-3 text-sm font-semibold">Measures ({measures.length})</h3>
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-[180px]">Name</TableHead>
+                    <TableHead className="w-[100px]">Type</TableHead>
+                    <TableHead>SQL</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {measures.map((m) => (
+                    <TableRow key={m.name}>
+                      <TableCell className="text-sm font-medium">{m.name}</TableCell>
+                      <TableCell>
+                        {m.type && (
+                          <Badge variant="secondary" className="text-[10px]">
+                            {m.type}
+                          </Badge>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <code className="rounded bg-muted px-2 py-0.5 text-xs">{m.sql}</code>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </section>
+        )}
+
+        {/* Query Patterns */}
+        {patterns.length > 0 && (
+          <section>
+            <h3 className="mb-3 text-sm font-semibold">Query Patterns ({patterns.length})</h3>
+            <div className="space-y-3">
+              {patterns.map((p) => (
+                <Card key={p.name} className="shadow-none">
+                  <CardHeader className="py-3 pb-2">
+                    <CardTitle className="text-sm">{p.name}</CardTitle>
+                    <p className="text-xs text-muted-foreground">{p.description}</p>
+                  </CardHeader>
+                  <CardContent className="pt-0 pb-3">
+                    <pre className="overflow-x-auto rounded-md bg-muted p-3 text-xs">
+                      <code>{p.sql}</code>
+                    </pre>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
+    </ScrollArea>
+  );
+}

package/templates/docker/src/ui/components/admin/entity-list.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Search, TableIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface EntitySummary {
+  name: string;
+  description: string;
+  type?: "table" | "view";
+  columnCount: number;
+  connectionId?: string;
+}
+
+export function EntityList({
+  entities,
+  selectedName,
+  onSelect,
+  className,
+}: {
+  entities: EntitySummary[];
+  selectedName: string | null;
+  onSelect: (name: string) => void;
+  className?: string;
+}) {
+  const [search, setSearch] = useState("");
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return entities;
+    const q = search.toLowerCase();
+    return entities.filter(
+      (e) => e.name.toLowerCase().includes(q) || e.description.toLowerCase().includes(q),
+    );
+  }, [entities, search]);
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      <div className="relative px-3 pt-3 pb-2">
+        <Search className="absolute left-6 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          placeholder="Search entities..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="pl-9"
+        />
+      </div>
+      <ScrollArea className="flex-1">
+        <div className="space-y-0.5 p-2">
+          {filtered.length === 0 && (
+            <p className="px-3 py-6 text-center text-sm text-muted-foreground">
+              {entities.length === 0 ? "No entities found" : "No matches"}
+            </p>
+          )}
+          {filtered.map((entity) => (
+            <button
+              key={entity.name}
+              onClick={() => onSelect(entity.name)}
+              className={cn(
+                "flex w-full items-start gap-3 rounded-md px-3 py-2.5 text-left transition-colors",
+                selectedName === entity.name
+                  ? "bg-accent text-accent-foreground"
+                  : "hover:bg-muted",
+              )}
+            >
+              <TableIcon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="truncate text-sm font-medium">{entity.name}</span>
+                  {entity.type === "view" && (
+                    <Badge variant="outline" className="shrink-0 text-[10px] px-1.5 py-0">
+                      view
+                    </Badge>
+                  )}
+                </div>
+                <p className="mt-0.5 truncate text-xs text-muted-foreground">{entity.description}</p>
+                <div className="mt-1 flex items-center gap-2">
+                  <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+                    {entity.columnCount} cols
+                  </Badge>
+                  {entity.connectionId && entity.connectionId !== "default" && (
+                    <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+                      {entity.connectionId}
+                    </Badge>
+                  )}
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}

package/templates/docker/src/ui/components/admin/error-banner.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+export function ErrorBanner({
+  message,
+  onRetry,
+}: {
+  message: string;
+  onRetry?: () => void;
+}) {
+  return (
+    <div className="m-6 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 flex items-center justify-between gap-4">
+      <p className="text-sm text-destructive">{message}</p>
+      {onRetry && (
+        <Button variant="outline" size="sm" onClick={onRetry} className="shrink-0">
+          Retry
+        </Button>
+      )}
+    </div>
+  );
+}

package/templates/docker/src/ui/components/admin/feature-disabled.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Ban, ShieldX } from "lucide-react";
+
+/**
+ * Shown when an admin page gets a 403 (no admin role) or 404 (feature not enabled).
+ */
+export function FeatureGate({
+  status,
+  feature,
+}: {
+  status: 401 | 403 | 404;
+  feature: string;
+}) {
+  if (status === 404) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="text-center">
+          <Ban className="mx-auto size-10 text-muted-foreground/50" />
+          <p className="mt-3 text-sm font-medium">{feature} not enabled</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Enable this feature in your server configuration to use this page.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full items-center justify-center">
+      <div className="text-center">
+        <ShieldX className="mx-auto size-10 text-muted-foreground/50" />
+        <p className="mt-3 text-sm font-medium">
+          {status === 401 ? "Authentication required" : "Access denied"}
+        </p>
+        <p className="mt-1 text-xs text-muted-foreground">
+          {status === 401
+            ? "Please sign in to access the admin console."
+            : "You need the admin role to access this page."}
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/docker/src/ui/components/admin/health-badge.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+type HealthStatus = "healthy" | "degraded" | "down" | "unknown";
+
+const statusConfig: Record<HealthStatus, { dot: string; text: string; label: string }> = {
+  healthy: { dot: "bg-emerald-500", text: "text-emerald-700 dark:text-emerald-400", label: "Healthy" },
+  degraded: { dot: "bg-amber-500", text: "text-amber-700 dark:text-amber-400", label: "Degraded" },
+  down: { dot: "bg-red-500", text: "text-red-700 dark:text-red-400", label: "Down" },
+  unknown: { dot: "bg-zinc-400", text: "text-zinc-500 dark:text-zinc-400", label: "Unknown" },
+};
+
+export function HealthBadge({
+  status,
+  label,
+  className,
+}: {
+  status: HealthStatus;
+  label?: string;
+  className?: string;
+}) {
+  const config = statusConfig[status];
+  return (
+    <span className={cn("inline-flex items-center gap-1.5 text-xs font-medium", config.text, className)}>
+      <span className={cn("size-2 rounded-full", config.dot)} />
+      {label ?? config.label}
+    </span>
+  );
+}

package/templates/docker/src/ui/components/admin/loading-state.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+
+export function LoadingState({ message = "Loading..." }: { message?: string }) {
+  return (
+    <div className="flex h-full items-center justify-center">
+      <div className="flex items-center gap-3 text-muted-foreground">
+        <Loader2 className="size-4 animate-spin" />
+        <span className="text-sm">{message}</span>
+      </div>
+    </div>
+  );
+}

package/templates/docker/src/ui/components/admin/stat-card.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+export function StatCard({
+  title,
+  value,
+  icon,
+  description,
+  className,
+}: {
+  title: string;
+  value: string | number;
+  icon?: ReactNode;
+  description?: string;
+  className?: string;
+}) {
+  return (
+    <Card className={cn("shadow-none", className)}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
+        {icon && <span className="text-muted-foreground">{icon}</span>}
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        {description && <p className="mt-1 text-xs text-muted-foreground">{description}</p>}
+      </CardContent>
+    </Card>
+  );
+}