Voeg bewerken van sociaal ondernemer toe (naam en slug)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/tenants/[id]/page.tsx

@@ -0,0 +1,95 @@
+import Link from "next/link";
+import { notFound, redirect } from "next/navigation";
+import { getSession } from "../../../lib/auth";
+import { getAccount } from "../../../lib/platform-db";
+import { updateTenant } from "../actions";
+
+export default async function EditTenantPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ error?: string }>;
+}) {
+  const session = await getSession();
+  if (!session) redirect("/login");
+
+  const { id } = await params;
+  const { error } = await searchParams;
+  const account = getAccount(Number(id));
+  if (!account) notFound();
+
+  const errorMsg =
+    error === "slug"
+      ? "Slug is al in gebruik."
+      : error === "missing"
+      ? "Vul alle velden in."
+      : null;
+
+  const inputClass =
+    "rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-500";
+
+  return (
+    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
+      <header className="bg-white dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800">
+        <div className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
+          <span className="font-semibold text-zinc-900 dark:text-zinc-100">Rikx Beheer</span>
+          <span className="text-sm text-zinc-500">{session.email}</span>
+        </div>
+      </header>
+
+      <main className="max-w-5xl mx-auto px-6 py-10 flex flex-col gap-6">
+        <Link
+          href="/tenants"
+          className="text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors"
+        >
+          ← Terug naar overzicht
+        </Link>
+        <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+          Sociaal ondernemer bewerken
+        </h2>
+        {errorMsg && <p className="text-sm text-red-600 dark:text-red-400">{errorMsg}</p>}
+        <form
+          action={updateTenant}
+          className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 grid grid-cols-1 sm:grid-cols-2 gap-4"
+        >
+          <input type="hidden" name="account_id" value={account.id} />
+          <div className="flex flex-col gap-1">
+            <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Bedrijfsnaam</label>
+            <input type="text" name="name" required defaultValue={account.name} className={inputClass} />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
+              Slug <span className="text-zinc-400 font-normal">(URL-naam)</span>
+            </label>
+            <input
+              type="text"
+              name="slug"
+              required
+              pattern="[a-z0-9-]+"
+              defaultValue={account.slug}
+              className={`${inputClass} font-mono`}
+            />
+            <p className="text-xs text-zinc-500">
+              Let op: een andere slug wijzigt de URL ({account.slug}.rikxplatform.nl).
+            </p>
+          </div>
+          <div className="sm:col-span-2 flex gap-3">
+            <button
+              type="submit"
+              className="rounded-lg bg-zinc-900 dark:bg-zinc-100 px-5 py-2 text-sm font-medium text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors"
+            >
+              Opslaan
+            </button>
+            <Link
+              href="/tenants"
+              className="rounded-lg border border-zinc-300 dark:border-zinc-700 px-5 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+            >
+              Annuleren
+            </Link>
+          </div>
+        </form>
+      </main>
+    </div>
+  );
+}

app/tenants/actions.ts

@@ -57,3 +57,25 @@ export async function deleteTenant(formData: FormData) {
 
   redirect("/tenants");
 }
+
+export async function updateTenant(formData: FormData) {
+  const session = await getSession();
+  if (!session) redirect("/login");
+
+  const accountId = Number(formData.get("account_id"));
+  const name = ((formData.get("name") as string) ?? "").trim();
+  const slug = ((formData.get("slug") as string) ?? "").trim().toLowerCase().replace(/[^a-z0-9-]/g, "-");
+
+  if (!accountId) redirect("/tenants");
+  if (!name || !slug) redirect(`/tenants/${accountId}?error=missing`);
+
+  const db = getPlatformDb();
+  const existing = db
+    .prepare("SELECT id FROM accounts WHERE slug = ? AND id != ?")
+    .get(slug, accountId);
+  if (existing) redirect(`/tenants/${accountId}?error=slug`);
+
+  db.prepare("UPDATE accounts SET name = ?, slug = ? WHERE id = ?").run(name, slug, accountId);
+
+  redirect("/tenants");
+}

app/tenants/page.tsx

@@ -57,7 +57,7 @@ export default async function TenantsPage({
                     <th className="text-left px-4 py-3 font-medium">URL</th>
                     <th className="text-left px-4 py-3 font-medium">Gebruikers</th>
                     <th className="text-left px-4 py-3 font-medium">Aangemaakt</th>
-                    <th className="px-4 py-3" colSpan={2}></th>
+                    <th className="px-4 py-3" colSpan={3}></th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
@@ -89,6 +89,14 @@ export default async function TenantsPage({
                           Inloggen ↗
                         </a>
                       </td>
+                      <td className="px-4 py-3 text-right">
+                        <a
+                          href={`/tenants/${a.id}`}
+                          className="text-xs text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+                        >
+                          Bewerken
+                        </a>
+                      </td>
                       <td className="px-4 py-3 text-right">
                         <DeleteTenantButton accountId={a.id} accountName={a.name} />
                       </td>

lib/platform-db.ts

@@ -40,3 +40,9 @@ export function listAccounts(): (PlatformAccount & { user_count: number })[] {
     )
     .all() as (PlatformAccount & { user_count: number })[];
 }
+
+export function getAccount(id: number): PlatformAccount | undefined {
+  return getPlatformDb()
+    .prepare("SELECT * FROM accounts WHERE id = ?")
+    .get(id) as PlatformAccount | undefined;
+}