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

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>