feat: build dashboard lead funnel

components/dashboard-sidebar.tsx

@@ -6,6 +6,7 @@ import { LogOut } from "lucide-react";
 
 import { authClient } from "@/lib/auth-client";
 import { Button } from "@/components/ui/button";
+import { DashboardThemeToggle } from "@/components/dashboard-theme";
 import { dashboardNavigation } from "@/lib/dashboard-navigation";
 import { useState } from "react";
 import { cn } from "@/lib/utils";
@@ -15,6 +16,7 @@ export function DashboardSidebar() {
   const pathname = usePathname();
   const router = useRouter();
   const [isSigningOut, setIsSigningOut] = useState(false);
+  const [signOutError, setSignOutError] = useState<string | null>(null);
   const { data: session, isPending } = authClient.useSession();
 
   return (
@@ -46,7 +48,7 @@ export function DashboardSidebar() {
             <Link
               aria-current={isActive ? "page" : undefined}
               className={cn(
-                "flex h-9 shrink-0 items-center gap-2 rounded-lg px-3 text-sm font-medium transition-colors",
+                "flex h-9 shrink-0 items-center gap-2 rounded-lg px-3 text-sm font-medium outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50",
                 isActive
                   ? "bg-sidebar-primary text-sidebar-primary-foreground"
                   : "text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
@@ -70,20 +72,36 @@ export function DashboardSidebar() {
             {session?.user?.email ?? "admin@local"}
           </p>
         </div>
+        <div className="mb-2">
+          <DashboardThemeToggle />
+        </div>
         <Button
           className="w-full justify-start"
           variant="outline"
           onClick={async () => {
             setIsSigningOut(true);
-            await authClient.signOut();
-            router.replace("/login");
-            router.refresh();
+            setSignOutError(null);
+
+            try {
+              await authClient.signOut();
+              router.replace("/login");
+              router.refresh();
+            } catch {
+              setSignOutError("Abmeldung fehlgeschlagen.");
+            } finally {
+              setIsSigningOut(false);
+            }
           }}
           disabled={isSigningOut}
         >
           <LogOut />
-          {isSigningOut ? "Abmeldung..." : "Abmelden"}
+          {isSigningOut ? "Abmeldung läuft..." : "Abmelden"}
         </Button>
+        {signOutError ? (
+          <p className="mt-2 text-xs text-destructive" role="status">
+            {signOutError}
+          </p>
+        ) : null}
       </div>
     </aside>
   );

components/dashboard-theme.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type DashboardTheme = "light" | "dark";
+
+type DashboardThemeContextValue = {
+  theme: DashboardTheme;
+  toggleTheme: () => void;
+};
+
+const storageKey = "webdev-dashboard-theme";
+
+const DashboardThemeContext =
+  createContext<DashboardThemeContextValue | null>(null);
+
+export function DashboardThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<DashboardTheme>(() => {
+    if (typeof window === "undefined") {
+      return "light";
+    }
+
+    const storedTheme = window.localStorage.getItem(storageKey);
+
+    if (storedTheme === "dark" || storedTheme === "light") {
+      return storedTheme;
+    }
+
+    return "light";
+  });
+
+  const value = useMemo<DashboardThemeContextValue>(
+    () => ({
+      theme,
+      toggleTheme: () => {
+        setTheme((currentTheme) => {
+          const nextTheme = currentTheme === "dark" ? "light" : "dark";
+          window.localStorage.setItem(storageKey, nextTheme);
+          return nextTheme;
+        });
+      },
+    }),
+    [theme],
+  );
+
+  return (
+    <DashboardThemeContext.Provider value={value}>
+      <div
+        suppressHydrationWarning
+        className={cn(
+          "min-h-dvh bg-background text-foreground md:flex",
+          theme === "dark" && "dark",
+        )}
+      >
+        {children}
+      </div>
+    </DashboardThemeContext.Provider>
+  );
+}
+
+export function DashboardThemeToggle() {
+  const context = useContext(DashboardThemeContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const isDark = context.theme === "dark";
+  const Icon = isDark ? Sun : Moon;
+
+  return (
+    <Button
+      className="w-full justify-start"
+      variant="ghost"
+      onClick={context.toggleTheme}
+      aria-pressed={isDark}
+    >
+      <Icon />
+      {isDark ? "Hellmodus" : "Dunkelmodus"}
+    </Button>
+  );
+}

components/lead-funnel-board.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { useQuery } from "convex/react";
+import type { FunctionReturnType } from "convex/server";
+import { ArrowRight, Building2, MapPin } from "lucide-react";
+import Link from "next/link";
+
+import { api } from "@/convex/_generated/api";
+import {
+  groupLeadFunnelCards,
+  type LeadFunnelCard,
+  type LeadFunnelStageId,
+} from "@/lib/dashboard-model";
+import { cn } from "@/lib/utils";
+
+type LeadFunnelQueryResult = FunctionReturnType<typeof api.leads.listFunnel>;
+
+const stageActionHref: Record<LeadFunnelStageId, string> = {
+  missing_contact: "/dashboard/leads",
+  audit_ready: "/dashboard/audits",
+  review_open: "/dashboard/outreach",
+  contacted: "/dashboard/outreach",
+  follow_up: "/dashboard/outreach",
+  deferred: "/dashboard/leads",
+};
+
+export function LeadFunnelBoard() {
+  const leads: LeadFunnelQueryResult | undefined = useQuery(
+    api.leads.listFunnel,
+    { limit: 100 },
+  );
+
+  if (leads === undefined) {
+    return <LeadFunnelSkeleton />;
+  }
+
+  const groups = groupLeadFunnelCards(leads);
+  const totalCards = groups.reduce((total, group) => total + group.cards.length, 0);
+
+  if (totalCards === 0) {
+    return (
+      <section
+        className="rounded-lg border bg-card p-6 text-card-foreground"
+        aria-labelledby="lead-funnel-heading"
+      >
+        <p className="text-sm font-medium text-muted-foreground">
+          Lead-Funnel
+        </p>
+        <h2
+          className="mt-2 text-xl font-semibold tracking-normal"
+          id="lead-funnel-heading"
+        >
+          Noch keine Leads im Arbeitsfluss
+        </h2>
+        <p className="mt-3 max-w-2xl text-sm leading-6 text-muted-foreground">
+          Sobald Kampagnen Leads erzeugen oder importieren, erscheinen sie hier
+          nach Kontaktlage, Audit-Stand und Review-Bedarf sortiert.
+        </p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="grid gap-3" aria-labelledby="lead-funnel-heading">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h2
+            className="text-xl font-semibold tracking-normal"
+            id="lead-funnel-heading"
+          >
+            Lead-Funnel
+          </h2>
+          <p className="mt-1 text-sm leading-6 text-muted-foreground">
+            {totalCards} Leads nach Kontaktlage, Audit-Stand und nächster
+            manueller Aktion.
+          </p>
+        </div>
+        <p className="text-sm font-medium text-muted-foreground">
+          Kein automatischer Versand
+        </p>
+      </div>
+
+      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
+          {groups.map((group) => (
+            <section
+              className="flex min-h-[24rem] flex-col rounded-lg border bg-card text-card-foreground"
+              key={group.stage.id}
+              aria-labelledby={`${group.stage.id}-heading`}
+            >
+              <div className="border-b p-3">
+                <div className="flex items-center justify-between gap-3">
+                  <h3
+                    className="text-sm font-semibold"
+                    id={`${group.stage.id}-heading`}
+                  >
+                    {group.stage.title}
+                  </h3>
+                  <span className="rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
+                    {group.cards.length}
+                  </span>
+                </div>
+                <p className="mt-2 text-xs leading-5 text-muted-foreground">
+                  {group.stage.description}
+                </p>
+              </div>
+
+              <div className="grid gap-2 p-2">
+                {group.cards.length > 0 ? (
+                  group.cards.map((card) => (
+                    <LeadFunnelCardView card={card} key={card.id} />
+                  ))
+                ) : (
+                  <p className="rounded-md border border-dashed p-3 text-xs leading-5 text-muted-foreground">
+                    Keine Leads in dieser Spalte.
+                  </p>
+                )}
+              </div>
+            </section>
+          ))}
+      </div>
+    </section>
+  );
+}
+
+function LeadFunnelCardView({ card }: { card: LeadFunnelCard }) {
+  return (
+    <article
+      className="rounded-lg border bg-background p-3"
+      aria-labelledby={`${card.id}-company`}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <h4
+            className="truncate text-sm font-semibold"
+            id={`${card.id}-company`}
+          >
+            {card.company}
+          </h4>
+          <p className="mt-1 inline-flex max-w-full items-center gap-1 truncate text-xs text-muted-foreground">
+            <Building2 className="size-3 shrink-0" />
+            <span className="truncate">{card.niche}</span>
+          </p>
+        </div>
+        <span
+          className={cn(
+            "shrink-0 rounded-md px-2 py-1 text-xs font-medium",
+            card.priorityLabel === "Hoch"
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted text-muted-foreground",
+          )}
+        >
+          {card.priorityLabel}
+        </span>
+      </div>
+
+      <p className="mt-3 inline-flex max-w-full items-center gap-1 truncate text-xs text-muted-foreground">
+        <MapPin className="size-3 shrink-0" />
+        <span className="truncate">{card.location}</span>
+      </p>
+
+      <div className="mt-3 flex flex-wrap gap-1.5">
+        <span className="rounded-md bg-secondary px-2 py-1 text-xs text-secondary-foreground">
+          {card.contactStatusLabel}
+        </span>
+        <span className="rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground">
+          {card.contactDetail}
+        </span>
+      </div>
+
+      <Link
+        className="mt-3 inline-flex min-h-8 items-center gap-1 rounded-md text-sm font-medium text-primary outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/50"
+        href={stageActionHref[card.stageId]}
+      >
+        {card.nextAction}
+        <ArrowRight className="size-4" />
+      </Link>
+    </article>
+  );
+}
+
+function LeadFunnelSkeleton() {
+  return (
+    <section className="grid gap-3" aria-label="Lead-Funnel wird geladen">
+      <div>
+        <div className="h-6 w-40 rounded-md bg-muted" />
+        <div className="mt-2 h-4 w-80 max-w-full rounded-md bg-muted" />
+      </div>
+      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
+        {Array.from({ length: 6 }, (_, index) => (
+          <div
+            className="min-h-[24rem] rounded-lg border bg-card p-3"
+            key={index}
+          >
+            <div className="h-5 w-28 rounded-md bg-muted" />
+            <div className="mt-4 grid gap-2">
+              <div className="h-28 rounded-lg bg-muted" />
+              <div className="h-24 rounded-lg bg-muted" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}