Add audit analytics and campaign metrics

components/analytics/analytics-dashboard.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useMemo } from "react";
+import { useQuery } from "convex/react";
+import { Activity, BarChart3, Filter, MousePointerClick } 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";
+
+const metricLabels: Record<string, string> = {
+  foundLeads: "Gefundene Leads",
+  leadsWithContact: "Mit Kontakt",
+  missingContact: "Kontakt fehlt",
+  auditsCreated: "Audits erstellt",
+  approvalsOpen: "Freigaben offen",
+  emailsSent: "E-Mails gesendet",
+  followUpsPlanned: "Follow-ups geplant",
+  followUpsSent: "Follow-ups gesendet",
+  responses: "Antworten",
+  conversations: "Gespräche",
+  offers: "Angebote",
+  wins: "Gewonnen",
+  losses: "Verloren",
+  skippedDuplicates: "Duplikate übersprungen",
+  skippedBlacklisted: "Sperrliste übersprungen",
+  rybbitAuditOpens: "Audit-Öffnungen",
+  rybbitCtaClicks: "CTA-Klicks",
+};
+
+export function AnalyticsDashboard() {
+  const dashboard = useQuery(api.campaignMetrics.getDashboard, { limit: 20 });
+  const metricEntries = useMemo(() => {
+    if (!dashboard) {
+      return [];
+    }
+
+    return Object.entries(dashboard.metrics).filter(([key]) => key in metricLabels);
+  }, [dashboard]);
+
+  if (dashboard === undefined) {
+    return (
+      <section className="space-y-4">
+        <Skeleton className="h-24 rounded-lg" />
+        <Skeleton className="h-64 rounded-lg" />
+      </section>
+    );
+  }
+
+  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>
+
+      <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>
+
+      <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(20rem,0.7fr)]">
+        <Card>
+          <CardHeader>
+            <CardTitle className="inline-flex items-center gap-2">
+              <Activity className="size-5" />
+              Run-Details
+            </CardTitle>
+            <CardDescription>
+              Neue Leads, übersprungene Duplikate, Sperrliste, Fehler und erzeugte Audits.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-2 text-sm">
+            {dashboard.runs.length === 0 ? (
+              <p className="text-muted-foreground">Noch keine Kampagnenläufe.</p>
+            ) : (
+              dashboard.runs.map((run) => (
+                <div className="rounded-md border 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">
+                      Leads {run.newLeads} · Audits {run.auditsGenerated} · Fehler {run.errors}
+                    </p>
+                  </div>
+                  {run.errorSummary ? (
+                    <p className="mt-1 text-xs text-destructive">{run.errorSummary}</p>
+                  ) : null}
+                </div>
+              ))
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="inline-flex items-center gap-2">
+              <MousePointerClick className="size-5" />
+              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>
+            <p>Public-Audit Tracking läuft nur auf veröffentlichten Audit-Seiten.</p>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  );
+}

components/public-audit/public-audit-page.tsx

@@ -1,7 +1,9 @@
-import { ArrowRight, CheckCircle2, ExternalLink } from "lucide-react";
+import { CheckCircle2 } from "lucide-react";
 
 import type { PublicAuditRenderState } from "@/lib/audits/public-audit-types";
+import { RybbitTracking } from "./rybbit-tracking";
 import { PublicAuditScreenshot } from "./public-audit-screenshot";
+import { TrackedPublicAuditLink } from "./tracked-public-audit-link";
 
 type PublicAuditPageProps = {
   audit: Extract<PublicAuditRenderState, { kind: "published" }>["audit"];
@@ -10,6 +12,7 @@ type PublicAuditPageProps = {
 export function PublicAuditPage({ audit }: PublicAuditPageProps) {
   return (
     <main className="min-h-dvh bg-slate-50 text-slate-950">
+      <RybbitTracking domain={audit.domain} />
       <section className="border-b border-slate-200 bg-white">
         <div className="mx-auto grid min-h-[72dvh] w-full max-w-6xl content-center gap-10 px-6 py-14 md:grid-cols-[minmax(0,1.1fr)_minmax(320px,0.9fr)] md:px-8">
           <div className="max-w-3xl">
@@ -105,17 +108,11 @@ export function PublicAuditPage({ audit }: PublicAuditPageProps) {
             </p>
           </div>
           {audit.finalOffer.ctaHref ? (
-            <a
+            <TrackedPublicAuditLink
+              domain={audit.domain}
               href={audit.finalOffer.ctaHref}
-              className="mt-6 inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-slate-950 px-4 text-sm font-semibold text-white transition hover:bg-slate-800 md:mt-0"
-            >
-              {audit.finalOffer.ctaLabel ?? "Audit besprechen"}
-              {audit.finalOffer.ctaHref.startsWith("/") ? (
-                <ArrowRight className="h-4 w-4" aria-hidden />
-              ) : (
-                <ExternalLink className="h-4 w-4" aria-hidden />
-              )}
-            </a>
+              label={audit.finalOffer.ctaLabel ?? "Audit besprechen"}
+            />
           ) : null}
         </div>
       </section>

components/public-audit/rybbit-tracking.tsx

@@ -0,0 +1,27 @@
+import Script from "next/script";
+
+type RybbitTrackingProps = {
+  domain: string;
+};
+
+export function RybbitTracking({ domain }: RybbitTrackingProps) {
+  const siteId = process.env.NEXT_PUBLIC_RYBBIT_SITE_ID?.trim();
+  if (!siteId) {
+    return null;
+  }
+
+  const apiUrl = process.env.RYBBIT_API_URL?.trim() || "https://app.rybbit.io";
+  const src = `${apiUrl.replace(/\/$/, "")}/api/script.js`;
+
+  return (
+    <Script
+      async
+      data-site-id={siteId}
+      data-domain={domain}
+      defer
+      id="rybbit-public-audit"
+      src={src}
+      strategy="afterInteractive"
+    />
+  );
+}

components/public-audit/tracked-public-audit-link.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { ArrowRight, ExternalLink } from "lucide-react";
+
+declare global {
+  interface Window {
+    rybbit?: {
+      event?: (name: string, properties?: Record<string, string | number>) => void;
+    };
+  }
+}
+
+type TrackedPublicAuditLinkProps = {
+  href: string;
+  label: string;
+  domain: string;
+};
+
+export function TrackedPublicAuditLink({
+  href,
+  label,
+  domain,
+}: TrackedPublicAuditLinkProps) {
+  const isInternal = href.startsWith("/");
+
+  return (
+    <a
+      href={href}
+      className="mt-6 inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-slate-950 px-4 text-sm font-semibold text-white transition hover:bg-slate-800 md:mt-0"
+      onClick={() => {
+        window.rybbit?.event?.("audit_cta_click", {
+          domain,
+          target: isInternal ? "cta" : "outbound_cta",
+        });
+        if (!isInternal) {
+          window.rybbit?.event?.("audit_website_link_click", {
+            domain,
+            href,
+          });
+        }
+      }}
+    >
+      {label}
+      {isInternal ? (
+        <ArrowRight className="h-4 w-4" aria-hidden />
+      ) : (
+        <ExternalLink className="h-4 w-4" aria-hidden />
+      )}
+    </a>
+  );
+}