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

apps/web/app/[locale]/home/[account]/finance/sepa/[batchId]/page.tsx

@@ -2,15 +2,15 @@ import Link from 'next/link';
 
 import { ArrowLeft, Download } from 'lucide-react';
 
+import { createFinanceApi } from '@kit/finance/api';
+import { formatDate } from '@kit/shared/dates';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 
-import { createFinanceApi } from '@kit/finance/api';
-
-import { CmsPageShell } from '~/components/cms-page-shell';
 import { AccountNotFound } from '~/components/account-not-found';
+import { CmsPageShell } from '~/components/cms-page-shell';
 
 interface PageProps {
   params: Promise<{ account: string; batchId: string }>;
@@ -95,9 +95,7 @@ export default async function SepaBatchDetailPage({ params }: PageProps) {
         {/* Summary Card */}
         <Card>
           <CardHeader className="flex flex-row items-center justify-between">
-            <CardTitle>
-              {String(batch.description ?? 'SEPA-Einzug')}
-            </CardTitle>
+            <CardTitle>{String(batch.description ?? 'SEPA-Einzug')}</CardTitle>
             <Badge variant={STATUS_VARIANT[status] ?? 'secondary'}>
               {STATUS_LABEL[status] ?? status}
             </Badge>
@@ -105,7 +103,7 @@ export default async function SepaBatchDetailPage({ params }: PageProps) {
           <CardContent>
             <dl className="grid grid-cols-2 gap-4 sm:grid-cols-4">
               <div>
-                <dt className="text-sm font-medium text-muted-foreground">
+                <dt className="text-muted-foreground text-sm font-medium">
                   Typ
                 </dt>
                 <dd className="mt-1 text-sm font-semibold">
@@ -115,7 +113,7 @@ export default async function SepaBatchDetailPage({ params }: PageProps) {
                 </dd>
               </div>
               <div>
-                <dt className="text-sm font-medium text-muted-foreground">
+                <dt className="text-muted-foreground text-sm font-medium">
                   Betrag
                 </dt>
                 <dd className="mt-1 text-sm font-semibold">
@@ -125,7 +123,7 @@ export default async function SepaBatchDetailPage({ params }: PageProps) {
                 </dd>
               </div>
               <div>
-                <dt className="text-sm font-medium text-muted-foreground">
+                <dt className="text-muted-foreground text-sm font-medium">
                   Anzahl
                 </dt>
                 <dd className="mt-1 text-sm font-semibold">
@@ -133,15 +131,11 @@ export default async function SepaBatchDetailPage({ params }: PageProps) {
                 </dd>
               </div>
               <div>
-                <dt className="text-sm font-medium text-muted-foreground">
+                <dt className="text-muted-foreground text-sm font-medium">
                   Ausführungsdatum
                 </dt>
                 <dd className="mt-1 text-sm font-semibold">
-                  {batch.execution_date
-                    ? new Date(
-                        String(batch.execution_date),
-                      ).toLocaleDateString('de-DE')
-                    : '—'}
+                  {formatDate(batch.execution_date)}
                 </dd>
               </div>
             </dl>
@@ -162,14 +156,14 @@ export default async function SepaBatchDetailPage({ params }: PageProps) {
           </CardHeader>
           <CardContent>
             {items.length === 0 ? (
-              <p className="py-8 text-center text-sm text-muted-foreground">
+              <p className="text-muted-foreground py-8 text-center text-sm">
                 Keine Positionen vorhanden.
               </p>
             ) : (
               <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">IBAN</th>
                       <th className="p-3 text-right font-medium">Betrag</th>
@@ -182,7 +176,7 @@ export default async function SepaBatchDetailPage({ params }: PageProps) {
                       return (
                         <tr
                           key={String(item.id)}
-                          className="border-b hover:bg-muted/30"
+                          className="hover:bg-muted/30 border-b"
                         >
                           <td className="p-3 font-medium">
                             {String(item.debtor_name ?? '—')}

apps/web/app/[locale]/home/[account]/finance/sepa/new/page.tsx

@@ -1,8 +1,8 @@
+import { CreateSepaBatchForm } from '@kit/finance/components';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
-import { CreateSepaBatchForm } from '@kit/finance/components';
-import { CmsPageShell } from '~/components/cms-page-shell';
 import { AccountNotFound } from '~/components/account-not-found';
+import { CmsPageShell } from '~/components/cms-page-shell';
 
 interface Props {
   params: Promise<{ account: string }>;
@@ -21,7 +21,11 @@ export default async function NewSepaBatchPage({ params }: Props) {
   if (!acct) return <AccountNotFound />;
 
   return (
-    <CmsPageShell account={account} title="Neuer SEPA-Einzug" description="SEPA-Lastschrifteinzug erstellen">
+    <CmsPageShell
+      account={account}
+      title="Neuer SEPA-Einzug"
+      description="SEPA-Lastschrifteinzug erstellen"
+    >
       <CreateSepaBatchForm accountId={acct.id} account={account} />
     </CmsPageShell>
   );

apps/web/app/[locale]/home/[account]/finance/sepa/page.tsx

@@ -2,20 +2,17 @@ import Link from 'next/link';
 
 import { Landmark, Plus } from 'lucide-react';
 
+import { createFinanceApi } from '@kit/finance/api';
+import { formatDate } from '@kit/shared/dates';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 
-import { createFinanceApi } from '@kit/finance/api';
-
+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';
-import {
-  BATCH_STATUS_VARIANT,
-  BATCH_STATUS_LABEL,
-} from '~/lib/status-badges';
+import { BATCH_STATUS_VARIANT, BATCH_STATUS_LABEL } from '~/lib/status-badges';
 
 interface PageProps {
   params: Promise<{ account: string }>;
@@ -79,7 +76,7 @@ export default async function SepaPage({ params }: PageProps) {
               <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">Status</th>
                       <th className="p-3 text-left font-medium">Typ</th>
                       <th className="p-3 text-left font-medium">
@@ -96,12 +93,13 @@ export default async function SepaPage({ params }: PageProps) {
                     {batches.map((batch: Record<string, unknown>) => (
                       <tr
                         key={String(batch.id)}
-                        className="border-b hover:bg-muted/30"
+                        className="hover:bg-muted/30 border-b"
                       >
                         <td className="p-3">
                           <Badge
                             variant={
-                              BATCH_STATUS_VARIANT[String(batch.status)] ?? 'secondary'
+                              BATCH_STATUS_VARIANT[String(batch.status)] ??
+                              'secondary'
                             }
                           >
                             {BATCH_STATUS_LABEL[String(batch.status)] ??
@@ -130,11 +128,7 @@ export default async function SepaPage({ params }: PageProps) {
                           {String(batch.item_count ?? 0)}
                         </td>
                         <td className="p-3">
-                          {batch.execution_date
-                            ? new Date(
-                                String(batch.execution_date),
-                              ).toLocaleDateString('de-DE')
-                            : '—'}
+                          {formatDate(batch.execution_date)}
                         </td>
                       </tr>
                     ))}