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>

.claude/settings.json

@@ -0,0 +1,31 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__plugin_claude-mem_mcp-search__get_observations",
+      "Bash(rtk tsc *)",
+      "Bash(rtk git *)",
+      "Bash(rtk grep *)",
+      "Read(//Users/simonecavalli/.claude/get-shit-done/references/**)",
+      "Skill(gsd-execute-phase)",
+      "Skill(gsd-execute-phase:*)",
+      "Skill(gsd-plan-phase)",
+      "Skill(gsd-plan-phase:*)",
+      "Skill(gsd-progress)",
+      "Skill(gsd-progress:*)",
+      "Skill(gsd-complete-milestone)",
+      "Skill(gsd-complete-milestone:*)",
+      "Read(//Users/simonecavalli/Downloads/**)"
+    ]
+  },
+  "enabledPlugins": {
+    "impeccable@impeccable": true
+  },
+  "extraKnownMarketplaces": {
+    "impeccable": {
+      "source": {
+        "source": "github",
+        "repo": "pbakaus/impeccable"
+      }
+    }
+  }
+}

design-reference/DESIGN-SYSTEM.md

@@ -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

src/app/admin/clients/page.tsx

@@ -16,10 +16,10 @@ export default async function AdminClientsPage({
   const clients = await getAllClientsWithPayments(showArchived);
 
   const clientiAction = (
-    <div className="flex items-center gap-3">
+    <div className="flex items-center gap-4 self-start sm:self-auto">
       <a
         href={showArchived ? "/admin/clients" : "/admin/clients?archived=1"}
-        className="text-xs text-[#71717a] hover:text-[#1A463C] underline underline-offset-2"
+        className="text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
       >
         {showArchived ? "Nascondi archiviati" : "Mostra archiviati"}
       </a>
@@ -31,37 +31,48 @@ export default async function AdminClientsPage({
 
   return (
     <div className="space-y-6">
-      <PageHeader title="Clienti" action={clientiAction} />
+      <PageHeader
+        title="Clienti"
+        subtitle="Monitora i rapporti finanziari e i dettagli dei clienti attivi"
+        action={clientiAction}
+      />
 
       {clients.length === 0 ? (
-        <div className="text-center py-20 text-[#71717a]">
+        <div className="text-center py-20 text-muted-foreground">
           <p>{showArchived ? "Nessun cliente archiviato." : "Nessun cliente ancora."}</p>
           {!showArchived && (
             <p className="mt-2">
-              <Link href="/admin/clients/new" className="text-[#1A463C] hover:underline font-medium">
+              <Link href="/admin/clients/new" className="text-primary hover:underline font-medium">
                 Crea il primo cliente
               </Link>
             </p>
           )}
         </div>
       ) : (
-        <div className="bg-white rounded-lg border border-[#e5e7eb] overflow-hidden">
-          <table className="w-full text-sm">
-            <thead className="bg-[#f9f9f9] border-b border-[#e5e7eb]">
-              <tr>
-                <th className="text-left py-3 px-4 font-medium text-[#71717a]">Cliente</th>
-                <th className="text-left py-3 px-4 font-medium text-[#71717a]">LTV</th>
-                <th className="text-left py-3 px-4 font-medium text-[#71717a]">Importo incassato</th>
-                <th className="text-left py-3 px-4 font-medium text-[#71717a]">Importo da saldare</th>
-                <th className="text-left py-3 px-4 font-medium text-[#71717a]">Link</th>
-              </tr>
-            </thead>
-            <tbody>
-              {clients.map((client) => (
-                <ClientRow key={client.id} client={client} />
-              ))}
-            </tbody>
-          </table>
+        <div className="bg-card rounded-xl border border-border shadow-card overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm border-collapse">
+              <thead>
+                <tr className="border-b border-border bg-muted/50 text-muted-foreground text-[11px] font-semibold uppercase tracking-wider">
+                  <th className="py-4 px-6 text-left w-1/4">Cliente</th>
+                  <th className="py-4 px-6 text-right">LTV</th>
+                  <th className="py-4 px-6 text-right">Importo incassato</th>
+                  <th className="py-4 px-6 text-right">Importo da saldare</th>
+                  <th className="py-4 px-6 text-right">Link profilo</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border">
+                {clients.map((client) => (
+                  <ClientRow key={client.id} client={client} />
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="border-t border-border px-6 py-4 text-xs text-muted-foreground">
+            Mostrando {clients.length}{" "}
+            {clients.length === 1 ? "cliente" : "clienti"}
+            {showArchived ? "" : clients.length === 1 ? " attivo" : " attivi"}
+          </div>
         </div>
       )}
     </div>

src/components/admin/ClientRow.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import type { ClientWithPayments } from "@/lib/admin-queries";
+import { CopyLinkButton } from "@/components/admin/CopyLinkButton";
 
 function fmt(amount: number) {
   return `€${amount.toLocaleString("it-IT", { minimumFractionDigits: 2 })}`;
@@ -14,52 +15,59 @@ export function ClientRow({ client }: { client: ClientWithPayments }) {
     .filter((p) => p.status !== "saldato")
     .reduce((sum, p) => sum + parseFloat(p.amount || "0"), 0);
 
+  const slug = client.slug || client.token;
+  const path = `/client/${slug}`;
+
   return (
-    <tr className={`border-b border-[#f4f4f5] hover:bg-[#f9f9f9] transition-colors ${client.archived ? "opacity-60" : ""}`}>
-      <td className="py-3 px-4">
+    <tr className={`hover:bg-muted/40 transition-colors ${client.archived ? "opacity-60" : ""}`}>
+      <td className="py-4 px-6">
         <Link
           href={`/admin/clients/${client.id}`}
-          className="font-medium text-[#1a1a1a] hover:text-[#1A463C] hover:underline"
+          className="font-semibold text-foreground hover:text-primary transition-colors"
         >
           {client.name}
         </Link>
         {client.projectBrands && client.projectBrands.length > 0 ? (
-          <p className="text-xs text-[#71717a] mt-0.5">{client.projectBrands.join(" | ")}</p>
+          <p className="text-[11px] text-muted-foreground mt-0.5">{client.projectBrands.join(" | ")}</p>
         ) : (
-          <p className="text-xs text-[#71717a]">{client.brand_name}</p>
+          client.brand_name && (
+            <p className="text-[11px] text-muted-foreground mt-0.5">{client.brand_name}</p>
+          )
         )}
         {client.archived && (
-          <span className="text-[10px] text-[#71717a] bg-[#f4f4f5] px-1.5 py-0.5 rounded-full">
+          <span className="inline-block mt-1 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded-full">
             Archiviato
           </span>
         )}
       </td>
-      <td className="py-3 px-4 text-sm text-[#1a1a1a]">
+      <td className="py-4 px-6 text-right font-mono font-medium text-foreground">
         {fmt(parseFloat(client.ltv))}
       </td>
-      <td className="py-3 px-4 text-sm text-[#1a1a1a]">
+      <td className="py-4 px-6 text-right">
         {incassato > 0 ? (
-          <span className="text-[#16a34a] font-medium">{fmt(incassato)}</span>
+          <span className="inline-flex items-center px-2.5 py-0.5 rounded font-mono text-xs font-semibold bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400">
+            {fmt(incassato)}
+          </span>
         ) : (
-          <span className="text-[#71717a]">—</span>
+          <span className="text-muted-foreground/50">—</span>
         )}
       </td>
-      <td className="py-3 px-4 text-sm">
-        {daSaldare > 0 ? (
-          <span className="text-[#1a1a1a]">{fmt(daSaldare)}</span>
-        ) : (
-          <span className="text-[#71717a]">—</span>
-        )}
+      <td className="py-4 px-6 text-right font-mono font-medium text-muted-foreground">
+        {daSaldare > 0 ? fmt(daSaldare) : <span className="text-muted-foreground/50">—</span>}
       </td>
-      <td className="py-3 px-4">
-        <a
-          href={`/client/${client.slug || client.token}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-xs text-[#1A463C] hover:underline font-mono"
-        >
-          /client/{(client.slug || client.token).slice(0, 12)}…
-        </a>
+      <td className="py-4 px-6 text-right">
+        <div className="inline-flex items-center gap-2 justify-end">
+          <a
+            href={path}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs font-mono text-muted-foreground bg-muted px-2 py-1 rounded border border-border hover:text-foreground transition-colors"
+            title={path}
+          >
+            /client/{slug.slice(0, 12)}…
+          </a>
+          <CopyLinkButton path={path} title="Copia link profilo" />
+        </div>
       </td>
     </tr>
   );

src/components/admin/CopyLinkButton.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useState } from "react";
+
+export function CopyLinkButton({ path, title = "Copia link" }: { path: string; title?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  function handleCopy() {
+    const url = typeof window !== "undefined" ? `${window.location.origin}${path}` : path;
+    navigator.clipboard?.writeText(url).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      title={copied ? "Copiato!" : title}
+      className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+    >
+      {copied ? (
+        <svg className="w-4 h-4 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+        </svg>
+      ) : (
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={1.8} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+        </svg>
+      )}
+    </button>
+  );
+}