Finalize metrics verification and backlog updates

components/analytics/analytics-dashboard.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useQuery } from "convex/react";
-import { Activity, BarChart3, Filter, MousePointerClick } from "lucide-react";
+import { Activity, Filter, MousePointerClick } from "lucide-react";
 
 import { api } from "@/convex/_generated/api";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -30,6 +30,12 @@ const metricLabels: Record<string, string> = {
 
 export function AnalyticsDashboard() {
   const dashboard = useQuery(api.campaignMetrics.getDashboard, { limit: 20 });
+  const [rybbitData, setRybbitData] = useState<{
+    auditOpens: number;
+    ctaClicks: number;
+    outboundClicks: number;
+  } | null>(null);
+  const [rybbitError, setRybbitError] = useState<string | null>(null);
   const metricEntries = useMemo(() => {
     if (!dashboard) {
       return [];
@@ -38,6 +44,31 @@ export function AnalyticsDashboard() {
     return Object.entries(dashboard.metrics).filter(([key]) => key in metricLabels);
   }, [dashboard]);
 
+  useEffect(() => {
+    let isMounted = true;
+
+    fetch("/api/internal/rybbit/campaign")
+      .then(async (response) => {
+        const payload = await response.json();
+        if (!isMounted) {
+          return;
+        }
+        if (!payload.ok) {
+          setRybbitError("Rybbit-Daten konnten nicht geladen werden.");
+        }
+        setRybbitData(payload.data ?? null);
+      })
+      .catch(() => {
+        if (isMounted) {
+          setRybbitError("Rybbit-Daten konnten nicht geladen werden.");
+        }
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
   if (dashboard === undefined) {
     return (
       <section className="space-y-4">
@@ -130,6 +161,10 @@ export function AnalyticsDashboard() {
           </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>
             <p>Public-Audit Tracking läuft nur auf veröffentlichten Audit-Seiten.</p>
           </CardContent>
         </Card>