Fix server action structuur in login en tenants pagina's

Inline server actions in page components veroorzaken runtime errors.
Verplaatst naar aparte actions.ts / logout.ts bestanden.

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

app/login/actions.ts

@@ -0,0 +1,15 @@
+"use server";
+
+import { redirect } from "next/navigation";
+import { getUserByEmail, verifyPassword, createSession } from "../../lib/auth";
+
+export async function login(formData: FormData) {
+  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");
+}

app/login/page.tsx

@@ -1,8 +1,6 @@
-"use server";
-
 import { redirect } from "next/navigation";
-import { getUserByEmail, verifyPassword, createSession } from "../../lib/auth";
 import { getSession } from "../../lib/auth";
+import { login } from "./actions";
 
 export default async function LoginPage({
   searchParams,
@@ -21,17 +19,7 @@ export default async function LoginPage({
           Rikx Beheer
         </h1>
         <form
-          action={async (formData: FormData) => {
+          action={login}
-            "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 && (

app/tenants/logout.ts

@@ -0,0 +1,9 @@
+"use server";
+
+import { redirect } from "next/navigation";
+import { destroySession } from "../../lib/auth";
+
+export async function logout() {
+  await destroySession();
+  redirect("/login");
+}

app/tenants/page.tsx

@@ -1,7 +1,8 @@
 import { redirect } from "next/navigation";
-import { getSession, destroySession } from "../../lib/auth";
+import { getSession } from "../../lib/auth";
 import { listAccounts } from "../../lib/platform-db";
 import { createTenant, deleteTenant } from "./actions";
+import { logout } from "./logout";
 
 export default async function TenantsPage({
   searchParams,
@@ -28,13 +29,7 @@ export default async function TenantsPage({
           <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
+            <form action={logout}>
-              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>