274 lines
8.2 KiB
TypeScript
274 lines
8.2 KiB
TypeScript
"use client";
|
|
|
|
import { useQuery } from "convex/react";
|
|
import type { FunctionReturnType } from "convex/server";
|
|
import {
|
|
ArrowRight,
|
|
Building2,
|
|
CheckCircle2,
|
|
Clock3,
|
|
FileSearch,
|
|
MapPin,
|
|
ShieldAlert,
|
|
type LucideIcon,
|
|
} 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",
|
|
};
|
|
|
|
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,
|
|
{ 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 border-border/80 bg-card p-6 text-card-foreground"
|
|
aria-labelledby="lead-funnel-heading"
|
|
>
|
|
<p className="text-sm font-semibold text-muted-foreground">
|
|
Lead-Funnel
|
|
</p>
|
|
<h2
|
|
className="mt-2 font-heading 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="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="mt-1 font-heading text-xl font-semibold tracking-normal"
|
|
id="lead-funnel-heading"
|
|
>
|
|
Evidence Pipeline
|
|
</h2>
|
|
<p className="mt-1 text-sm leading-6 text-muted-foreground">
|
|
{totalCards} Leads nach nächster Entscheidung, Beleglage und
|
|
Outreach-Sicherheit.
|
|
</p>
|
|
</div>
|
|
<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="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>
|
|
);
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|
|
|
|
function LeadFunnelCardView({ card }: { card: LeadFunnelCard }) {
|
|
return (
|
|
<article
|
|
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">
|
|
<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-semibold",
|
|
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 font-semibold text-secondary-foreground">
|
|
{card.contactStatusLabel}
|
|
</span>
|
|
<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-semibold text-primary outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/35"
|
|
href={stageActionHref[card.stageId]}
|
|
prefetch={false}
|
|
>
|
|
{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 border-border/80 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>
|
|
);
|
|
}
|