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]/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">