feat(finance): add SEPA batch actions — populate, manual add, XML download

The SEPA batch detail page was a dead end: users could create a batch
but had no way to add payment positions or generate the XML file.

Added SepaBatchActions client component with three key workflows:

1. 'Mitglieder hinzufügen' — auto-populates batch from all active
   members who have a SEPA mandate and dues category (calls existing
   populateBatchFromMembers server action)

2. 'Einzelposition' — dialog to manually add a single debit item
   with Name, IBAN, Amount, and Verwendungszweck fields

3. 'XML herunterladen' — dialog for creditor info (Gläubiger-Name,
   IBAN, BIC, Gläubiger-ID) then generates and triggers download of
   the SEPA pain.008 XML file. Disabled when batch has 0 positions.

Also fixed: SEPA list page crashed because a Server Component had an
onClick handler on a <tr> — removed the invalid event handler.

Target demographic: German association treasurers (Kassenwarte) who
need a straightforward workflow for annual membership fee collection
via SEPA Lastschrift.

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

@@ -1,13 +1,13 @@
 import Link from 'next/link';
 
-import { ArrowLeft, Download } from 'lucide-react';
+import { ArrowLeft } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
 
 import { createFinanceApi } from '@kit/finance/api';
+import { SepaBatchActions } from '@kit/finance/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';
@@ -124,10 +124,12 @@ export default async function SepaBatchDetailPage({ params }: PageProps) {
             </dl>
 
             <div className="mt-6">
-              <Button disabled variant="outline">
-                <Download className="mr-2 h-4 w-4" />
-                {t('sepa.downloadXml')}
-              </Button>
+              <SepaBatchActions
+                batchId={batchId}
+                accountId={acct.id}
+                batchStatus={status}
+                itemCount={items.length}
+              />
             </div>
           </CardContent>
         </Card>

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

@@ -108,7 +108,7 @@ export default async function SepaPage({ params }: PageProps) {
                     {batches.map((batch: Record<string, unknown>) => (
                       <tr
                         key={String(batch.id)}
-                        className="hover:bg-muted/30 border-b"
+                        className="hover:bg-muted/30 cursor-pointer border-b"
                       >
                         <td className="p-3">
                           <Badge
@@ -131,7 +131,7 @@ export default async function SepaPage({ params }: PageProps) {
                         <td className="p-3">
                           <Link
                             href={`/home/${account}/finance/sepa/${String(batch.id)}`}
-                            className="hover:underline"
+                            className="font-medium hover:underline"
                           >
                             {String(batch.description ?? '—')}
                           </Link>

packages/features/finance/package.json

@@ -33,5 +33,8 @@
     "react": "catalog:",
     "react-hook-form": "catalog:",
     "zod": "catalog:"
+  },
+  "dependencies": {
+    "lucide-react": "catalog:"
   }
 }

packages/features/finance/src/components/index.ts

@@ -1,2 +1,3 @@
 export { CreateInvoiceForm } from './create-invoice-form';
 export { CreateSepaBatchForm } from './create-sepa-batch-form';
+export { SepaBatchActions } from './sepa-batch-actions';

packages/features/finance/src/components/sepa-batch-actions.tsx

@@ -0,0 +1,377 @@
+'use client';
+
+import { useAction } from 'next-safe-action/hooks';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import {
+  Download,
+  UserPlus,
+  Plus,
+  Loader2,
+  AlertTriangle,
+} from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@kit/ui/dialog';
+import { Input } from '@kit/ui/input';
+import { Label } from '@kit/ui/label';
+import { toast } from '@kit/ui/sonner';
+
+import {
+  populateBatchFromMembers,
+  addSepaItem,
+  generateSepaXml,
+} from '../server/actions/finance-actions';
+
+interface SepaBatchActionsProps {
+  batchId: string;
+  accountId: string;
+  batchStatus: string;
+  itemCount: number;
+}
+
+/**
+ * Client-side toolbar for SEPA batch detail page.
+ * Provides: populate from members, add single item, generate XML.
+ */
+export function SepaBatchActions({
+  batchId,
+  accountId,
+  batchStatus,
+  itemCount,
+}: SepaBatchActionsProps) {
+  const router = useRouter();
+  const isDraft = batchStatus === 'draft';
+
+  // ── Populate from members ──
+  const populateAction = useAction(populateBatchFromMembers, {
+    onSuccess: ({ data }) => {
+      const count = data?.data?.addedCount ?? 0;
+      if (count > 0) {
+        toast.success(`${count} Mitglieder hinzugefügt`, {
+          description: 'Positionen wurden aus der Mitgliederliste erstellt.',
+        });
+      } else {
+        toast.info('Keine Mitglieder gefunden', {
+          description:
+            'Keine aktiven Mitglieder mit SEPA-Mandat und Beitragskategorie vorhanden.',
+        });
+      }
+      router.refresh();
+    },
+    onError: () => {
+      toast.error('Fehler beim Hinzufügen', {
+        description: 'Bitte versuchen Sie es erneut.',
+      });
+    },
+  });
+
+  // ── Add single item ──
+  const [addOpen, setAddOpen] = useState(false);
+  const [singleItem, setSingleItem] = useState({
+    debtorName: '',
+    debtorIban: '',
+    amount: '',
+    remittanceInfo: 'Mitgliedsbeitrag',
+  });
+
+  const addItemAction = useAction(addSepaItem, {
+    onSuccess: () => {
+      toast.success('Position hinzugefügt');
+      setAddOpen(false);
+      setSingleItem({
+        debtorName: '',
+        debtorIban: '',
+        amount: '',
+        remittanceInfo: 'Mitgliedsbeitrag',
+      });
+      router.refresh();
+    },
+    onError: () => {
+      toast.error('Fehler beim Hinzufügen der Position');
+    },
+  });
+
+  // ── Generate XML ──
+  const [xmlOpen, setXmlOpen] = useState(false);
+  const [creditor, setCreditor] = useState({
+    creditorName: '',
+    creditorIban: '',
+    creditorBic: '',
+    creditorId: '',
+  });
+
+  const xmlAction = useAction(generateSepaXml, {
+    onSuccess: ({ data }) => {
+      if (data?.data?.content) {
+        // Trigger download
+        const blob = new Blob([data.data.content], {
+          type: 'application/xml',
+        });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = data.data.filename;
+        a.click();
+        URL.revokeObjectURL(url);
+        toast.success('SEPA-XML heruntergeladen');
+        setXmlOpen(false);
+      }
+    },
+    onError: () => {
+      toast.error('Fehler beim Generieren der XML-Datei');
+    },
+  });
+
+  return (
+    <div className="flex flex-wrap gap-3">
+      {/* Populate from members — main CTA for draft batches */}
+      {isDraft && (
+        <Button
+          onClick={() => populateAction.execute({ batchId, accountId })}
+          disabled={populateAction.isPending}
+        >
+          {populateAction.isPending ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <UserPlus className="mr-2 h-4 w-4" />
+          )}
+          Mitglieder hinzufügen
+        </Button>
+      )}
+
+      {/* Add single position manually */}
+      {isDraft && (
+        <Dialog open={addOpen} onOpenChange={setAddOpen}>
+          <DialogTrigger asChild>
+            <Button variant="outline">
+              <Plus className="mr-2 h-4 w-4" />
+              Einzelposition
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Position manuell hinzufügen</DialogTitle>
+              <DialogDescription>
+                Geben Sie die Daten des Zahlungspflichtigen ein.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid gap-2">
+                <Label htmlFor="debtor-name">Name *</Label>
+                <Input
+                  id="debtor-name"
+                  placeholder="z.B. Max Mustermann"
+                  value={singleItem.debtorName}
+                  onChange={(e) =>
+                    setSingleItem((s) => ({
+                      ...s,
+                      debtorName: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="debtor-iban">IBAN *</Label>
+                <Input
+                  id="debtor-iban"
+                  placeholder="DE89 3704 0044 0532 0130 00"
+                  value={singleItem.debtorIban}
+                  onChange={(e) =>
+                    setSingleItem((s) => ({
+                      ...s,
+                      debtorIban: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="debtor-amount">Betrag (EUR) *</Label>
+                <Input
+                  id="debtor-amount"
+                  type="number"
+                  step="0.01"
+                  min="0.01"
+                  placeholder="50.00"
+                  value={singleItem.amount}
+                  onChange={(e) =>
+                    setSingleItem((s) => ({
+                      ...s,
+                      amount: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="debtor-info">Verwendungszweck</Label>
+                <Input
+                  id="debtor-info"
+                  placeholder="Mitgliedsbeitrag 2026"
+                  value={singleItem.remittanceInfo}
+                  onChange={(e) =>
+                    setSingleItem((s) => ({
+                      ...s,
+                      remittanceInfo: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setAddOpen(false)}>
+                Abbrechen
+              </Button>
+              <Button
+                onClick={() =>
+                  addItemAction.execute({
+                    batchId,
+                    debtorName: singleItem.debtorName,
+                    debtorIban: singleItem.debtorIban.replace(/\s/g, ''),
+                    amount: parseFloat(singleItem.amount) || 0,
+                    remittanceInfo: singleItem.remittanceInfo || undefined,
+                  })
+                }
+                disabled={
+                  addItemAction.isPending ||
+                  !singleItem.debtorName ||
+                  !singleItem.debtorIban ||
+                  !singleItem.amount
+                }
+              >
+                {addItemAction.isPending && (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                )}
+                Hinzufügen
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+
+      {/* Generate & download XML */}
+      <Dialog open={xmlOpen} onOpenChange={setXmlOpen}>
+        <DialogTrigger asChild>
+          <Button
+            variant="outline"
+            disabled={itemCount === 0}
+            title={
+              itemCount === 0
+                ? 'Fügen Sie zuerst Positionen hinzu'
+                : undefined
+            }
+          >
+            <Download className="mr-2 h-4 w-4" />
+            XML herunterladen
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>SEPA-XML generieren</DialogTitle>
+            <DialogDescription>
+              Geben Sie die Gläubiger-Daten Ihres Vereins ein. Diese werden im
+              SEPA-XML als Zahlungsempfänger verwendet.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="creditor-name">Gläubiger-Name (Verein) *</Label>
+              <Input
+                id="creditor-name"
+                placeholder="z.B. Sportverein Musterstadt e.V."
+                value={creditor.creditorName}
+                onChange={(e) =>
+                  setCreditor((s) => ({ ...s, creditorName: e.target.value }))
+                }
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="creditor-iban">Gläubiger-IBAN *</Label>
+              <Input
+                id="creditor-iban"
+                placeholder="DE89 3704 0044 0532 0130 00"
+                value={creditor.creditorIban}
+                onChange={(e) =>
+                  setCreditor((s) => ({ ...s, creditorIban: e.target.value }))
+                }
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="creditor-bic">Gläubiger-BIC *</Label>
+              <Input
+                id="creditor-bic"
+                placeholder="z.B. COBADEFFXXX"
+                value={creditor.creditorBic}
+                onChange={(e) =>
+                  setCreditor((s) => ({ ...s, creditorBic: e.target.value }))
+                }
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="creditor-id">Gläubiger-ID *</Label>
+              <Input
+                id="creditor-id"
+                placeholder="z.B. DE98ZZZ09999999999"
+                value={creditor.creditorId}
+                onChange={(e) =>
+                  setCreditor((s) => ({ ...s, creditorId: e.target.value }))
+                }
+              />
+              <p className="text-muted-foreground text-xs">
+                Die Gläubiger-Identifikationsnummer erhalten Sie bei der
+                Deutschen Bundesbank.
+              </p>
+            </div>
+          </div>
+          {itemCount === 0 && (
+            <div className="flex items-center gap-2 rounded-md bg-amber-50 p-3 text-sm text-amber-800">
+              <AlertTriangle className="h-4 w-4 shrink-0" />
+              <span>
+                Keine Positionen vorhanden. Bitte fügen Sie zuerst Mitglieder
+                hinzu.
+              </span>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setXmlOpen(false)}>
+              Abbrechen
+            </Button>
+            <Button
+              onClick={() =>
+                xmlAction.execute({
+                  batchId,
+                  accountId,
+                  creditorName: creditor.creditorName,
+                  creditorIban: creditor.creditorIban.replace(/\s/g, ''),
+                  creditorBic: creditor.creditorBic,
+                  creditorId: creditor.creditorId,
+                })
+              }
+              disabled={
+                xmlAction.isPending ||
+                itemCount === 0 ||
+                !creditor.creditorName ||
+                !creditor.creditorIban ||
+                !creditor.creditorBic ||
+                !creditor.creditorId
+              }
+            >
+              {xmlAction.isPending && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              XML generieren & herunterladen
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}