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

apps/web/app/[locale]/home/[account]/members-cms/[memberId]/edit/page.tsx

@@ -1,8 +1,9 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { createMemberManagementApi } from '@kit/member-management/api';
 import { EditMemberForm } from '@kit/member-management/components';
-import { CmsPageShell } from '~/components/cms-page-shell';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
 import { AccountNotFound } from '~/components/account-not-found';
+import { CmsPageShell } from '~/components/cms-page-shell';
 
 interface Props {
   params: Promise<{ account: string; memberId: string }>;
@@ -11,7 +12,11 @@ interface Props {
 export default async function EditMemberPage({ params }: Props) {
   const { account, memberId } = await params;
   const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
   if (!acct) return <AccountNotFound />;
 
   const api = createMemberManagementApi(client);
@@ -19,7 +24,10 @@ export default async function EditMemberPage({ params }: Props) {
   if (!member) return <div>Mitglied nicht gefunden</div>;
 
   return (
-    <CmsPageShell account={account} title={`${String(member.first_name)} ${String(member.last_name)} bearbeiten`}>
+    <CmsPageShell
+      account={account}
+      title={`${String(member.first_name)} ${String(member.last_name)} bearbeiten`}
+    >
       <EditMemberForm member={member} account={account} accountId={acct.id} />
     </CmsPageShell>
   );

apps/web/app/[locale]/home/[account]/members-cms/[memberId]/page.tsx

@@ -1,8 +1,9 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { createMemberManagementApi } from '@kit/member-management/api';
 import { MemberDetailView } from '@kit/member-management/components';
-import { CmsPageShell } from '~/components/cms-page-shell';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
 import { AccountNotFound } from '~/components/account-not-found';
+import { CmsPageShell } from '~/components/cms-page-shell';
 
 interface Props {
   params: Promise<{ account: string; memberId: string }>;
@@ -11,7 +12,11 @@ interface Props {
 export default async function MemberDetailPage({ params }: Props) {
   const { account, memberId } = await params;
   const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
   if (!acct) return <AccountNotFound />;
 
   const api = createMemberManagementApi(client);
@@ -19,7 +24,10 @@ export default async function MemberDetailPage({ params }: Props) {
   if (!member) return <div>Mitglied nicht gefunden</div>;
 
   return (
-    <CmsPageShell account={account} title={`${String(member.first_name)} ${String(member.last_name)}`}>
+    <CmsPageShell
+      account={account}
+      title={`${String(member.first_name)} ${String(member.last_name)}`}
+    >
       <MemberDetailView member={member} account={account} accountId={acct.id} />
     </CmsPageShell>
   );

apps/web/app/[locale]/home/[account]/members-cms/applications/page.tsx

@@ -1,8 +1,9 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { createMemberManagementApi } from '@kit/member-management/api';
 import { ApplicationWorkflow } from '@kit/member-management/components';
-import { CmsPageShell } from '~/components/cms-page-shell';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
 import { AccountNotFound } from '~/components/account-not-found';
+import { CmsPageShell } from '~/components/cms-page-shell';
 
 interface Props {
   params: Promise<{ account: string }>;
@@ -11,15 +12,27 @@ interface Props {
 export default async function ApplicationsPage({ params }: Props) {
   const { account } = await params;
   const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
   if (!acct) return <AccountNotFound />;
 
   const api = createMemberManagementApi(client);
   const applications = await api.listApplications(acct.id);
 
   return (
-    <CmsPageShell account={account} title="Aufnahmeanträge" description="Mitgliedsanträge bearbeiten">
-      <ApplicationWorkflow applications={applications} accountId={acct.id} account={account} />
+    <CmsPageShell
+      account={account}
+      title="Aufnahmeanträge"
+      description="Mitgliedsanträge bearbeiten"
+    >
+      <ApplicationWorkflow
+        applications={applications}
+        accountId={acct.id}
+        account={account}
+      />
     </CmsPageShell>
   );
 }

apps/web/app/[locale]/home/[account]/members-cms/cards/page.tsx

@@ -1,9 +1,11 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
-import { createMemberManagementApi } from '@kit/member-management/api';
 import { CreditCard } from 'lucide-react';
+
+import { createMemberManagementApi } from '@kit/member-management/api';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
 import { EmptyState } from '~/components/empty-state';
-import { AccountNotFound } from '~/components/account-not-found';
 
 /** All active members are fetched for the card overview. */
 const CARDS_PAGE_SIZE = 100;
@@ -15,15 +17,26 @@ interface Props {
 export default async function MemberCardsPage({ params }: Props) {
   const { account } = await params;
   const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
   if (!acct) return <AccountNotFound />;
 
   const api = createMemberManagementApi(client);
-  const result = await api.listMembers(acct.id, { status: 'active', pageSize: CARDS_PAGE_SIZE });
+  const result = await api.listMembers(acct.id, {
+    status: 'active',
+    pageSize: CARDS_PAGE_SIZE,
+  });
   const members = result.data;
 
   return (
-    <CmsPageShell account={account} title="Mitgliedsausweise" description="Ausweise erstellen und verwalten">
+    <CmsPageShell
+      account={account}
+      title="Mitgliedsausweise"
+      description="Ausweise erstellen und verwalten"
+    >
       {members.length === 0 ? (
         <EmptyState
           icon={<CreditCard className="h-8 w-8" />}

apps/web/app/[locale]/home/[account]/members-cms/departments/create-department-dialog.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import { useCallback, useState } from 'react';
-import { useAction } from 'next-safe-action/hooks';
+
 import { useRouter } from 'next/navigation';
-import { toast } from '@kit/ui/sonner';
+
+import { Plus } from 'lucide-react';
+import { useAction } from 'next-safe-action/hooks';
+
+import { createDepartment } from '@kit/member-management/actions/member-actions';
 import { Button } from '@kit/ui/button';
-import { Input } from '@kit/ui/input';
-import { Label } from '@kit/ui/label';
 import {
   Dialog,
   DialogContent,
@@ -16,15 +18,17 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@kit/ui/dialog';
-import { Plus } from 'lucide-react';
-
-import { createDepartment } from '@kit/member-management/actions/member-actions';
+import { Input } from '@kit/ui/input';
+import { Label } from '@kit/ui/label';
+import { toast } from '@kit/ui/sonner';
 
 interface CreateDepartmentDialogProps {
   accountId: string;
 }
 
-export function CreateDepartmentDialog({ accountId }: CreateDepartmentDialogProps) {
+export function CreateDepartmentDialog({
+  accountId,
+}: CreateDepartmentDialogProps) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
   const [name, setName] = useState('');
@@ -49,7 +53,11 @@ export function CreateDepartmentDialog({ accountId }: CreateDepartmentDialogProp
     (e: React.FormEvent) => {
       e.preventDefault();
       if (!name.trim()) return;
-      execute({ accountId, name: name.trim(), description: description.trim() || undefined });
+      execute({
+        accountId,
+        name: name.trim(),
+        description: description.trim() || undefined,
+      });
     },
     [execute, accountId, name, description],
   );

apps/web/app/[locale]/home/[account]/members-cms/departments/page.tsx

@@ -1,9 +1,11 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { Users } from 'lucide-react';
+
 import { createMemberManagementApi } from '@kit/member-management/api';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
 import { EmptyState } from '~/components/empty-state';
-import { Users } from 'lucide-react';
-import { AccountNotFound } from '~/components/account-not-found';
 
 import { CreateDepartmentDialog } from './create-department-dialog';
 
@@ -14,14 +16,22 @@ interface Props {
 export default async function DepartmentsPage({ params }: Props) {
   const { account } = await params;
   const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
   if (!acct) return <AccountNotFound />;
 
   const api = createMemberManagementApi(client);
   const departments = await api.listDepartments(acct.id);
 
   return (
-    <CmsPageShell account={account} title="Abteilungen" description="Sparten und Abteilungen verwalten">
+    <CmsPageShell
+      account={account}
+      title="Abteilungen"
+      description="Sparten und Abteilungen verwalten"
+    >
       <div className="space-y-4">
         <div className="flex items-center justify-end">
           <CreateDepartmentDialog accountId={acct.id} />
@@ -37,16 +47,21 @@ export default async function DepartmentsPage({ params }: Props) {
           <div className="rounded-md border">
             <table className="w-full text-sm">
               <thead>
-                <tr className="border-b bg-muted/50">
+                <tr className="bg-muted/50 border-b">
                   <th className="p-3 text-left font-medium">Name</th>
                   <th className="p-3 text-left font-medium">Beschreibung</th>
                 </tr>
               </thead>
               <tbody>
                 {departments.map((dept: Record<string, unknown>) => (
-                  <tr key={String(dept.id)} className="border-b hover:bg-muted/30">
+                  <tr
+                    key={String(dept.id)}
+                    className="hover:bg-muted/30 border-b"
+                  >
                     <td className="p-3 font-medium">{String(dept.name)}</td>
-                    <td className="p-3 text-muted-foreground">{String(dept.description ?? '—')}</td>
+                    <td className="text-muted-foreground p-3">
+                      {String(dept.description ?? '—')}
+                    </td>
                   </tr>
                 ))}
               </tbody>

apps/web/app/[locale]/home/[account]/members-cms/dues/page.tsx

@@ -1,8 +1,9 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { createMemberManagementApi } from '@kit/member-management/api';
 import { DuesCategoryManager } from '@kit/member-management/components';
-import { CmsPageShell } from '~/components/cms-page-shell';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
 import { AccountNotFound } from '~/components/account-not-found';
+import { CmsPageShell } from '~/components/cms-page-shell';
 
 interface Props {
   params: Promise<{ account: string }>;
@@ -11,14 +12,22 @@ interface Props {
 export default async function DuesPage({ params }: Props) {
   const { account } = await params;
   const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
   if (!acct) return <AccountNotFound />;
 
   const api = createMemberManagementApi(client);
   const categories = await api.listDuesCategories(acct.id);
 
   return (
-    <CmsPageShell account={account} title="Beitragskategorien" description="Mitgliedsbeiträge verwalten">
+    <CmsPageShell
+      account={account}
+      title="Beitragskategorien"
+      description="Mitgliedsbeiträge verwalten"
+    >
       <DuesCategoryManager categories={categories} accountId={acct.id} />
     </CmsPageShell>
   );

apps/web/app/[locale]/home/[account]/members-cms/import/page.tsx

@@ -1,7 +1,8 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { MemberImportWizard } from '@kit/member-management/components';
-import { CmsPageShell } from '~/components/cms-page-shell';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
 import { AccountNotFound } from '~/components/account-not-found';
+import { CmsPageShell } from '~/components/cms-page-shell';
 
 interface Props {
   params: Promise<{ account: string }>;
@@ -10,11 +11,19 @@ interface Props {
 export default async function MemberImportPage({ params }: Props) {
   const { account } = await params;
   const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
   if (!acct) return <AccountNotFound />;
 
   return (
-    <CmsPageShell account={account} title="Mitglieder importieren" description="CSV-Datei importieren">
+    <CmsPageShell
+      account={account}
+      title="Mitglieder importieren"
+      description="CSV-Datei importieren"
+    >
       <MemberImportWizard accountId={acct.id} account={account} />
     </CmsPageShell>
   );

apps/web/app/[locale]/home/[account]/members-cms/new/page.tsx

@@ -1,28 +1,43 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { createMemberManagementApi } from '@kit/member-management/api';
 import { CreateMemberForm } from '@kit/member-management/components';
-import { CmsPageShell } from '~/components/cms-page-shell';
-import { AccountNotFound } from '~/components/account-not-found';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
-interface Props { params: Promise<{ account: string }> }
+import { AccountNotFound } from '~/components/account-not-found';
+import { CmsPageShell } from '~/components/cms-page-shell';
+
+interface Props {
+  params: Promise<{ account: string }>;
+}
 
 export default async function NewMemberPage({ params }: Props) {
   const { account } = await params;
   const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
   if (!acct) return <AccountNotFound />;
 
   const api = createMemberManagementApi(client);
   const duesCategories = await api.listDuesCategories(acct.id);
 
   return (
-    <CmsPageShell account={account} title="Neues Mitglied" description="Mitglied manuell anlegen">
-      <CreateMemberForm 
-        accountId={acct.id} 
-        account={account} 
-        duesCategories={(duesCategories ?? []).map((c: Record<string, unknown>) => ({
-          id: String(c.id), name: String(c.name), amount: Number(c.amount ?? 0)
-        }))} 
+    <CmsPageShell
+      account={account}
+      title="Neues Mitglied"
+      description="Mitglied manuell anlegen"
+    >
+      <CreateMemberForm
+        accountId={acct.id}
+        account={account}
+        duesCategories={(duesCategories ?? []).map(
+          (c: Record<string, unknown>) => ({
+            id: String(c.id),
+            name: String(c.name),
+            amount: Number(c.amount ?? 0),
+          }),
+        )}
       />
     </CmsPageShell>
   );

apps/web/app/[locale]/home/[account]/members-cms/page.tsx

@@ -1,8 +1,9 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { createMemberManagementApi } from '@kit/member-management/api';
 import { MembersDataTable } from '@kit/member-management/components';
-import { CmsPageShell } from '~/components/cms-page-shell';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
 import { AccountNotFound } from '~/components/account-not-found';
+import { CmsPageShell } from '~/components/cms-page-shell';
 
 const PAGE_SIZE = 25;
 
@@ -15,7 +16,11 @@ export default async function MembersPage({ params, searchParams }: Props) {
   const { account } = await params;
   const search = await searchParams;
   const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
   if (!acct) return <AccountNotFound />;
 
   const api = createMemberManagementApi(client);
@@ -29,16 +34,23 @@ export default async function MembersPage({ params, searchParams }: Props) {
   const duesCategories = await api.listDuesCategories(acct.id);
 
   return (
-    <CmsPageShell account={account} title="Mitglieder" description={`${result.total} Mitglieder`}>
+    <CmsPageShell
+      account={account}
+      title="Mitglieder"
+      description={`${result.total} Mitglieder`}
+    >
       <MembersDataTable
         data={result.data}
         total={result.total}
         page={page}
         pageSize={PAGE_SIZE}
         account={account}
-        duesCategories={(duesCategories ?? []).map((c: Record<string, unknown>) => ({
-          id: String(c.id), name: String(c.name),
-        }))}
+        duesCategories={(duesCategories ?? []).map(
+          (c: Record<string, unknown>) => ({
+            id: String(c.id),
+            name: String(c.name),
+          }),
+        )}
       />
     </CmsPageShell>
   );

apps/web/app/[locale]/home/[account]/members-cms/statistics/page.tsx

@@ -1,14 +1,20 @@
-import { Users, UserCheck, UserMinus, Clock, BarChart3, TrendingUp } from 'lucide-react';
+import {
+  Users,
+  UserCheck,
+  UserMinus,
+  Clock,
+  BarChart3,
+  TrendingUp,
+} from 'lucide-react';
 
+import { createMemberManagementApi } from '@kit/member-management/api';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 
-import { createMemberManagementApi } from '@kit/member-management/api';
-
+import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
 import { StatsCard } from '~/components/stats-card';
 import { StatsBarChart, StatsPieChart } from '~/components/stats-charts';
-import { AccountNotFound } from '~/components/account-not-found';
 
 interface PageProps {
   params: Promise<{ account: string }>;
@@ -40,10 +46,26 @@ export default async function MemberStatisticsPage({ params }: PageProps) {
     <CmsPageShell account={account} title="Mitglieder-Statistiken">
       <div className="flex w-full flex-col gap-6">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          <StatsCard title="Gesamt" value={stats.total ?? 0} icon={<Users className="h-5 w-5" />} />
-          <StatsCard title="Aktiv" value={stats.active ?? 0} icon={<UserCheck className="h-5 w-5" />} />
-          <StatsCard title="Inaktiv" value={stats.inactive ?? 0} icon={<UserMinus className="h-5 w-5" />} />
-          <StatsCard title="Ausstehend" value={stats.pending ?? 0} icon={<Clock className="h-5 w-5" />} />
+          <StatsCard
+            title="Gesamt"
+            value={stats.total ?? 0}
+            icon={<Users className="h-5 w-5" />}
+          />
+          <StatsCard
+            title="Aktiv"
+            value={stats.active ?? 0}
+            icon={<UserCheck className="h-5 w-5" />}
+          />
+          <StatsCard
+            title="Inaktiv"
+            value={stats.inactive ?? 0}
+            icon={<UserMinus className="h-5 w-5" />}
+          />
+          <StatsCard
+            title="Ausstehend"
+            value={stats.pending ?? 0}
+            icon={<Clock className="h-5 w-5" />}
+          />
         </div>
 
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">