modern-cms 1.0.0

package/template/apps/web/app/admin/(protected)/collections/item/[itemId]/page.tsx

@@ -0,0 +1,375 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from "@dnd-kit/core";
+import { ArrowLeft, Save, Globe2, ImagePlus, Languages } from "lucide-react";
+import {
+  cloneWithNewIds,
+  createNode,
+  findNode,
+  findParent,
+  findAncestorChain,
+  insertNode,
+  isNodeOrDescendant,
+  moveNode,
+  removeNode,
+  duplicateNode,
+  updateNode,
+  getComponentDefinition,
+  SUPPORTED_LOCALES,
+  type CollectionItem,
+  type NavItem,
+  type PageNode,
+  type SiteTheme,
+} from "@pgcms/shared";
+import { api } from "@/lib/api";
+import { Palette } from "@/components/builder/Palette";
+import { Canvas } from "@/components/builder/Canvas";
+import { Inspector } from "@/components/builder/Inspector";
+import { IconRenderer } from "@/components/builder/IconRenderer";
+import { MediaPickerModal } from "@/components/builder/MediaPickerModal";
+
+type ItemWithCollection = CollectionItem & { collection: { name: string; slug: string } };
+
+/** The same visual builder as pages, editing one collection item's content plus its
+ * card metadata (excerpt, cover image) shown by Collection List blocks. */
+export default function CollectionItemBuilder() {
+  const params = useParams<{ itemId: string }>();
+  const router = useRouter();
+
+  const [item, setItem] = useState<ItemWithCollection | null>(null);
+  const [tree, setTree] = useState<PageNode | null>(null);
+  const [excerpt, setExcerpt] = useState("");
+  const [coverImage, setCoverImage] = useState("");
+  const [seoTitle, setSeoTitle] = useState("");
+  const [seoDescription, setSeoDescription] = useState("");
+  const [ogImage, setOgImage] = useState("");
+  const [noIndex, setNoIndex] = useState(false);
+  const [locale, setLocale] = useState("en");
+  const [translationOfId, setTranslationOfId] = useState("");
+  const [siblingItems, setSiblingItems] = useState<
+    Pick<CollectionItem, "id" | "title" | "slug" | "locale" | "translationOfId">[]
+  >([]);
+  const [seoOpen, setSeoOpen] = useState(false);
+  const [localeOpen, setLocaleOpen] = useState(false);
+  const [coverPicker, setCoverPicker] = useState(false);
+  const [theme, setTheme] = useState<SiteTheme | null>(null);
+  const [navItems, setNavItems] = useState<NavItem[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [activeDragType, setActiveDragType] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [savedAt, setSavedAt] = useState<Date | null>(null);
+
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  useEffect(() => {
+    api.get<ItemWithCollection>(`/api/collections/items/${params.itemId}`).then((it) => {
+      setItem(it);
+      setTree(it.content);
+      setExcerpt(it.excerpt ?? "");
+      setCoverImage(it.coverImage ?? "");
+      setSeoTitle(it.seoTitle ?? "");
+      setSeoDescription(it.seoDescription ?? "");
+      setOgImage(it.ogImage ?? "");
+      setNoIndex(it.noIndex ?? false);
+      setLocale(it.locale ?? "en");
+      setTranslationOfId(it.translationOfId ?? "");
+      // "Translation of" candidates are scoped to this item's own collection — a
+      // translation only makes sense among items sharing a collection.
+      api
+        .get<typeof siblingItems>(`/api/collections/${it.collectionId}/items`)
+        .then(setSiblingItems)
+        .catch(() => setSiblingItems([]));
+    });
+    api.get<SiteTheme>("/api/theme").then(setTheme);
+    api.get<NavItem[]>("/api/theme/nav").then(setNavItems);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params.itemId]);
+
+  function updateTree(updater: (prev: PageNode) => PageNode) {
+    setTree((prev) => (prev ? updater(prev) : prev));
+  }
+
+  function handleDragStart(event: DragStartEvent) {
+    const id = String(event.active.id);
+    if (id.startsWith("palette:")) setActiveDragType(id.slice("palette:".length));
+    else setActiveDragType((tree && findNode(tree, id)?.type) ?? null);
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    setActiveDragType(null);
+    const { active, over } = event;
+    if (!over || !tree) return;
+
+    const activeId = String(active.id);
+    const overId = String(over.id);
+    const overData = over.data.current as { type?: string; parentId?: string } | undefined;
+
+    let targetParentId: string;
+    let targetIndex: number;
+    if (overData?.type === "container" && overData.parentId) {
+      targetParentId = overData.parentId;
+      targetIndex = findNode(tree, targetParentId)?.children.length ?? 0;
+    } else {
+      const parentInfo = findParent(tree, overId);
+      if (!parentInfo) return;
+      targetParentId = parentInfo.parent.id;
+      targetIndex = parentInfo.index;
+    }
+
+    const targetDef = getComponentDefinition(findNode(tree, targetParentId)?.type ?? "");
+    if (targetParentId !== tree.id && !targetDef?.allowsChildren) return;
+
+    if (activeId.startsWith("palette:")) {
+      const newNode = createNode(activeId.slice("palette:".length));
+      updateTree((prev) => insertNode(prev, targetParentId, newNode, targetIndex));
+      setSelectedId(newNode.id);
+      return;
+    }
+    if (activeId.startsWith("block:")) {
+      const blockId = activeId.slice("block:".length);
+      api
+        .get<{ id: string; content: PageNode }[]>("/api/blocks")
+        .then((blocks) => {
+          const block = blocks.find((b) => b.id === blockId);
+          if (!block) return;
+          const copy = cloneWithNewIds(block.content);
+          updateTree((prev) => insertNode(prev, targetParentId, copy, targetIndex));
+          setSelectedId(copy.id);
+        })
+        .catch(console.error);
+      return;
+    }
+
+    const activeNode = findNode(tree, activeId);
+    if (!activeNode || isNodeOrDescendant(activeNode, targetParentId) || activeId === overId) return;
+    updateTree((prev) => {
+      const before = findParent(prev, activeId);
+      let idx = targetIndex;
+      if (before && before.parent.id === targetParentId && before.index < targetIndex) idx = targetIndex - 1;
+      return moveNode(prev, activeId, targetParentId, idx);
+    });
+  }
+
+  async function save(publishToggle?: boolean) {
+    if (!item || !tree) return;
+    setSaving(true);
+    try {
+      const nextStatus = publishToggle ? (item.status === "PUBLISHED" ? "DRAFT" : "PUBLISHED") : undefined;
+      const updated = await api.put<ItemWithCollection>(`/api/collections/items/${item.id}`, {
+        content: tree,
+        excerpt: excerpt || null,
+        coverImage: coverImage || null,
+        seoTitle: seoTitle || null,
+        seoDescription: seoDescription || null,
+        ogImage: ogImage || null,
+        noIndex,
+        locale,
+        translationOfId: translationOfId || null,
+        ...(nextStatus ? { status: nextStatus } : {}),
+      });
+      setItem((prev) => (prev ? { ...prev, ...updated, collection: prev.collection } : prev));
+      setSavedAt(new Date());
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const selectedNode = selectedId && tree ? findNode(tree, selectedId) : null;
+  const ancestors = selectedId && tree ? findAncestorChain(tree, selectedId) : [];
+
+  if (!item || !tree || !theme) {
+    return <div className="p-8 text-sm text-slate-400">Loading item…</div>;
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between border-b bg-white px-4 py-2 shrink-0">
+        <div className="flex items-center gap-3 min-w-0">
+          <button onClick={() => router.push("/admin/collections")} className="text-slate-500 hover:text-slate-800">
+            <ArrowLeft size={18} />
+          </button>
+          <div className="min-w-0">
+            <div className="font-semibold text-sm truncate">{item.title}</div>
+            <div className="text-xs text-slate-400 truncate">
+              /{item.collection.slug}/{item.slug} · {item.status}
+              {savedAt && ` · saved ${savedAt.toLocaleTimeString()}`}
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <input
+            value={excerpt}
+            onChange={(e) => setExcerpt(e.target.value)}
+            placeholder="Excerpt (shown on listing cards)"
+            className="w-72 border rounded-md px-2 py-1.5 text-xs"
+          />
+          <button
+            onClick={() => setCoverPicker(true)}
+            title="Cover image (shown on listing cards)"
+            className={`flex items-center gap-1.5 px-2.5 py-1.5 text-xs border rounded-md hover:bg-slate-50 ${
+              coverImage ? "text-green-700 border-green-300" : "text-slate-600"
+            }`}
+          >
+            <ImagePlus size={14} /> {coverImage ? "Cover ✓" : "Cover"}
+          </button>
+          <button
+            onClick={() => setLocaleOpen((o) => !o)}
+            className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs border rounded-md hover:bg-slate-50 text-slate-600"
+          >
+            <Languages size={14} /> {locale.toUpperCase()} {localeOpen ? "▲" : "▼"}
+          </button>
+          <button
+            onClick={() => setSeoOpen((o) => !o)}
+            className="px-2.5 py-1.5 text-xs border rounded-md hover:bg-slate-50 text-slate-600"
+          >
+            SEO {seoOpen ? "▲" : "▼"}
+          </button>
+          <button
+            onClick={() => save()}
+            disabled={saving}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-sm border rounded-md hover:bg-slate-50 disabled:opacity-50"
+          >
+            <Save size={15} /> Save
+          </button>
+          <button
+            onClick={() => save(true)}
+            disabled={saving}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+          >
+            <Globe2 size={15} /> {item.status === "PUBLISHED" ? "Unpublish" : "Publish"}
+          </button>
+        </div>
+      </div>
+
+      {localeOpen && (
+        <div className="border-b bg-slate-50 px-4 py-3 grid grid-cols-2 gap-3 text-sm shrink-0">
+          <div className="space-y-1">
+            <label className="text-xs font-medium text-slate-600">Language</label>
+            <select
+              value={locale}
+              onChange={(e) => setLocale(e.target.value)}
+              className="w-full border rounded-md px-2 py-1.5 text-xs bg-white"
+            >
+              {SUPPORTED_LOCALES.map((l) => (
+                <option key={l.code} value={l.code}>
+                  {l.label} ({l.code}){l.rtl ? " · RTL" : ""}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="space-y-1">
+            <label className="text-xs font-medium text-slate-600">Translation of</label>
+            <select
+              value={translationOfId}
+              onChange={(e) => setTranslationOfId(e.target.value)}
+              className="w-full border rounded-md px-2 py-1.5 text-xs bg-white"
+            >
+              <option value="">Not a translation (original item)</option>
+              {siblingItems
+                .filter((s) => s.id !== item.id && !s.translationOfId)
+                .map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.title} (/{s.slug} · {s.locale ?? "en"})
+                  </option>
+                ))}
+            </select>
+          </div>
+        </div>
+      )}
+
+      {seoOpen && (
+        <div className="border-b bg-slate-50 px-4 py-3 grid grid-cols-2 gap-3 text-sm shrink-0">
+          <input
+            value={seoTitle}
+            onChange={(e) => setSeoTitle(e.target.value)}
+            placeholder="SEO title"
+            className="border rounded-md px-2 py-1.5 text-xs"
+          />
+          <input
+            value={ogImage}
+            onChange={(e) => setOgImage(e.target.value)}
+            placeholder="OG image URL (or use cover)"
+            className="border rounded-md px-2 py-1.5 text-xs"
+          />
+          <textarea
+            value={seoDescription}
+            onChange={(e) => setSeoDescription(e.target.value)}
+            placeholder="SEO description"
+            rows={2}
+            className="col-span-2 border rounded-md px-2 py-1.5 text-xs"
+          />
+          <label className="col-span-2 flex items-center gap-2 text-xs text-slate-600">
+            <input type="checkbox" checked={noIndex} onChange={(e) => setNoIndex(e.target.checked)} />
+            Hide from search engines (noindex)
+          </label>
+        </div>
+      )}
+
+      <DndContext sensors={sensors} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+        <div className="flex flex-1 overflow-hidden">
+          <Palette />
+          <Canvas
+            tree={tree}
+            theme={theme}
+            navItems={navItems}
+            selectedId={selectedId}
+            onSelect={(id) => setSelectedId(id === "" ? null : id)}
+            onDelete={(id) => {
+              updateTree((prev) => removeNode(prev, id));
+              setSelectedId((sel) => (sel === id ? null : sel));
+            }}
+            onDuplicate={(id) => updateTree((prev) => duplicateNode(prev, id))}
+            onToggleHidden={(id) =>
+              updateTree((prev) => updateNode(prev, id, (n) => ({ ...n, props: { ...n.props, hidden: !n.props.hidden } })))
+            }
+            onChangeStyle={(id, style) => updateTree((prev) => updateNode(prev, id, (n) => ({ ...n, style })))}
+          />
+          <Inspector
+            node={selectedNode ?? null}
+            ancestors={ancestors}
+            onSelect={(id) => setSelectedId(id)}
+            onChangeProps={(props) =>
+              selectedId && updateTree((prev) => updateNode(prev, selectedId, (n) => ({ ...n, props })))
+            }
+            onChangeStyle={(style) =>
+              selectedId && updateTree((prev) => updateNode(prev, selectedId, (n) => ({ ...n, style })))
+            }
+            onChangeColumnCount={() => {}}
+            onChangeZoneCount={() => {}}
+            onChangeGridDimensions={() => {}}
+            onEnableHeaderZones={() => {}}
+          />
+        </div>
+        <DragOverlay>
+          {activeDragType && (
+            <div className="bg-slate-900 text-white text-xs rounded px-3 py-2 flex items-center gap-2 shadow-lg">
+              <IconRenderer name={getComponentDefinition(activeDragType)?.icon ?? "Square"} size={14} />
+              {getComponentDefinition(activeDragType)?.label ?? activeDragType}
+            </div>
+          )}
+        </DragOverlay>
+      </DndContext>
+
+      {coverPicker && (
+        <MediaPickerModal
+          accept="image"
+          onSelect={(url) => {
+            setCoverImage(url);
+            setCoverPicker(false);
+          }}
+          onClose={() => setCoverPicker(false)}
+        />
+      )}
+    </div>
+  );
+}

package/template/apps/web/app/admin/(protected)/collections/page.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Plus, Trash2, Newspaper, PencilLine } from "lucide-react";
+import type { Collection, PageStatus } from "@pgcms/shared";
+import { api } from "@/lib/api";
+
+type CollectionWithCount = Collection & { _count: { items: number } };
+type ItemRow = { id: string; slug: string; title: string; status: PageStatus; publishedAt: string | null; updatedAt: string };
+
+/** Master–detail: collections on the left, the selected collection's items on the
+ * right. Item content itself is edited in the full builder (Edit → item builder). */
+export default function CollectionsAdmin() {
+  const [collections, setCollections] = useState<CollectionWithCount[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [items, setItems] = useState<ItemRow[] | null>(null);
+  const [newName, setNewName] = useState("");
+  const [newSlug, setNewSlug] = useState("");
+  const [newItemTitle, setNewItemTitle] = useState("");
+  const [newItemSlug, setNewItemSlug] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const selected = collections.find((c) => c.id === selectedId) ?? null;
+
+  async function loadCollections() {
+    const rows = await api.get<CollectionWithCount[]>("/api/collections");
+    setCollections(rows);
+    if (!selectedId && rows.length > 0) setSelectedId(rows[0].id);
+  }
+
+  useEffect(() => {
+    loadCollections().catch(console.error);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!selectedId) return;
+    setItems(null);
+    api.get<ItemRow[]>(`/api/collections/${selectedId}/items`).then(setItems).catch(console.error);
+  }, [selectedId]);
+
+  async function createCollection() {
+    setError(null);
+    try {
+      const created = await api.post<Collection>("/api/collections", { name: newName, slug: newSlug });
+      setNewName("");
+      setNewSlug("");
+      await loadCollections();
+      setSelectedId(created.id);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create collection");
+    }
+  }
+
+  async function deleteCollection(id: string) {
+    if (!confirm("Delete this collection AND all its items? This cannot be undone.")) return;
+    await api.delete(`/api/collections/${id}`);
+    setSelectedId(null);
+    await loadCollections();
+  }
+
+  async function createItem() {
+    if (!selectedId) return;
+    setError(null);
+    try {
+      await api.post(`/api/collections/${selectedId}/items`, { title: newItemTitle, slug: newItemSlug });
+      setNewItemTitle("");
+      setNewItemSlug("");
+      const rows = await api.get<ItemRow[]>(`/api/collections/${selectedId}/items`);
+      setItems(rows);
+      await loadCollections();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create item");
+    }
+  }
+
+  async function deleteItem(id: string) {
+    if (!confirm("Delete this item?")) return;
+    await api.delete(`/api/collections/items/${id}`);
+    if (selectedId) {
+      const rows = await api.get<ItemRow[]>(`/api/collections/${selectedId}/items`);
+      setItems(rows);
+    }
+    await loadCollections();
+  }
+
+  const slugify = (v: string) =>
+    v
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-|-$/g, "");
+
+  return (
+    <div className="p-6 max-w-5xl">
+      <h1 className="text-xl font-semibold mb-1">Collections</h1>
+      <p className="text-sm text-slate-500 mb-6">
+        Dynamic content types — a Blog, News, Events. Items live at /{"{collection}"}/{"{item}"} and are listed
+        anywhere via the &quot;Collection List&quot; block.
+      </p>
+      {error && <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-md px-3 py-2 mb-4">{error}</div>}
+
+      <div className="grid grid-cols-[260px_1fr] gap-6">
+        <div className="space-y-2">
+          {collections.map((c) => (
+            <div
+              key={c.id}
+              className={`flex items-center justify-between border rounded-md px-3 py-2 cursor-pointer ${
+                selectedId === c.id ? "border-blue-400 bg-blue-50" : "bg-white hover:bg-slate-50"
+              }`}
+              onClick={() => setSelectedId(c.id)}
+            >
+              <div className="flex items-center gap-2 text-sm min-w-0">
+                <Newspaper size={15} className="text-slate-400 shrink-0" />
+                <div className="min-w-0">
+                  <div className="font-medium truncate">{c.name}</div>
+                  <div className="text-xs text-slate-400 truncate">
+                    /{c.slug} · {c._count.items} item{c._count.items === 1 ? "" : "s"}
+                  </div>
+                </div>
+              </div>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  deleteCollection(c.id);
+                }}
+                className="text-slate-300 hover:text-red-600 shrink-0"
+              >
+                <Trash2 size={14} />
+              </button>
+            </div>
+          ))}
+
+          <div className="border rounded-md p-3 space-y-2 bg-slate-50">
+            <div className="text-xs font-medium text-slate-500">New collection</div>
+            <input
+              value={newName}
+              onChange={(e) => {
+                setNewName(e.target.value);
+                setNewSlug(slugify(e.target.value));
+              }}
+              placeholder="Name (e.g. Blog)"
+              className="w-full border rounded-md px-2 py-1.5 text-sm"
+            />
+            <input
+              value={newSlug}
+              onChange={(e) => setNewSlug(slugify(e.target.value))}
+              placeholder="Slug (e.g. blog)"
+              className="w-full border rounded-md px-2 py-1.5 text-sm font-mono"
+            />
+            <button
+              onClick={createCollection}
+              disabled={!newName || !newSlug}
+              className="w-full flex items-center justify-center gap-1.5 bg-blue-600 text-white rounded-md py-1.5 text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
+            >
+              <Plus size={14} /> Create
+            </button>
+          </div>
+        </div>
+
+        <div>
+          {!selected && <div className="text-sm text-slate-400">Create or select a collection.</div>}
+          {selected && (
+            <>
+              <div className="flex items-center gap-3 mb-3">
+                <input
+                  value={newItemTitle}
+                  onChange={(e) => {
+                    setNewItemTitle(e.target.value);
+                    setNewItemSlug(slugify(e.target.value));
+                  }}
+                  placeholder={`New ${selected.name} item title`}
+                  className="flex-1 border rounded-md px-3 py-2 text-sm"
+                />
+                <input
+                  value={newItemSlug}
+                  onChange={(e) => setNewItemSlug(slugify(e.target.value))}
+                  placeholder="slug"
+                  className="w-44 border rounded-md px-3 py-2 text-sm font-mono"
+                />
+                <button
+                  onClick={createItem}
+                  disabled={!newItemTitle || !newItemSlug}
+                  className="flex items-center gap-1.5 bg-blue-600 text-white rounded-md px-3 py-2 text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
+                >
+                  <Plus size={14} /> Add
+                </button>
+              </div>
+
+              {items === null && <div className="text-sm text-slate-400">Loading items…</div>}
+              {items?.length === 0 && <div className="text-sm text-slate-400">No items yet — add the first one above.</div>}
+              <div className="space-y-2">
+                {items?.map((item) => (
+                  <div key={item.id} className="flex items-center justify-between border rounded-md px-4 py-3 bg-white">
+                    <div className="text-sm min-w-0">
+                      <div className="font-medium truncate">{item.title}</div>
+                      <div className="text-xs text-slate-400">
+                        /{selected.slug}/{item.slug} ·{" "}
+                        <span className={item.status === "PUBLISHED" ? "text-green-600" : "text-amber-600"}>
+                          {item.status}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 shrink-0">
+                      <Link
+                        href={`/admin/collections/item/${item.id}`}
+                        className="flex items-center gap-1.5 text-xs border rounded-md px-2.5 py-1.5 hover:bg-slate-50"
+                      >
+                        <PencilLine size={13} /> Edit
+                      </Link>
+                      <button onClick={() => deleteItem(item.id)} className="text-slate-300 hover:text-red-600">
+                        <Trash2 size={15} />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/apps/web/app/admin/(protected)/forms/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Trash2, Download } from "lucide-react";
+import { api } from "@/lib/api";
+
+type Submission = { id: string; formName: string; pageSlug: string; data: Record<string, string>; createdAt: string };
+
+export default function FormSubmissionsPage() {
+  const [submissions, setSubmissions] = useState<Submission[] | null>(null);
+  const [formFilter, setFormFilter] = useState<string>("");
+
+  function refresh() {
+    const query = formFilter ? `?formName=${encodeURIComponent(formFilter)}` : "";
+    api.get<Submission[]>(`/api/forms/submissions${query}`).then(setSubmissions);
+  }
+
+  useEffect(refresh, [formFilter]);
+
+  async function remove(id: string) {
+    if (!confirm("Delete this submission?")) return;
+    await api.delete(`/api/forms/submissions/${id}`);
+    refresh();
+  }
+
+  function exportCsv() {
+    const query = formFilter ? `?formName=${encodeURIComponent(formFilter)}` : "";
+    window.open(`/api/forms/submissions/export${query}`, "_blank");
+  }
+
+  const formNames = Array.from(new Set(submissions?.map((s) => s.formName) ?? []));
+
+  return (
+    <div className="p-8 max-w-4xl">
+      <div className="flex items-center justify-between mb-6 gap-3 flex-wrap">
+        <h1 className="text-2xl font-semibold">Form Submissions</h1>
+        <div className="flex items-center gap-2">
+          <select
+            value={formFilter}
+            onChange={(e) => setFormFilter(e.target.value)}
+            className="border rounded-md px-3 py-2 text-sm bg-white"
+          >
+            <option value="">All forms</option>
+            {formNames.map((name) => (
+              <option key={name} value={name}>
+                {name}
+              </option>
+            ))}
+          </select>
+          <button
+            onClick={exportCsv}
+            className="flex items-center gap-1.5 border rounded-md px-3 py-2 text-sm hover:bg-slate-50"
+          >
+            <Download size={15} /> Export CSV
+          </button>
+        </div>
+      </div>
+
+      <div className="bg-white border rounded-lg divide-y">
+        {submissions?.length === 0 && <div className="p-6 text-sm text-slate-500">No submissions yet.</div>}
+        {submissions?.map((sub) => (
+          <div key={sub.id} className="flex items-start justify-between gap-4 px-4 py-3">
+            <div className="min-w-0">
+              <div className="flex items-center gap-2 text-xs text-slate-400 mb-1">
+                <span className="font-medium text-slate-600">{sub.formName}</span>
+                <span>·</span>
+                <span>{sub.pageSlug || "/"}</span>
+                <span>·</span>
+                <span>{new Date(sub.createdAt).toLocaleString()}</span>
+              </div>
+              <dl className="grid grid-cols-[auto,1fr] gap-x-3 gap-y-1 text-sm">
+                {Object.entries(sub.data).map(([key, value]) => (
+                  <div key={key} className="contents">
+                    <dt className="text-slate-400 capitalize">{key}:</dt>
+                    <dd className="text-slate-800 break-words">{value}</dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+            <button onClick={() => remove(sub.id)} className="text-slate-400 hover:text-red-600 shrink-0">
+              <Trash2 size={16} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}