@morphika/webframe 0.1.0

package/app/admin/settings/page.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import MetadataEditor from "../../../components/admin/MetadataEditor";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import type { SiteSettings } from "../../../lib/sanity/types";
+
+/**
+ * /admin/settings — Global settings page.
+ * Only contains Site Metadata.
+ * Navigation + Footer are managed in /admin/navigation.
+ */
+export default function AdminSettingsPage() {
+  // ── Global settings state ──
+  const [settings, setSettings] = useState<SiteSettings | null>(null);
+
+  // ── UI state ──
+  const [loading, setLoading] = useState(true);
+  const [savingMeta, setSavingMeta] = useState(false);
+  const [message, setMessage] = useState<{
+    type: "success" | "error";
+    text: string;
+  } | null>(null);
+
+  // ── Load settings ──
+  const fetchSettings = useCallback(async () => {
+    try {
+      const res = await fetch("/api/admin/settings");
+      if (res.ok) {
+        const data = await res.json();
+        setSettings(data.settings || null);
+      }
+    } catch {
+      setMessage({ type: "error", text: "Failed to load settings" });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchSettings();
+  }, [fetchSettings]);
+
+  // ── Auto-dismiss messages ──
+  useEffect(() => {
+    if (!message) return;
+    const timer = setTimeout(() => setMessage(null), 5000);
+    return () => clearTimeout(timer);
+  }, [message]);
+
+  // ── Save handler ──
+  const handleSaveMeta = async (data: {
+    default_title: string;
+    default_description: string;
+    default_og_image: string;
+    favicon_path: string;
+    analytics_id: string;
+  }) => {
+    setSavingMeta(true);
+    setMessage(null);
+    try {
+      const res = await fetch("/api/admin/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...csrfHeaders() },
+        body: JSON.stringify({ section: "metadata", data }),
+      });
+      if (!res.ok) {
+        const errData = await res.json();
+        throw new Error(errData.error || "Save failed");
+      }
+      setMessage({ type: "success", text: "Metadata saved" });
+      // Refresh settings to get updated data
+      const settingsRes = await fetch("/api/admin/settings");
+      if (settingsRes.ok) {
+        const settingsData = await settingsRes.json();
+        setSettings(settingsData.settings || null);
+      }
+    } catch (err) {
+      setMessage({
+        type: "error",
+        text: err instanceof Error ? err.message : "Save failed",
+      });
+    } finally {
+      setSavingMeta(false);
+    }
+  };
+
+  // ── Loading state ──
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <span className="text-sm text-neutral-400 animate-pulse">
+          Loading settings...
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-2xl font-semibold text-neutral-900">
+        Metadata
+      </h1>
+
+      {/* Message banner */}
+      {message && (
+        <div
+          className={`p-3 rounded-xl border transition-opacity ${
+            message.type === "success"
+              ? "border-green-200 bg-green-50 text-green-700"
+              : "border-red-200 bg-red-50 text-red-700"
+          }`}
+        >
+          <p className="text-sm">{message.text}</p>
+        </div>
+      )}
+
+      {/* ====== SITE METADATA ====== */}
+      <MetadataEditor
+        initialData={{
+          default_title: settings?.default_title || "",
+          default_description: settings?.default_description || "",
+          default_og_image: settings?.default_og_image || "",
+          favicon_path: settings?.favicon_path || "",
+          analytics_id: settings?.analytics_id || "",
+        }}
+        onSave={handleSaveMeta}
+        saving={savingMeta}
+      />
+    </div>
+  );
+}

package/app/admin/setup/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { SetupWizard } from "../../../components/admin/setup-wizard";
+import type { SetupStatus } from "../../../lib/setup/detect";
+
+/**
+ * /admin/setup — Onboarding wizard for new instances.
+ *
+ * Fetches the current setup status from the API, then renders the wizard.
+ * If setup is already complete, redirects back to the admin dashboard.
+ *
+ * Users can re-run the wizard anytime from the admin sidebar link.
+ * When navigating here directly (from sidebar), the wizard always shows
+ * regardless of completion status.
+ */
+export default function SetupPage() {
+  const router = useRouter();
+  const [status, setStatus] = useState<SetupStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("/api/admin/setup")
+      .then((res) => {
+        if (res.status === 401) {
+          // Not authenticated — redirect to login
+          router.push("/admin/login");
+          return null;
+        }
+        return res.json();
+      })
+      .then((data: SetupStatus | null) => {
+        if (!data) return;
+        // Always show the wizard — even if complete (user may be re-running)
+        setStatus(data);
+        setLoading(false);
+      })
+      .catch(() => {
+        // On error, still show wizard with default status
+        setStatus({
+          complete: false,
+          steps: { database: false, storage: false, branding: false },
+        });
+        setLoading(false);
+      });
+  }, [router]);
+
+  if (loading || !status) {
+    return (
+      <div
+        className="min-h-screen bg-[#f8f8f8] flex items-center justify-center"
+        style={{ fontFamily: "Inter, system-ui, sans-serif" }}
+      >
+        <div className="text-center">
+          <div className="w-6 h-6 border-2 border-[#076bff] border-t-transparent rounded-full animate-spin mx-auto mb-3" />
+          <p className="text-xs text-[#999]">Checking setup status...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return <SetupWizard initialStatus={status} />;
+}