Voeg bevestiging toe bij verwijderen en hernoem tenant naar sociaal ondernemer

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

app/tenants/DeleteTenantButton.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { deleteTenant } from "./actions";
+
+export function DeleteTenantButton({
+  accountId,
+  accountName,
+}: {
+  accountId: number;
+  accountName: string;
+}) {
+  return (
+    <form
+      action={deleteTenant}
+      onSubmit={(e) => {
+        if (!confirm(`Weet je zeker dat je sociaal ondernemer "${accountName}" wilt verwijderen? Dit verwijdert ook alle bijbehorende gebruikers en gegevens.`)) {
+          e.preventDefault();
+        }
+      }}
+    >
+      <input type="hidden" name="account_id" value={accountId} />
+      <button
+        type="submit"
+        className="text-xs text-red-500 hover:text-red-700 dark:hover:text-red-400 transition-colors"
+      >
+        Verwijderen
+      </button>
+    </form>
+  );
+}

app/tenants/page.tsx

@@ -1,8 +1,9 @@
 import { redirect } from "next/navigation";
 import { getSession } from "../../lib/auth";
 import { listAccounts } from "../../lib/platform-db";
-import { createTenant, deleteTenant } from "./actions";
+import { createTenant } from "./actions";
 import { logout } from "./logout";
+import { DeleteTenantButton } from "./DeleteTenantButton";
 
 export default async function TenantsPage({
   searchParams,
@@ -42,10 +43,10 @@ export default async function TenantsPage({
         {/* Overzicht */}
         <section>
           <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
-            Tenants ({accounts.length})
+            Sociaal ondernemers ({accounts.length})
           </h2>
           {accounts.length === 0 ? (
-            <p className="text-sm text-zinc-500">Nog geen tenants aangemaakt.</p>
+            <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">
@@ -89,15 +90,7 @@ export default async function TenantsPage({
                         </a>
                       </td>
                       <td className="px-4 py-3 text-right">
-                        <form action={deleteTenant}>
+                        <DeleteTenantButton accountId={a.id} accountName={a.name} />
-                          <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"
-                          >
-                            Verwijderen
-                          </button>
-                        </form>
                       </td>
                     </tr>
                   ))}
@@ -107,10 +100,10 @@ export default async function TenantsPage({
           )}
         </section>
 
-        {/* Nieuw tenant formulier */}
+        {/* Nieuwe sociaal ondernemer formulier */}
         <section>
           <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
-            Nieuwe tenant aanmaken
+            Nieuwe sociaal ondernemer aanmaken
           </h2>
           {errorMsg && (
             <p className="text-sm text-red-600 dark:text-red-400 mb-4">{errorMsg}</p>
@@ -185,7 +178,7 @@ export default async function TenantsPage({
                 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
+                Sociaal ondernemer aanmaken
               </button>
             </div>
           </form>