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

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

@@ -2,15 +2,15 @@ import Link from 'next/link';
 
 import { ArrowLeft, Send, CheckCircle } 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; id: string }>;
@@ -87,7 +87,7 @@ export default async function InvoiceDetailPage({ 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">
                   Empfänger
                 </dt>
                 <dd className="mt-1 text-sm font-semibold">
@@ -95,31 +95,23 @@ export default async function InvoiceDetailPage({ params }: PageProps) {
                 </dd>
               </div>
               <div>
-                <dt className="text-sm font-medium text-muted-foreground">
+                <dt className="text-muted-foreground text-sm font-medium">
                   Rechnungsdatum
                 </dt>
                 <dd className="mt-1 text-sm font-semibold">
-                  {invoice.issue_date
-                    ? new Date(
-                        String(invoice.issue_date),
-                      ).toLocaleDateString('de-DE')
-                    : '—'}
+                  {formatDate(invoice.issue_date)}
                 </dd>
               </div>
               <div>
-                <dt className="text-sm font-medium text-muted-foreground">
+                <dt className="text-muted-foreground text-sm font-medium">
                   Fälligkeitsdatum
                 </dt>
                 <dd className="mt-1 text-sm font-semibold">
-                  {invoice.due_date
-                    ? new Date(String(invoice.due_date)).toLocaleDateString(
-                        'de-DE',
-                      )
-                    : '—'}
+                  {formatDate(invoice.due_date)}
                 </dd>
               </div>
               <div>
-                <dt className="text-sm font-medium text-muted-foreground">
+                <dt className="text-muted-foreground text-sm font-medium">
                   Gesamtbetrag
                 </dt>
                 <dd className="mt-1 text-sm font-semibold">
@@ -155,14 +147,14 @@ export default async function InvoiceDetailPage({ 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">
                         Beschreibung
                       </th>
@@ -177,7 +169,7 @@ export default async function InvoiceDetailPage({ params }: PageProps) {
                     {items.map((item) => (
                       <tr
                         key={String(item.id)}
-                        className="border-b hover:bg-muted/30"
+                        className="hover:bg-muted/30 border-b"
                       >
                         <td className="p-3">
                           {String(item.description ?? '—')}
@@ -199,7 +191,7 @@ export default async function InvoiceDetailPage({ params }: PageProps) {
                     ))}
                   </tbody>
                   <tfoot>
-                    <tr className="border-t bg-muted/30">
+                    <tr className="bg-muted/30 border-t">
                       <td colSpan={3} className="p-3 text-right font-medium">
                         Zwischensumme
                       </td>

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

@@ -1,18 +1,29 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { CreateInvoiceForm } from '@kit/finance/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 NewInvoicePage({ 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="Neue Rechnung" description="Rechnung mit Positionen erstellen">
+    <CmsPageShell
+      account={account}
+      title="Neue Rechnung"
+      description="Rechnung mit Positionen erstellen"
+    >
       <CreateInvoiceForm accountId={acct.id} account={account} />
     </CmsPageShell>
   );

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

@@ -2,16 +2,16 @@ import Link from 'next/link';
 
 import { FileText, 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 {
   INVOICE_STATUS_VARIANT,
   INVOICE_STATUS_LABEL,
@@ -77,7 +77,7 @@ export default async function InvoicesPage({ 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">Nr.</th>
                       <th className="p-3 text-left font-medium">Empfänger</th>
                       <th className="p-3 text-left font-medium">Datum</th>
@@ -92,7 +92,7 @@ export default async function InvoicesPage({ params }: PageProps) {
                       return (
                         <tr
                           key={String(invoice.id)}
-                          className="border-b hover:bg-muted/30"
+                          className="hover:bg-muted/30 border-b"
                         >
                           <td className="p-3 font-mono text-xs">
                             <Link
@@ -106,18 +106,10 @@ export default async function InvoicesPage({ params }: PageProps) {
                             {String(invoice.recipient_name ?? '—')}
                           </td>
                           <td className="p-3">
-                            {invoice.issue_date
-                              ? new Date(
-                                  String(invoice.issue_date),
-                                ).toLocaleDateString('de-DE')
-                              : '—'}
+                            {formatDate(invoice.issue_date)}
                           </td>
                           <td className="p-3">
-                            {invoice.due_date
-                              ? new Date(
-                                  String(invoice.due_date),
-                                ).toLocaleDateString('de-DE')
-                              : '—'}
+                            {formatDate(invoice.due_date)}
                           </td>
                           <td className="p-3 text-right">
                             {invoice.total_amount != null