@morphika/andami 0.1.2

package/components/admin/setup-wizard/DatabaseStep.tsx

@@ -0,0 +1,331 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import type { WizardStepProps } from "./SetupWizard";
+
+// ── Icons ──
+
+function CheckCircle() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <polyline points="22 4 12 14.01 9 11.01" />
+    </svg>
+  );
+}
+
+function XCircle() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="15" y1="9" x2="9" y2="15" />
+      <line x1="9" y1="9" x2="15" y2="15" />
+    </svg>
+  );
+}
+
+function Spinner() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="animate-spin">
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  );
+}
+
+// ── Types ──
+
+interface ConnectionResult {
+  connected: boolean;
+  projectId?: string;
+  dataset?: string;
+  hasWriteToken?: boolean;
+  stats?: {
+    siteSettings: number;
+    siteStyles: number;
+    assetRegistry: number;
+  };
+  error?: string;
+}
+
+interface SeedResult {
+  seeded: string[];
+  skipped: string[];
+}
+
+type ConnectionState = "idle" | "testing" | "connected" | "failed";
+type SeedState = "idle" | "seeding" | "done" | "error";
+
+// ── Component ──
+
+/**
+ * Step 2 — Database (Sanity Connection)
+ *
+ * Tests the Sanity connection and seeds initial documents if needed.
+ */
+export function DatabaseStep({ onNext, onBack }: WizardStepProps) {
+  const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || "";
+  const hasProjectId = !!projectId;
+
+  const [connState, setConnState] = useState<ConnectionState>("idle");
+  const [connResult, setConnResult] = useState<ConnectionResult | null>(null);
+  const [seedState, setSeedState] = useState<SeedState>("idle");
+  const [seedResult, setSeedResult] = useState<SeedResult | null>(null);
+  const [error, setError] = useState<string>("");
+
+  // Auto-test on mount if project ID is present
+  useEffect(() => {
+    if (hasProjectId && connState === "idle") {
+      testConnection();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const testConnection = useCallback(async () => {
+    setConnState("testing");
+    setError("");
+
+    try {
+      const res = await fetch("/api/admin/database");
+      if (!res.ok) {
+        setConnState("failed");
+        setError(`API returned ${res.status}`);
+        return;
+      }
+
+      const data: ConnectionResult = await res.json();
+      setConnResult(data);
+
+      if (data.connected) {
+        setConnState("connected");
+      } else {
+        setConnState("failed");
+        setError(data.error || "Connection failed");
+      }
+    } catch (err) {
+      setConnState("failed");
+      setError(err instanceof Error ? err.message : "Connection failed");
+    }
+  }, []);
+
+  const seedDocuments = useCallback(async () => {
+    setSeedState("seeding");
+
+    try {
+      const res = await fetch("/api/admin/setup", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...csrfHeaders(),
+        },
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        setSeedState("error");
+        setError(data.error || "Seeding failed");
+        return;
+      }
+
+      const data: SeedResult = await res.json();
+      setSeedResult(data);
+      setSeedState("done");
+    } catch (err) {
+      setSeedState("error");
+      setError(err instanceof Error ? err.message : "Seeding failed");
+    }
+  }, []);
+
+  // Should we show the seed button?
+  const needsSeeding =
+    connState === "connected" &&
+    connResult?.stats &&
+    (connResult.stats.siteSettings === 0 ||
+      connResult.stats.siteStyles === 0 ||
+      connResult.stats.assetRegistry === 0);
+
+  const docsPresent =
+    connState === "connected" &&
+    connResult?.stats &&
+    connResult.stats.siteSettings > 0 &&
+    connResult.stats.siteStyles > 0 &&
+    connResult.stats.assetRegistry > 0;
+
+  const allSeeded = seedState === "done" || (docsPresent && !needsSeeding);
+
+  const canAdvance = connState === "connected" && allSeeded;
+
+  return (
+    <div className="pt-8">
+      <h2 className="text-lg font-semibold text-[#111] mb-1">Database Connection</h2>
+      <p className="text-sm text-[#666] mb-8">
+        Connect to Sanity CMS to store your pages, settings, and content.
+      </p>
+
+      {/* Project ID status */}
+      <div className="bg-white rounded-xl border border-black/[0.06] divide-y divide-black/[0.06] mb-6">
+        {/* Sanity Project ID */}
+        <div className="flex items-center justify-between p-4">
+          <div>
+            <span className="text-sm font-medium text-[#333]">Sanity Project ID</span>
+            {hasProjectId && (
+              <p className="text-xs text-[#999] mt-0.5 font-mono">{projectId}</p>
+            )}
+          </div>
+          {hasProjectId ? <CheckCircle /> : <XCircle />}
+        </div>
+
+        {/* Connection status */}
+        <div className="flex items-center justify-between p-4">
+          <div>
+            <span className="text-sm font-medium text-[#333]">Connection</span>
+            {connState === "connected" && connResult?.dataset && (
+              <p className="text-xs text-[#999] mt-0.5">
+                Dataset: <span className="font-mono">{connResult.dataset}</span>
+              </p>
+            )}
+          </div>
+          {connState === "testing" && <Spinner />}
+          {connState === "connected" && <CheckCircle />}
+          {connState === "failed" && <XCircle />}
+          {connState === "idle" && (
+            <span className="text-xs text-[#bbb]">Not tested</span>
+          )}
+        </div>
+
+        {/* Write token */}
+        {connState === "connected" && (
+          <div className="flex items-center justify-between p-4">
+            <div>
+              <span className="text-sm font-medium text-[#333]">Write Token</span>
+              <p className="text-xs text-[#999] mt-0.5">Required for saving content</p>
+            </div>
+            {connResult?.hasWriteToken ? <CheckCircle /> : <XCircle />}
+          </div>
+        )}
+
+        {/* Document seeding */}
+        {connState === "connected" && (
+          <div className="flex items-center justify-between p-4">
+            <div>
+              <span className="text-sm font-medium text-[#333]">Initial Documents</span>
+              {seedState === "done" && seedResult && (
+                <p className="text-xs text-[#999] mt-0.5">
+                  {seedResult.seeded.length > 0
+                    ? `Created: ${seedResult.seeded.join(", ")}`
+                    : "All documents already exist"}
+                </p>
+              )}
+              {allSeeded && seedState !== "done" && (
+                <p className="text-xs text-[#999] mt-0.5">All documents present</p>
+              )}
+            </div>
+            {seedState === "seeding" && <Spinner />}
+            {(seedState === "done" || allSeeded) && <CheckCircle />}
+            {seedState === "error" && <XCircle />}
+            {seedState === "idle" && !allSeeded && (
+              <span className="text-xs text-[#bbb]">Not seeded</span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Instructions when no project ID */}
+      {!hasProjectId && (
+        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
+          <p className="text-sm text-amber-800 font-medium mb-2">
+            Sanity Project ID not found
+          </p>
+          <ol className="text-xs text-amber-700 space-y-1.5 list-decimal list-inside">
+            <li>
+              Create a project at{" "}
+              <a
+                href="https://www.sanity.io/manage"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline hover:text-amber-900"
+              >
+                sanity.io/manage
+              </a>
+            </li>
+            <li>
+              Add <code className="bg-amber-100 px-1 rounded font-mono">NEXT_PUBLIC_SANITY_PROJECT_ID=your-id</code> to{" "}
+              <code className="bg-amber-100 px-1 rounded font-mono">.env.local</code>
+            </li>
+            <li>
+              Add <code className="bg-amber-100 px-1 rounded font-mono">SANITY_API_TOKEN=your-token</code> (Editor or higher)
+            </li>
+            <li>Restart the dev server and refresh this page</li>
+          </ol>
+        </div>
+      )}
+
+      {/* Error message */}
+      {error && connState === "failed" && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-3 mb-6">
+          <p className="text-xs text-red-700">{error}</p>
+        </div>
+      )}
+
+      {/* Write token warning */}
+      {connState === "connected" && !connResult?.hasWriteToken && (
+        <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-6">
+          <p className="text-xs text-amber-700">
+            <span className="font-medium">Write token missing.</span> Add{" "}
+            <code className="bg-amber-100 px-1 rounded font-mono">SANITY_API_TOKEN</code> to{" "}
+            <code className="bg-amber-100 px-1 rounded font-mono">.env.local</code> and
+            restart the dev server. Without it, content changes won&apos;t be saved.
+          </p>
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex items-center justify-between">
+        <div>
+          {onBack && (
+            <button
+              onClick={onBack}
+              className="px-4 py-2 text-sm text-[#666] hover:text-[#333] transition-colors"
+            >
+              Back
+            </button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* Test Connection */}
+          {hasProjectId && connState !== "connected" && (
+            <button
+              onClick={testConnection}
+              disabled={connState === "testing"}
+              className="px-4 py-2 text-sm border border-black/[0.1] rounded-lg hover:bg-black/[0.02] transition-colors disabled:opacity-50"
+            >
+              {connState === "testing" ? "Testing..." : "Test Connection"}
+            </button>
+          )}
+
+          {/* Seed Documents */}
+          {needsSeeding && seedState !== "done" && connResult?.hasWriteToken && (
+            <button
+              onClick={seedDocuments}
+              disabled={seedState === "seeding"}
+              className="px-4 py-2 text-sm bg-[#076bff] text-white rounded-lg hover:bg-[#0559d4] transition-colors disabled:opacity-50"
+            >
+              {seedState === "seeding" ? "Creating..." : "Create Initial Documents"}
+            </button>
+          )}
+
+          {/* Next */}
+          {canAdvance && (
+            <button
+              onClick={onNext}
+              className="px-5 py-2.5 bg-[#076bff] text-white text-sm font-medium rounded-lg hover:bg-[#0559d4] transition-colors"
+            >
+              Next
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/admin/setup-wizard/DoneStep.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import type { WizardStepProps } from "./SetupWizard";
+
+// ── Icons ──
+
+function CheckCircle({ color = "#22c55e" }: { color?: string }) {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <polyline points="22 4 12 14.01 9 11.01" />
+    </svg>
+  );
+}
+
+function SkipIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#bbb" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="8" y1="12" x2="16" y2="12" />
+    </svg>
+  );
+}
+
+// ── Types ──
+
+interface StepSummary {
+  label: string;
+  configured: boolean;
+}
+
+// ── Component ──
+
+/**
+ * Step 5 — Done
+ *
+ * Shows a summary of what was configured, then marks setup as complete
+ * and redirects to the admin pages.
+ */
+export function DoneStep({ onBack }: WizardStepProps) {
+  const router = useRouter();
+  const [steps, setSteps] = useState<StepSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [completing, setCompleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch current status to show summary
+  useEffect(() => {
+    fetch("/api/admin/setup")
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (data?.steps) {
+          setSteps([
+            { label: "Database", configured: data.steps.database },
+            { label: "Storage", configured: data.steps.storage },
+            { label: "Branding", configured: data.steps.branding },
+          ]);
+        }
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const handleComplete = useCallback(async () => {
+    setCompleting(true);
+    setError(null);
+
+    try {
+      // Mark setup as complete via the setup API
+      const res = await fetch("/api/admin/setup/complete", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...csrfHeaders(),
+        },
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error || "Failed to complete setup");
+        setCompleting(false);
+        return;
+      }
+
+      // Redirect to admin pages
+      router.push("/admin/pages");
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to complete setup");
+      setCompleting(false);
+    }
+  }, [router]);
+
+  return (
+    <div className="pt-8">
+      <div className="text-center mb-8">
+        <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        </div>
+        <h2 className="text-lg font-semibold text-[#111] mb-1">
+          You&apos;re all set!
+        </h2>
+        <p className="text-sm text-[#666]">
+          Here&apos;s a summary of your setup. You can reconfigure any of these later.
+        </p>
+      </div>
+
+      {/* Summary */}
+      {!loading && steps.length > 0 && (
+        <div className="bg-white rounded-xl border border-black/[0.06] divide-y divide-black/[0.06] mb-6">
+          {steps.map((step) => (
+            <div key={step.label} className="flex items-center justify-between p-4">
+              <span className="text-sm font-medium text-[#333]">
+                {step.label}
+              </span>
+              <div className="flex items-center gap-2">
+                {step.configured ? (
+                  <>
+                    <CheckCircle />
+                    <span className="text-xs text-green-600 font-medium">
+                      Configured
+                    </span>
+                  </>
+                ) : (
+                  <>
+                    <SkipIcon />
+                    <span className="text-xs text-[#bbb]">Skipped</span>
+                  </>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Loading state for summary */}
+      {loading && (
+        <div className="bg-white rounded-xl border border-black/[0.06] p-8 mb-6 text-center">
+          <p className="text-xs text-[#999] animate-pulse">
+            Loading summary...
+          </p>
+        </div>
+      )}
+
+      {/* Tip */}
+      <div className="p-3 rounded-lg bg-[#f8f8f8] border border-black/[0.04] mb-6">
+        <p className="text-xs text-[#999] leading-relaxed">
+          You can re-run this wizard anytime from the admin sidebar.
+          Skipped steps can be configured from the corresponding admin pages.
+        </p>
+      </div>
+
+      {error && (
+        <div className="p-3 rounded-lg bg-red-50 border border-red-200 mb-6">
+          <p className="text-xs text-red-700">{error}</p>
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex items-center justify-between">
+        <div>
+          {onBack && (
+            <button
+              onClick={onBack}
+              className="px-4 py-2 text-sm text-[#666] hover:text-[#333] transition-colors"
+            >
+              Back
+            </button>
+          )}
+        </div>
+
+        <button
+          onClick={handleComplete}
+          disabled={completing}
+          className="px-6 py-2.5 bg-[#076bff] text-white text-sm font-medium rounded-lg hover:bg-[#0559d4] transition-colors disabled:opacity-50"
+        >
+          {completing ? "Starting..." : "Start Building"}
+        </button>
+      </div>
+    </div>
+  );
+}

package/components/admin/setup-wizard/SetupWizard.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { getSiteConfig } from "../../../lib/config";
+import type { SetupStatus } from "../../../lib/setup/detect";
+import { WelcomeStep } from "./WelcomeStep";
+import { DatabaseStep } from "./DatabaseStep";
+import { StorageStep } from "./StorageStep";
+import { BrandingStep } from "./BrandingStep";
+import { DoneStep } from "./DoneStep";
+
+// ── Types ──
+
+export interface WizardStepProps {
+  onNext: () => void;
+  onBack?: () => void;
+}
+
+interface StepDef {
+  id: string;
+  label: string;
+  component: React.ComponentType<WizardStepProps>;
+}
+
+const STEPS: StepDef[] = [
+  { id: "welcome", label: "Welcome", component: WelcomeStep },
+  { id: "database", label: "Database", component: DatabaseStep },
+  { id: "storage", label: "Storage", component: StorageStep },
+  { id: "branding", label: "Branding", component: BrandingStep },
+  { id: "done", label: "Done", component: DoneStep },
+];
+
+// ── Main Wizard ──
+
+interface SetupWizardProps {
+  initialStatus: SetupStatus;
+}
+
+export function SetupWizard({ initialStatus }: SetupWizardProps) {
+  const router = useRouter();
+  const config = getSiteConfig();
+
+  // Determine initial step based on what's already configured
+  const getInitialStep = (): number => {
+    if (!initialStatus.steps.database) return 0; // Welcome → Database
+    if (!initialStatus.steps.storage) return 2;  // Jump to Storage
+    if (!initialStatus.steps.branding) return 3;  // Jump to Branding
+    return 0; // All done — shouldn't be here, but start at Welcome
+  };
+
+  const [currentStep, setCurrentStep] = useState(getInitialStep);
+
+  const handleNext = useCallback(() => {
+    if (currentStep < STEPS.length - 1) {
+      setCurrentStep((s) => s + 1);
+    } else {
+      // Final step — redirect to admin
+      router.push("/admin/pages");
+      router.refresh();
+    }
+  }, [currentStep, router]);
+
+  const handleBack = useCallback(() => {
+    if (currentStep > 0) {
+      setCurrentStep((s) => s - 1);
+    }
+  }, [currentStep]);
+
+  const handleSkip = useCallback(() => {
+    router.push("/admin/pages");
+    router.refresh();
+  }, [router]);
+
+  const StepComponent = STEPS[currentStep].component;
+
+  return (
+    <div
+      className="min-h-screen bg-[#f8f8f8] flex flex-col"
+      style={{ fontFamily: "Inter, system-ui, sans-serif" }}
+    >
+      {/* Top bar */}
+      <header className="flex items-center justify-between px-8 py-4 border-b border-black/[0.06]">
+        <span className="text-xs font-semibold tracking-widest uppercase text-[#333]">
+          {config.name} <span className="text-[#999] font-normal">Setup</span>
+        </span>
+        <button
+          onClick={handleSkip}
+          className="text-xs text-[#999] hover:text-[#333] transition-colors"
+        >
+          Skip for now
+        </button>
+      </header>
+
+      {/* Stepper */}
+      <div className="flex justify-center pt-8 pb-4 px-8">
+        <div className="flex items-center gap-2">
+          {STEPS.map((step, i) => {
+            const isActive = i === currentStep;
+            const isDone = i < currentStep;
+            return (
+              <div key={step.id} className="flex items-center gap-2">
+                {/* Step dot + label */}
+                <div className="flex items-center gap-1.5">
+                  <div
+                    className={`w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-semibold transition-colors ${
+                      isActive
+                        ? "bg-[#076bff] text-white"
+                        : isDone
+                        ? "bg-[#076bff]/20 text-[#076bff]"
+                        : "bg-black/[0.06] text-[#999]"
+                    }`}
+                  >
+                    {isDone ? (
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                        <polyline points="20 6 9 17 4 12" />
+                      </svg>
+                    ) : (
+                      i + 1
+                    )}
+                  </div>
+                  <span
+                    className={`text-xs transition-colors ${
+                      isActive
+                        ? "text-[#333] font-medium"
+                        : isDone
+                        ? "text-[#076bff]"
+                        : "text-[#999]"
+                    }`}
+                  >
+                    {step.label}
+                  </span>
+                </div>
+                {/* Connector line */}
+                {i < STEPS.length - 1 && (
+                  <div
+                    className={`w-8 h-px transition-colors ${
+                      i < currentStep ? "bg-[#076bff]/30" : "bg-black/[0.08]"
+                    }`}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Step content */}
+      <div className="flex-1 flex justify-center px-8 pb-12">
+        <div className="w-full max-w-lg">
+          <StepComponent
+            onNext={handleNext}
+            onBack={currentStep > 0 ? handleBack : undefined}
+          />
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className="px-8 py-4 border-t border-black/[0.06] text-center">
+        <span className="text-[11px] text-[#bbb]">
+          Step {currentStep + 1} of {STEPS.length}
+        </span>
+      </footer>
+    </div>
+  );
+}