rikx-beheer/app/tenants/page.tsx

import { redirect } from "next/navigation";
import { requireAdmin } from "../../lib/auth";
import { listAccounts } from "../../lib/platform-db";
import { createTenant } from "./actions";
import { DeleteTenantButton } from "./DeleteTenantButton";
import { AppHeader } from "../AppHeader";

export default async function TenantsPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const session = await requireAdmin();

  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">
      <AppHeader email={session.email} active="crm" />

      <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">
            Sociaal ondernemers ({accounts.length})
          </h2>
          {accounts.length === 0 ? (
            <p className="text-sm text-zinc-500">Nog geen sociaal ondernemers 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" colSpan={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">
                        <a
                          href={`/api/auto-login?account_id=${a.id}&slug=${a.slug}`}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
                        >
                          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>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>

        {/* Nieuwe sociaal ondernemer formulier */}
        <section>
          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
            Nieuwe sociaal ondernemer 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"
              >
                Sociaal ondernemer aanmaken
              </button>
            </div>
          </form>
        </section>
      </main>
    </div>
  );
}