simone/clienthub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Quiet Luxury design system + Pipeline (ex-Lead) redesign

Browse Source 
- 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>
This commit is contained in:
Simone Cavalli
2026-07-10 16:16:44 +02:00
parent 43cb7e7469
commit 86e1499e8f
34 changed files with 3134 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin/leads/LeadTable.tsx
+34 -57
View File
@@ -3,28 +3,17 @@
import Link from "next/link";
import { useState, useRef, useEffect, useTransition } from "react";
import { useRouter } from "next/navigation";
import { Check } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Check, ArrowRight } from "lucide-react";
import { EditableCell } from "@/components/ui/editable-cell";
import { OptionMultiSelect } from "@/components/ui/option-multi-select";
import { StatusBadge } from "@/components/ui/StatusBadge";
import {
updateLeadField,
addLeadTag,
removeLeadTag,
renameLeadTag,
} from "@/app/admin/leads/actions";
} from "@/app/admin/pipeline/actions";
import type { LeadWithTags, LeadFieldOptions } from "@/lib/admin-queries";
import { cn } from "@/lib/utils";
const STAGE_COLOR: Record<string, string> = {
contacted: "bg-blue-100 text-blue-800",
qualified: "bg-purple-100 text-purple-800",
proposal_sent: "bg-amber-100 text-amber-800",
negotiating: "bg-orange-100 text-orange-800",
won: "bg-green-100 text-green-800",
lost: "bg-red-100 text-red-800",
};
const COLUMN_HEADERS = [
"Nome",
@@ -61,23 +50,15 @@ function StatusCell({
}, []);
return (
<div ref={containerRef} className="relative w-full min-w-[120px]">
<div ref={containerRef} className="relative w-full min-w-[120px] flex justify-center">
<div
onClick={() => setIsOpen((v) => !v)}
className="flex items-center gap-1 px-2 py-1 rounded transition-colors duration-150 min-h-[28px] cursor-pointer hover:bg-[#f0f0f0]"
className="flex items-center gap-1 px-2 py-1 rounded transition-colors duration-150 min-h-[28px] cursor-pointer hover:bg-muted"
>
<Badge
variant="outline"
className={cn(
STAGE_COLOR[lead.status] ?? "",
"border-transparent text-xs px-2 py-0.5 font-medium truncate"
)}
>
{lead.status.replace(/_/g, " ")}
</Badge>
<StatusBadge status={lead.status} />
</div>
{isOpen && (
<div className="absolute top-full left-0 mt-1 bg-white border border-[#e5e7eb] rounded-md shadow-md p-1.5 z-20 min-w-[180px]">
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-popover border border-border rounded-md shadow-card-hover p-1.5 z-20 min-w-[180px]">
<div className="flex flex-col gap-0.5">
{options.status.map((stage) => (
<button
@@ -87,17 +68,12 @@ function StatusCell({
setIsOpen(false);
run(() => updateLeadField(lead.id, "status", stage));
}}
className="flex items-center gap-2 rounded px-1.5 py-1 hover:bg-[#f5f5f5] text-left"
className="flex items-center gap-2 rounded px-1.5 py-1 hover:bg-muted text-left"
>
<span className="w-3.5 flex-shrink-0">
{lead.status === stage && <Check className="h-3.5 w-3.5 text-[#1A463C]" />}
{lead.status === stage && <Check className="h-3.5 w-3.5 text-primary" />}
</span>
<Badge
variant="outline"
className={cn(STAGE_COLOR[stage] ?? "", "border-transparent text-xs px-2 py-0.5 font-medium truncate")}
>
{stage.replace(/_/g, " ")}
</Badge>
<StatusBadge status={stage} />
</button>
))}
</div>
@@ -132,8 +108,8 @@ function LeadRow({
return (
<>
<tr className="border-b border-[#e5e7eb] hover:bg-[#f9f9f9] transition-colors duration-150">
<td className="py-2 px-3 font-medium text-[#1a1a1a] min-w-[160px]">
<tr className="hover:bg-muted/40 transition-colors duration-150">
<td className="py-4 px-6 font-medium text-foreground min-w-[160px]">
<EditableCell
value={lead.name}
type="text"
@@ -141,7 +117,7 @@ function LeadRow({
onSave={(v) => run(() => updateLeadField(lead.id, "name", v))}
/>
</td>
<td className="py-2 px-3 min-w-[160px]">
<td className="py-4 px-6 min-w-[160px] text-muted-foreground text-xs">
<EditableCell
value={lead.email ?? ""}
type="text"
@@ -149,7 +125,7 @@ function LeadRow({
onSave={(v) => run(() => updateLeadField(lead.id, "email", v))}
/>
</td>
<td className="py-2 px-3 min-w-[140px]">
<td className="py-4 px-6 min-w-[140px] text-muted-foreground text-xs font-mono">
<EditableCell
value={lead.phone ?? ""}
type="text"
@@ -157,7 +133,7 @@ function LeadRow({
onSave={(v) => run(() => updateLeadField(lead.id, "phone", v))}
/>
</td>
<td className="py-2 px-3 min-w-[140px]">
<td className="py-4 px-6 min-w-[140px]">
<EditableCell
value={lead.company ?? ""}
type="text"
@@ -165,10 +141,10 @@ function LeadRow({
onSave={(v) => run(() => updateLeadField(lead.id, "company", v))}
/>
</td>
<td className="py-2 px-3 min-w-[120px]">
<td className="py-4 px-6 min-w-[120px] text-center">
<StatusCell lead={lead} options={options} run={run} />
</td>
<td className="py-2 px-3 min-w-[180px]">
<td className="py-4 px-6 min-w-[180px]">
<EditableCell
value={lead.next_action ?? ""}
type="text"
@@ -176,7 +152,7 @@ function LeadRow({
onSave={(v) => run(() => updateLeadField(lead.id, "next_action", v))}
/>
</td>
<td className="py-2 px-3 min-w-[180px]">
<td className="py-4 px-6 min-w-[180px] text-center">
<OptionMultiSelect
values={lead.tags}
options={options.tags}
@@ -185,15 +161,19 @@ function LeadRow({
onRename={(o, n) => run(() => renameLeadTag(o, n))}
/>
</td>
<td className="py-2 px-3 min-w-[80px]">
<Button variant="ghost" size="sm" asChild>
<Link href={`/admin/leads/${lead.id}`}>Dettagli</Link>
</Button>
<td className="py-4 px-6 min-w-[80px] text-right">
<Link
href={`/admin/pipeline/${lead.id}`}
className="text-xs font-medium text-primary hover:text-primary/80 inline-flex items-center gap-1 group transition-colors"
>
Dettagli
<ArrowRight className="w-3 h-3 transform group-hover:translate-x-0.5 transition-transform" />
</Link>
</td>
</tr>
{error && (
<tr>
<td colSpan={COL_COUNT} className="py-1 px-3 text-xs text-red-600">
<td colSpan={COL_COUNT} className="py-1 px-6 text-xs text-destructive">
{error}
</td>
</tr>
@@ -210,22 +190,19 @@ export function LeadTable({
options: LeadFieldOptions;
}) {
return (
<div className="bg-white rounded-xl border border-[#e5e7eb]">
<div className="bg-card rounded-xl border border-border shadow-card overflow-hidden">
<div className="overflow-x-auto min-h-[300px]">
<table className="w-full text-sm">
<thead className="bg-[#f9f9f9] border-b border-[#e5e7eb] sticky top-0 z-[1]">
<tr>
<table className="w-full text-left border-collapse">
<thead>
<tr className="border-b border-border bg-muted/50 text-muted-foreground text-[11px] font-semibold uppercase tracking-wider">
{COLUMN_HEADERS.map((header) => (
<th
key={header}
className="text-left py-2 px-3 font-semibold text-[#71717a]"
>
<th key={header} className="py-4 px-6">
{header}
</th>
))}
</tr>
</thead>
<tbody>
<tbody className="divide-y divide-border text-sm">
{leads.map((lead) => (
<LeadRow key={lead.id} lead={lead} options={options} />
))}
@@ -234,7 +211,7 @@ export function LeadTable({
</div>
{leads.length === 0 && (
<div className="text-center py-8 text-gray-500">Nessun lead trovato</div>
<div className="text-center py-8 text-muted-foreground">Nessun lead trovato</div>
)}
</div>
);