simone
86e1499e8f
- Design system foundations: Plus Jakarta Sans font, shadow-card/radius tokens in @theme, design-reference/DESIGN-SYSTEM.md with component inventory - Collapsible admin shell (AdminShell): smooth w-64<->w-20 sidebar, new top header with "Admin" + avatar placeholder, localStorage-persisted state - Rename route /admin/leads -> /admin/pipeline (redirect stubs preserved), nav label Lead -> Pipeline; DB table unchanged - Reusable primitives: StatusBadge, SearchInput, SegmentedToggle (dual-theme) - Luxury restyle of lead table, kanban (6 stages + @dnd-kit intact), PageHeader - Tokenize editable-cell / option-multi-select for dark-mode legibility Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* Lead pipeline stages. Kept in sync with LEAD_STAGES
|
|
* (src/lib/lead-validators.ts) — all 6 stages stay, per the CRM Kanban.
|
|
*/
|
|
export type LeadStage =
|
|
| "contacted"
|
|
| "qualified"
|
|
| "proposal_sent"
|
|
| "negotiating"
|
|
| "won"
|
|
| "lost";
|
|
|
|
const STAGE_STYLES: Record<LeadStage, string> = {
|
|
contacted:
|
|
"bg-blue-50 text-blue-600 border-blue-100 dark:bg-blue-950/40 dark:text-blue-300 dark:border-blue-900",
|
|
qualified:
|
|
"bg-purple-50 text-purple-600 border-purple-100 dark:bg-purple-950/40 dark:text-purple-300 dark:border-purple-900",
|
|
proposal_sent:
|
|
"bg-amber-50 text-amber-600 border-amber-100 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-900",
|
|
negotiating:
|
|
"bg-orange-50 text-orange-600 border-orange-100 dark:bg-orange-950/40 dark:text-orange-300 dark:border-orange-900",
|
|
won: "bg-emerald-50 text-emerald-600 border-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-300 dark:border-emerald-900",
|
|
lost: "bg-red-50 text-red-600 border-red-100 dark:bg-red-950/40 dark:text-red-300 dark:border-red-900",
|
|
};
|
|
|
|
/**
|
|
* Rounded-full status pill for lead stages. Replaces the old scattered
|
|
* STAGE_COLOR maps in LeadTable/LeadsKanbanBoard — one source of truth for
|
|
* stage → color, with explicit dark: variants for legibility.
|
|
*/
|
|
export function StatusBadge({
|
|
status,
|
|
className,
|
|
}: {
|
|
status: string;
|
|
className?: string;
|
|
}) {
|
|
const styles = STAGE_STYLES[status as LeadStage] ?? "bg-muted text-muted-foreground border-border";
|
|
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-semibold tracking-wide uppercase border whitespace-nowrap",
|
|
styles,
|
|
className
|
|
)}
|
|
>
|
|
{status.replace(/_/g, " ")}
|
|
</span>
|
|
);
|
|
}
|