feat: Lead Details redesign to Quiet Luxury + unified interaction timeline

Rewrite /admin/pipeline/[id] LeadDetail with token-based dual-theme layout:
bespoke header with inline StatusBadge, asymmetric 1/3 profile + 2/3 content
columns, and a unified reverse-chronological timeline merging activities and
transcripts (transcript node highlighted + expandable + deletable).

Restyle modal triggers (Registra Attività, Aggiungi Transcript, Modifica-as-icon)
to the mock outline style. Remove the confusing "Invia Preventivo" button (it only
linked a token + advanced stage, no email). Keep Converti in cliente for won leads.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-11 11:33:18 +02:00
parent c110689b6a
commit e5fa07bba3
6 changed files with 691 additions and 208 deletions
+9
View File
@@ -147,6 +147,15 @@ across all future admin pages.
| `LeadsKanbanBoard` | `src/components/admin/leads/LeadsKanbanBoard.tsx` | Kanban restyle: `bg-muted/60` columns with count pills, `bg-card` cards with `hover:border-primary/30`. Uses `@dnd-kit`, keeps all 6 lead stages. |
| `LeadsViewToggle` | `src/components/admin/leads/LeadsViewToggle.tsx` | Wires `SearchInput` + `SegmentedToggle` together with the table/kanban views. |
| `MilestoneStepper` | `src/components/client/MilestoneStepper.tsx` | Client-portal horizontal milestone stepper: one node per real phase, connecting line filled by `global_progress_pct`. Done = filled `bg-primary` ✓, active = `border-primary` outline, upcoming = `bg-muted`. |
| `LeadDetail` | `src/components/admin/leads/LeadDetail.tsx` | Lead detail page (`/admin/pipeline/[id]`): bespoke header (name + inline `StatusBadge` + action bar), asymmetric `lg:grid-cols-3` layout (1/3 profile card w/ icon-chip rows + tags, 2/3 Note/Follow-up + unified timeline). |
**Unified timeline pattern**: activities + transcripts merged into one
reverse-chronological "Storico delle Interazioni". Vertical connector = absolute
`w-px bg-border` at `left-[19px]` behind `w-10 h-10 rounded-full` nodes.
Transcript node is highlighted (`bg-primary text-primary-foreground`) and
expandable (`line-clamp-2` → "Mostra tutto/meno"); activity nodes are muted
(`bg-muted border-border`). Dates are `font-mono` — activities relative
(`formatDistanceToNow`), transcripts absolute (`d MMMM yyyy`).
### Client Portal restyle notes