webdev-pipeline/components/lead-funnel-board.tsx

"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>
  );
}