@morphika/andami 0.5.1 → 0.5.2

package/app/admin/database/page.tsx

@@ -1,302 +1,302 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-
-// ── Types ──
-
-interface SanityStats {
-  totalDocuments: number;
-  pages: number;
-  publishedPages: number;
-  draftPages: number;
-  projects: number;
-  siteSettings: number;
-  siteStyles: number;
-  assetRegistry: number;
-  datasets: string[];
-}
-
-interface SanityStatus {
-  connected: boolean;
-  projectId: string;
-  dataset: string;
-  hasWriteToken: boolean;
-  stats: SanityStats | null;
-  error?: string;
-  apiVersion: string;
-}
-
-// ── Stat Card ──
-
-function StatCard({ label, value, sub }: { label: string; value: number | string; sub?: string }) {
-  return (
-    <div className="bg-white rounded-xl border border-neutral-200 p-4">
-      <p className="text-[11px] uppercase tracking-wider text-neutral-400 mb-1">{label}</p>
-      <p className="text-2xl font-semibold text-neutral-900">{value}</p>
-      {sub && <p className="text-xs text-neutral-400 mt-0.5">{sub}</p>}
-    </div>
-  );
-}
-
-// ── Config Field (read-only display) ──
-
-function ConfigField({ label, value, masked }: { label: string; value: string; masked?: boolean }) {
-  const [revealed, setRevealed] = useState(false);
-  const display = masked && !revealed ? "••••••••••••" : value || "—";
-
-  return (
-    <div className="flex items-center justify-between py-3 border-b border-neutral-100 last:border-0">
-      <span className="text-sm text-neutral-500">{label}</span>
-      <div className="flex items-center gap-2">
-        <code className="text-sm text-neutral-800 bg-neutral-50 px-2 py-0.5 rounded font-mono">{display}</code>
-        {masked && value && (
-          <button
-            onClick={() => setRevealed(!revealed)}
-            className="text-xs text-[#076bff] hover:underline"
-          >
-            {revealed ? "Hide" : "Show"}
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ── Document Type Row ──
-
-function DocTypeRow({ label, count, icon }: { label: string; count: number; icon: React.ReactNode }) {
-  return (
-    <div className="flex items-center justify-between py-2.5 border-b border-neutral-100 last:border-0">
-      <div className="flex items-center gap-2.5">
-        <span className="text-neutral-400">{icon}</span>
-        <span className="text-sm text-neutral-700">{label}</span>
-      </div>
-      <span className="text-sm font-medium text-neutral-900 bg-neutral-100 rounded-full px-2.5 py-0.5 min-w-[32px] text-center">
-        {count}
-      </span>
-    </div>
-  );
-}
-
-// ── Main Page ──
-
-export default function AdminDatabasePage() {
-  const [status, setStatus] = useState<SanityStatus | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [testing, setTesting] = useState(false);
-
-  const fetchStatus = useCallback(async () => {
-    try {
-      const res = await fetch("/api/admin/database");
-      if (res.ok) {
-        const data = await res.json();
-        setStatus(data);
-      }
-    } catch {
-      setStatus(null);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchStatus();
-  }, [fetchStatus]);
-
-  const handleTestConnection = async () => {
-    setTesting(true);
-    setLoading(false);
-    try {
-      const res = await fetch("/api/admin/database");
-      if (res.ok) {
-        const data = await res.json();
-        setStatus(data);
-      }
-    } catch {
-      // handled by status state
-    } finally {
-      setTesting(false);
-    }
-  };
-
-  // ── Loading ──
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center py-20">
-        <span className="text-sm text-neutral-400 animate-pulse">Connecting to database...</span>
-      </div>
-    );
-  }
-
-  const stats = status?.stats;
-  const isConnected = status?.connected === true;
-
-  return (
-    <div className="space-y-8 max-w-4xl">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold text-neutral-900">Database</h1>
-          <p className="text-sm text-neutral-400 mt-1">Sanity CMS connection and data overview</p>
-        </div>
-        <button
-          onClick={handleTestConnection}
-          disabled={testing}
-          className="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50 transition-colors disabled:opacity-50"
-        >
-          {testing ? (
-            <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
-            </svg>
-          ) : (
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-              <polyline points="23 4 23 10 17 10" />
-              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
-            </svg>
-          )}
-          {testing ? "Testing..." : "Test Connection"}
-        </button>
-      </div>
-
-      {/* Connection status banner */}
-      <div className={`flex items-center gap-3 p-4 rounded-xl border ${
-        isConnected
-          ? "border-green-200 bg-green-50"
-          : "border-red-200 bg-red-50"
-      }`}>
-        <div className={`w-2.5 h-2.5 rounded-full ${isConnected ? "bg-green-500" : "bg-red-500"}`} />
-        <div className="flex-1">
-          <p className={`text-sm font-medium ${isConnected ? "text-green-800" : "text-red-800"}`}>
-            {isConnected ? "Connected to Sanity" : "Connection Failed"}
-          </p>
-          {status?.error && (
-            <p className="text-xs text-red-600 mt-0.5">{status.error}</p>
-          )}
-        </div>
-        {isConnected && (
-          <span className="text-xs text-green-600 bg-green-100 px-2 py-0.5 rounded-full">
-            API v{status?.apiVersion}
-          </span>
-        )}
-      </div>
-
-      {/* Stats grid */}
-      {stats && (
-        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-          <StatCard label="Total Documents" value={stats.totalDocuments} />
-          <StatCard label="Pages" value={stats.pages} sub={`${stats.publishedPages} published, ${stats.draftPages} draft`} />
-          <StatCard label="Projects" value={stats.projects} />
-          <StatCard label="Dataset" value={status?.dataset || "—"} />
-        </div>
-      )}
-
-      {/* Two-column layout: Config + Schema */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-
-        {/* Connection Configuration */}
-        <div className="bg-white rounded-xl border border-neutral-200 overflow-hidden">
-          <div className="px-5 py-4 border-b border-neutral-100">
-            <h2 className="text-sm font-semibold text-neutral-900">Connection Configuration</h2>
-            <p className="text-xs text-neutral-400 mt-0.5">Values from environment variables — edit in .env.local or hosting dashboard</p>
-          </div>
-          <div className="px-5 py-2">
-            <ConfigField label="Project ID" value={status?.projectId || ""} />
-            <ConfigField label="Dataset" value={status?.dataset || ""} />
-            <ConfigField label="API Version" value={status?.apiVersion || ""} />
-            <ConfigField label="Write Token" value={status?.hasWriteToken ? "Configured" : "Not set"} />
-            <ConfigField label="CDN" value="Disabled (real-time reads)" />
-          </div>
-        </div>
-
-        {/* Document Types */}
-        {stats && (
-          <div className="bg-white rounded-xl border border-neutral-200 overflow-hidden">
-            <div className="px-5 py-4 border-b border-neutral-100">
-              <h2 className="text-sm font-semibold text-neutral-900">Schema Overview</h2>
-              <p className="text-xs text-neutral-400 mt-0.5">Document types and counts in this dataset</p>
-            </div>
-            <div className="px-5 py-2">
-              <DocTypeRow
-                label="Pages"
-                count={stats.pages}
-                icon={
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><polyline points="14 2 14 8 20 8" /></svg>
-                }
-              />
-              <DocTypeRow
-                label="Projects"
-                count={stats.projects}
-                icon={
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="2" width="20" height="20" rx="2.18" /><line x1="7" y1="2" x2="7" y2="22" /><line x1="17" y1="2" x2="17" y2="22" /><line x1="2" y1="12" x2="22" y2="12" /></svg>
-                }
-              />
-              <DocTypeRow
-                label="Site Settings"
-                count={stats.siteSettings}
-                icon={
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.38.17.62.55.68.95" /></svg>
-                }
-              />
-              <DocTypeRow
-                label="Site Styles"
-                count={stats.siteStyles}
-                icon={
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="13.5" cy="6.5" r="0.5" fill="currentColor" /><circle cx="17.5" cy="10.5" r="0.5" fill="currentColor" /><circle cx="8.5" cy="7.5" r="0.5" fill="currentColor" /><circle cx="6.5" cy="12" r="0.5" fill="currentColor" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2Z" /></svg>
-                }
-              />
-              <DocTypeRow
-                label="Asset Registry"
-                count={stats.assetRegistry}
-                icon={
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3" /><path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5" /></svg>
-                }
-              />
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Sanity Studio link */}
-      <div className="bg-white rounded-xl border border-neutral-200 p-5">
-        <div className="flex items-center justify-between">
-          <div>
-            <h2 className="text-sm font-semibold text-neutral-900">Sanity Studio</h2>
-            <p className="text-xs text-neutral-400 mt-0.5">Access the raw Sanity Studio for advanced data editing</p>
-          </div>
-          <a
-            href="/studio"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-neutral-900 text-white hover:bg-neutral-800 transition-colors"
-          >
-            Open Studio
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-              <polyline points="15 3 21 3 21 9" />
-              <line x1="10" y1="14" x2="21" y2="3" />
-            </svg>
-          </a>
-        </div>
-      </div>
-
-      {/* Env guide */}
-      <div className="bg-neutral-50 rounded-xl border border-neutral-200 p-5">
-        <h2 className="text-sm font-semibold text-neutral-700 mb-3">Environment Variables Reference</h2>
-        <div className="space-y-2 font-mono text-xs text-neutral-500">
-          <div className="flex gap-3">
-            <span className="text-neutral-400 w-64 shrink-0">NEXT_PUBLIC_SANITY_PROJECT_ID</span>
-            <span className="text-neutral-600">Sanity project ID (required)</span>
-          </div>
-          <div className="flex gap-3">
-            <span className="text-neutral-400 w-64 shrink-0">NEXT_PUBLIC_SANITY_DATASET</span>
-            <span className="text-neutral-600">Dataset name (default: &quot;production&quot;)</span>
-          </div>
-          <div className="flex gap-3">
-            <span className="text-neutral-400 w-64 shrink-0">SANITY_API_TOKEN</span>
-            <span className="text-neutral-600">Write token for mutations (server-only)</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+// ── Types ──
+
+interface SanityStats {
+  totalDocuments: number;
+  pages: number;
+  publishedPages: number;
+  draftPages: number;
+  projects: number;
+  siteSettings: number;
+  siteStyles: number;
+  assetRegistry: number;
+  datasets: string[];
+}
+
+interface SanityStatus {
+  connected: boolean;
+  projectId: string;
+  dataset: string;
+  hasWriteToken: boolean;
+  stats: SanityStats | null;
+  error?: string;
+  apiVersion: string;
+}
+
+// ── Stat Card ──
+
+function StatCard({ label, value, sub }: { label: string; value: number | string; sub?: string }) {
+  return (
+    <div className="bg-white rounded-xl border border-neutral-200 p-4">
+      <p className="text-[11px] uppercase tracking-wider text-neutral-400 mb-1">{label}</p>
+      <p className="text-2xl font-semibold text-neutral-900">{value}</p>
+      {sub && <p className="text-xs text-neutral-400 mt-0.5">{sub}</p>}
+    </div>
+  );
+}
+
+// ── Config Field (read-only display) ──
+
+function ConfigField({ label, value, masked }: { label: string; value: string; masked?: boolean }) {
+  const [revealed, setRevealed] = useState(false);
+  const display = masked && !revealed ? "••••••••••••" : value || "—";
+
+  return (
+    <div className="flex items-center justify-between py-3 border-b border-neutral-100 last:border-0">
+      <span className="text-sm text-neutral-500">{label}</span>
+      <div className="flex items-center gap-2">
+        <code className="text-sm text-neutral-800 bg-neutral-50 px-2 py-0.5 rounded font-mono">{display}</code>
+        {masked && value && (
+          <button
+            onClick={() => setRevealed(!revealed)}
+            className="text-xs text-[#3580f9] hover:underline"
+          >
+            {revealed ? "Hide" : "Show"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── Document Type Row ──
+
+function DocTypeRow({ label, count, icon }: { label: string; count: number; icon: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between py-2.5 border-b border-neutral-100 last:border-0">
+      <div className="flex items-center gap-2.5">
+        <span className="text-neutral-400">{icon}</span>
+        <span className="text-sm text-neutral-700">{label}</span>
+      </div>
+      <span className="text-sm font-medium text-neutral-900 bg-neutral-100 rounded-full px-2.5 py-0.5 min-w-[32px] text-center">
+        {count}
+      </span>
+    </div>
+  );
+}
+
+// ── Main Page ──
+
+export default function AdminDatabasePage() {
+  const [status, setStatus] = useState<SanityStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [testing, setTesting] = useState(false);
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const res = await fetch("/api/admin/database");
+      if (res.ok) {
+        const data = await res.json();
+        setStatus(data);
+      }
+    } catch {
+      setStatus(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchStatus();
+  }, [fetchStatus]);
+
+  const handleTestConnection = async () => {
+    setTesting(true);
+    setLoading(false);
+    try {
+      const res = await fetch("/api/admin/database");
+      if (res.ok) {
+        const data = await res.json();
+        setStatus(data);
+      }
+    } catch {
+      // handled by status state
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  // ── Loading ──
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <span className="text-sm text-neutral-400 animate-pulse">Connecting to database...</span>
+      </div>
+    );
+  }
+
+  const stats = status?.stats;
+  const isConnected = status?.connected === true;
+
+  return (
+    <div className="space-y-8 max-w-4xl">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-neutral-900">Database</h1>
+          <p className="text-sm text-neutral-400 mt-1">Sanity CMS connection and data overview</p>
+        </div>
+        <button
+          onClick={handleTestConnection}
+          disabled={testing}
+          className="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50 transition-colors disabled:opacity-50"
+        >
+          {testing ? (
+            <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
+            </svg>
+          ) : (
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="23 4 23 10 17 10" />
+              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+            </svg>
+          )}
+          {testing ? "Testing..." : "Test Connection"}
+        </button>
+      </div>
+
+      {/* Connection status banner */}
+      <div className={`flex items-center gap-3 p-4 rounded-xl border ${
+        isConnected
+          ? "border-green-200 bg-green-50"
+          : "border-red-200 bg-red-50"
+      }`}>
+        <div className={`w-2.5 h-2.5 rounded-full ${isConnected ? "bg-green-500" : "bg-red-500"}`} />
+        <div className="flex-1">
+          <p className={`text-sm font-medium ${isConnected ? "text-green-800" : "text-red-800"}`}>
+            {isConnected ? "Connected to Sanity" : "Connection Failed"}
+          </p>
+          {status?.error && (
+            <p className="text-xs text-red-600 mt-0.5">{status.error}</p>
+          )}
+        </div>
+        {isConnected && (
+          <span className="text-xs text-green-600 bg-green-100 px-2 py-0.5 rounded-full">
+            API v{status?.apiVersion}
+          </span>
+        )}
+      </div>
+
+      {/* Stats grid */}
+      {stats && (
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          <StatCard label="Total Documents" value={stats.totalDocuments} />
+          <StatCard label="Pages" value={stats.pages} sub={`${stats.publishedPages} published, ${stats.draftPages} draft`} />
+          <StatCard label="Projects" value={stats.projects} />
+          <StatCard label="Dataset" value={status?.dataset || "—"} />
+        </div>
+      )}
+
+      {/* Two-column layout: Config + Schema */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+        {/* Connection Configuration */}
+        <div className="bg-white rounded-xl border border-neutral-200 overflow-hidden">
+          <div className="px-5 py-4 border-b border-neutral-100">
+            <h2 className="text-sm font-semibold text-neutral-900">Connection Configuration</h2>
+            <p className="text-xs text-neutral-400 mt-0.5">Values from environment variables — edit in .env.local or hosting dashboard</p>
+          </div>
+          <div className="px-5 py-2">
+            <ConfigField label="Project ID" value={status?.projectId || ""} />
+            <ConfigField label="Dataset" value={status?.dataset || ""} />
+            <ConfigField label="API Version" value={status?.apiVersion || ""} />
+            <ConfigField label="Write Token" value={status?.hasWriteToken ? "Configured" : "Not set"} />
+            <ConfigField label="CDN" value="Disabled (real-time reads)" />
+          </div>
+        </div>
+
+        {/* Document Types */}
+        {stats && (
+          <div className="bg-white rounded-xl border border-neutral-200 overflow-hidden">
+            <div className="px-5 py-4 border-b border-neutral-100">
+              <h2 className="text-sm font-semibold text-neutral-900">Schema Overview</h2>
+              <p className="text-xs text-neutral-400 mt-0.5">Document types and counts in this dataset</p>
+            </div>
+            <div className="px-5 py-2">
+              <DocTypeRow
+                label="Pages"
+                count={stats.pages}
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><polyline points="14 2 14 8 20 8" /></svg>
+                }
+              />
+              <DocTypeRow
+                label="Projects"
+                count={stats.projects}
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="2" width="20" height="20" rx="2.18" /><line x1="7" y1="2" x2="7" y2="22" /><line x1="17" y1="2" x2="17" y2="22" /><line x1="2" y1="12" x2="22" y2="12" /></svg>
+                }
+              />
+              <DocTypeRow
+                label="Site Settings"
+                count={stats.siteSettings}
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.38.17.62.55.68.95" /></svg>
+                }
+              />
+              <DocTypeRow
+                label="Site Styles"
+                count={stats.siteStyles}
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="13.5" cy="6.5" r="0.5" fill="currentColor" /><circle cx="17.5" cy="10.5" r="0.5" fill="currentColor" /><circle cx="8.5" cy="7.5" r="0.5" fill="currentColor" /><circle cx="6.5" cy="12" r="0.5" fill="currentColor" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2Z" /></svg>
+                }
+              />
+              <DocTypeRow
+                label="Asset Registry"
+                count={stats.assetRegistry}
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3" /><path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5" /></svg>
+                }
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Sanity Studio link */}
+      <div className="bg-white rounded-xl border border-neutral-200 p-5">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-sm font-semibold text-neutral-900">Sanity Studio</h2>
+            <p className="text-xs text-neutral-400 mt-0.5">Access the raw Sanity Studio for advanced data editing</p>
+          </div>
+          <a
+            href="/studio"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-neutral-900 text-white hover:bg-neutral-800 transition-colors"
+          >
+            Open Studio
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+              <polyline points="15 3 21 3 21 9" />
+              <line x1="10" y1="14" x2="21" y2="3" />
+            </svg>
+          </a>
+        </div>
+      </div>
+
+      {/* Env guide */}
+      <div className="bg-neutral-50 rounded-xl border border-neutral-200 p-5">
+        <h2 className="text-sm font-semibold text-neutral-700 mb-3">Environment Variables Reference</h2>
+        <div className="space-y-2 font-mono text-xs text-neutral-500">
+          <div className="flex gap-3">
+            <span className="text-neutral-400 w-64 shrink-0">NEXT_PUBLIC_SANITY_PROJECT_ID</span>
+            <span className="text-neutral-600">Sanity project ID (required)</span>
+          </div>
+          <div className="flex gap-3">
+            <span className="text-neutral-400 w-64 shrink-0">NEXT_PUBLIC_SANITY_DATASET</span>
+            <span className="text-neutral-600">Dataset name (default: &quot;production&quot;)</span>
+          </div>
+          <div className="flex gap-3">
+            <span className="text-neutral-400 w-64 shrink-0">SANITY_API_TOKEN</span>
+            <span className="text-neutral-600">Write token for mutations (server-only)</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}