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

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