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

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>