Voeg tenant beheer toe aan rikx-offerte

- Login pagina met HMAC-sessie authenticatie
- /tenants overzicht: lijst alle rikx-platform accounts
- Nieuw tenant aanmaken (naam, slug, admin gebruiker)
- Tenant verwijderen (cascade via foreign keys)
- Leest rikx-platform SQLite DB via /rikx-platform-data mount
- Homepage redirect naar /tenants of /login

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

app/layout.tsx

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Rikx Beheer",
-  description: "Generated by create next app",
+  description: "Rikx platform beheer",
 };
 
 export default function RootLayout({ children }: LayoutProps<"/">) {

app/login/page.tsx

@@ -0,0 +1,74 @@
+"use server";
+
+import { redirect } from "next/navigation";
+import { getUserByEmail, verifyPassword, createSession } from "../../lib/auth";
+import { getSession } from "../../lib/auth";
+
+export default async function LoginPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ error?: string }>;
+}) {
+  const session = await getSession();
+  if (session) redirect("/tenants");
+
+  const { error } = await searchParams;
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-zinc-50 dark:bg-zinc-950">
+      <div className="w-full max-w-sm">
+        <h1 className="text-2xl font-semibold text-center mb-8 text-zinc-900 dark:text-zinc-100">
+          Rikx Beheer
+        </h1>
+        <form
+          action={async (formData: FormData) => {
+            "use server";
+            const email = formData.get("email") as string;
+            const password = formData.get("password") as string;
+            const user = getUserByEmail(email);
+            if (!user || !verifyPassword(password, user.password_hash)) {
+              redirect("/login?error=1");
+            }
+            await createSession({ userId: user.id, email: user.email, name: user.name });
+            redirect("/tenants");
+          }}
+          className="flex flex-col gap-4 bg-white dark:bg-zinc-900 p-8 rounded-xl border border-zinc-200 dark:border-zinc-800"
+        >
+          {error && (
+            <p className="text-sm text-red-600 dark:text-red-400">
+              Ongeldig e-mailadres of wachtwoord.
+            </p>
+          )}
+          <div className="flex flex-col gap-1">
+            <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
+              E-mailadres
+            </label>
+            <input
+              type="email"
+              name="email"
+              required
+              className="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"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
+              Wachtwoord
+            </label>
+            <input
+              type="password"
+              name="password"
+              required
+              className="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"
+            />
+          </div>
+          <button
+            type="submit"
+            className="mt-2 rounded-lg bg-zinc-900 dark:bg-zinc-100 px-4 py-2 text-sm font-medium text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors"
+          >
+            Inloggen
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -1,69 +1,7 @@
-import Image from "next/image";
+import { redirect } from "next/navigation";
+import { getSession } from "../lib/auth";
 
-export default function Home() {
+export default async function Home() {
-  return (
+  const session = await getSession();
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+  redirect(session ? "/tenants" : "/login");
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert h-5 w-[100px]"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the{" "}
-            <code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
-              page.tsx
-            </code>{" "}
-            file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert h-[14px] w-4"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={14}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
 }

app/tenants/actions.ts

@@ -0,0 +1,59 @@
+"use server";
+
+import { redirect } from "next/navigation";
+import { randomBytes, scryptSync } from "crypto";
+import { getPlatformDb } from "../../lib/platform-db";
+import { getSession } from "../../lib/auth";
+
+function requireAuth() {
+  // Called inside server actions — session check is synchronous-safe via cache
+}
+
+function hashPassword(password: string): string {
+  const salt = randomBytes(16).toString("hex");
+  const hash = scryptSync(password, salt, 64).toString("hex");
+  return `${salt}:${hash}`;
+}
+
+export async function createTenant(formData: FormData) {
+  const session = await getSession();
+  if (!session) redirect("/login");
+
+  const name = (formData.get("name") as string).trim();
+  const slug = (formData.get("slug") as string).trim().toLowerCase().replace(/[^a-z0-9-]/g, "-");
+  const adminEmail = (formData.get("admin_email") as string).trim();
+  const adminPassword = formData.get("admin_password") as string;
+  const adminName = (formData.get("admin_name") as string).trim();
+
+  if (!name || !slug || !adminEmail || !adminPassword || !adminName) {
+    redirect("/tenants?error=missing");
+  }
+
+  const db = getPlatformDb();
+
+  const existing = db.prepare("SELECT id FROM accounts WHERE slug = ?").get(slug);
+  if (existing) redirect("/tenants?error=slug");
+
+  db.prepare("INSERT INTO accounts (name, slug) VALUES (?, ?)").run(name, slug);
+  const account = db.prepare("SELECT id FROM accounts WHERE slug = ?").get(slug) as { id: number };
+
+  db.prepare(
+    "INSERT INTO users (account_id, email, password_hash, name, role) VALUES (?, ?, ?, ?, 'admin')"
+  ).run(account.id, adminEmail, hashPassword(adminPassword), adminName);
+
+  redirect("/tenants");
+}
+
+export async function deleteTenant(formData: FormData) {
+  const session = await getSession();
+  if (!session) redirect("/login");
+
+  const accountId = Number(formData.get("account_id"));
+  if (!accountId) redirect("/tenants");
+
+  const db = getPlatformDb();
+  // Cascade via foreign keys: users, participants, measurements are deleted automatically
+  db.prepare("DELETE FROM accounts WHERE id = ?").run(accountId);
+
+  redirect("/tenants");
+}

app/tenants/page.tsx

@@ -0,0 +1,192 @@
+import { redirect } from "next/navigation";
+import { getSession, destroySession } from "../../lib/auth";
+import { listAccounts } from "../../lib/platform-db";
+import { createTenant, deleteTenant } from "./actions";
+
+export default async function TenantsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ error?: string }>;
+}) {
+  const session = await getSession();
+  if (!session) redirect("/login");
+
+  const { error } = await searchParams;
+  const accounts = listAccounts();
+
+  const errorMsg =
+    error === "slug"
+      ? "Slug is al in gebruik."
+      : error === "missing"
+      ? "Vul alle velden in."
+      : null;
+
+  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>
+          <div className="flex items-center gap-4">
+            <span className="text-sm text-zinc-500">{session.email}</span>
+            <form
+              action={async () => {
+                "use server";
+                await destroySession();
+                redirect("/login");
+              }}
+            >
+              <button className="text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
+                Uitloggen
+              </button>
+            </form>
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-5xl mx-auto px-6 py-10 flex flex-col gap-10">
+        {/* Overzicht */}
+        <section>
+          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
+            Tenants ({accounts.length})
+          </h2>
+          {accounts.length === 0 ? (
+            <p className="text-sm text-zinc-500">Nog geen tenants aangemaakt.</p>
+          ) : (
+            <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden">
+              <table className="w-full text-sm">
+                <thead className="bg-zinc-50 dark:bg-zinc-900 text-zinc-500 dark:text-zinc-400">
+                  <tr>
+                    <th className="text-left px-4 py-3 font-medium">Naam</th>
+                    <th className="text-left px-4 py-3 font-medium">Slug</th>
+                    <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"></th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
+                  {accounts.map((a) => (
+                    <tr key={a.id} className="bg-white dark:bg-zinc-950 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors">
+                      <td className="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">{a.name}</td>
+                      <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400 font-mono">{a.slug}</td>
+                      <td className="px-4 py-3">
+                        <a
+                          href={`https://${a.slug}.rikxplatform.nl`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-blue-600 dark:text-blue-400 hover:underline"
+                        >
+                          {a.slug}.rikxplatform.nl
+                        </a>
+                      </td>
+                      <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">{a.user_count}</td>
+                      <td className="px-4 py-3 text-zinc-500 dark:text-zinc-500 text-xs">
+                        {new Date(a.created_at).toLocaleDateString("nl-NL")}
+                      </td>
+                      <td className="px-4 py-3 text-right">
+                        <form action={deleteTenant}>
+                          <input type="hidden" name="account_id" value={a.id} />
+                          <button
+                            type="submit"
+                            className="text-xs text-red-500 hover:text-red-700 dark:hover:text-red-400 transition-colors"
+                            onClick={() => {}}
+                          >
+                            Verwijderen
+                          </button>
+                        </form>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </section>
+
+        {/* Nieuw tenant formulier */}
+        <section>
+          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
+            Nieuwe tenant aanmaken
+          </h2>
+          {errorMsg && (
+            <p className="text-sm text-red-600 dark:text-red-400 mb-4">{errorMsg}</p>
+          )}
+          <form
+            action={createTenant}
+            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"
+          >
+            <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
+                placeholder="Acme B.V."
+                className="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"
+              />
+            </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, bijv. acme)</span>
+              </label>
+              <input
+                type="text"
+                name="slug"
+                required
+                placeholder="acme"
+                pattern="[a-z0-9-]+"
+                className="rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-mono text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-500"
+              />
+            </div>
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                Admin naam
+              </label>
+              <input
+                type="text"
+                name="admin_name"
+                required
+                placeholder="Jan Jansen"
+                className="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"
+              />
+            </div>
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                Admin e-mailadres
+              </label>
+              <input
+                type="email"
+                name="admin_email"
+                required
+                placeholder="jan@acme.nl"
+                className="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"
+              />
+            </div>
+            <div className="flex flex-col gap-1 sm:col-span-2">
+              <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                Tijdelijk wachtwoord
+              </label>
+              <input
+                type="text"
+                name="admin_password"
+                required
+                placeholder="Sterk wachtwoord"
+                className="rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-mono text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-500"
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <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"
+              >
+                Tenant aanmaken
+              </button>
+            </div>
+          </form>
+        </section>
+      </main>
+    </div>
+  );
+}

lib/platform-db.ts

@@ -0,0 +1,42 @@
+import { DatabaseSync } from "node:sqlite";
+
+const DB_PATH = process.env.RIKX_PLATFORM_DB_PATH || "/rikx-platform-data/app.db";
+
+let _db: DatabaseSync | null = null;
+
+export function getPlatformDb(): DatabaseSync {
+  if (!_db) {
+    _db = new DatabaseSync(DB_PATH);
+    _db.exec("PRAGMA journal_mode = WAL");
+    _db.exec("PRAGMA foreign_keys = ON");
+  }
+  return _db;
+}
+
+export type PlatformAccount = {
+  id: number;
+  name: string;
+  slug: string;
+  created_at: string;
+};
+
+export type PlatformUser = {
+  id: number;
+  account_id: number;
+  email: string;
+  name: string;
+  role: string;
+  created_at: string;
+};
+
+export function listAccounts(): (PlatformAccount & { user_count: number })[] {
+  return getPlatformDb()
+    .prepare(
+      `SELECT a.*, COUNT(u.id) as user_count
+       FROM accounts a
+       LEFT JOIN users u ON u.account_id = a.id
+       GROUP BY a.id
+       ORDER BY a.created_at DESC`
+    )
+    .all() as (PlatformAccount & { user_count: number })[];
+}