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>

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,53 +15,60 @@ 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>
+  );
+}