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

2026-04-01 15:18:24 +02:00
parent f82a366a52
commit 7b078f298b
58 changed files with 1845 additions and 398 deletions
--- a/apps/web/app/[locale]/home/[account]/courses/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/page.tsx
@@ -16,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';
@@ -50,7 +51,12 @@ export default async function CoursesPage({ params, searchParams }: PageProps) {
  const page = Number(search.page) || 1;

  const [courses, stats] = await Promise.all([
-    api.listCourses(acct.id, { page, pageSize: PAGE_SIZE }),
+    api.listCourses(acct.id, {
+      search: search.q as string,
+      status: search.status as string,
+      page,
+      pageSize: PAGE_SIZE,
+    }),
    api.getStatistics(acct.id),
  ]);

@@ -95,6 +101,25 @@ export default async function CoursesPage({ params, searchParams }: PageProps) {
          />
        </div>

+        {/* Search & Filters */}
+        <ListToolbar
+          searchPlaceholder="Kurs suchen..."
+          filters={[
+            {
+              param: 'status',
+              label: 'Status',
+              options: [
+                { value: '', label: 'Alle' },
+                { value: 'planned', label: 'Geplant' },
+                { value: 'open', label: 'Offen' },
+                { value: 'running', label: 'Laufend' },
+                { value: 'completed', label: 'Abgeschlossen' },
+                { value: 'cancelled', label: 'Abgesagt' },
+              ],
+            },
+          ]}
+        />
+
        {/* Table or Empty State */}
        {courses.data.length === 0 ? (
          <EmptyState
--- a/apps/web/app/[locale]/home/[account]/finance/invoices/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/finance/invoices/page.tsx
@@ -39,7 +39,8 @@ export default async function InvoicesPage({ params }: PageProps) {
  if (!acct) return <AccountNotFound />;

  const api = createFinanceApi(client);
-  const invoices = await api.listInvoices(acct.id);
+  const invoicesResult = await api.listInvoices(acct.id);
+  const invoices = invoicesResult.data;

  return (
    <CmsPageShell account={account} title="Rechnungen">
--- a/apps/web/app/[locale]/home/[account]/finance/page.tsx
+++ b/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>
  );
--- a/apps/web/app/[locale]/home/[account]/finance/payments/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/finance/payments/page.tsx
@@ -35,10 +35,12 @@ export default async function PaymentsPage({ params }: PageProps) {

  const api = createFinanceApi(client);

-  const [batches, invoices] = await Promise.all([
+  const [batchesResult, invoicesResult] = await Promise.all([
    api.listBatches(acct.id),
    api.listInvoices(acct.id),
  ]);
+  const batches = batchesResult.data;
+  const invoices = invoicesResult.data;

  const paidInvoices = invoices.filter(
    (inv: Record<string, unknown>) => inv.status === 'paid',
--- a/apps/web/app/[locale]/home/[account]/finance/sepa/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/finance/sepa/page.tsx
@@ -36,7 +36,8 @@ export default async function SepaPage({ params }: PageProps) {
  if (!acct) return <AccountNotFound />;

  const api = createFinanceApi(client);
-  const batches = await api.listBatches(acct.id);
+  const batchesResult = await api.listBatches(acct.id);
+  const batches = batchesResult.data;

  return (
    <CmsPageShell account={account} title="SEPA-Lastschriften">
--- a/apps/web/app/[locale]/home/[account]/fischerei/catch-books/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/fischerei/catch-books/page.tsx
@@ -4,6 +4,7 @@ import {
  CatchBooksDataTable,
 } from '@kit/fischerei/components';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { ListToolbar } from '@kit/ui/list-toolbar';

 import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
@@ -28,7 +29,18 @@ export default async function CatchBooksPage({ params, searchParams }: Props) {

  const api = createFischereiApi(client);
  const page = Number(search.page) || 1;
+
+  const currentYear = new Date().getFullYear();
+  const yearOptions = [
+    { value: '', label: 'Alle Jahre' },
+    ...Array.from({ length: 4 }, (_, i) => ({
+      value: String(currentYear - i),
+      label: String(currentYear - i),
+    })),
+  ];
+
  const result = await api.listCatchBooks(acct.id, {
+    search: search.q as string,
    year: search.year ? Number(search.year) : undefined,
    status: search.status as string,
    page,
@@ -38,6 +50,22 @@ export default async function CatchBooksPage({ params, searchParams }: Props) {
  return (
    <CmsPageShell account={account} title="Fischerei - Fangbücher">
      <FischereiTabNavigation account={account} activeTab="catch-books" />
+      <ListToolbar
+        searchPlaceholder="Mitglied suchen..."
+        filters={[
+          { param: 'year', label: 'Jahr', options: yearOptions },
+          {
+            param: 'status',
+            label: 'Status',
+            options: [
+              { value: '', label: 'Alle' },
+              { value: 'open', label: 'Offen' },
+              { value: 'submitted', label: 'Eingereicht' },
+              { value: 'checked', label: 'Geprüft' },
+            ],
+          },
+        ]}
+      />
      <CatchBooksDataTable
        data={result.data}
        total={result.total}
--- a/apps/web/app/[locale]/home/[account]/fischerei/competitions/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/fischerei/competitions/page.tsx
@@ -4,6 +4,7 @@ import {
  CompetitionsDataTable,
 } from '@kit/fischerei/components';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { ListToolbar } from '@kit/ui/list-toolbar';

 import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
@@ -31,7 +32,19 @@ export default async function CompetitionsPage({

  const api = createFischereiApi(client);
  const page = Number(search.page) || 1;
+  const yearParam = search.year ? Number(search.year) : undefined;
+
+  const currentYear = new Date().getFullYear();
+  const yearOptions = [
+    { value: '', label: 'Alle Jahre' },
+    ...Array.from({ length: 4 }, (_, i) => ({
+      value: String(currentYear - i),
+      label: String(currentYear - i),
+    })),
+  ];
+
  const result = await api.listCompetitions(acct.id, {
+    year: yearParam,
    page,
    pageSize: 25,
  });
@@ -39,6 +52,10 @@ export default async function CompetitionsPage({
  return (
    <CmsPageShell account={account} title="Fischerei - Wettbewerbe">
      <FischereiTabNavigation account={account} activeTab="competitions" />
+      <ListToolbar
+        showSearch={false}
+        filters={[{ param: 'year', label: 'Jahr', options: yearOptions }]}
+      />
      <CompetitionsDataTable
        data={result.data}
        total={result.total}
--- a/apps/web/app/[locale]/home/[account]/fischerei/leases/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/fischerei/leases/page.tsx
@@ -5,6 +5,7 @@ import { formatDate } from '@kit/shared/dates';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
 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';
@@ -29,10 +30,28 @@ export default async function LeasesPage({ params, searchParams }: Props) {

  const api = createFischereiApi(client);
  const page = Number(search.page) || 1;
-  const result = await api.listLeases(acct.id, {
-    page,
-    pageSize: 25,
-  });
+  const waterId = (search.waterId as string) || undefined;
+  const activeParam = search.active as string | undefined;
+  const active =
+    activeParam === 'true' ? true : activeParam === 'false' ? false : undefined;
+
+  const [result, watersResult] = await Promise.all([
+    api.listLeases(acct.id, {
+      waterId,
+      active,
+      page,
+      pageSize: 25,
+    }),
+    api.listWaters(acct.id, { pageSize: 200 }),
+  ]);
+
+  const waterOptions = [
+    { value: '', label: 'Alle Gewässer' },
+    ...watersResult.data.map((w) => ({
+      value: String(w.id),
+      label: String(w.name),
+    })),
+  ];

  return (
    <CmsPageShell account={account} title="Fischerei - Pachten">
@@ -44,6 +63,21 @@ export default async function LeasesPage({ params, searchParams }: Props) {
            Gewässerpachtverträge verwalten
          </p>
        </div>
+        <ListToolbar
+          showSearch={false}
+          filters={[
+            { param: 'waterId', label: 'Gewässer', options: waterOptions },
+            {
+              param: 'active',
+              label: 'Status',
+              options: [
+                { value: '', label: 'Alle' },
+                { value: 'true', label: 'Aktiv' },
+                { value: 'false', label: 'Archiviert' },
+              ],
+            },
+          ]}
+        />
        <Card>
          <CardHeader>
            <CardTitle>Pachten ({result.total})</CardTitle>
--- a/apps/web/app/[locale]/home/[account]/fischerei/species/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/fischerei/species/page.tsx
@@ -4,6 +4,7 @@ import {
  SpeciesDataTable,
 } from '@kit/fischerei/components';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { ListToolbar } from '@kit/ui/list-toolbar';

 import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
@@ -28,8 +29,13 @@ export default async function SpeciesPage({ params, searchParams }: Props) {

  const api = createFischereiApi(client);
  const page = Number(search.page) || 1;
+  const activeParam = search.active as string | undefined;
+  const active =
+    activeParam === 'true' ? true : activeParam === 'false' ? false : undefined;
+
  const result = await api.listSpecies(acct.id, {
    search: search.q as string,
+    active,
    page,
    pageSize: 50,
  });
@@ -37,6 +43,20 @@ export default async function SpeciesPage({ params, searchParams }: Props) {
  return (
    <CmsPageShell account={account} title="Fischerei - Fischarten">
      <FischereiTabNavigation account={account} activeTab="species" />
+      <ListToolbar
+        searchPlaceholder="Fischart suchen..."
+        filters={[
+          {
+            param: 'active',
+            label: 'Status',
+            options: [
+              { value: '', label: 'Alle' },
+              { value: 'true', label: 'Aktiv' },
+              { value: 'false', label: 'Inaktiv' },
+            ],
+          },
+        ]}
+      />
      <SpeciesDataTable
        data={result.data}
        total={result.total}
--- a/apps/web/app/[locale]/home/[account]/fischerei/stocking/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/fischerei/stocking/page.tsx
@@ -4,6 +4,7 @@ import {
  StockingDataTable,
 } from '@kit/fischerei/components';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { ListToolbar } from '@kit/ui/list-toolbar';

 import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
@@ -28,14 +29,58 @@ export default async function StockingPage({ params, searchParams }: Props) {

  const api = createFischereiApi(client);
  const page = Number(search.page) || 1;
-  const result = await api.listStocking(acct.id, {
-    page,
-    pageSize: 25,
-  });
+  const waterId = (search.waterId as string) || undefined;
+  const speciesId = (search.speciesId as string) || undefined;
+  const yearParam = search.year ? Number(search.year) : undefined;
+
+  const [result, watersResult, speciesResult] = await Promise.all([
+    api.listStocking(acct.id, {
+      waterId,
+      speciesId,
+      year: yearParam,
+      page,
+      pageSize: 25,
+    }),
+    api.listWaters(acct.id, { pageSize: 200 }),
+    api.listSpecies(acct.id, { pageSize: 200 }),
+  ]);
+
+  const currentYear = new Date().getFullYear();
+  const yearOptions = [
+    { value: '', label: 'Alle Jahre' },
+    ...Array.from({ length: 4 }, (_, i) => ({
+      value: String(currentYear - i),
+      label: String(currentYear - i),
+    })),
+  ];
+
+  const waterOptions = [
+    { value: '', label: 'Alle Gewässer' },
+    ...watersResult.data.map((w) => ({
+      value: String(w.id),
+      label: String(w.name),
+    })),
+  ];
+
+  const speciesOptions = [
+    { value: '', label: 'Alle Arten' },
+    ...speciesResult.data.map((s) => ({
+      value: String(s.id),
+      label: String(s.name),
+    })),
+  ];

  return (
    <CmsPageShell account={account} title="Fischerei - Besatz">
      <FischereiTabNavigation account={account} activeTab="stocking" />
+      <ListToolbar
+        showSearch={false}
+        filters={[
+          { param: 'waterId', label: 'Gewässer', options: waterOptions },
+          { param: 'speciesId', label: 'Fischart', options: speciesOptions },
+          { param: 'year', label: 'Jahr', options: yearOptions },
+        ]}
+      />
      <StockingDataTable
        data={result.data}
        total={result.total}
--- a/apps/web/app/[locale]/home/[account]/members-cms/departments/create-department-dialog.tsx
+++ b/apps/web/app/[locale]/home/[account]/members-cms/departments/create-department-dialog.tsx
@@ -5,7 +5,6 @@ import { useCallback, useState } from 'react';
 import { useRouter } from 'next/navigation';

 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';
@@ -20,7 +19,7 @@ import {
 } from '@kit/ui/dialog';
 import { Input } from '@kit/ui/input';
 import { Label } from '@kit/ui/label';
-import { toast } from '@kit/ui/sonner';
+import { useActionWithToast } from '@kit/ui/use-action-with-toast';

 interface CreateDepartmentDialogProps {
  accountId: string;
@@ -34,18 +33,14 @@ export function CreateDepartmentDialog({
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

-  const { execute, isPending } = useAction(createDepartment, {
-    onSuccess: ({ data }) => {
-      if (data?.success) {
-        toast.success('Abteilung erstellt');
-        setOpen(false);
-        setName('');
-        setDescription('');
-        router.refresh();
-      }
-    },
-    onError: ({ error }) => {
-      toast.error(error.serverError ?? 'Fehler beim Erstellen der Abteilung');
+  const { execute, isPending } = useActionWithToast(createDepartment, {
+    successMessage: 'Abteilung erstellt',
+    errorMessage: 'Fehler beim Erstellen der Abteilung',
+    onSuccess: () => {
+      setOpen(false);
+      setName('');
+      setDescription('');
+      router.refresh();
    },
  });

--- a/apps/web/app/[locale]/home/[account]/members-cms/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/members-cms/page.tsx
@@ -45,6 +45,7 @@ export default async function MembersPage({ params, searchParams }: Props) {
        page={page}
        pageSize={PAGE_SIZE}
        account={account}
+        accountId={acct.id}
        duesCategories={(duesCategories ?? []).map(
          (c: Record<string, unknown>) => ({
            id: String(c.id),
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/[recordId]/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/[recordId]/page.tsx
@@ -1,17 +1,12 @@
-import Link from 'next/link';
-
-import { Pencil, Trash2, Lock, Unlock } from 'lucide-react';
-
 import { createModuleBuilderApi } from '@kit/module-builder/api';
 import { ModuleForm } from '@kit/module-builder/components';
-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 { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';

+import { RecordDetailClient } from './record-detail-client';
+
 interface RecordDetailPageProps {
  params: Promise<{ account: string; moduleId: string; recordId: string }>;
 }
@@ -23,6 +18,14 @@ export default async function RecordDetailPage({
  const client = getSupabaseServerClient();
  const api = createModuleBuilderApi(client);

+  const { data: accountData } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
+
+  if (!accountData) return <AccountNotFound />;
+
  const [moduleWithFields, record] = await Promise.all([
    api.modules.getModuleWithFields(moduleId),
    api.records.getRecord(recordId),
@@ -49,68 +52,23 @@ export default async function RecordDetailPage({
    }
  ).fields;

-  const data = (record.data ?? {}) as Record<string, unknown>;
-  const isLocked = record.status === 'locked';
-
  return (
    <CmsPageShell
      account={account}
      title={`${String(moduleWithFields.display_name)} — Datensatz`}
    >
-      <div className="space-y-6">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Badge
-              variant={
-                isLocked
-                  ? 'destructive'
-                  : record.status === 'active'
-                    ? 'default'
-                    : 'secondary'
-              }
-            >
-              {String(record.status)}
-            </Badge>
-            <span className="text-muted-foreground text-sm">
-              Erstellt: {formatDate(record.created_at)}
-            </span>
-          </div>
-          <div className="flex gap-2">
-            {isLocked ? (
-              <Button variant="outline" size="sm">
-                <Unlock className="mr-2 h-4 w-4" />
-                Entsperren
-              </Button>
-            ) : (
-              <Button variant="outline" size="sm">
-                <Lock className="mr-2 h-4 w-4" />
-                Sperren
-              </Button>
-            )}
-            <Button variant="destructive" size="sm">
-              <Trash2 className="mr-2 h-4 w-4" />
-              Löschen
-            </Button>
-          </div>
-        </div>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Pencil className="h-4 w-4" />
-              Datensatz bearbeiten
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ModuleForm
-              fields={fields as Parameters<typeof ModuleForm>[0]['fields']}
-              initialData={data}
-              onSubmit={async () => {}}
-              isLoading={false}
-            />
-          </CardContent>
-        </Card>
-      </div>
+      <RecordDetailClient
+        fields={fields as Parameters<typeof ModuleForm>[0]['fields']}
+        record={{
+          id: record.id as string,
+          data: (record.data ?? {}) as Record<string, unknown>,
+          status: record.status as string,
+          created_at: record.created_at as string,
+        }}
+        moduleId={moduleId}
+        accountId={accountData.id}
+        accountSlug={account}
+      />
    </CmsPageShell>
  );
 }
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/[recordId]/record-detail-client.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/[recordId]/record-detail-client.tsx
@@ -0,0 +1,206 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Pencil, Trash2, Lock, Unlock } from 'lucide-react';
+
+import {
+  updateRecord,
+  deleteRecord,
+  lockRecord,
+} from '@kit/module-builder/actions/record-actions';
+import { ModuleForm } from '@kit/module-builder/components';
+import { formatDate } from '@kit/shared/dates';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@kit/ui/alert-dialog';
+import { Badge } from '@kit/ui/badge';
+import { Button } from '@kit/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
+import { useActionWithToast } from '@kit/ui/use-action-with-toast';
+
+type FieldDef = Parameters<typeof ModuleForm>[0]['fields'][number];
+
+interface RecordDetailClientProps {
+  fields: FieldDef[];
+  record: {
+    id: string;
+    data: Record<string, unknown>;
+    status: string;
+    created_at: string;
+  };
+  moduleId: string;
+  accountId: string;
+  accountSlug: string;
+}
+
+export function RecordDetailClient({
+  fields,
+  record,
+  moduleId,
+  accountId,
+  accountSlug,
+}: RecordDetailClientProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const isLocked = record.status === 'locked';
+
+  const lockSuccessMessage = isLocked
+    ? 'Datensatz entsperrt'
+    : 'Datensatz gesperrt';
+
+  const { execute: execUpdate, isPending: isUpdating } = useActionWithToast(
+    updateRecord,
+    {
+      successMessage: 'Datensatz aktualisiert',
+      errorMessage: 'Fehler beim Aktualisieren',
+      onSuccess: () => {
+        startTransition(() => {
+          router.refresh();
+        });
+      },
+    },
+  );
+
+  const { execute: execDelete, isPending: isDeleting } = useActionWithToast(
+    deleteRecord,
+    {
+      successMessage: 'Datensatz gelöscht',
+      errorMessage: 'Fehler beim Löschen',
+      onSuccess: () => {
+        startTransition(() => {
+          router.push(`/home/${accountSlug}/modules/${moduleId}`);
+        });
+      },
+    },
+  );
+
+  const { execute: execLock, isPending: isLocking } = useActionWithToast(
+    lockRecord,
+    {
+      successMessage: lockSuccessMessage,
+      errorMessage: 'Fehler beim Sperren',
+      onSuccess: () => {
+        startTransition(() => {
+          router.refresh();
+        });
+      },
+    },
+  );
+
+  const isBusy = isUpdating || isDeleting || isLocking || isPending;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Badge
+            variant={
+              isLocked
+                ? 'destructive'
+                : record.status === 'active'
+                  ? 'default'
+                  : 'secondary'
+            }
+          >
+            {record.status}
+          </Badge>
+          <span className="text-muted-foreground text-sm">
+            Erstellt: {formatDate(record.created_at)}
+          </span>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={isBusy}
+            onClick={() =>
+              execLock({
+                recordId: record.id,
+                lock: !isLocked,
+                accountId,
+              })
+            }
+          >
+            {isLocked ? (
+              <>
+                <Unlock className="mr-2 h-4 w-4" />
+                Entsperren
+              </>
+            ) : (
+              <>
+                <Lock className="mr-2 h-4 w-4" />
+                Sperren
+              </>
+            )}
+          </Button>
+
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="destructive" size="sm" disabled={isBusy}>
+                <Trash2 className="mr-2 h-4 w-4" />
+                Löschen
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Datensatz löschen?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Dieser Datensatz wird unwiderruflich gelöscht. Diese Aktion
+                  kann nicht rückgängig gemacht werden.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Abbrechen</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={() =>
+                    execDelete({
+                      recordId: record.id,
+                      hard: false,
+                      accountId,
+                    })
+                  }
+                >
+                  Löschen
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Pencil className="h-4 w-4" />
+            Datensatz bearbeiten
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ModuleForm
+            fields={fields}
+            initialData={record.data}
+            onSubmit={async (data) => {
+              execUpdate({
+                recordId: record.id,
+                data,
+                accountId,
+              });
+            }}
+            isLoading={isBusy}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/_lib/filter-params.ts
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/_lib/filter-params.ts
@@ -0,0 +1,23 @@
+interface FilterValue {
+  field: string;
+  operator: string;
+  value: string;
+}
+
+export function encodeFilters(filters: FilterValue[]): string {
+  return filters
+    .map((f) => `${f.field}:${f.operator}:${encodeURIComponent(f.value)}`)
+    .join(',');
+}
+
+export function decodeFilters(raw: string | undefined | null): FilterValue[] {
+  if (!raw) return [];
+  return raw.split(',').map((segment) => {
+    const [field, operator, ...rest] = segment.split(':');
+    return {
+      field: field ?? '',
+      operator: operator ?? 'eq',
+      value: decodeURIComponent(rest.join(':')),
+    };
+  });
+}
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/module-search-bar.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/module-search-bar.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
+
+import { ModuleSearch } from '@kit/module-builder/components';
+
+import { encodeFilters, decodeFilters } from './_lib/filter-params';
+
+interface FieldOption {
+  name: string;
+  display_name: string;
+  show_in_filter: boolean;
+  show_in_search: boolean;
+}
+
+interface ModuleSearchBarProps {
+  fields: FieldOption[];
+}
+
+export function ModuleSearchBar({ fields }: ModuleSearchBarProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const currentSearch = searchParams.get('q') ?? '';
+  const currentFilters = decodeFilters(searchParams.get('f') ?? '');
+
+  const updateParams = useCallback(
+    (updates: Record<string, string | null>) => {
+      const params = new URLSearchParams(searchParams.toString());
+      // Reset to page 1 when search/filters change
+      params.delete('page');
+      for (const [key, value] of Object.entries(updates)) {
+        if (value === null || value === '') {
+          params.delete(key);
+        } else {
+          params.set(key, value);
+        }
+      }
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [router, pathname, searchParams],
+  );
+
+  return (
+    <ModuleSearch
+      fields={fields}
+      initialSearch={currentSearch}
+      initialFilters={currentFilters}
+      onSearch={(search) => updateParams({ q: search || null })}
+      onFilter={(filters) =>
+        updateParams({ f: filters.length > 0 ? encodeFilters(filters) : null })
+      }
+    />
+  );
+}
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/new/create-record-form.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/new/create-record-form.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { createRecord } from '@kit/module-builder/actions/record-actions';
+import { ModuleForm } from '@kit/module-builder/components';
+import { useActionWithToast } from '@kit/ui/use-action-with-toast';
+
+type FieldDef = Parameters<typeof ModuleForm>[0]['fields'][number];
+
+interface CreateRecordFormProps {
+  fields: FieldDef[];
+  moduleId: string;
+  accountId: string;
+  accountSlug: string;
+}
+
+export function CreateRecordForm({
+  fields,
+  moduleId,
+  accountId,
+  accountSlug,
+}: CreateRecordFormProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const { execute, isPending: isExecuting } = useActionWithToast(createRecord, {
+    successMessage: 'Datensatz erstellt',
+    errorMessage: 'Fehler beim Erstellen',
+    onSuccess: () => {
+      startTransition(() => {
+        router.push(`/home/${accountSlug}/modules/${moduleId}`);
+      });
+    },
+  });
+
+  return (
+    <ModuleForm
+      fields={fields}
+      onSubmit={async (data) => {
+        execute({ moduleId, accountId, data });
+      }}
+      isLoading={isExecuting || isPending}
+    />
+  );
+}
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/new/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/new/page.tsx
@@ -2,8 +2,11 @@ import { createModuleBuilderApi } from '@kit/module-builder/api';
 import { ModuleForm } from '@kit/module-builder/components';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';

+import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';

+import { CreateRecordForm } from './create-record-form';
+
 interface NewRecordPageProps {
  params: Promise<{ account: string; moduleId: string }>;
 }
@@ -13,6 +16,14 @@ export default async function NewRecordPage({ params }: NewRecordPageProps) {
  const client = getSupabaseServerClient();
  const api = createModuleBuilderApi(client);

+  const { data: accountData } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
+
+  if (!accountData) return <AccountNotFound />;
+
  const moduleWithFields = await api.modules.getModuleWithFields(moduleId);
  if (!moduleWithFields) return <div>Modul nicht gefunden</div>;

@@ -41,10 +52,11 @@ export default async function NewRecordPage({ params }: NewRecordPageProps) {
      title={`${String(moduleWithFields.display_name)} — Neuer Datensatz`}
    >
      <div className="mx-auto max-w-3xl">
-        <ModuleForm
+        <CreateRecordForm
          fields={fields as Parameters<typeof ModuleForm>[0]['fields']}
-          onSubmit={async () => {}}
-          isLoading={false}
+          moduleId={moduleId}
+          accountId={accountData.id}
+          accountSlug={account}
        />
      </div>
    </CmsPageShell>
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/page.tsx
@@ -1,5 +1,13 @@
+import Link from 'next/link';
+
+import { Plus } from 'lucide-react';
+
 import { createModuleBuilderApi } from '@kit/module-builder/api';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { Button } from '@kit/ui/button';
+
+import { decodeFilters } from './_lib/filter-params';
+import { ModuleSearchBar } from './module-search-bar';

 interface ModuleDetailPageProps {
  params: Promise<{ account: string; moduleId: string }>;
@@ -25,6 +33,8 @@ export default async function ModuleDetailPage({
  const pageSize =
    Number(search.pageSize) || moduleWithFields.default_page_size || 25;

+  const filters = decodeFilters(search.f as string | undefined);
+
  const result = await api.query.query({
    moduleId,
    page,
@@ -38,9 +48,20 @@ export default async function ModuleDetailPage({
      (moduleWithFields.default_sort_direction as 'asc' | 'desc') ??
      'asc',
    search: (search.q as string) ?? undefined,
-    filters: [],
+    filters,
  });

+  const fields = (
+    moduleWithFields as unknown as {
+      fields: Array<{
+        name: string;
+        display_name: string;
+        show_in_filter: boolean;
+        show_in_search: boolean;
+      }>;
+    }
+  ).fields;
+
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between">
@@ -54,14 +75,21 @@ export default async function ModuleDetailPage({
            </p>
          )}
        </div>
+        <Button asChild>
+          <Link href={`/home/${account}/modules/${moduleId}/new`}>
+            <Plus className="mr-2 h-4 w-4" />
+            Neuer Datensatz
+          </Link>
+        </Button>
      </div>

+      <ModuleSearchBar fields={fields} />
+
      <div className="text-muted-foreground text-sm">
        {result.pagination.total} Datensätze — Seite {result.pagination.page}{' '}
        von {result.pagination.totalPages}
      </div>

-      {/* Phase 3 will replace this with module-table component */}
      <div className="rounded-lg border">
        <pre className="max-h-96 overflow-auto p-4 text-xs">
          {JSON.stringify(result.data, null, 2)}
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/settings/delete-module-button.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/settings/delete-module-button.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Trash2 } from 'lucide-react';
+
+import { deleteModule } from '@kit/module-builder/actions/module-actions';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+import { useActionWithToast } from '@kit/ui/use-action-with-toast';
+
+interface DeleteModuleButtonProps {
+  moduleId: string;
+  moduleName: string;
+  accountSlug: string;
+}
+
+export function DeleteModuleButton({
+  moduleId,
+  moduleName,
+  accountSlug,
+}: DeleteModuleButtonProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const { execute, isPending: isDeleting } = useActionWithToast(deleteModule, {
+    successMessage: `Modul "${moduleName}" wurde archiviert`,
+    errorMessage: 'Fehler beim Löschen',
+    onSuccess: () => {
+      startTransition(() => {
+        router.push(`/home/${accountSlug}/modules`);
+      });
+    },
+  });
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive" disabled={isDeleting || isPending}>
+          <Trash2 className="mr-2 h-4 w-4" />
+          Modul archivieren
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Modul archivieren?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Das Modul &quot;{moduleName}&quot; wird archiviert und ist nicht
+            mehr sichtbar. Diese Aktion kann durch einen Administrator
+            rückgängig gemacht werden.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Abbrechen</AlertDialogCancel>
+          <AlertDialogAction onClick={() => execute({ moduleId })}>
+            Archivieren
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/settings/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/settings/page.tsx
@@ -10,6 +10,8 @@ import { Label } from '@kit/ui/label';

 import { CmsPageShell } from '~/components/cms-page-shell';

+import { DeleteModuleButton } from './delete-module-button';
+
 interface ModuleSettingsPageProps {
  params: Promise<{ account: string; moduleId: string }>;
 }
@@ -178,6 +180,25 @@ export default async function ModuleSettingsPage({
            </p>
          </CardContent>
        </Card>
+
+        {/* Danger Zone */}
+        <Card className="border-destructive/50">
+          <CardHeader>
+            <CardTitle className="text-destructive flex items-center gap-2">
+              Gefahrenbereich
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="flex items-center justify-between">
+            <p className="text-muted-foreground text-sm">
+              Das Modul wird archiviert und ist nicht mehr sichtbar.
+            </p>
+            <DeleteModuleButton
+              moduleId={moduleId}
+              moduleName={String(mod.display_name)}
+              accountSlug={account}
+            />
+          </CardContent>
+        </Card>
      </div>
    </CmsPageShell>
  );
--- a/apps/web/app/[locale]/home/[account]/newsletter/[campaignId]/dispatch-newsletter-button.tsx
+++ b/apps/web/app/[locale]/home/[account]/newsletter/[campaignId]/dispatch-newsletter-button.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Send } from 'lucide-react';
+
+import { dispatchNewsletter } from '@kit/newsletter/actions/newsletter-actions';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+import { useActionWithToast } from '@kit/ui/use-action-with-toast';
+
+interface DispatchNewsletterButtonProps {
+  newsletterId: string;
+  recipientCount: number;
+}
+
+export function DispatchNewsletterButton({
+  newsletterId,
+  recipientCount,
+}: DispatchNewsletterButtonProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const { execute, isPending: isDispatching } = useActionWithToast(
+    dispatchNewsletter,
+    {
+      successMessage: 'Newsletter wird versendet',
+      errorMessage: 'Fehler beim Versenden',
+      onSuccess: () => {
+        startTransition(() => {
+          router.refresh();
+        });
+      },
+    },
+  );
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button
+          disabled={isDispatching || isPending || recipientCount === 0}
+          data-test="newsletter-send-btn"
+        >
+          <Send className="mr-2 h-4 w-4" />
+          Newsletter versenden
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Newsletter versenden?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Der Newsletter wird an {recipientCount} Empfänger versendet. Dieser
+            Vorgang kann nicht rückgängig gemacht werden.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Abbrechen</AlertDialogCancel>
+          <AlertDialogAction onClick={() => execute({ newsletterId })}>
+            Jetzt versenden
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
--- a/apps/web/app/[locale]/home/[account]/newsletter/[campaignId]/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/newsletter/[campaignId]/page.tsx
@@ -5,7 +5,6 @@ import { ArrowLeft, Send, Users } from 'lucide-react';
 import { createNewsletterApi } from '@kit/newsletter/api';
 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 { AccountNotFound } from '~/components/account-not-found';
@@ -18,6 +17,8 @@ import {
  NEWSLETTER_RECIPIENT_STATUS_LABEL,
 } from '~/lib/status-badges';

+import { DispatchNewsletterButton } from './dispatch-newsletter-button';
+
 interface PageProps {
  params: Promise<{ account: string; campaignId: string }>;
 }
@@ -99,10 +100,10 @@ export default async function NewsletterDetailPage({ params }: PageProps) {
            {/* Actions */}
            {status === 'draft' && (
              <div className="mt-6">
-                <Button data-test="newsletter-send-btn">
-                  <Send className="mr-2 h-4 w-4" />
-                  Newsletter versenden
-                </Button>
+                <DispatchNewsletterButton
+                  newsletterId={campaignId}
+                  recipientCount={recipients.length}
+                />
              </div>
            )}
          </CardContent>
--- a/apps/web/app/[locale]/home/[account]/newsletter/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/newsletter/page.tsx
@@ -15,6 +15,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';
@@ -32,6 +33,20 @@ interface PageProps {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
 }

+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 NewsletterPage({
  params,
  searchParams,
@@ -48,26 +63,34 @@ export default async function NewsletterPage({

  if (!acct) return <AccountNotFound />;

-  const api = createNewsletterApi(client);
-  const allNewsletters = await api.listNewsletters(acct.id);
+  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 sentCount = allNewsletters.filter(
+  const api = createNewsletterApi(client);
+  const result = await api.listNewsletters(acct.id, {
+    search: q,
+    status,
+    page,
+    pageSize: PAGE_SIZE,
+  });
+
+  const newsletters = result.data;
+  const totalItems = result.total;
+  const totalPages = result.totalPages;
+  const safePage = result.page;
+
+  const sentCount = newsletters.filter(
    (n: Record<string, unknown>) => n.status === 'sent',
  ).length;

-  const totalRecipients = allNewsletters.reduce(
+  const totalRecipients = newsletters.reduce(
    (sum: number, n: Record<string, unknown>) =>
      sum + (Number(n.total_recipients) || 0),
    0,
  );

-  // Pagination
-  const currentPage = Math.max(1, Number(search.page) || 1);
-  const totalItems = allNewsletters.length;
-  const totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE));
-  const safePage = Math.min(currentPage, totalPages);
-  const startIdx = (safePage - 1) * PAGE_SIZE;
-  const newsletters = allNewsletters.slice(startIdx, startIdx + PAGE_SIZE);
+  const queryBase = { q, status };

  return (
    <CmsPageShell account={account} title="Newsletter">
@@ -108,6 +131,25 @@ export default async function NewsletterPage({
          />
        </div>

+        {/* Toolbar */}
+        <ListToolbar
+          searchPlaceholder="Newsletter suchen..."
+          filters={[
+            {
+              param: 'status',
+              label: 'Status',
+              options: [
+                { value: '', label: 'Alle' },
+                { value: 'draft', label: 'Entwurf' },
+                { value: 'scheduled', label: 'Geplant' },
+                { value: 'sending', label: 'Wird gesendet' },
+                { value: 'sent', label: 'Gesendet' },
+                { value: 'failed', label: 'Fehlgeschlagen' },
+              ],
+            },
+          ]}
+        />
+
        {/* Table or Empty State */}
        {totalItems === 0 ? (
          <EmptyState
@@ -176,13 +218,12 @@ export default async function NewsletterPage({
              {totalPages > 1 && (
                <div className="flex items-center justify-between pt-4">
                  <p className="text-muted-foreground text-sm">
-                    {startIdx + 1}–{Math.min(startIdx + PAGE_SIZE, totalItems)}{' '}
-                    von {totalItems}
+                    Seite {safePage} von {totalPages}
                  </p>
                  <div className="flex items-center gap-1">
                    {safePage > 1 ? (
                      <Link
-                        href={`/home/${account}/newsletter?page=${safePage - 1}`}
+                        href={`/home/${account}/newsletter${buildQuery(queryBase, { page: safePage - 1 })}`}
                      >
                        <Button variant="outline" size="sm">
                          <ChevronLeft className="h-4 w-4" />
@@ -200,7 +241,7 @@ export default async function NewsletterPage({

                    {safePage < totalPages ? (
                      <Link
-                        href={`/home/${account}/newsletter?page=${safePage + 1}`}
+                        href={`/home/${account}/newsletter${buildQuery(queryBase, { page: safePage + 1 })}`}
                      >
                        <Button variant="outline" size="sm">
                          <ChevronRight className="h-4 w-4" />
--- a/apps/web/app/[locale]/home/[account]/newsletter/templates/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/newsletter/templates/page.tsx
@@ -29,7 +29,8 @@ export default async function NewsletterTemplatesPage({ params }: PageProps) {
  if (!acct) return <AccountNotFound />;

  const api = createNewsletterApi(client);
-  const templates = await api.listTemplates(acct.id);
+  const templatesResult = await api.listTemplates(acct.id);
+  const templates = templatesResult.data;

  return (
    <CmsPageShell account={account} title="Newsletter-Vorlagen">
--- a/apps/web/app/[locale]/home/[account]/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/page.tsx
@@ -86,10 +86,12 @@ export default async function TeamAccountHomePage({
        };

  const openInvoices =
-    invoicesResult.status === 'fulfilled' ? invoicesResult.value : [];
+    invoicesResult.status === 'fulfilled' ? invoicesResult.value.data : [];

  const newsletters =
-    newslettersResult.status === 'fulfilled' ? newslettersResult.value : [];
+    newslettersResult.status === 'fulfilled'
+      ? newslettersResult.value.data
+      : [];

  const bookings =
    bookingsResult.status === 'fulfilled'
--- a/apps/web/app/[locale]/home/[account]/verband/settings/_components/settings-content.tsx
+++ b/apps/web/app/[locale]/home/[account]/verband/settings/_components/settings-content.tsx
@@ -3,12 +3,11 @@
 import { useState } from 'react';

 import { Plus, Pencil, Trash2, Settings } from 'lucide-react';
-import { useAction } from 'next-safe-action/hooks';

 import { Button } from '@kit/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 import { Input } from '@kit/ui/input';
-import { toast } from '@kit/ui/sonner';
+import { useActionWithToast } from '@kit/ui/use-action-with-toast';
 import {
  createRole,
  updateRole,
@@ -185,63 +184,45 @@ export default function SettingsContent({
  feeTypes,
 }: SettingsContentProps) {
  // Roles
-  const { execute: execCreateRole, isPending: isCreatingRole } = useAction(
-    createRole,
-    {
-      onSuccess: () => toast.success('Funktion erstellt'),
-      onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
-    },
-  );
-  const { execute: execUpdateRole, isPending: isUpdatingRole } = useAction(
-    updateRole,
-    {
-      onSuccess: () => toast.success('Funktion aktualisiert'),
-      onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
-    },
-  );
-  const { execute: execDeleteRole } = useAction(deleteRole, {
-    onSuccess: () => toast.success('Funktion gelöscht'),
-    onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
+  const { execute: execCreateRole, isPending: isCreatingRole } =
+    useActionWithToast(createRole, {
+      successMessage: 'Funktion erstellt',
+    });
+  const { execute: execUpdateRole, isPending: isUpdatingRole } =
+    useActionWithToast(updateRole, {
+      successMessage: 'Funktion aktualisiert',
+    });
+  const { execute: execDeleteRole } = useActionWithToast(deleteRole, {
+    successMessage: 'Funktion gelöscht',
  });

  // Types
-  const { execute: execCreateType, isPending: isCreatingType } = useAction(
-    createAssociationType,
+  const { execute: execCreateType, isPending: isCreatingType } =
+    useActionWithToast(createAssociationType, {
+      successMessage: 'Vereinstyp erstellt',
+    });
+  const { execute: execUpdateType, isPending: isUpdatingType } =
+    useActionWithToast(updateAssociationType, {
+      successMessage: 'Vereinstyp aktualisiert',
+    });
+  const { execute: execDeleteType } = useActionWithToast(
+    deleteAssociationType,
    {
-      onSuccess: () => toast.success('Vereinstyp erstellt'),
-      onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
+      successMessage: 'Vereinstyp gelöscht',
    },
  );
-  const { execute: execUpdateType, isPending: isUpdatingType } = useAction(
-    updateAssociationType,
-    {
-      onSuccess: () => toast.success('Vereinstyp aktualisiert'),
-      onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
-    },
-  );
-  const { execute: execDeleteType } = useAction(deleteAssociationType, {
-    onSuccess: () => toast.success('Vereinstyp gelöscht'),
-    onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
-  });

  // Fee Types
-  const { execute: execCreateFeeType, isPending: isCreatingFee } = useAction(
-    createFeeType,
-    {
-      onSuccess: () => toast.success('Beitragsart erstellt'),
-      onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
-    },
-  );
-  const { execute: execUpdateFeeType, isPending: isUpdatingFee } = useAction(
-    updateFeeType,
-    {
-      onSuccess: () => toast.success('Beitragsart aktualisiert'),
-      onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
-    },
-  );
-  const { execute: execDeleteFeeType } = useAction(deleteFeeType, {
-    onSuccess: () => toast.success('Beitragsart gelöscht'),
-    onError: ({ error }) => toast.error(error.serverError ?? 'Fehler'),
+  const { execute: execCreateFeeType, isPending: isCreatingFee } =
+    useActionWithToast(createFeeType, {
+      successMessage: 'Beitragsart erstellt',
+    });
+  const { execute: execUpdateFeeType, isPending: isUpdatingFee } =
+    useActionWithToast(updateFeeType, {
+      successMessage: 'Beitragsart aktualisiert',
+    });
+  const { execute: execDeleteFeeType } = useActionWithToast(deleteFeeType, {
+    successMessage: 'Beitragsart gelöscht',
  });

  return (
--- a/apps/web/app/api/club/accept-invite/route.ts
+++ b/apps/web/app/api/club/accept-invite/route.ts
@@ -2,6 +2,7 @@ import { NextResponse } from 'next/server';

 import { createClient } from '@supabase/supabase-js';

+import { apiError } from '@kit/next/route-helpers';
 import { getLogger } from '@kit/shared/logger';

 export async function POST(request: Request) {
@@ -113,6 +114,6 @@ export async function POST(request: Request) {
      { error: err, context: 'accept-invite' },
      '[accept-invite] Error',
    );
-    return NextResponse.json({ error: 'Serverfehler' }, { status: 500 });
+    return apiError('Serverfehler', 500);
  }
 }
--- a/apps/web/app/api/club/contact/route.ts
+++ b/apps/web/app/api/club/contact/route.ts
@@ -1,27 +1,28 @@
-import { NextResponse } from 'next/server';
+import * as z from 'zod';

+import { apiError, apiSuccess, emailSchema } from '@kit/next/route-helpers';
 import { getLogger } from '@kit/shared/logger';

+const ContactSchema = z.object({
+  recipientEmail: z.string().optional(),
+  name: z.string().optional(),
+  email: emailSchema,
+  subject: z.string().optional(),
+  message: z.string().min(1, 'Nachricht ist erforderlich'),
+});
+
 export async function POST(request: Request) {
  const logger = await getLogger();

  try {
    const body = await request.json();
-    const { recipientEmail, name, email, subject, message } = body;
+    const parsed = ContactSchema.safeParse(body);

-    if (!email || !message) {
-      return NextResponse.json(
-        { error: 'E-Mail und Nachricht sind erforderlich' },
-        { status: 400 },
-      );
+    if (!parsed.success) {
+      return apiError(parsed.error.issues[0]?.message ?? 'Ungültige Eingabe');
    }

-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      return NextResponse.json(
-        { error: 'Ungültige E-Mail-Adresse' },
-        { status: 400 },
-      );
-    }
+    const { recipientEmail, name, email, subject, message } = parsed.data;

    // In production: use @kit/mailers to send the email
    // For now: log and return success
@@ -45,9 +46,9 @@ export async function POST(request: Request) {
    //   text: `Name: ${name}\nE-Mail: ${email}\n\n${message}`,
    // });

-    return NextResponse.json({ success: true, message: 'Nachricht gesendet' });
+    return apiSuccess({ message: 'Nachricht gesendet' });
  } catch (err) {
    logger.error({ error: err, context: 'contact' }, '[contact] Error');
-    return NextResponse.json({ error: 'Serverfehler' }, { status: 500 });
+    return apiError('Serverfehler', 500);
  }
 }
--- a/apps/web/app/api/club/course-register/route.ts
+++ b/apps/web/app/api/club/course-register/route.ts
@@ -1,28 +1,34 @@
-import { NextResponse } from 'next/server';
+import * as z from 'zod';

+import {
+  apiError,
+  apiSuccess,
+  emailSchema,
+  requiredString,
+} from '@kit/next/route-helpers';
 import { getLogger } from '@kit/shared/logger';
 import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';

+const CourseRegisterSchema = z.object({
+  courseId: requiredString('Kurs-ID'),
+  firstName: requiredString('Vorname'),
+  lastName: requiredString('Nachname'),
+  email: emailSchema,
+  phone: z.string().optional(),
+});
+
 export async function POST(request: Request) {
  const logger = await getLogger();

  try {
    const body = await request.json();
-    const { courseId, firstName, lastName, email, phone } = body;
+    const parsed = CourseRegisterSchema.safeParse(body);

-    if (!courseId || !firstName || !lastName || !email) {
-      return NextResponse.json(
-        { error: 'Kurs-ID, Vorname, Nachname und E-Mail sind erforderlich' },
-        { status: 400 },
-      );
+    if (!parsed.success) {
+      return apiError(parsed.error.issues[0]?.message ?? 'Ungültige Eingabe');
    }

-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      return NextResponse.json(
-        { error: 'Ungültige E-Mail-Adresse' },
-        { status: 400 },
-      );
-    }
+    const { courseId, firstName, lastName, email, phone } = parsed.data;

    const supabase = getSupabaseServerAdminClient();

@@ -41,21 +47,15 @@ export async function POST(request: Request) {
        { error, context: 'course-register-insert' },
        '[course-register] Insert error',
      );
-      return NextResponse.json(
-        { error: 'Anmeldung fehlgeschlagen' },
-        { status: 500 },
-      );
+      return apiError('Anmeldung fehlgeschlagen', 500);
    }

-    return NextResponse.json({
-      success: true,
-      message: 'Anmeldung erfolgreich',
-    });
+    return apiSuccess({ message: 'Anmeldung erfolgreich' });
  } catch (err) {
    logger.error(
      { error: err, context: 'course-register' },
      '[course-register] Error',
    );
-    return NextResponse.json({ error: 'Serverfehler' }, { status: 500 });
+    return apiError('Serverfehler', 500);
  }
 }
--- a/apps/web/app/api/club/event-register/route.ts
+++ b/apps/web/app/api/club/event-register/route.ts
@@ -1,13 +1,36 @@
-import { NextResponse } from 'next/server';
+import * as z from 'zod';

+import {
+  apiError,
+  apiSuccess,
+  emailSchema,
+  requiredString,
+} from '@kit/next/route-helpers';
 import { getLogger } from '@kit/shared/logger';
 import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';

+const EventRegisterSchema = z.object({
+  eventId: requiredString('Event-ID'),
+  firstName: requiredString('Vorname'),
+  lastName: requiredString('Nachname'),
+  email: emailSchema,
+  phone: z.string().optional(),
+  dateOfBirth: z.string().optional(),
+  parentName: z.string().optional(),
+  parentPhone: z.string().optional(),
+});
+
 export async function POST(request: Request) {
  const logger = await getLogger();

  try {
    const body = await request.json();
+    const parsed = EventRegisterSchema.safeParse(body);
+
+    if (!parsed.success) {
+      return apiError(parsed.error.issues[0]?.message ?? 'Ungültige Eingabe');
+    }
+
    const {
      eventId,
      firstName,
@@ -17,21 +40,7 @@ export async function POST(request: Request) {
      dateOfBirth,
      parentName,
      parentPhone,
-    } = body;
-
-    if (!eventId || !firstName || !lastName || !email) {
-      return NextResponse.json(
-        { error: 'Event-ID, Vorname, Nachname und E-Mail sind erforderlich' },
-        { status: 400 },
-      );
-    }
-
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      return NextResponse.json(
-        { error: 'Ungültige E-Mail-Adresse' },
-        { status: 400 },
-      );
-    }
+    } = parsed.data;

    const supabase = getSupabaseServerAdminClient();

@@ -53,21 +62,15 @@ export async function POST(request: Request) {
        { error, context: 'event-register-insert' },
        '[event-register] Insert error',
      );
-      return NextResponse.json(
-        { error: 'Anmeldung fehlgeschlagen' },
-        { status: 500 },
-      );
+      return apiError('Anmeldung fehlgeschlagen', 500);
    }

-    return NextResponse.json({
-      success: true,
-      message: 'Anmeldung erfolgreich',
-    });
+    return apiSuccess({ message: 'Anmeldung erfolgreich' });
  } catch (err) {
    logger.error(
      { error: err, context: 'event-register' },
      '[event-register] Error',
    );
-    return NextResponse.json({ error: 'Serverfehler' }, { status: 500 });
+    return apiError('Serverfehler', 500);
  }
 }
--- a/apps/web/app/api/club/membership-apply/route.ts
+++ b/apps/web/app/api/club/membership-apply/route.ts
@@ -1,13 +1,38 @@
-import { NextResponse } from 'next/server';
+import * as z from 'zod';

+import {
+  apiError,
+  apiSuccess,
+  emailSchema,
+  requiredString,
+} from '@kit/next/route-helpers';
 import { getLogger } from '@kit/shared/logger';
 import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';

+const MembershipApplySchema = z.object({
+  accountId: requiredString('Konto-ID'),
+  firstName: requiredString('Vorname'),
+  lastName: requiredString('Nachname'),
+  email: emailSchema,
+  phone: z.string().optional(),
+  street: z.string().optional(),
+  postalCode: z.string().optional(),
+  city: z.string().optional(),
+  dateOfBirth: z.string().optional(),
+  message: z.string().optional(),
+});
+
 export async function POST(request: Request) {
  const logger = await getLogger();

  try {
    const body = await request.json();
+    const parsed = MembershipApplySchema.safeParse(body);
+
+    if (!parsed.success) {
+      return apiError(parsed.error.issues[0]?.message ?? 'Ungültige Eingabe');
+    }
+
    const {
      accountId,
      firstName,
@@ -19,23 +44,7 @@ export async function POST(request: Request) {
      city,
      dateOfBirth,
      message,
-    } = body;
-
-    if (!accountId || !firstName || !lastName || !email) {
-      return NextResponse.json(
-        {
-          error: 'Konto-ID, Vorname, Nachname und E-Mail sind erforderlich',
-        },
-        { status: 400 },
-      );
-    }
-
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      return NextResponse.json(
-        { error: 'Ungültige E-Mail-Adresse' },
-        { status: 400 },
-      );
-    }
+    } = parsed.data;

    const supabase = getSupabaseServerAdminClient();

@@ -58,21 +67,15 @@ export async function POST(request: Request) {
        { error, context: 'membership-apply-insert' },
        '[membership-apply] Insert error',
      );
-      return NextResponse.json(
-        { error: 'Bewerbung fehlgeschlagen' },
-        { status: 500 },
-      );
+      return apiError('Bewerbung fehlgeschlagen', 500);
    }

-    return NextResponse.json({
-      success: true,
-      message: 'Bewerbung erfolgreich eingereicht',
-    });
+    return apiSuccess({ message: 'Bewerbung erfolgreich eingereicht' });
  } catch (err) {
    logger.error(
      { error: err, context: 'membership-apply' },
      '[membership-apply] Error',
    );
-    return NextResponse.json({ error: 'Serverfehler' }, { status: 500 });
+    return apiError('Serverfehler', 500);
  }
 }
--- a/apps/web/app/api/club/newsletter/route.ts
+++ b/apps/web/app/api/club/newsletter/route.ts
@@ -1,30 +1,33 @@
-import { NextResponse } from 'next/server';
-
 import { createClient } from '@supabase/supabase-js';

+import * as z from 'zod';
+
+import {
+  apiError,
+  apiSuccess,
+  emailSchema,
+  requiredString,
+} from '@kit/next/route-helpers';
 import { getLogger } from '@kit/shared/logger';

+const NewsletterSchema = z.object({
+  accountId: requiredString('accountId'),
+  email: emailSchema,
+  name: z.string().optional(),
+});
+
 export async function POST(request: Request) {
  const logger = await getLogger();

  try {
    const body = await request.json();
-    const { accountId, email, name } = body;
+    const parsed = NewsletterSchema.safeParse(body);

-    if (!accountId || !email) {
-      return NextResponse.json(
-        { error: 'accountId und email sind erforderlich' },
-        { status: 400 },
-      );
+    if (!parsed.success) {
+      return apiError(parsed.error.issues[0]?.message ?? 'Ungültige Eingabe');
    }

-    // Validate email format
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      return NextResponse.json(
-        { error: 'Ungültige E-Mail-Adresse' },
-        { status: 400 },
-      );
-    }
+    const { accountId, email, name } = parsed.data;

    const supabase = createClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
@@ -49,18 +52,12 @@ export async function POST(request: Request) {
        { error, context: 'newsletter-subscription' },
        '[newsletter] Subscription error',
      );
-      return NextResponse.json(
-        { error: 'Anmeldung fehlgeschlagen' },
-        { status: 500 },
-      );
+      return apiError('Anmeldung fehlgeschlagen', 500);
    }

-    return NextResponse.json({
-      success: true,
-      message: 'Erfolgreich angemeldet',
-    });
+    return apiSuccess({ message: 'Erfolgreich angemeldet' });
  } catch (err) {
    logger.error({ error: err, context: 'newsletter' }, '[newsletter] Error');
-    return NextResponse.json({ error: 'Serverfehler' }, { status: 500 });
+    return apiError('Serverfehler', 500);
  }
 }