Polish dashboard analytics and campaign layouts

app/dashboard/analytics/page.tsx

@@ -1,5 +1,11 @@
 import { AnalyticsDashboard } from "@/components/analytics/analytics-dashboard";
 
 export default function AnalyticsPage() {
-  return <AnalyticsDashboard />;
+  return (
+    <main className="px-4 py-5 sm:px-6 lg:px-8">
+      <div className="mx-auto flex w-full max-w-[100rem] flex-col gap-6">
+        <AnalyticsDashboard />
+      </div>
+    </main>
+  );
 }

app/dashboard/campaigns/page.tsx

@@ -3,7 +3,7 @@ import { CampaignsBoard } from "@/components/campaigns/campaigns-board";
 export default function CampaignsPage() {
   return (
     <main className="px-4 py-5 sm:px-6 lg:px-8">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6">
+      <div className="mx-auto flex w-full max-w-[100rem] flex-col gap-6">
         <CampaignsBoard />
       </div>
     </main>

app/globals.css

@@ -224,7 +224,8 @@
   }
 
   .campaign-ledger {
-    overflow-x: auto;
+    max-width: 100%;
+    overflow: hidden;
     border: 1px solid color-mix(in oklch, var(--border), transparent 8%);
     border-radius: var(--radius);
     background:
@@ -237,20 +238,21 @@
   .campaign-ledger-row {
     display: grid;
     grid-template-columns:
-      minmax(10rem, 1.15fr)
-      minmax(6.5rem, 0.75fr)
-      minmax(7rem, 0.7fr)
-      minmax(6rem, 0.55fr)
-      minmax(7rem, 0.62fr)
-      minmax(8rem, 0.85fr)
-      minmax(6rem, 0.55fr)
-      minmax(7rem, 0.65fr);
-    gap: 0.75rem;
+      minmax(7.25rem, 1.08fr)
+      minmax(5.25rem, 0.62fr)
+      minmax(5.75rem, 0.66fr)
+      minmax(5rem, 0.5fr)
+      minmax(5.5rem, 0.56fr)
+      minmax(8.5rem, 0.9fr)
+      minmax(4.75rem, 0.46fr)
+      minmax(4.25rem, 0.36fr);
+    gap: 0.5rem;
     align-items: center;
-    min-width: 58rem;
+    width: 100%;
+    min-width: 0;
     min-height: 4.75rem;
     border-top: 1px solid color-mix(in oklch, var(--border), transparent 25%);
-    padding: 0.85rem 1rem;
+    padding: 0.8rem 0.625rem;
   }
 
   .campaign-ledger-row:first-child {

components/analytics/analytics-dashboard.tsx

@@ -2,11 +2,23 @@
 
 import { useEffect, useMemo, useState } from "react";
 import { useQuery } from "convex/react";
-import { Activity, Filter, MousePointerClick } from "lucide-react";
+import {
+  Activity,
+  BarChart3,
+  CheckCircle2,
+  Filter,
+  MailCheck,
+  MousePointerClick,
+  SearchCheck,
+  ShieldCheck,
+  TrendingUp,
+  type LucideIcon,
+} from "lucide-react";
 
 import { api } from "@/convex/_generated/api";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
 
 const metricLabels: Record<string, string> = {
   foundLeads: "Gefundene Leads",
@@ -28,6 +40,66 @@ const metricLabels: Record<string, string> = {
   rybbitCtaClicks: "CTA-Klicks",
 };
 
+type MetricKey = keyof typeof metricLabels;
+
+const heroMetrics: Array<{
+  key: MetricKey;
+  note: string;
+  icon: LucideIcon;
+  surface: string;
+}> = [
+  {
+    key: "approvalsOpen",
+    note: "Wartet auf manuelle Prüfung",
+    icon: ShieldCheck,
+    surface: "review-surface",
+  },
+  {
+    key: "auditsCreated",
+    note: "Belege im System",
+    icon: SearchCheck,
+    surface: "evidence-surface",
+  },
+  {
+    key: "foundLeads",
+    note: "Aus Kampagnenläufen",
+    icon: BarChart3,
+    surface: "safe-surface",
+  },
+  {
+    key: "leadsWithContact",
+    note: "E-Mail oder Telefon vorhanden",
+    icon: CheckCircle2,
+    surface: "bg-muted text-muted-foreground",
+  },
+];
+
+const metricGroups: Array<{
+  title: string;
+  description: string;
+  icon: LucideIcon;
+  keys: MetricKey[];
+}> = [
+  {
+    title: "Kontaktlage",
+    description: "Lead-Qualität und fehlende Kontaktwege.",
+    icon: SearchCheck,
+    keys: ["missingContact", "skippedBlacklisted", "skippedDuplicates"],
+  },
+  {
+    title: "Outreach",
+    description: "Freigaben, Versand und geplante nächste Schritte.",
+    icon: MailCheck,
+    keys: ["emailsSent", "followUpsPlanned", "followUpsSent"],
+  },
+  {
+    title: "Pipeline",
+    description: "Antworten, Gespräche, Angebote und Abschlüsse.",
+    icon: TrendingUp,
+    keys: ["responses", "conversations", "offers", "wins", "losses"],
+  },
+];
+
 export function AnalyticsDashboard() {
   const dashboard = useQuery(api.campaignMetrics.getDashboard, { limit: 20 });
   const [rybbitData, setRybbitData] = useState<{
@@ -41,13 +113,6 @@ export function AnalyticsDashboard() {
     }>;
   } | null>(null);
   const [rybbitError, setRybbitError] = useState<string | null>(null);
-  const metricEntries = useMemo(() => {
-    if (!dashboard) {
-      return [];
-    }
-
-    return Object.entries(dashboard.metrics).filter(([key]) => key in metricLabels);
-  }, [dashboard]);
   const rybbitGroups = useMemo(() => {
     if (!dashboard || !rybbitData?.byPath) {
       return [];
@@ -108,56 +173,160 @@ export function AnalyticsDashboard() {
   if (dashboard === undefined) {
     return (
       <section className="space-y-4">
-        <Skeleton className="h-24 rounded-lg" />
-        <Skeleton className="h-64 rounded-lg" />
+        <Skeleton className="h-32 rounded-lg" />
+        <Skeleton className="h-80 rounded-lg" />
       </section>
     );
   }
 
+  const metricValue = (key: MetricKey) => dashboard.metrics[key] ?? 0;
+
   return (
     <section className="space-y-4">
-      <header className="border-b pb-3">
-        <p className="text-sm text-muted-foreground">Kampagnen-Reporting</p>
-        <h1 className="mt-2 text-3xl font-semibold tracking-normal">Analytics</h1>
+      <header className="agency-panel flex flex-col gap-3 p-4 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <p className="agency-kicker">Kampagnen-Reporting</p>
+          <h1 className="mt-2 font-heading text-3xl font-semibold tracking-normal">
+            Analytics
+          </h1>
+          <p className="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
+            Funnel-Signale, Freigaben und Tracking bleiben zusammen sichtbar,
+            ohne die operative Prüfung aus dem Blick zu verlieren.
+          </p>
+        </div>
+        <div className="rounded-md border border-border/75 bg-background/65 px-3 py-2 text-sm">
+          <p className="font-semibold">{dashboard.filters.campaigns.length} Kampagnen</p>
+          <p className="text-xs text-muted-foreground">
+            {dashboard.filters.niches.length} Nischen · {dashboard.filters.postalCodes.length} PLZ
+          </p>
+        </div>
       </header>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="inline-flex items-center gap-2">
-            <Filter className="size-5" />
-            Filter
-          </CardTitle>
-          <CardDescription>
-            Kampagne, Nische, PLZ, Radius, Priorität, Status und Zeitraum.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="grid gap-2 text-sm text-muted-foreground sm:grid-cols-2 lg:grid-cols-4">
-          <p>Kampagne: {dashboard.filters.campaigns.length}</p>
-          <p>Nische: {dashboard.filters.niches.length}</p>
-          <p>PLZ: {dashboard.filters.postalCodes.length}</p>
-          <p>Radius: Kampagnenradius</p>
-          <p>Priorität: Hoch/Mittel/Niedrig</p>
-          <p>Status: Funnel-Status</p>
-          <p>Zeitraum: Erstellungsdatum</p>
-        </CardContent>
-      </Card>
-
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-        {metricEntries.map(([key, value]) => (
-          <Card key={key}>
-            <CardContent className="p-4">
-              <p className="text-sm text-muted-foreground">{metricLabels[key]}</p>
-              <p className="mt-2 text-2xl font-semibold">{value}</p>
-            </CardContent>
-          </Card>
-        ))}
+      <div className="agency-panel p-4">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <p className="inline-flex items-center gap-2 text-sm font-semibold">
+              <Filter className="size-4 text-primary" />
+              Filter
+            </p>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Kampagne, Nische, PLZ, Radius, Priorität, Status und Zeitraum.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2 text-xs font-semibold text-muted-foreground">
+            <span className="rounded-md bg-muted/65 px-2.5 py-1">
+              Radius: Kampagnenradius
+            </span>
+            <span className="rounded-md bg-muted/65 px-2.5 py-1">
+              Priorität: Hoch/Mittel/Niedrig
+            </span>
+            <span className="rounded-md bg-muted/65 px-2.5 py-1">
+              Status: Funnel-Status
+            </span>
+            <span className="rounded-md bg-muted/65 px-2.5 py-1">
+              Zeitraum: Erstellungsdatum
+            </span>
+          </div>
+        </div>
       </div>
 
-      <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(20rem,0.7fr)]">
-        <Card>
+      <section className="agency-panel p-4" aria-labelledby="analytics-kpi-heading">
+        <div className="flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <p className="agency-kicker">Funnel Snapshot</p>
+            <h2
+              className="mt-1 font-heading text-xl font-semibold tracking-normal"
+              id="analytics-kpi-heading"
+            >
+              Operative Kennzahlen
+            </h2>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Live aus Convex, Tracking bei Bedarf aus Rybbit.
+          </p>
+        </div>
+
+        <div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+          {heroMetrics.map((metric) => {
+            const Icon = metric.icon;
+
+            return (
+              <div
+                className="rounded-md border border-border/75 bg-background/65 p-3"
+                key={metric.key}
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <p className="text-sm font-medium text-muted-foreground">
+                      {metricLabels[metric.key]}
+                    </p>
+                    <p className="mt-2 text-3xl font-semibold">
+                      {metricValue(metric.key)}
+                    </p>
+                  </div>
+                  <span
+                    className={cn(
+                      "flex size-9 shrink-0 items-center justify-center rounded-md",
+                      metric.surface,
+                    )}
+                  >
+                    <Icon className="size-4" />
+                  </span>
+                </div>
+                <p className="mt-2 text-xs text-muted-foreground">{metric.note}</p>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="mt-3 grid gap-3 xl:grid-cols-3">
+          {metricGroups.map((group) => {
+            const Icon = group.icon;
+
+            return (
+              <section
+                className="rounded-md border border-border/75 bg-card/45 p-3"
+                key={group.title}
+                aria-labelledby={`${group.title}-analytics-heading`}
+              >
+                <div className="flex items-start gap-3">
+                  <span className="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+                    <Icon className="size-4" />
+                  </span>
+                  <div>
+                    <h3
+                      className="text-sm font-semibold"
+                      id={`${group.title}-analytics-heading`}
+                    >
+                      {group.title}
+                    </h3>
+                    <p className="mt-1 text-xs leading-5 text-muted-foreground">
+                      {group.description}
+                    </p>
+                  </div>
+                </div>
+                <div className="mt-3 grid gap-2">
+                  {group.keys.map((key) => (
+                    <div
+                      className="flex items-center justify-between gap-3 rounded-md bg-background/70 px-3 py-2 text-sm"
+                      key={key}
+                    >
+                      <span className="text-muted-foreground">{metricLabels[key]}</span>
+                      <span className="font-semibold">{metricValue(key)}</span>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            );
+          })}
+        </div>
+      </section>
+
+      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(20rem,0.72fr)]">
+        <Card className="agency-panel">
           <CardHeader>
             <CardTitle className="inline-flex items-center gap-2">
-              <Activity className="size-5" />
+              <Activity className="size-5 text-primary" />
               Run-Details
             </CardTitle>
             <CardDescription>
@@ -166,10 +335,12 @@ export function AnalyticsDashboard() {
           </CardHeader>
           <CardContent className="grid gap-2 text-sm">
             {dashboard.runs.length === 0 ? (
-              <p className="text-muted-foreground">Noch keine Kampagnenläufe.</p>
+              <p className="rounded-md border border-dashed border-border/80 bg-background/60 p-4 text-muted-foreground">
+                Noch keine Kampagnenläufe.
+              </p>
             ) : (
               dashboard.runs.map((run) => (
-                <div className="rounded-md border p-3" key={run.id}>
+                <div className="rounded-md border border-border/75 bg-background/65 p-3" key={run.id}>
                   <div className="flex flex-wrap justify-between gap-2">
                     <p className="font-medium">{run.status}</p>
                     <p className="text-muted-foreground">
@@ -185,22 +356,46 @@ export function AnalyticsDashboard() {
           </CardContent>
         </Card>
 
-        <Card>
+        <Card className="agency-panel">
           <CardHeader>
             <CardTitle className="inline-flex items-center gap-2">
-              <MousePointerClick className="size-5" />
+              <MousePointerClick className="size-5 text-primary" />
               Rybbit
             </CardTitle>
             <CardDescription>
               Audit-Öffnungen und CTA-Aktivität werden bei Bedarf aus der Rybbit API geladen.
             </CardDescription>
           </CardHeader>
-          <CardContent className="space-y-2 text-sm text-muted-foreground">
-            <p>Rybbit-Daten konnten nicht geladen werden, wenn API-URL, Site-ID oder API-Key fehlen.</p>
-            {rybbitError ? <p className="text-destructive">{rybbitError}</p> : null}
-            <p>Audit-Öffnungen: {rybbitData?.auditOpens ?? dashboard.metrics.rybbitAuditOpens}</p>
-            <p>CTA-Klicks: {rybbitData?.ctaClicks ?? dashboard.metrics.rybbitCtaClicks}</p>
-            <p>Website-Link-Klicks: {rybbitData?.outboundClicks ?? 0}</p>
+          <CardContent className="space-y-3 text-sm text-muted-foreground">
+            {rybbitError ? (
+              <p className="rounded-md bg-[var(--danger-soft)] p-3 text-destructive">
+                {rybbitError}
+              </p>
+            ) : (
+              <p className="rounded-md bg-muted/55 p-3">
+                Rybbit-Daten konnten nicht geladen werden, wenn API-URL, Site-ID oder API-Key fehlen.
+              </p>
+            )}
+            <div className="grid gap-2 sm:grid-cols-3 lg:grid-cols-1 2xl:grid-cols-3">
+              <div className="rounded-md bg-background/70 p-3">
+                <p className="text-xs">Audit-Öffnungen</p>
+                <p className="mt-1 text-xl font-semibold text-foreground">
+                  {rybbitData?.auditOpens ?? dashboard.metrics.rybbitAuditOpens}
+                </p>
+              </div>
+              <div className="rounded-md bg-background/70 p-3">
+                <p className="text-xs">CTA-Klicks</p>
+                <p className="mt-1 text-xl font-semibold text-foreground">
+                  {rybbitData?.ctaClicks ?? dashboard.metrics.rybbitCtaClicks}
+                </p>
+              </div>
+              <div className="rounded-md bg-background/70 p-3">
+                <p className="text-xs">Website-Link-Klicks</p>
+                <p className="mt-1 text-xl font-semibold text-foreground">
+                  {rybbitData?.outboundClicks ?? 0}
+                </p>
+              </div>
+            </div>
             {rybbitGroups.length > 0 ? (
               <div className="space-y-1 pt-2">
                 {rybbitGroups.map((group) => (
@@ -210,7 +405,9 @@ export function AnalyticsDashboard() {
                 ))}
               </div>
             ) : null}
-            <p>Public-Audit Tracking läuft nur auf veröffentlichten Audit-Seiten.</p>
+            <p className="text-xs">
+              Public-Audit Tracking läuft nur auf veröffentlichten Audit-Seiten.
+            </p>
           </CardContent>
         </Card>
       </div>

components/campaigns/campaigns-board.tsx

@@ -333,7 +333,7 @@ export function CampaignsBoard() {
       {rowError ? <p className="text-sm text-destructive" role="alert">{rowError}</p> : null}
       {actionLabel ? <p className="text-sm" role="status">{actionLabel}</p> : null}
 
-      <div className="grid gap-4 2xl:grid-cols-[minmax(0,1fr)_21rem]">
+      <div className="grid gap-4 2xl:grid-cols-[minmax(0,1fr)_20rem]">
         <div className="min-w-0">
           {campaignsSorted.length === 0 ? (
             <Card className="agency-panel">
@@ -438,6 +438,7 @@ export function CampaignsBoard() {
                               onClick={() => openEditDialog(campaign)}
                               disabled={isBusy}
                               aria-label={`${campaign.name} bearbeiten`}
+                              title={`${campaign.name} bearbeiten`}
                             >
                               <Pencil className="size-3.5" />
                             </Button>
@@ -445,10 +446,11 @@ export function CampaignsBoard() {
                               variant="outline"
                               onClick={() => runCampaign(campaign)}
                               disabled={isBusy}
-                              size="sm"
+                              size="icon-sm"
+                              aria-label={`${campaign.name} Suchlauf starten`}
+                              title={`${campaign.name} Suchlauf starten`}
                             >
                               <Play className="size-3.5" />
-                              Suchlauf starten
                             </Button>
                           </div>
                         </div>

components/dashboard-sidebar.tsx

@@ -20,7 +20,7 @@ export function DashboardSidebar() {
   const { data: session, isPending } = authClient.useSession();
 
   return (
-    <aside className="flex w-full shrink-0 flex-col border-b border-sidebar-border bg-sidebar text-sidebar-foreground md:sticky md:top-0 md:min-h-dvh md:w-[19rem] md:border-b-0 md:border-r">
+    <aside className="flex w-full shrink-0 flex-col border-b border-sidebar-border bg-sidebar text-sidebar-foreground md:sticky md:top-0 md:h-dvh md:w-[19rem] md:self-start md:overflow-y-auto md:border-b-0 md:border-r">
       <div className="flex h-[5.25rem] items-center gap-3 border-b border-sidebar-border px-4">
         <div className="flex size-11 items-center justify-center rounded-md bg-sidebar-primary font-heading text-sm font-black text-sidebar-primary-foreground shadow-[inset_0_1px_0_color-mix(in_oklch,var(--sidebar-primary-foreground),transparent_75%)]">
           PF

components/dashboard-theme.tsx

@@ -73,7 +73,7 @@ export function DashboardThemeProvider({ children }: { children: ReactNode }) {
       <div
         suppressHydrationWarning
         className={cn(
-          "dashboard-canvas min-h-dvh text-foreground md:flex",
+          "dashboard-canvas min-h-dvh text-foreground md:flex md:items-start",
           theme === "dark" && "dark",
         )}
       >

tests/campaigns-board-layout.test.ts

@@ -22,7 +22,7 @@ test("campaign board renders campaigns as a desktop ledger with mobile records",
   assert.doesNotMatch(source, /<th\b/i);
 
   assert.doesNotMatch(source, /className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3"/);
-  assert.match(source, /2xl:grid-cols-\[minmax\(0,1fr\)_21rem\]/);
+  assert.match(source, /2xl:grid-cols-\[minmax\(0,1fr\)_20rem\]/);
   assert.match(source, /campaign-ledger hidden 2xl:block/);
   assert.match(source, /campaign-mobile-records grid gap-3 2xl:hidden/);
   assert.match(source, /role="table"/);
@@ -36,6 +36,7 @@ test("campaign board renders campaigns as a desktop ledger with mobile records",
   assert.match(source, /toggleCampaign\(campaign\)/);
   assert.match(source, /runCampaign\(campaign\)/);
   assert.match(source, /Suchlauf starten/);
+  assert.match(source, /aria-label=\{`\$\{campaign\.name\} Suchlauf starten`\}/);
   assert.match(source, /Lead-Limit/);
   assert.match(source, /Audit-Limit/);
   assert.match(source, /Letzter Lauf/);
@@ -57,10 +58,11 @@ test("campaign board surfaces recent run logs", async () => {
   assert.match(source, /campaign_cron_skipped/);
 });
 
-test("campaign ledger avoids clipping actions at desktop breakpoints", async () => {
+test("campaign ledger fits desktop breakpoints without horizontal scroll", async () => {
   const styles = await readFile(globalsPath, "utf8");
 
-  assert.match(styles, /\.campaign-ledger\s*{[\s\S]*overflow-x:\s*auto;/);
-  assert.doesNotMatch(styles, /\.campaign-ledger\s*{[\s\S]*overflow:\s*hidden;/);
-  assert.match(styles, /\.campaign-ledger-row\s*{[\s\S]*min-width:\s*58rem;/);
+  assert.match(styles, /\.campaign-ledger\s*{[\s\S]*overflow:\s*hidden;/);
+  assert.doesNotMatch(styles, /\.campaign-ledger\s*{[\s\S]*overflow-x:\s*auto;/);
+  assert.match(styles, /\.campaign-ledger-row\s*{[\s\S]*width:\s*100%;/);
+  assert.match(styles, /\.campaign-ledger-row\s*{[\s\S]*min-width:\s*0;/);
 });

tests/dashboard-sidebar-branding.test.ts

@@ -11,6 +11,7 @@ const sidebarPath = join(
 const authEntryPath = join(process.cwd(), "components", "auth-entry.tsx");
 const layoutPath = join(process.cwd(), "app", "layout.tsx");
 const globalsPath = join(process.cwd(), "app", "globals.css");
+const themePath = join(process.cwd(), "components", "dashboard-theme.tsx");
 
 test("dashboard sidebar uses PitchFast SaaS branding", async () => {
   const source = await readFile(sidebarPath, "utf8");
@@ -31,6 +32,17 @@ test("light theme sidebar remains a light operational rail", async () => {
   assert.match(darkBlock, /--sidebar:\s*oklch\(0\.13/);
 });
 
+test("desktop dashboard shell keeps sidebar height independent from content", async () => {
+  const sidebar = await readFile(sidebarPath, "utf8");
+  const theme = await readFile(themePath, "utf8");
+
+  assert.match(theme, /md:items-start/);
+  assert.match(sidebar, /md:h-dvh/);
+  assert.match(sidebar, /md:self-start/);
+  assert.match(sidebar, /md:overflow-y-auto/);
+  assert.doesNotMatch(sidebar, /md:min-h-dvh/);
+});
+
 test("public entry branding also uses PitchFast", async () => {
   const authEntry = await readFile(authEntryPath, "utf8");
   const layout = await readFile(layoutPath, "utf8");