From 6d5e04bf9c2955e528e6bd894fef2dd10ce408db Mon Sep 17 00:00:00 2001
From: Simone Cavalli <simone.cavalli.gestione@gmail.com>
Date: Fri, 10 Jul 2026 22:33:26 +0200
Subject: [PATCH] style: refine Pipeline fidelity to Quiet Luxury reference

- Sidebar: revert to white palette (drop emerald pass), remove right border
- Table: softer slate-100 borders, remove min-height gap, "Mostrando N di M
  lead" footer, empty Tag cell = dashed-circle add button
- SegmentedToggle: more visible track (slate-200/60), neutral active text
- Kanban: roomy fixed-width columns (280px, horizontal scroll), sober column
  headers (no colored dots), airy cards matching mock (name+badge/email/
  company+"Tag +"); 6 stages + @dnd-kit intact

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/admin/AdminSidebar.tsx         | 14 ++---
 src/components/admin/leads/LeadTable.tsx      | 17 ++++--
 .../admin/leads/LeadsKanbanBoard.tsx          | 61 ++++++++-----------
 .../admin/leads/LeadsViewToggle.tsx           |  2 +-
 src/components/ui/SegmentedToggle.tsx         |  4 +-
 src/components/ui/option-multi-select.tsx     | 53 ++++++++--------
 6 files changed, 76 insertions(+), 75 deletions(-)

diff --git a/src/components/admin/AdminSidebar.tsx b/src/components/admin/AdminSidebar.tsx
index 7dab484..fb596e7 100644
--- a/src/components/admin/AdminSidebar.tsx
+++ b/src/components/admin/AdminSidebar.tsx
@@ -41,7 +41,7 @@ export function AdminSidebar({ collapsed = false }: { collapsed?: boolean }) {
   return (
     <aside
       className={cn(
-        "shrink-0 min-h-screen bg-[#1A463C] border-r border-emerald-950/20 flex flex-col overflow-hidden",
+        "shrink-0 min-h-screen bg-[#1A463C] flex flex-col overflow-hidden",
         "transition-[width] duration-350 ease-[cubic-bezier(0.4,0,0.2,1)]",
         collapsed ? "w-16" : "w-[200px]"
       )}
@@ -54,7 +54,7 @@ export function AdminSidebar({ collapsed = false }: { collapsed?: boolean }) {
         )}
       >
         {!collapsed && (
-          <span className="font-bold text-emerald-50 tracking-tight text-sm whitespace-nowrap">
+          <span className="font-bold text-white tracking-tight text-sm whitespace-nowrap">
             iamcavalli
           </span>
         )}
@@ -73,14 +73,14 @@ export function AdminSidebar({ collapsed = false }: { collapsed?: boolean }) {
                 "flex items-center py-2.5 rounded-lg text-sm transition-all duration-200",
                 rowClass,
                 active
-                  ? "bg-white/[0.08] text-white font-medium shadow-sm"
-                  : "text-emerald-200/70 hover:text-white hover:bg-white/5"
+                  ? "bg-white/15 text-white font-medium"
+                  : "text-white/65 hover:text-white hover:bg-white/10"
               )}
             >
               <Icon
                 size={16}
                 strokeWidth={1.8}
-                className={cn("shrink-0", active && "text-emerald-400")}
+                className="shrink-0"
               />
               {!collapsed && <span className="whitespace-nowrap">{label}</span>}
             </Link>
@@ -96,7 +96,7 @@ export function AdminSidebar({ collapsed = false }: { collapsed?: boolean }) {
             collapsed ? "justify-center px-0" : "justify-between px-3"
           )}
         >
-          {!collapsed && <span className="text-xs text-emerald-200/50">Tema</span>}
+          {!collapsed && <span className="text-xs text-white/50">Tema</span>}
           <ThemeToggle />
         </div>
         <button
