Add account hierarchy framework with migrations, RLS policies, and UI components

apps/web/app/[locale]/club/[slug]/portal/page.tsx

@@ -1,10 +1,12 @@
-import { createClient } from '@supabase/supabase-js';
-import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
-import { Button } from '@kit/ui/button';
-import { UserCircle, FileText, CreditCard, Shield } from 'lucide-react';
 import Link from 'next/link';
 
+import { createClient } from '@supabase/supabase-js';
+
+import { UserCircle, FileText, CreditCard, Shield } from 'lucide-react';
+
 import { PortalLoginForm } from '@kit/site-builder/components';
+import { Button } from '@kit/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 
 interface Props {
   params: Promise<{ slug: string }>;
@@ -18,15 +20,23 @@ export default async function MemberPortalPage({ params }: Props) {
     process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!,
   );
 
-  const { data: account } = await supabase.from('accounts').select('id, name').eq('slug', slug).single();
-  if (!account) return <div className="p-8 text-center">Organisation nicht gefunden</div>;
+  const { data: account } = await supabase
+    .from('accounts')
+    .select('id, name')
+    .eq('slug', slug)
+    .single();
+  if (!account)
+    return <div className="p-8 text-center">Organisation nicht gefunden</div>;
 
   // Check if user is already logged in
-  const { data: { user } } = await supabase.auth.getUser();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
 
   if (user) {
     // Check if this user is a member of this club
-    const { data: member } = await supabase.from('members')
+    const { data: member } = await supabase
+      .from('members')
       .select('id, first_name, last_name, status')
       .eq('account_id', account.id)
       .eq('user_id', user.id)
@@ -35,45 +45,61 @@ export default async function MemberPortalPage({ params }: Props) {
     if (member) {
       // Logged in member — show portal dashboard
       return (
-        <div className="min-h-screen bg-muted/30">
-          <header className="border-b bg-background px-6 py-4">
-            <div className="flex items-center justify-between max-w-4xl mx-auto">
+        <div className="bg-muted/30 min-h-screen">
+          <header className="bg-background border-b px-6 py-4">
+            <div className="mx-auto flex max-w-4xl items-center justify-between">
               <div className="flex items-center gap-3">
-                <Shield className="h-5 w-5 text-primary" />
-                <h1 className="text-lg font-bold">Mitgliederbereich — {String(account.name)}</h1>
+                <Shield className="text-primary h-5 w-5" />
+                <h1 className="text-lg font-bold">
+                  Mitgliederbereich — {String(account.name)}
+                </h1>
               </div>
               <div className="flex items-center gap-3">
-                <span className="text-sm text-muted-foreground">{String(member.first_name)} {String(member.last_name)}</span>
-                <Link href={`/club/${slug}`}><Button variant="ghost" size="sm">← Website</Button></Link>
+                <span className="text-muted-foreground text-sm">
+                  {String(member.first_name)} {String(member.last_name)}
+                </span>
+                <Link href={`/club/${slug}`}>
+                  <Button variant="ghost" size="sm">
+                    ← Website
+                  </Button>
+                </Link>
               </div>
             </div>
           </header>
-          <main className="max-w-4xl mx-auto py-12 px-6">
-            <h2 className="text-2xl font-bold mb-6">Willkommen, {String(member.first_name)}!</h2>
+          <main className="mx-auto max-w-4xl px-6 py-12">
+            <h2 className="mb-6 text-2xl font-bold">
+              Willkommen, {String(member.first_name)}!
+            </h2>
             <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
               <Link href={`/club/${slug}/portal/profile`}>
-                <Card className="hover:border-primary transition-colors cursor-pointer">
+                <Card className="hover:border-primary cursor-pointer transition-colors">
                   <CardContent className="p-6 text-center">
-                    <UserCircle className="mx-auto h-10 w-10 text-primary mb-3" />
+                    <UserCircle className="text-primary mx-auto mb-3 h-10 w-10" />
                     <h3 className="font-semibold">Mein Profil</h3>
-                    <p className="text-xs text-muted-foreground mt-1">Kontaktdaten und Datenschutz</p>
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      Kontaktdaten und Datenschutz
+                    </p>
                   </CardContent>
                 </Card>
               </Link>
               <Link href={`/club/${slug}/portal/documents`}>
-                <Card className="hover:border-primary transition-colors cursor-pointer">
+                <Card className="hover:border-primary cursor-pointer transition-colors">
                   <CardContent className="p-6 text-center">
-                    <FileText className="mx-auto h-10 w-10 text-primary mb-3" />
+                    <FileText className="text-primary mx-auto mb-3 h-10 w-10" />
                     <h3 className="font-semibold">Dokumente</h3>
-                    <p className="text-xs text-muted-foreground mt-1">Rechnungen und Bescheinigungen</p>
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      Rechnungen und Bescheinigungen
+                    </p>
                   </CardContent>
                 </Card>
               </Link>
               <Card>
                 <CardContent className="p-6 text-center">
-                  <CreditCard className="mx-auto h-10 w-10 text-primary mb-3" />
+                  <CreditCard className="text-primary mx-auto mb-3 h-10 w-10" />
                   <h3 className="font-semibold">Mitgliedsausweis</h3>
-                  <p className="text-xs text-muted-foreground mt-1">Digital anzeigen</p>
+                  <p className="text-muted-foreground mt-1 text-xs">
+                    Digital anzeigen
+                  </p>
                 </CardContent>
               </Card>
             </div>
@@ -85,14 +111,18 @@ export default async function MemberPortalPage({ params }: Props) {
 
   // Not logged in or not a member — show login form
   return (
-    <div className="min-h-screen bg-muted/30">
-      <header className="border-b bg-background px-6 py-4">
-        <div className="flex items-center justify-between max-w-4xl mx-auto">
+    <div className="bg-muted/30 min-h-screen">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="mx-auto flex max-w-4xl items-center justify-between">
           <h1 className="text-lg font-bold">Mitgliederbereich</h1>
-          <Link href={`/club/${slug}`}><Button variant="ghost" size="sm">← Zurück zur Website</Button></Link>
+          <Link href={`/club/${slug}`}>
+            <Button variant="ghost" size="sm">
+              ← Zurück zur Website
+            </Button>
+          </Link>
         </div>
       </header>
-      <main className="max-w-4xl mx-auto py-12 px-6">
+      <main className="mx-auto max-w-4xl px-6 py-12">
         <PortalLoginForm slug={slug} accountName={String(account.name)} />
       </main>
     </div>