190 lines
8.6 KiB
TypeScript
190 lines
8.6 KiB
TypeScript
import { redirect } from "next/navigation";
|
|
import { getSession } from "../../lib/auth";
|
|
import { listAccounts } from "../../lib/platform-db";
|
|
import { createTenant } from "./actions";
|
|
import { logout } from "./logout";
|
|
import { DeleteTenantButton } from "./DeleteTenantButton";
|
|
|
|
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={logout}>
|
|
<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">
|
|
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={2}></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">
|
|
<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>
|
|
);
|
|
}
|