feat: build dashboard lead funnel
This commit is contained in:
204
components/lead-funnel-board.tsx
Normal file
204
components/lead-funnel-board.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user