Integrate local business workflow and SaaS redesign

components/lead-funnel-board.tsx

@@ -2,7 +2,16 @@
 
 import { useQuery } from "convex/react";
 import type { FunctionReturnType } from "convex/server";
-import { ArrowRight, Building2, MapPin } from "lucide-react";
+import {
+  ArrowRight,
+  Building2,
+  CheckCircle2,
+  Clock3,
+  FileSearch,
+  MapPin,
+  ShieldAlert,
+  type LucideIcon,
+} from "lucide-react";
 import Link from "next/link";
 
 import { api } from "@/convex/_generated/api";
@@ -24,6 +33,42 @@ const stageActionHref: Record<LeadFunnelStageId, string> = {
   deferred: "/dashboard/leads",
 };
 
+const stageVisuals: Record<
+  LeadFunnelStageId,
+  { surface: string; label: string; icon: LucideIcon }
+> = {
+  missing_contact: {
+    surface: "review-surface",
+    label: "Kontakt klären",
+    icon: ShieldAlert,
+  },
+  audit_ready: {
+    surface: "evidence-surface",
+    label: "Evidence sammeln",
+    icon: FileSearch,
+  },
+  review_open: {
+    surface: "review-surface",
+    label: "Freigabe prüfen",
+    icon: Clock3,
+  },
+  contacted: {
+    surface: "safe-surface",
+    label: "Kontakt läuft",
+    icon: CheckCircle2,
+  },
+  follow_up: {
+    surface: "safe-surface",
+    label: "Follow-up",
+    icon: Clock3,
+  },
+  deferred: {
+    surface: "bg-[var(--danger-soft)] text-destructive",
+    label: "Zurückgestellt",
+    icon: ShieldAlert,
+  },
+};
+
 export function LeadFunnelBoard() {
   const leads: LeadFunnelQueryResult | undefined = useQuery(
     api.leads.listFunnel,
@@ -40,14 +85,14 @@ export function LeadFunnelBoard() {
   if (totalCards === 0) {
     return (
       <section
-        className="rounded-lg border bg-card p-6 text-card-foreground"
+        className="rounded-lg border border-border/80 bg-card p-6 text-card-foreground"
         aria-labelledby="lead-funnel-heading"
       >
-        <p className="text-sm font-medium text-muted-foreground">
+        <p className="text-sm font-semibold text-muted-foreground">
           Lead-Funnel
         </p>
         <h2
-          className="mt-2 text-xl font-semibold tracking-normal"
+          className="mt-2 font-heading text-xl font-semibold tracking-normal"
           id="lead-funnel-heading"
         >
           Noch keine Leads im Arbeitsfluss
@@ -61,62 +106,85 @@ export function LeadFunnelBoard() {
   }
 
   return (
-    <section className="grid gap-3" aria-labelledby="lead-funnel-heading">
+    <section className="agency-panel p-4" aria-labelledby="lead-funnel-heading">
       <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
         <div>
+          <p className="agency-kicker">Lead Workflow</p>
           <h2
-            className="text-xl font-semibold tracking-normal"
+            className="mt-1 font-heading text-xl font-semibold tracking-normal"
             id="lead-funnel-heading"
           >
-            Lead-Funnel
+            Evidence Pipeline
           </h2>
           <p className="mt-1 text-sm leading-6 text-muted-foreground">
-            {totalCards} Leads nach Kontaktlage, Audit-Stand und nächster
-            manueller Aktion.
+            {totalCards} Leads nach nächster Entscheidung, Beleglage und
+            Outreach-Sicherheit.
           </p>
         </div>
-        <p className="text-sm font-medium text-muted-foreground">
-          Kein automatischer Versand
+        <p className="rounded-md bg-[var(--surface-review)] px-2.5 py-1 text-sm font-bold text-secondary-foreground">
+          Human approval required
         </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="mt-4 grid gap-3 lg:grid-cols-2 2xl:grid-cols-3">
+        {groups.map((group) => (
+          <LeadFunnelStageView group={group} key={group.stage.id} />
+        ))}
+      </div>
+    </section>
+  );
+}
 
-              <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>
-          ))}
+function LeadFunnelStageView({
+  group,
+}: {
+  group: ReturnType<typeof groupLeadFunnelCards>[number];
+}) {
+  const visual = stageVisuals[group.stage.id];
+  const Icon = visual.icon;
+
+  return (
+    <section
+      className="rounded-md border border-border/80 bg-background/55"
+      aria-labelledby={`${group.stage.id}-heading`}
+    >
+      <div className="flex items-start justify-between gap-3 border-b border-border/75 p-3">
+        <div className="flex min-w-0 gap-3">
+          <span
+            className={`flex size-10 shrink-0 items-center justify-center rounded-md ${visual.surface}`}
+          >
+            <Icon className="size-4" />
+          </span>
+          <div className="min-w-0">
+            <p className="text-xs font-bold uppercase text-muted-foreground">
+              {visual.label}
+            </p>
+            <h3
+              className="mt-1 text-sm font-semibold"
+              id={`${group.stage.id}-heading`}
+            >
+              {group.stage.title}
+            </h3>
+            <p className="mt-1 text-xs leading-5 text-muted-foreground">
+              {group.stage.description}
+            </p>
+          </div>
+        </div>
+        <span className="rounded-md bg-card px-2 py-1 text-sm font-bold">
+          {group.cards.length}
+        </span>
+      </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 border-border/80 bg-card/50 p-3 text-xs leading-5 text-muted-foreground">
+            Keine Leads in diesem Entscheidungsschritt.
+          </p>
+        )}
       </div>
     </section>
   );
@@ -125,7 +193,7 @@ export function LeadFunnelBoard() {
 function LeadFunnelCardView({ card }: { card: LeadFunnelCard }) {
   return (
     <article
-      className="rounded-lg border bg-background p-3"
+      className="rounded-lg border border-border/80 bg-background/65 p-3"
       aria-labelledby={`${card.id}-company`}
     >
       <div className="flex items-start justify-between gap-2">
@@ -143,7 +211,7 @@ function LeadFunnelCardView({ card }: { card: LeadFunnelCard }) {
         </div>
         <span
           className={cn(
-            "shrink-0 rounded-md px-2 py-1 text-xs font-medium",
+            "shrink-0 rounded-md px-2 py-1 text-xs font-semibold",
             card.priorityLabel === "Hoch"
               ? "bg-primary text-primary-foreground"
               : "bg-muted text-muted-foreground",
@@ -159,16 +227,16 @@ function LeadFunnelCardView({ card }: { card: LeadFunnelCard }) {
       </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">
+        <span className="rounded-md bg-secondary px-2 py-1 text-xs font-semibold text-secondary-foreground">
           {card.contactStatusLabel}
         </span>
-        <span className="rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground">
+        <span className="rounded-md bg-muted px-2 py-1 text-xs font-medium 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"
+        className="mt-3 inline-flex min-h-8 items-center gap-1 rounded-md text-sm font-semibold text-primary outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/35"
         href={stageActionHref[card.stageId]}
         prefetch={false}
       >
@@ -189,7 +257,7 @@ function LeadFunnelSkeleton() {
       <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"
+            className="min-h-[24rem] rounded-lg border border-border/80 bg-card p-3"
             key={index}
           >
             <div className="h-5 w-28 rounded-md bg-muted" />