feat: enhance API response handling and add new components for module management

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

@@ -1,6 +1,14 @@
 import Link from 'next/link';
 
-import { Landmark, FileText, Euro, ArrowRight, Plus } from 'lucide-react';
+import {
+  Landmark,
+  FileText,
+  Euro,
+  ArrowRight,
+  Plus,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-react';
 
 import { createFinanceApi } from '@kit/finance/api';
 import { formatDate } from '@kit/shared/dates';
@@ -8,6 +16,7 @@ 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 { ListToolbar } from '@kit/ui/list-toolbar';
 
 import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
@@ -20,12 +29,30 @@ import {
   INVOICE_STATUS_LABEL,
 } from '~/lib/status-badges';
 
+const PAGE_SIZE = 25;
+
 interface PageProps {
   params: Promise<{ account: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
 }
 
-export default async function FinancePage({ params }: PageProps) {
+function buildQuery(
+  base: Record<string, string | undefined>,
+  overrides: Record<string, string | number | undefined>,
+): string {
+  const params = new URLSearchParams();
+  for (const [key, value] of Object.entries({ ...base, ...overrides })) {
+    if (value !== undefined && value !== '') {
+      params.set(key, String(value));
+    }
+  }
+  const qs = params.toString();
+  return qs ? `?${qs}` : '';
+}
+
+export default async function FinancePage({ params, searchParams }: PageProps) {
   const { account } = await params;
+  const search = await searchParams;
   const client = getSupabaseServerClient();
 
   const { data: acct } = await client
@@ -36,13 +63,20 @@ export default async function FinancePage({ params }: PageProps) {
 
   if (!acct) return <AccountNotFound />;
 
+  const q = typeof search.q === 'string' ? search.q : undefined;
+  const status = typeof search.status === 'string' ? search.status : undefined;
+  const page = Math.max(1, Number(search.page) || 1);
+
   const api = createFinanceApi(client);
 
-  const [batches, invoices] = await Promise.all([
-    api.listBatches(acct.id),
-    api.listInvoices(acct.id),
+  const [batchesResult, invoicesResult] = await Promise.all([
+    api.listBatches(acct.id, { search: q, status, page, pageSize: PAGE_SIZE }),
+    api.listInvoices(acct.id, { search: q, status, page, pageSize: PAGE_SIZE }),
   ]);
 
+  const batches = batchesResult.data;
+  const invoices = invoicesResult.data;
+
   const openAmount = invoices
     .filter(
       (inv: Record<string, unknown>) =>
@@ -54,6 +88,15 @@ export default async function FinancePage({ params }: PageProps) {
       0,
     );
 
+  // Use the larger of the two totals for pagination
+  const totalPages = Math.max(
+    batchesResult.totalPages,
+    invoicesResult.totalPages,
+  );
+  const safePage = page;
+
+  const queryBase = { q, status };
+
   return (
     <CmsPageShell account={account} title="Finanzen">
       <div className="flex w-full flex-col gap-6">
@@ -83,12 +126,12 @@ export default async function FinancePage({ params }: PageProps) {
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
           <StatsCard
             title="SEPA-Einzüge"
-            value={batches.length}
+            value={batchesResult.total}
             icon={<Landmark className="h-5 w-5" />}
           />
           <StatsCard
             title="Rechnungen"
-            value={invoices.length}
+            value={invoicesResult.total}
             icon={<FileText className="h-5 w-5" />}
           />
           <StatsCard
@@ -98,10 +141,30 @@ export default async function FinancePage({ params }: PageProps) {
           />
         </div>
 
+        {/* Toolbar */}
+        <ListToolbar
+          searchPlaceholder="Finanzen durchsuchen..."
+          filters={[
+            {
+              param: 'status',
+              label: 'Status',
+              options: [
+                { value: '', label: 'Alle' },
+                { value: 'draft', label: 'Entwurf' },
+                { value: 'ready', label: 'Bereit' },
+                { value: 'sent', label: 'Gesendet' },
+                { value: 'paid', label: 'Bezahlt' },
+                { value: 'overdue', label: 'Überfällig' },
+                { value: 'cancelled', label: 'Storniert' },
+              ],
+            },
+          ]}
+        />
+
         {/* SEPA Batches */}
         <Card>
           <CardHeader className="flex flex-row items-center justify-between">
-            <CardTitle>Letzte SEPA-Einzüge</CardTitle>
+            <CardTitle>Letzte SEPA-Einzüge ({batchesResult.total})</CardTitle>
             <Link href={`/home/${account}/finance/sepa`}>
               <Button variant="ghost" size="sm">
                 Alle anzeigen
@@ -171,7 +234,7 @@ export default async function FinancePage({ params }: PageProps) {
         {/* Invoices */}
         <Card>
           <CardHeader className="flex flex-row items-center justify-between">
-            <CardTitle>Letzte Rechnungen</CardTitle>
+            <CardTitle>Letzte Rechnungen ({invoicesResult.total})</CardTitle>
             <Link href={`/home/${account}/finance/invoices`}>
               <Button variant="ghost" size="sm">
                 Alle anzeigen
@@ -240,6 +303,48 @@ export default async function FinancePage({ params }: PageProps) {
             )}
           </CardContent>
         </Card>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between">
+            <p className="text-muted-foreground text-sm">
+              Seite {safePage} von {totalPages}
+            </p>
+            <div className="flex items-center gap-1">
+              {safePage > 1 ? (
+                <Link
+                  href={`/home/${account}/finance${buildQuery(queryBase, { page: safePage - 1 })}`}
+                >
+                  <Button variant="outline" size="sm">
+                    <ChevronLeft className="h-4 w-4" />
+                  </Button>
+                </Link>
+              ) : (
+                <Button variant="outline" size="sm" disabled>
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+              )}
+
+              <span className="px-3 text-sm font-medium">
+                {safePage} / {totalPages}
+              </span>
+
+              {safePage < totalPages ? (
+                <Link
+                  href={`/home/${account}/finance${buildQuery(queryBase, { page: safePage + 1 })}`}
+                >
+                  <Button variant="outline" size="sm">
+                    <ChevronRight className="h-4 w-4" />
+                  </Button>
+                </Link>
+              ) : (
+                <Button variant="outline" size="sm" disabled>
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
       </div>
     </CmsPageShell>
   );