From a20a9de2d7def198bf64db4155858f06b2e32466 Mon Sep 17 00:00:00 2001
From: Simone Cavalli <simone.cavalli.gestione@gmail.com>
Date: Sat, 11 Jul 2026 12:18:10 +0200
Subject: [PATCH] =?UTF-8?q?style:=20rifinitura=20Quiet=20Luxury=20dashboar?=
 =?UTF-8?q?d=20=E2=80=94=20bordi=20soft,=20badge,=20colori?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/app/admin/page.tsx                        | 54 ++++++------
 src/components/admin/ForecastChart.tsx        | 48 ++++-------
 src/components/admin/OffersSoldChart.tsx      | 15 ++--
 src/components/admin/YearSelector.tsx         |  6 +-
 .../admin/dashboard/ClientProfitability.tsx   |  6 +-
 .../admin/dashboard/FollowUpWidget.tsx        | 84 +++++++------------
 src/lib/dashboard-queries.ts                  | 11 ++-
 7 files changed, 95 insertions(+), 129 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index eb43536..7d09676 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -17,32 +17,34 @@ export const revalidate = 0;
 function MetricCard({
   label,
   value,
+  valueAccent,
+  delta,
   sub,
-  positive,
 }: {
   label: string;
   value: string;
+  valueAccent?: boolean;
+  delta?: string;
   sub?: string;
-  positive?: boolean;
 }) {
   return (
-    <div className="bg-card p-5 rounded-xl border border-border shadow-card">
+    <div className="bg-card p-5 rounded-xl border border-border-light shadow-card">
       <span className="text-[10px] uppercase font-bold text-muted-foreground tracking-wider">
         {label}
       </span>
       <div className="flex items-baseline gap-2 mt-1">
-        <span className="text-2xl font-bold text-foreground font-mono">{value}</span>
-        {sub && (
-          <span
-            className={`text-xs ${
-              positive
-                ? "font-medium text-emerald-600 dark:text-emerald-400"
-                : "text-muted-foreground"
-            }`}
-          >
-            {sub}
-          </span>
-        )}
+        <span
+          className={`text-2xl font-bold font-mono ${
+            valueAccent ? "text-emerald-700 dark:text-emerald-400" : "text-foreground"
+          }`}
+        >
+          {value}
+        </span>
+        {delta ? (
+          <span className="text-xs font-medium text-emerald-600 dark:text-emerald-400">{delta}</span>
+        ) : sub ? (
+          <span className="text-xs text-muted-foreground">{sub}</span>
+        ) : null}
       </div>
     </div>
   );
@@ -80,14 +82,14 @@ export default async function AdminDashboard({
 
   return (
     <div className="flex flex-col gap-8">
-      {/* Toolbar: selettore anno (governa i KPI year-scoped + redditività) */}
-      <div className="flex items-center justify-end">
-        <YearSelector currentYear={year} />
-      </div>
-
       {/* KPI strip */}
       <section className="grid grid-cols-2 lg:grid-cols-4 gap-6">
-        <MetricCard label="Clienti Attivi" value={String(kpi.clientiAttivi)} sub="Totale corrente" />
+        <MetricCard
+          label="Clienti Attivi"
+          value={String(kpi.clientiAttivi)}
+          delta={kpi.clientiNuoviMese > 0 ? `+${kpi.clientiNuoviMese} questo mese` : undefined}
+          sub="Totale corrente"
+        />
         <MetricCard
           label="Contrattualizzato"
           value={fmtEur0(data.contracted)}
@@ -96,21 +98,17 @@ export default async function AdminDashboard({
         <MetricCard
           label="Incassato Reale"
           value={fmtEur0(data.collected)}
+          valueAccent={data.collected > 0}
           sub={`${collectedPct}% del totale`}
-          positive={data.collected > 0}
-        />
-        <MetricCard
-          label="Ore Tracciate"
-          value={`${totalHours}h`}
-          sub="Su progetti attivi"
         />
+        <MetricCard label="Ore Tracciate" value={`${totalHours}h`} sub="Su progetti attivi" />
       </section>
 
       {/* Griglia contenuti: 2/3 + 1/3 */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
         {/* Colonna 2/3 */}
         <div className="lg:col-span-2 flex flex-col gap-8">
-          <ForecastChart data={forecast} />
+          <ForecastChart data={forecast} headerAction={<YearSelector currentYear={year} />} />
           <ClientProfitability data={profitability} />
         </div>
 
diff --git a/src/components/admin/ForecastChart.tsx b/src/components/admin/ForecastChart.tsx
index 6e979a2..08df5c4 100644
--- a/src/components/admin/ForecastChart.tsx
+++ b/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]}
diff --git a/src/components/admin/OffersSoldChart.tsx b/src/components/admin/OffersSoldChart.tsx
index 20e1153..5abfa48 100644
--- a/src/components/admin/OffersSoldChart.tsx
+++ b/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);
diff --git a/src/components/admin/YearSelector.tsx b/src/components/admin/YearSelector.tsx
index 5757ad2..ddf8b25 100644
--- a/src/components/admin/YearSelector.tsx
+++ b/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"
       >
         →
diff --git a/src/components/admin/dashboard/ClientProfitability.tsx b/src/components/admin/dashboard/ClientProfitability.tsx
index cbf5137..7169436 100644
--- a/src/components/admin/dashboard/ClientProfitability.tsx
+++ b/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"
                     }`}
                   >
diff --git a/src/components/admin/dashboard/FollowUpWidget.tsx b/src/components/admin/dashboard/FollowUpWidget.tsx
index dd3e726..4bfe7d5 100644
--- a/src/components/admin/dashboard/FollowUpWidget.tsx
+++ b/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>
diff --git a/src/lib/dashboard-queries.ts b/src/lib/dashboard-queries.ts
index e2cafc3..7469314 100644
--- a/src/lib/dashboard-queries.ts
+++ b/src/lib/dashboard-queries.ts
@@ -1,9 +1,10 @@
 import { db } from "@/db";
 import { clients, projects, payments } from "@/db/schema";
-import { eq, sum, count } from "drizzle-orm";
+import { eq, sum, count, sql } from "drizzle-orm";
 
 export type KpiStats = {
   clientiAttivi: number;
+  clientiNuoviMese: number;    // clients created in the current calendar month
   revenueTotale: string;       // sum of projects.accepted_total (non-archived)
   pagamentiInSospeso: string;  // sum of payments.amount where status = 'da_saldare' or 'inviata'
   progettiInCorso: number;     // projects not archived
@@ -20,6 +21,13 @@ export async function getDashboardStats(): Promise<DashboardStats> {
     .from(clients)
     .where(eq(clients.archived, false));
 
+  const [clientiNuoviMeseRow] = await db
+    .select({ count: count() })
+    .from(clients)
+    .where(
+      sql`date_trunc('month', ${clients.created_at}) = date_trunc('month', now())`
+    );
+
   const [revenueRow] = await db
     .select({ total: sum(projects.accepted_total) })
     .from(projects)
@@ -46,6 +54,7 @@ export async function getDashboardStats(): Promise<DashboardStats> {
 
   const kpi: KpiStats = {
     clientiAttivi: clientiAttiviRow?.count ?? 0,
+    clientiNuoviMese: clientiNuoviMeseRow?.count ?? 0,
     revenueTotale: revenueRow?.total ?? "0",
     pagamentiInSospeso: pagamentiSospeso.toFixed(2),
     progettiInCorso: progettiRow?.count ?? 0,