@@ -104,7 +104,7 @@ export function AdminSidebar({ collapsed = false }: { collapsed?: boolean }) {
           title={collapsed ? "Esci" : undefined}
           className={cn(
             "flex items-center py-2.5 w-full rounded-lg text-sm transition-all duration-200",
-            "text-red-300/80 hover:text-red-200 hover:bg-red-950/20",
+            "text-white/65 hover:text-white hover:bg-white/10",
             rowClass
           )}
         >
diff --git a/src/components/admin/leads/LeadTable.tsx b/src/components/admin/leads/LeadTable.tsx
index a91ddc8..328b5fa 100644
--- a/src/components/admin/leads/LeadTable.tsx
+++ b/src/components/admin/leads/LeadTable.tsx
@@ -191,16 +191,21 @@ function LeadRow({
 export function LeadTable({
   leads,
   options,
+  total,
 }: {
   leads: LeadWithTags[];
   options: LeadFieldOptions;
+  total?: number;
 }) {
+  const count = leads.length;
+  const totalCount = total ?? leads.length;
+
   return (
-    <div className="bg-card rounded-xl border border-border shadow-card overflow-hidden">
-      <div className="overflow-x-auto min-h-[300px]">
+    <div className="bg-card rounded-xl border border-border-light shadow-card overflow-hidden">
+      <div className="overflow-x-auto">
         <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">
+            <tr className="border-b border-border-light bg-muted/50 text-muted-foreground text-[11px] font-semibold uppercase tracking-wider">
               {COLUMN_HEADERS.map((header) => (
                 <th key={header} className={cn("py-4 px-6", HEADER_ALIGN[header])}>
                   {header}
@@ -208,7 +213,7 @@ export function LeadTable({
               ))}
             </tr>
           </thead>
-          <tbody className="divide-y divide-border text-sm">
+          <tbody className="divide-y divide-border-light text-sm">
             {leads.map((lead) => (
               <LeadRow key={lead.id} lead={lead} options={options} />
             ))}
@@ -220,8 +225,8 @@ export function LeadTable({
         <div className="text-center py-8 text-muted-foreground">Nessun lead trovato</div>
       )}
 
-      <div className="border-t border-border px-6 py-4 text-xs text-muted-foreground">
-        Mostrando {leads.length} lead
+      <div className="border-t border-border-light px-6 py-4 text-xs text-muted-foreground">
+        Mostrando {count} di {totalCount} lead
       </div>
     </div>
   );
diff --git a/src/components/admin/leads/LeadsKanbanBoard.tsx b/src/components/admin/leads/LeadsKanbanBoard.tsx
index ddbbf92..83ac06e 100644
--- a/src/components/admin/leads/LeadsKanbanBoard.tsx
+++ b/src/components/admin/leads/LeadsKanbanBoard.tsx
@@ -22,26 +22,22 @@ type LeadStage = "contacted" | "qualified" | "proposal_sent" | "negotiating" | "
 const LEAD_COLUMNS: {
   id: LeadStage;
   label: string;
-  headerClass: string;
-  dotClass: string;
 }[] = [
-  { id: "contacted",     label: "Contattato",      headerClass: "text-muted-foreground",                  dotClass: "bg-blue-400 dark:bg-blue-500" },
-  { id: "qualified",     label: "Qualificato",      headerClass: "text-purple-700 dark:text-purple-400",   dotClass: "bg-purple-400 dark:bg-purple-500" },
-  { id: "proposal_sent", label: "Offerta inviata",  headerClass: "text-amber-700 dark:text-amber-400",     dotClass: "bg-amber-400 dark:bg-amber-500" },
-  { id: "negotiating",   label: "Trattativa",       headerClass: "text-orange-700 dark:text-orange-400",   dotClass: "bg-orange-400 dark:bg-orange-500" },
-  { id: "won",           label: "Vinto",            headerClass: "text-emerald-700 dark:text-emerald-400", dotClass: "bg-emerald-500" },
-  { id: "lost",          label: "Perso",            headerClass: "text-red-700 dark:text-red-400",         dotClass: "bg-red-400 dark:bg-red-500" },
+  { id: "contacted",     label: "Contattato" },
+  { id: "qualified",     label: "Qualificato" },
+  { id: "proposal_sent", label: "Offerta inviata" },
+  { id: "negotiating",   label: "Trattativa" },
+  { id: "won",           label: "Vinto" },
+  { id: "lost",          label: "Perso" },
 ];
 
 const VALID_STAGES = LEAD_COLUMNS.map((c) => c.id) as string[];
 
 function DroppableColumn({
-  id, label, headerClass, dotClass, leads, activeId,
+  id, label, leads, activeId,
 }: {
   id: LeadStage;
   label: string;
-  headerClass: string;
-  dotClass: string;
   leads: LeadWithTags[];
   activeId: string | null;
 }) {
@@ -50,21 +46,18 @@ function DroppableColumn({
   return (
     <div
       ref={setNodeRef}
-      className={`flex flex-col rounded-xl border p-4 transition-colors ${
-        isOver ? "border-primary bg-primary/5" : "border-border bg-muted/60"
-      } min-h-[240px]`}
+      className={`w-[280px] shrink-0 flex flex-col gap-4 rounded-xl border p-4 transition-colors min-h-[420px] ${
+        isOver ? "border-primary bg-primary/5" : "border-border-light bg-muted/60"
+      }`}
     >
-      <div className={`flex items-center justify-between pb-2 mb-2 border-b border-border ${headerClass}`}>
-        <div className="flex items-center gap-2">
-          <span className={`w-2 h-2 rounded-full ${dotClass}`} />
-          <span className="text-xs font-bold uppercase tracking-wider">{label}</span>
-        </div>
-        <span className="text-xs font-semibold tabular-nums bg-card rounded-full px-2 py-0.5 border border-border text-muted-foreground">
+      <div className="flex items-center justify-between border-b border-border-light pb-2">
+        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{label}</span>
+        <span className="text-xs font-medium tabular-nums bg-secondary text-muted-foreground px-2 py-0.5 rounded-full">
           {leads.length}
         </span>
       </div>
 
-      <div className="flex-1 space-y-2">
+      <div className="flex-1 flex flex-col gap-2">
         {leads.map((lead) => (
           <DraggableLeadCard key={lead.id} lead={lead} status={id} isActive={activeId === lead.id} />
         ))}
@@ -99,23 +92,21 @@ function DraggableLeadCard({
       style={style}
       {...listeners}
       {...attributes}
-      className={`bg-card rounded-lg border border-border px-3 py-2.5 cursor-grab active:cursor-grabbing shadow-sm select-none transition-all duration-200 ${
+      className={`bg-card p-4 rounded-lg border border-border shadow-sm cursor-grab active:cursor-grabbing select-none transition-all duration-200 ${
         isDragging ? "opacity-30" : "hover:border-primary/30 hover:shadow-card-hover"
       }`}
     >
-      <div className="flex items-start justify-between gap-2">
-        <p className="text-sm font-medium text-foreground">{lead.name}</p>
+      <div className="flex justify-between items-start gap-2 mb-2">
+        <p className="text-xs font-semibold text-foreground">{lead.name}</p>
         <StatusBadge status={status} className="rounded px-1.5 py-0.5 text-[9px]" />
       </div>
       {lead.email && (
-        <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{lead.email}</p>
-      )}
-      {lead.company && (
-        <p className="text-xs text-muted-foreground mt-1">{lead.company}</p>
-      )}
-      {lead.next_action && (
-        <p className="text-xs text-muted-foreground mt-1 line-clamp-1">{lead.next_action}</p>
+        <p className="text-[11px] text-muted-foreground mb-3 line-clamp-1">{lead.email}</p>
       )}
+      <div className="flex justify-between items-center text-[10px] text-muted-foreground">
+        <span className="font-medium">{lead.company ?? ""}</span>
+        <span>Tag +</span>
+      </div>
     </div>
   );
 }
@@ -171,7 +162,7 @@ export function LeadsKanbanBoard({ leads }: { leads: LeadWithTags[] }) {
       onDragEnd={handleDragEnd}
     >
       <div className="overflow-x-auto">
-        <div className="grid grid-cols-6 gap-3 min-w-[1080px]">
+        <div className="flex gap-4">
           {LEAD_COLUMNS.map((col) => (
             <DroppableColumn
               key={col.id}
@@ -185,10 +176,10 @@ export function LeadsKanbanBoard({ leads }: { leads: LeadWithTags[] }) {
 
       <DragOverlay dropAnimation={null}>
         {activeLead && (
-          <div className="bg-card rounded-lg border-2 border-primary px-3 py-2.5 shadow-xl rotate-1 pointer-events-none">
-            <p className="text-sm font-medium text-foreground">{activeLead.name}</p>
+          <div className="bg-card rounded-lg border-2 border-primary p-4 shadow-xl rotate-1 pointer-events-none">
+            <p className="text-xs font-semibold text-foreground mb-2">{activeLead.name}</p>
             {activeLead.company && (
-              <p className="text-xs text-muted-foreground">{activeLead.company}</p>
+              <p className="text-[10px] text-muted-foreground font-medium">{activeLead.company}</p>
             )}
           </div>
         )}
diff --git a/src/components/admin/leads/LeadsViewToggle.tsx b/src/components/admin/leads/LeadsViewToggle.tsx
index 1ef3e47..856db3c 100644
--- a/src/components/admin/leads/LeadsViewToggle.tsx
+++ b/src/components/admin/leads/LeadsViewToggle.tsx
@@ -51,7 +51,7 @@ export function LeadsViewToggle({
       </div>
 
       {view === "list" ? (
-        <LeadTable leads={filtered} options={options} />
+        <LeadTable leads={filtered} total={leads.length} options={options} />
       ) : (
         <LeadsKanbanBoard leads={filtered} />
       )}
diff --git a/src/components/ui/SegmentedToggle.tsx b/src/components/ui/SegmentedToggle.tsx
index 7b74fe7..cb008f5 100644
--- a/src/components/ui/SegmentedToggle.tsx
+++ b/src/components/ui/SegmentedToggle.tsx
@@ -21,7 +21,7 @@ export function SegmentedToggle<T extends string>({
   className?: string;
 }) {
   return (
-    <div className={cn("flex items-center gap-1 bg-muted rounded-lg p-1 w-fit", className)}>
+    <div className={cn("flex items-center gap-1 bg-slate-200/60 dark:bg-white/5 rounded-lg p-1 w-fit", className)}>
       {options.map((option) => {
         const active = option.value === value;
         return (
@@ -32,7 +32,7 @@ export function SegmentedToggle<T extends string>({
             className={cn(
               "px-3 py-1.5 rounded-md text-xs font-semibold transition-all duration-200",
               active
-                ? "bg-card text-primary shadow-sm"
+                ? "bg-card text-foreground shadow-sm"
                 : "text-muted-foreground hover:text-foreground"
             )}
           >
diff --git a/src/components/ui/option-multi-select.tsx b/src/components/ui/option-multi-select.tsx
index fb41394..c903773 100644
--- a/src/components/ui/option-multi-select.tsx
+++ b/src/components/ui/option-multi-select.tsx
@@ -81,37 +81,42 @@ export function OptionMultiSelect({
         onClick={() => !disabled && setIsOpen((v) => !v)}
         className={cn(
           "flex flex-wrap gap-1 items-center px-2 py-1 rounded transition-colors duration-150 min-h-[28px]",
+          values.length === 0 && "justify-center",
           disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-muted"
         )}
       >
         {values.length === 0 ? (
-          <span className="text-xs text-muted-foreground">—</span>
+          <span className="inline-flex items-center justify-center w-6 h-6 rounded-full border border-dashed border-border text-muted-foreground hover:text-foreground hover:border-muted-foreground transition-all">
+            <Plus className="h-3.5 w-3.5" />
+          </span>
         ) : (
-          values.map((v) => (
-            <Badge
-              key={v}
-              variant="outline"
-              className={cn(
-                getOptionColor(v),
-                "border-transparent text-xs px-2 py-0.5 gap-1 font-medium"
-              )}
-            >
-              {v}
-              <button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onRemove(v);
-                }}
-                className="hover:opacity-70"
-                aria-label={`Rimuovi ${v}`}
+          <>
+            {values.map((v) => (
+              <Badge
+                key={v}
+                variant="outline"
+                className={cn(
+                  getOptionColor(v),
+                  "border-transparent text-xs px-2 py-0.5 gap-1 font-medium"
+                )}
               >
-                <X className="h-3 w-3" />
-              </button>
-            </Badge>
-          ))
+                {v}
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onRemove(v);
+                  }}
+                  className="hover:opacity-70"
+                  aria-label={`Rimuovi ${v}`}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </Badge>
+            ))}
+            <Plus className="h-3.5 w-3.5 text-muted-foreground" />
+          </>
         )}
-        <Plus className="h-3.5 w-3.5 text-muted-foreground" />
       </div>
 
       {isOpen && (