feat: pagina Clienti redesign Quiet Luxury — tabella tokenizzata + copia link

- /admin/clients replica design-reference/pagina-clienti (dual light/dark via token)
- ClientRow: colonne numeriche font-mono right-aligned, incassato come pill emerald,
  cella "Link profilo" con pill mono troncata + CopyLinkButton
- nuovo primitivo CopyLinkButton (copia URL assoluto, feedback check emerald)
- PageHeader con sottotitolo + footer conteggio clienti
- DESIGN-SYSTEM.md: inventory (CopyLinkButton, ClientRow) + note pagina Clienti

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-11 16:32:34 +02:00
parent a1d8d18902
commit c1ff5a7e67
5 changed files with 151 additions and 48 deletions
+19
View File
@@ -152,6 +152,8 @@ across all future admin pages.
| `YearSelector` | `src/components/admin/YearSelector.tsx` | Selettore anno restilizzato a pill (`rounded-full border-border bg-card shadow-card`), frecce ←/→, valore `font-mono`. Guida i dati year-scoped della dashboard via `?year=`. |
| `ConversationsView` | `src/components/admin/conversazioni/ConversationsView.tsx` | Inbox messaggi clienti (`/admin/conversazioni`) a due pannelli: lista conversazioni filtrabile (search su nome/brand/ultimo messaggio, pallino unread) + thread attivo con bolle messaggio (admin a destra `bg-primary`, cliente a sinistra), badge entità per messaggio (Generale/Fase/Task/Deliverable) e form di risposta. Auto-mark-read all'apertura. |
| `MessagesWidget` | `src/components/admin/dashboard/MessagesWidget.tsx` | Widget dashboard "Messaggi Clienti": chat clienti in attesa di risposta (`getConversations()` filtrato su `unread`), pill emerald "N Nuovi" + pallino pulsante, righe con anteprima e link `Rispondi →` deep-link a `/admin/conversazioni?c=<clientId>`. Empty state "Nessun messaggio in attesa ✓". |
| `CopyLinkButton` | `src/components/admin/CopyLinkButton.tsx` | Icon button che copia un URL assoluto (`window.location.origin + path`) negli appunti; swap icona → check emerald per 1.5s con tooltip "Copiato!". Usato nella lista Clienti per il link profilo pubblico. |
| `ClientRow` | `src/components/admin/ClientRow.tsx` | Riga tabella Clienti restilizzata Quiet Luxury: nome link → dettaglio + sottotitolo brand/progetti, colonne numeriche `font-mono` right-aligned (LTV, incassato come pill emerald, da saldare), cella "Link profilo" con pill mono troncata (apre portale in new tab) + `CopyLinkButton`. |
**Unified timeline pattern**: activities + transcripts merged into one
reverse-chronological "Storico delle Interazioni". Vertical connector = absolute
@@ -201,6 +203,23 @@ in un unico thread ordinato, con badge entità per messaggio.
`admin_last_read_at` (mark-read). L'apertura di una conversazione fa
auto-mark-read. Deep-link a un thread specifico via `?c=<clientId>`.
### Clienti (lista) notes
`/admin/clients` migrata a "Quiet Luxury" (replica `design-reference/pagina-clienti`).
Tabella `bg-card rounded-xl border-border shadow-card` con header uppercase muted e
righe `py-4 px-6` / `divide-y divide-border` / `hover:bg-muted/40`.
- **Colonne**: Cliente (nome link → `/admin/clients/[id]` + sottotitolo
brand/progetti) a sinistra; LTV, Importo incassato, Importo da saldare, Link
profilo tutte right-aligned. Valori monetari `font-mono`; "incassato" reso come
pill emerald (`bg-emerald-50 text-emerald-700` + variante dark), zero → `` muted.
- **Link profilo**: pill mono troncata (`/client/<slug|token>…`) che apre il portale
in new tab + `CopyLinkButton` (copia URL assoluto).
- **Header actions**: link testuale "Mostra/Nascondi archiviati" (`?archived=1`) +
Button primario "Nuovo cliente". Footer tabella "Mostrando N clienti attivi"
(singolare/plurale gestiti).
- Le righe archiviate restano `opacity-60` con pill "Archiviato".
### Client Portal restyle notes
The `/client/[token]` portal was migrated to the same "Quiet Luxury" tokens