From 5cd74762fe05a380671e28c8a52b9e9026fb1632 Mon Sep 17 00:00:00 2001
From: Dave <david.els1@outlook.com>
Date: Wed, 16 Sep 2026 11:29:08 +0200
Subject: [PATCH] feat(admin): projects page seeding a full board on create

---
 src/app/admin/projects/page.tsx       |  59 ++++++++++
 src/components/admin/project-form.tsx | 158 ++++++++++++++++++++++++++
 2 files changed, 217 insertions(+)
 create mode 100644 src/app/admin/projects/page.tsx
 create mode 100644 src/components/admin/project-form.tsx

diff --git a/src/app/admin/projects/page.tsx b/src/app/admin/projects/page.tsx
new file mode 100644
index 0000000..9bf3cc2
--- /dev/null
+++ b/src/app/admin/projects/page.tsx
@@ -0,0 +1,59 @@
+import Link from "next/link";
+
+import { AppShell } from "@/components/shell/app-shell";
+import { TopBar } from "@/components/shell/top-bar";
+import { AdminTable, AdminCell } from "@/components/admin/admin-table";
+import { NewProjectForm } from "@/components/admin/project-form";
+import { Pill } from "@/components/ui/pill";
+import { loadClientOptions, loadProjectsAdmin } from "@/lib/data/admin";
+
+export default async function AdminProjectsPage() {
+  const [rows, clients] = await Promise.all([
+    loadProjectsAdmin(),
+    loadClientOptions(),
+  ]);
+
+  return (
+    <AppShell role="owner" currentPath="/admin/projects">
+      <TopBar title="Projects" subtitle="One project, one repository" />
+
+      <div className="flex-1 space-y-4 overflow-y-auto p-6">
+        <NewProjectForm clients={clients} />
+
+        <AdminTable
+          headers={["Project", "Client", "Repository", "Cards", "Status"]}
+          empty="No projects yet."
+        >
+          {rows.map(({ project, client, cardCount }) => (
+            <tr key={project.id}>
+              <AdminCell>
+                <Link
+                  href={`/p/${client.slug}/${project.slug}`}
+                  className="font-medium text-text-primary hover:text-brand"
+                >
+                  {project.name}
+                </Link>
+              </AdminCell>
+              <AdminCell>{client.name}</AdminCell>
+              <AdminCell>
+                {project.repo_owner && project.repo_name ? (
+                  <code className="text-xs">
+                    {project.repo_owner}/{project.repo_name}
+                  </code>
+                ) : (
+                  <span className="text-xs text-text-muted">Not linked</span>
+                )}
+              </AdminCell>
+              <AdminCell className="tabular">{cardCount}</AdminCell>
+              <AdminCell>
+                <Pill tone={project.status === "active" ? "brand" : "neutral"}>
+                  {project.status}
+                </Pill>
+              </AdminCell>
+            </tr>
+          ))}
+        </AdminTable>
+      </div>
+    </AppShell>
+  );
+}
\ No newline at end of file
diff --git a/src/components/admin/project-form.tsx b/src/components/admin/project-form.tsx
new file mode 100644
index 0000000..ffcacb6
--- /dev/null
+++ b/src/components/admin/project-form.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Plus } from "lucide-react";
+
+import { createProject } from "@/app/actions/projects";
+import type { ClientRecord } from "@/lib/pb/types";
+
+export function NewProjectForm({ clients }: { clients: ClientRecord[] }) {
+  const [open, setOpen] = useState(false);
+  const [clientId, setClientId] = useState(clients[0]?.id ?? "");
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [repoOwner, setRepoOwner] = useState("");
+  const [repoName, setRepoName] = useState("");
+  const [pending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+
+  if (clients.length === 0) {
+    return (
+      <p className="text-xs text-text-muted">Create a client first.</p>
+    );
+  }
+
+  function submit(event: React.FormEvent) {
+    event.preventDefault();
+    if (!name.trim() || !clientId) return;
+    setError(null);
+
+    startTransition(async () => {
+      try {
+        await createProject({
+          clientId,
+          name,
+          description,
+          repoOwner,
+          repoName,
+          color: "#2f6dad",
+        });
+        setName("");
+        setDescription("");
+        setRepoOwner("");
+        setRepoName("");
+        setOpen(false);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Could not create that project");
+      }
+    });
+  }
+
+  if (!open) {
+    return (
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="inline-flex items-center gap-1.5 rounded-lg bg-brand px-3 py-1.5 text-sm font-medium text-brand-fg transition-colors hover:bg-brand-hover"
+      >
+        <Plus size={14} strokeWidth={2} />
+        New project
+      </button>
+    );
+  }
+
+  const field =
+    "w-full rounded-lg border border-border-subtle bg-panel px-3 py-2 text-sm text-text-primary outline-none focus:border-brand";
+
+  return (
+    <form
+      onSubmit={submit}
+      className="w-full space-y-3 rounded-[var(--radius-tile)] border border-border-subtle bg-surface p-4"
+    >
+      <div className="grid gap-3 sm:grid-cols-2">
+        <label className="space-y-1">
+          <span className="text-xs text-text-muted">Client</span>
+          <select
+            value={clientId}
+            onChange={(event) => setClientId(event.target.value)}
+            className={field}
+          >
+            {clients.map((client) => (
+              <option key={client.id} value={client.id}>
+                {client.name}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="space-y-1">
+          <span className="text-xs text-text-muted">Project name</span>
+          <input
+            autoFocus
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+            className={field}
+          />
+        </label>
+      </div>
+
+      <label className="block space-y-1">
+        <span className="text-xs text-text-muted">Description</span>
+        <textarea
+          rows={2}
+          value={description}
+          onChange={(event) => setDescription(event.target.value)}
+          className={field}
+        />
+      </label>
+
+      <div className="grid gap-3 sm:grid-cols-2">
+        <label className="space-y-1">
+          <span className="text-xs text-text-muted">
+            Repository owner{" "}
+            <span className="text-text-muted">(used from Phase 2)</span>
+          </span>
+          <input
+            value={repoOwner}
+            onChange={(event) => setRepoOwner(event.target.value)}
+            placeholder="David"
+            className={field}
+          />
+        </label>
+
+        <label className="space-y-1">
+          <span className="text-xs text-text-muted">Repository name</span>
+          <input
+            value={repoName}
+            onChange={(event) => setRepoName(event.target.value)}
+            placeholder="WFDASH-WEBAPP"
+            className={field}
+          />
+        </label>
+      </div>
+
+      {error && (
+        <p role="alert" className="text-xs text-accent">
+          {error}
+        </p>
+      )}
+
+      <div className="flex items-center gap-2">
+        <button
+          type="submit"
+          disabled={pending || !name.trim()}
+          className="rounded-lg bg-brand px-3 py-2 text-sm font-medium text-brand-fg disabled:opacity-50"
+        >
+          {pending ? "Creating…" : "Create project"}
+        </button>
+        <button
+          type="button"
+          onClick={() => setOpen(false)}
+          className="px-2 py-2 text-sm text-text-muted hover:text-text-secondary"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+}
\ No newline at end of file