style: rifinitura Quiet Luxury dashboard — bordi soft, badge, colori

Allinea la dashboard alla rifinitura del mock (finezza bordi/colori/badge):

- Card su border-border-light (slate-100) per il bordo sottile
- KPI: valore verde su Incassato Reale, delta verde "+N questo mese" su
  Clienti Attivi (nuova metrica getDashboardStats.clientiNuoviMese)
- Redditività: badge "Ottimo" con tint emerald soft (non brand primary)
- Follow-up: righe come box bordati (no avatar), link "Apri →" primary
- Forecast: selettore anno (pill interattiva) spostato nell'header della card,
  barre non-picco grigie (bg-border), rimosso il numero "mese prossimo"
- Offerte Più Richieste: rimossa la pill totale nell'header

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/admin/ForecastChart.tsx

@@ -1,22 +1,19 @@
+import type { ReactNode } from "react";
 import type { ForecastMonth } from "@/lib/forecast-queries";
 
-function fmtEur(n: number) {
-  return n.toLocaleString("it-IT", {
-    style: "currency",
-    currency: "EUR",
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0,
-  });
-}
-
-export function ForecastChart({ data }: { data: ForecastMonth[] }) {
+export function ForecastChart({
+  data,
+  headerAction,
+}: {
+  data: ForecastMonth[];
+  headerAction?: ReactNode;
+}) {
   const max = Math.max(...data.map((d) => d.total), 1);
-  // index 0 = mese corrente, index 1 = mese prossimo (evidenziato)
-  const nextMonth = data[1];
+  // index 1 = mese prossimo (evidenziato)
 
   return (
-    <div className="bg-card rounded-xl border border-border shadow-card p-6 space-y-6">
-      <div className="flex justify-between items-start">
+    <div className="bg-card rounded-xl border border-border-light shadow-card p-6">
+      <div className="flex justify-between items-center mb-6">
         <div>
           <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
             Previsione Flussi di Cassa (12 Mesi)
@@ -25,28 +22,19 @@ export function ForecastChart({ data }: { data: ForecastMonth[] }) {
             Stima basata su retainer attivi e saldi dilazionati
           </p>
         </div>
-        {nextMonth && (
-          <div className="text-right">
-            <p className="text-2xl font-bold tracking-tight text-primary font-mono">
-              {fmtEur(nextMonth.total)}
-            </p>
-            <p className="text-[11px] text-muted-foreground mt-0.5 capitalize">
-              Previsto {nextMonth.label}
-            </p>
-          </div>
-        )}
+        {headerAction}
       </div>
 
-      <div className="flex items-end gap-2 h-44 border-t border-border pt-4">
+      <div className="flex items-end gap-2 h-48 border-b border-border-light pt-4">
         {data.map((m, i) => {
           const pct = Math.round((m.total / max) * 100);
           const isNext = i === 1;
           return (
-            <div key={`${m.year}-${m.month}`} className="flex-1 flex flex-col items-center gap-1">
-              <div className="w-full flex flex-col justify-end" style={{ height: "120px" }}>
+            <div key={`${m.year}-${m.month}`} className="flex-1 flex flex-col items-center gap-2">
+              <div className="w-full flex flex-col justify-end" style={{ height: "150px" }}>
                 <div
-                  className={`w-full rounded-t-md transition-all ${
-                    isNext ? "bg-primary" : "bg-primary/35"
+                  className={`w-full rounded-t transition-all ${
+                    isNext ? "bg-primary" : "bg-border hover:bg-primary/50"
                   }`}
                   style={{ height: `${pct}%`, minHeight: m.total > 0 ? "4px" : "0" }}
                   title={`${m.label}: ${m.total.toLocaleString("it-IT", { style: "currency", currency: "EUR", minimumFractionDigits: 2 })}`}
@@ -54,7 +42,7 @@ export function ForecastChart({ data }: { data: ForecastMonth[] }) {
               </div>
               <span
                 className={`text-[10px] capitalize ${
-                  isNext ? "font-bold text-primary" : "text-muted-foreground"
+                  isNext ? "font-bold text-foreground" : "text-muted-foreground"
                 }`}
               >
                 {m.label.split(" ")[0]}

src/components/admin/OffersSoldChart.tsx

@@ -5,22 +5,17 @@ export function OffersSoldChart({ data }: { data: OffersSoldBreakdown }) {
 
   if (data.rows.length === 0) {
     return (
-      <div className="bg-card rounded-xl border border-border shadow-card p-8 text-center">
+      <div className="bg-card rounded-xl border border-border-light shadow-card p-8 text-center">
         <p className="text-sm text-muted-foreground italic">Nessuna offerta venduta finora.</p>
       </div>
     );
   }
 
   return (
-    <div className="bg-card rounded-xl border border-border shadow-card p-5 space-y-4">
-      <div className="flex items-center justify-between">
-        <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
-          Offerte Più Richieste
-        </h3>
-        <span className="inline-flex items-center justify-center min-w-[24px] h-6 px-2 rounded-full bg-primary text-primary-foreground text-xs font-bold font-mono">
-          {data.total}
-        </span>
-      </div>
+    <div className="bg-card rounded-xl border border-border-light shadow-card p-5 space-y-4">
+      <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+        Offerte Più Richieste
+      </h3>
       <div className="space-y-4">
         {data.rows.map((row, i) => {
           const pct = Math.round((row.count / max) * 100);

src/components/admin/YearSelector.tsx

@@ -11,10 +11,10 @@ export function YearSelector({ currentYear }: { currentYear: number }) {
   }
 
   return (
-    <div className="inline-flex items-center gap-1 rounded-full border border-border bg-card px-1 py-1 shadow-card">
+    <div className="inline-flex items-center gap-0.5 rounded-lg border border-border-light bg-muted/50 px-1 py-0.5">
       <button
         onClick={() => go(currentYear - 1)}
-        className="w-6 h-6 rounded-full flex items-center justify-center text-muted-foreground hover:bg-muted hover:text-primary transition-colors"
+        className="w-5 h-5 rounded flex items-center justify-center text-muted-foreground hover:text-primary transition-colors"
         aria-label="Anno precedente"
       >
         ←
@@ -25,7 +25,7 @@ export function YearSelector({ currentYear }: { currentYear: number }) {
       <button
         onClick={() => go(currentYear + 1)}
         disabled={currentYear >= thisYear}
-        className="w-6 h-6 rounded-full flex items-center justify-center text-muted-foreground hover:bg-muted hover:text-primary transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+        className="w-5 h-5 rounded flex items-center justify-center text-muted-foreground hover:text-primary transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
         aria-label="Anno successivo"
       >
         →

src/components/admin/dashboard/ClientProfitability.tsx

@@ -17,7 +17,7 @@ const MARGIN_LABEL: Record<ClientProfitabilityRow["margin"], string> = {
 
 export function ClientProfitability({ data }: { data: ClientProfitabilityRow[] }) {
   return (
-    <div className="bg-card rounded-xl border border-border shadow-card p-6">
+    <div className="bg-card rounded-xl border border-border-light shadow-card p-6">
       <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-4">
         Analisi Oraria &amp; Redditività Clienti
       </h3>
@@ -33,7 +33,7 @@ export function ClientProfitability({ data }: { data: ClientProfitabilityRow[] }
             return (
               <div
                 key={row.clientId}
-                className="flex items-center justify-between gap-4 p-3 rounded-lg border border-border bg-muted/30"
+                className="flex items-center justify-between gap-4 p-3 rounded-lg border border-border-light bg-muted/30"
               >
                 <div className="min-w-0">
                   <h4 className="text-xs font-semibold text-foreground truncate">
@@ -50,7 +50,7 @@ export function ClientProfitability({ data }: { data: ClientProfitabilityRow[] }
                   <span
                     className={`text-xs font-bold font-mono px-2 py-0.5 rounded border ${
                       isOttimo
-                        ? "text-primary bg-primary/10 border-primary/20"
+                        ? "text-emerald-700 bg-emerald-50 border-emerald-100 dark:text-emerald-400 dark:bg-emerald-500/10 dark:border-emerald-500/20"
                         : "text-foreground bg-muted border-border"
                     }`}
                   >

src/components/admin/dashboard/FollowUpWidget.tsx

@@ -3,13 +3,6 @@ import Link from "next/link";
 
 const MAX_ROWS = 4;
 
-function initials(name: string): string {
-  const parts = name.trim().split(/\s+/).filter(Boolean);
-  if (parts.length === 0) return "?";
-  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
-  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-}
-
 function relativeDays(date: Date | string | null | undefined): string | null {
   if (!date) return "Mai contattato";
   const d = date instanceof Date ? date : new Date(date);
@@ -25,13 +18,11 @@ export async function FollowUpWidget() {
 
   if (leads.length === 0) {
     return (
-      <div className="bg-card rounded-xl border border-border shadow-card px-5 py-4">
-        <div className="flex items-center gap-2">
-          <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
-            Follow-up Attivi
-          </h2>
-        </div>
-        <p className="text-sm text-muted-foreground mt-2">Tutti i lead sono aggiornati ✓</p>
+      <div className="bg-card rounded-xl border border-border-light shadow-card p-5">
+        <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+          Follow-up Attivi
+        </h3>
+        <p className="text-sm text-muted-foreground mt-3">Tutti i lead sono aggiornati ✓</p>
       </div>
     );
   }
@@ -39,58 +30,43 @@ export async function FollowUpWidget() {
   const visible = leads.slice(0, MAX_ROWS);
 
   return (
-    <div className="bg-card rounded-xl border border-border shadow-card overflow-hidden">
-      {/* Header */}
-      <div className="flex items-center justify-between px-5 py-3.5 border-b border-border">
-        <div className="flex items-center gap-2.5">
-          <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
-            Follow-up Attivi
-          </h2>
-          <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-amber-50 text-amber-700 border border-amber-100 text-[11px] font-bold dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/20">
-            {leads.length}
-          </span>
-        </div>
-        <Link
-          href="/admin/pipeline"
-          className="text-xs font-medium text-muted-foreground hover:text-primary transition-colors"
-        >
-          Vedi tutti →
-        </Link>
+    <div className="bg-card rounded-xl border border-border-light shadow-card p-5">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+          Follow-up Attivi
+        </h3>
+        <span className="text-[10px] font-bold bg-amber-50 text-amber-700 border border-amber-100 px-1.5 py-0.5 rounded-full dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/20">
+          {leads.length}
+        </span>
       </div>
 
-      {/* Lead rows */}
-      <ul className="divide-y divide-border">
-        {visible.map((lead) => (
-          <li key={lead.id}>
+      <div className="space-y-3">
+        {visible.map((lead) => {
+          const subtitle = lead.next_action
+            ? lead.next_action
+            : [lead.company, relativeDays(lead.last_contact_date)].filter(Boolean).join(" — ");
+          return (
             <Link
+              key={lead.id}
               href={`/admin/pipeline/${lead.id}`}
-              className="flex items-center gap-3 px-5 py-3 hover:bg-muted/40 transition-colors group"
+              className="flex items-center justify-between gap-3 p-3 border border-border-light rounded-lg hover:border-border transition-colors group"
             >
-              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-bold">
-                {initials(lead.name)}
-              </span>
-              <div className="min-w-0 flex-1">
-                <p className="text-sm font-semibold text-foreground truncate">{lead.name}</p>
-                <p className="text-xs text-muted-foreground truncate">
-                  {lead.next_action
-                    ? lead.next_action
-                    : [lead.company, relativeDays(lead.last_contact_date)]
-                        .filter(Boolean)
-                        .join(" · ")}
-                </p>
+              <div className="min-w-0">
+                <h4 className="text-xs font-bold text-foreground truncate">{lead.name}</h4>
+                <p className="text-[10px] text-muted-foreground truncate">{subtitle}</p>
               </div>
-              <span className="text-xs font-medium text-muted-foreground group-hover:text-primary transition-colors shrink-0">
-                Contatta →
+              <span className="text-[11px] font-bold text-primary group-hover:opacity-70 transition-opacity shrink-0 inline-flex items-center gap-0.5">
+                Apri →
               </span>
             </Link>
-          </li>
-        ))}
-      </ul>
+          );
+        })}
+      </div>
 
       {leads.length > MAX_ROWS && (
         <Link
           href="/admin/pipeline"
-          className="block px-5 py-2.5 text-center text-xs font-medium text-muted-foreground hover:text-primary border-t border-border transition-colors"
+          className="block mt-3 pt-3 text-center text-xs font-medium text-muted-foreground hover:text-primary border-t border-border-light transition-colors"
         >
           Vedi tutti i {leads.length} lead
         </Link>