Initial state for GitNexus analysis

apps/web/app/[locale]/home/[account]/newsletter/[campaignId]/page.tsx

@@ -0,0 +1,196 @@
+import Link from 'next/link';
+
+import { ArrowLeft, Send, Users } from 'lucide-react';
+
+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 { createNewsletterApi } from '@kit/newsletter/api';
+
+import { CmsPageShell } from '~/components/cms-page-shell';
+import { StatsCard } from '~/components/stats-card';
+
+interface PageProps {
+  params: Promise<{ account: string; campaignId: string }>;
+}
+
+const STATUS_VARIANT: Record<
+  string,
+  'secondary' | 'default' | 'info' | 'outline' | 'destructive'
+> = {
+  draft: 'secondary',
+  scheduled: 'default',
+  sending: 'info',
+  sent: 'outline',
+  failed: 'destructive',
+};
+
+const STATUS_LABEL: Record<string, string> = {
+  draft: 'Entwurf',
+  scheduled: 'Geplant',
+  sending: 'Wird gesendet',
+  sent: 'Gesendet',
+  failed: 'Fehlgeschlagen',
+};
+
+const RECIPIENT_STATUS_VARIANT: Record<
+  string,
+  'secondary' | 'default' | 'info' | 'outline' | 'destructive'
+> = {
+  pending: 'secondary',
+  sent: 'default',
+  failed: 'destructive',
+  bounced: 'destructive',
+};
+
+const RECIPIENT_STATUS_LABEL: Record<string, string> = {
+  pending: 'Ausstehend',
+  sent: 'Gesendet',
+  failed: 'Fehlgeschlagen',
+  bounced: 'Zurückgewiesen',
+};
+
+export default async function NewsletterDetailPage({ params }: PageProps) {
+  const { account, campaignId } = await params;
+  const client = getSupabaseServerClient();
+
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
+
+  if (!acct) return <div>Konto nicht gefunden</div>;
+
+  const api = createNewsletterApi(client);
+
+  const [newsletter, recipients] = await Promise.all([
+    api.getNewsletter(campaignId),
+    api.getRecipients(campaignId),
+  ]);
+
+  if (!newsletter) return <div>Newsletter nicht gefunden</div>;
+
+  const status = String(newsletter.status);
+  const sentCount = recipients.filter(
+    (r: Record<string, unknown>) => r.status === 'sent',
+  ).length;
+  const failedCount = recipients.filter(
+    (r: Record<string, unknown>) =>
+      r.status === 'failed' || r.status === 'bounced',
+  ).length;
+
+  return (
+    <CmsPageShell account={account} title="Newsletter Details">
+      <div className="flex w-full flex-col gap-6">
+        {/* Back link */}
+        <div>
+          <Link
+            href={`/home/${account}/newsletter`}
+            className="text-muted-foreground hover:text-foreground inline-flex items-center text-sm"
+          >
+            <ArrowLeft className="mr-1 h-4 w-4" />
+            Zurück zu Newsletter
+          </Link>
+        </div>
+
+        {/* Summary Card */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle>
+              {String(newsletter.subject ?? '(Kein Betreff)')}
+            </CardTitle>
+            <Badge variant={STATUS_VARIANT[status] ?? 'secondary'}>
+              {STATUS_LABEL[status] ?? status}
+            </Badge>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+              <StatsCard
+                title="Empfänger"
+                value={recipients.length}
+                icon={<Users className="h-5 w-5" />}
+              />
+              <StatsCard
+                title="Gesendet"
+                value={sentCount}
+                icon={<Send className="h-5 w-5" />}
+              />
+              <StatsCard
+                title="Fehlgeschlagen"
+                value={failedCount}
+                icon={<Send className="h-5 w-5" />}
+              />
+            </div>
+
+            {/* Actions */}
+            {status === 'draft' && (
+              <div className="mt-6">
+                <Button>
+                  <Send className="mr-2 h-4 w-4" />
+                  Newsletter versenden
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Recipients Table */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Empfänger ({recipients.length})</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {recipients.length === 0 ? (
+              <p className="py-8 text-center text-sm text-muted-foreground">
+                Keine Empfänger hinzugefügt. Fügen Sie Empfänger aus Ihrer
+                Mitgliederliste hinzu.
+              </p>
+            ) : (
+              <div className="rounded-md border">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b bg-muted/50">
+                      <th className="p-3 text-left font-medium">Name</th>
+                      <th className="p-3 text-left font-medium">E-Mail</th>
+                      <th className="p-3 text-left font-medium">Status</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {recipients.map((recipient: Record<string, unknown>) => {
+                      const rStatus = String(recipient.status ?? 'pending');
+                      return (
+                        <tr
+                          key={String(recipient.id)}
+                          className="border-b hover:bg-muted/30"
+                        >
+                          <td className="p-3 font-medium">
+                            {String(recipient.name ?? '—')}
+                          </td>
+                          <td className="p-3">
+                            {String(recipient.email ?? '—')}
+                          </td>
+                          <td className="p-3">
+                            <Badge
+                              variant={
+                                RECIPIENT_STATUS_VARIANT[rStatus] ?? 'secondary'
+                              }
+                            >
+                              {RECIPIENT_STATUS_LABEL[rStatus] ?? rStatus}
+                            </Badge>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </CmsPageShell>
+  );
+}

apps/web/app/[locale]/home/[account]/newsletter/new/page.tsx

@@ -0,0 +1,125 @@
+import Link from 'next/link';
+
+import { ArrowLeft } from 'lucide-react';
+
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { Button } from '@kit/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
+import { Input } from '@kit/ui/input';
+import { Label } from '@kit/ui/label';
+import { Textarea } from '@kit/ui/textarea';
+
+import { CmsPageShell } from '~/components/cms-page-shell';
+
+interface PageProps {
+  params: Promise<{ account: string }>;
+}
+
+export default async function NewNewsletterPage({ params }: PageProps) {
+  const { account } = await params;
+  const client = getSupabaseServerClient();
+
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
+
+  if (!acct) return <div>Konto nicht gefunden</div>;
+
+  return (
+    <CmsPageShell account={account} title="Neuer Newsletter">
+      <div className="flex w-full flex-col gap-6">
+        {/* Back link */}
+        <div>
+          <Link
+            href={`/home/${account}/newsletter`}
+            className="text-muted-foreground hover:text-foreground inline-flex items-center text-sm"
+          >
+            <ArrowLeft className="mr-1 h-4 w-4" />
+            Zurück zu Newsletter
+          </Link>
+        </div>
+
+        <Card className="max-w-2xl">
+          <CardHeader>
+            <CardTitle>Neuer Newsletter</CardTitle>
+            <CardDescription>
+              Erstellen Sie eine neue Newsletter-Kampagne.
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent>
+            <form className="flex flex-col gap-5">
+              {/* Betreff */}
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="subject">Betreff</Label>
+                <Input
+                  id="subject"
+                  name="subject"
+                  placeholder="z.B. Monatliche Vereinsnachrichten März 2026"
+                  required
+                />
+              </div>
+
+              {/* Body HTML */}
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="bodyHtml">Inhalt (HTML)</Label>
+                <Textarea
+                  id="bodyHtml"
+                  name="bodyHtml"
+                  placeholder="<h1>Hallo {{first_name}},</h1>&#10;<p>Neuigkeiten aus dem Verein...</p>"
+                  rows={10}
+                  className="font-mono text-sm"
+                  required
+                />
+                <p className="text-xs text-muted-foreground">
+                  Verwenden Sie {'{{first_name}}'}, {'{{name}}'} und{' '}
+                  {'{{email}}'} als Platzhalter für die Personalisierung.
+                </p>
+              </div>
+
+              {/* Empfänger Info */}
+              <div className="rounded-md bg-muted/50 p-4 text-sm text-muted-foreground">
+                <p>
+                  <strong>Empfänger-Auswahl:</strong> Nach dem Erstellen können
+                  Sie die Empfänger aus Ihrer Mitgliederliste auswählen. Es
+                  werden nur Mitglieder mit hinterlegter E-Mail-Adresse
+                  berücksichtigt.
+                </p>
+              </div>
+
+              {/* Vorlage Auswahl */}
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="templateId">
+                  Vorlage (optional)
+                </Label>
+                <select
+                  id="templateId"
+                  name="templateId"
+                  className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+                >
+                  <option value="">Keine Vorlage</option>
+                </select>
+              </div>
+            </form>
+          </CardContent>
+
+          <CardFooter className="flex justify-between">
+            <Link href={`/home/${account}/newsletter`}>
+              <Button variant="outline">Abbrechen</Button>
+            </Link>
+            <Button type="submit">Newsletter erstellen</Button>
+          </CardFooter>
+        </Card>
+      </div>
+    </CmsPageShell>
+  );
+}

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

@@ -0,0 +1,178 @@
+import Link from 'next/link';
+
+import { Mail, Plus, Send, Users } from 'lucide-react';
+
+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 { createNewsletterApi } from '@kit/newsletter/api';
+
+import { CmsPageShell } from '~/components/cms-page-shell';
+import { EmptyState } from '~/components/empty-state';
+import { StatsCard } from '~/components/stats-card';
+
+interface PageProps {
+  params: Promise<{ account: string }>;
+}
+
+const STATUS_BADGE_VARIANT: Record<
+  string,
+  'secondary' | 'default' | 'info' | 'outline' | 'destructive'
+> = {
+  draft: 'secondary',
+  scheduled: 'default',
+  sending: 'info',
+  sent: 'outline',
+  failed: 'destructive',
+};
+
+const STATUS_LABEL: Record<string, string> = {
+  draft: 'Entwurf',
+  scheduled: 'Geplant',
+  sending: 'Wird gesendet',
+  sent: 'Gesendet',
+  failed: 'Fehlgeschlagen',
+};
+
+export default async function NewsletterPage({ params }: PageProps) {
+  const { account } = await params;
+  const client = getSupabaseServerClient();
+
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
+
+  if (!acct) return <div>Konto nicht gefunden</div>;
+
+  const api = createNewsletterApi(client);
+  const newsletters = await api.listNewsletters(acct.id);
+
+  const sentCount = newsletters.filter(
+    (n: Record<string, unknown>) => n.status === 'sent',
+  ).length;
+
+  const totalRecipients = newsletters.reduce(
+    (sum: number, n: Record<string, unknown>) =>
+      sum + (Number(n.total_recipients) || 0),
+    0,
+  );
+
+  return (
+    <CmsPageShell account={account} title="Newsletter">
+      <div className="flex w-full flex-col gap-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold">Newsletter</h1>
+            <p className="text-muted-foreground">
+              Newsletter erstellen und versenden
+            </p>
+          </div>
+
+          <Link href={`/home/${account}/newsletter/new`}>
+            <Button>
+              <Plus className="mr-2 h-4 w-4" />
+              Neuer Newsletter
+            </Button>
+          </Link>
+        </div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          <StatsCard
+            title="Newsletter"
+            value={newsletters.length}
+            icon={<Mail className="h-5 w-5" />}
+          />
+          <StatsCard
+            title="Gesendet"
+            value={sentCount}
+            icon={<Send className="h-5 w-5" />}
+          />
+          <StatsCard
+            title="Empfänger gesamt"
+            value={totalRecipients}
+            icon={<Users className="h-5 w-5" />}
+          />
+        </div>
+
+        {/* Table or Empty State */}
+        {newsletters.length === 0 ? (
+          <EmptyState
+            icon={<Mail className="h-8 w-8" />}
+            title="Keine Newsletter vorhanden"
+            description="Erstellen Sie Ihren ersten Newsletter, um loszulegen."
+            actionLabel="Neuer Newsletter"
+            actionHref={`/home/${account}/newsletter/new`}
+          />
+        ) : (
+          <Card>
+            <CardHeader>
+              <CardTitle>Alle Newsletter ({newsletters.length})</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b bg-muted/50">
+                      <th className="p-3 text-left font-medium">Betreff</th>
+                      <th className="p-3 text-left font-medium">Status</th>
+                      <th className="p-3 text-right font-medium">Empfänger</th>
+                      <th className="p-3 text-left font-medium">Erstellt</th>
+                      <th className="p-3 text-left font-medium">Gesendet</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {newsletters.map((nl: Record<string, unknown>) => (
+                      <tr
+                        key={String(nl.id)}
+                        className="border-b hover:bg-muted/30"
+                      >
+                        <td className="p-3 font-medium">
+                          <Link
+                            href={`/home/${account}/newsletter/${String(nl.id)}`}
+                            className="hover:underline"
+                          >
+                            {String(nl.subject ?? '(Kein Betreff)')}
+                          </Link>
+                        </td>
+                        <td className="p-3">
+                          <Badge
+                            variant={
+                              STATUS_BADGE_VARIANT[String(nl.status)] ?? 'secondary'
+                            }
+                          >
+                            {STATUS_LABEL[String(nl.status)] ?? String(nl.status)}
+                          </Badge>
+                        </td>
+                        <td className="p-3 text-right">
+                          {nl.total_recipients != null
+                            ? String(nl.total_recipients)
+                            : '—'}
+                        </td>
+                        <td className="p-3">
+                          {nl.created_at
+                            ? new Date(String(nl.created_at)).toLocaleDateString('de-DE')
+                            : '—'}
+                        </td>
+                        <td className="p-3">
+                          {nl.sent_at
+                            ? new Date(String(nl.sent_at)).toLocaleDateString('de-DE')
+                            : '—'}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </CmsPageShell>
+  );
+}

apps/web/app/[locale]/home/[account]/newsletter/templates/page.tsx

@@ -0,0 +1,118 @@
+import Link from 'next/link';
+
+import { FileText, Plus } from 'lucide-react';
+
+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 { createNewsletterApi } from '@kit/newsletter/api';
+
+import { CmsPageShell } from '~/components/cms-page-shell';
+import { EmptyState } from '~/components/empty-state';
+
+interface PageProps {
+  params: Promise<{ account: string }>;
+}
+
+export default async function NewsletterTemplatesPage({ params }: PageProps) {
+  const { account } = await params;
+  const client = getSupabaseServerClient();
+
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
+
+  if (!acct) return <div>Konto nicht gefunden</div>;
+
+  const api = createNewsletterApi(client);
+  const templates = await api.listTemplates(acct.id);
+
+  return (
+    <CmsPageShell account={account} title="Newsletter-Vorlagen">
+      <div className="flex w-full flex-col gap-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold">Newsletter-Vorlagen</h1>
+            <p className="text-muted-foreground">
+              Wiederverwendbare Vorlagen für Newsletter
+            </p>
+          </div>
+
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            Neue Vorlage
+          </Button>
+        </div>
+
+        {/* Table or Empty State */}
+        {templates.length === 0 ? (
+          <EmptyState
+            icon={<FileText className="h-8 w-8" />}
+            title="Keine Vorlagen vorhanden"
+            description="Erstellen Sie Ihre erste Newsletter-Vorlage, um sie in Kampagnen wiederzuverwenden."
+            actionLabel="Neue Vorlage"
+          />
+        ) : (
+          <Card>
+            <CardHeader>
+              <CardTitle>Alle Vorlagen ({templates.length})</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b bg-muted/50">
+                      <th className="p-3 text-left font-medium">Name</th>
+                      <th className="p-3 text-left font-medium">Betreff</th>
+                      <th className="p-3 text-left font-medium">Variablen</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {templates.map((template: Record<string, unknown>) => {
+                      const variables = Array.isArray(template.variables)
+                        ? (template.variables as string[])
+                        : [];
+                      return (
+                        <tr
+                          key={String(template.id)}
+                          className="border-b hover:bg-muted/30"
+                        >
+                          <td className="p-3 font-medium">
+                            {String(template.name ?? '—')}
+                          </td>
+                          <td className="p-3">
+                            {String(template.subject ?? '—')}
+                          </td>
+                          <td className="p-3">
+                            <div className="flex flex-wrap gap-1">
+                              {variables.length > 0
+                                ? variables.map((v) => (
+                                    <Badge
+                                      key={v}
+                                      variant="secondary"
+                                      className="text-xs"
+                                    >
+                                      {`{{${v}}}`}
+                                    </Badge>
+                                  ))
+                                : <span className="text-muted-foreground">—</span>}
+                            </div>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </CmsPageShell>
+  );
+}