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

packages/features/member-management/src/components/members-data-table.tsx

@@ -4,16 +4,20 @@ import { useCallback } from 'react';
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
-import { useAction } from 'next-safe-action/hooks';
+import { Download } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 
 import { formatDate } from '@kit/shared/dates';
 import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { Input } from '@kit/ui/input';
-import { toast } from '@kit/ui/sonner';
+import { useFileDownloadAction } from '@kit/ui/use-file-download-action';
 
 import { STATUS_LABELS, getMemberStatusColor } from '../lib/member-utils';
+import {
+  exportMembers,
+  exportMembersExcel,
+} from '../server/actions/member-actions';
 
 interface MembersDataTableProps {
   data: Array<Record<string, unknown>>;
@@ -21,6 +25,7 @@ interface MembersDataTableProps {
   page: number;
   pageSize: number;
   account: string;
+  accountId: string;
   duesCategories: Array<{ id: string; name: string }>;
 }
 
@@ -38,6 +43,7 @@ export function MembersDataTable({
   page,
   pageSize,
   account,
+  accountId,
   duesCategories,
 }: MembersDataTableProps) {
   const router = useRouter();
@@ -102,6 +108,20 @@ export function MembersDataTable({
     [router, account],
   );
 
+  const { execute: execCsvExport, isPending: isCsvExporting } =
+    useFileDownloadAction(exportMembers, {
+      successMessage: 'CSV-Export heruntergeladen',
+      errorMessage: 'CSV-Export fehlgeschlagen',
+    });
+
+  const { execute: execExcelExport, isPending: isExcelExporting } =
+    useFileDownloadAction(exportMembersExcel, {
+      successMessage: 'Excel-Export heruntergeladen',
+      errorMessage: 'Excel-Export fehlgeschlagen',
+    });
+
+  const isExporting = isCsvExporting || isExcelExporting;
+
   return (
     <div className="space-y-4">
       {/* Toolbar */}
@@ -137,6 +157,34 @@ export function MembersDataTable({
             ))}
           </select>
 
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={isExporting}
+            onClick={() =>
+              execCsvExport({
+                accountId,
+                status: currentStatus || undefined,
+              })
+            }
+          >
+            <Download className="mr-1 h-4 w-4" />
+            CSV
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={isExporting}
+            onClick={() =>
+              execExcelExport({
+                accountId,
+                status: currentStatus || undefined,
+              })
+            }
+          >
+            <Download className="mr-1 h-4 w-4" />
+            Excel
+          </Button>
           <Button
             size="sm"
             data-test="members-new-btn"