feat: offer badges, unified dashboard, income forecast, Pipedrive-style follow-up

- Client detail: category + tier badges on active offers
- Dashboard: remove top KPI cards + recent activity; fold current KPIs into
  bottom MetricCard style; add 12-month income forecast chart
- Forecast query: branch by offer_type (retainer = monthly fee, una_tantum =
  spread over duration), filter archived projects
- Payments: set the month a payment was collected (paid_at) from PaymentsTab
- Redesign FollowUpWidget in clean Pipedrive style (brand green, no orange)

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

src/components/admin/ForecastChart.tsx

@@ -0,0 +1,61 @@
+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[] }) {
+  const max = Math.max(...data.map((d) => d.total), 1);
+  // index 0 = mese corrente, index 1 = mese prossimo (evidenziato)
+  const nextMonth = data[1];
+
+  return (
+    <div className="bg-white rounded-xl border border-[#e5e7eb] p-6 space-y-5">
+      {nextMonth && (
+        <div className="flex items-baseline justify-between">
+          <div>
+            <p className="text-xs font-bold uppercase tracking-wider text-[#71717a]">
+              Previsto il mese prossimo
+            </p>
+            <p className="text-xs text-[#a1a1aa] mt-0.5 capitalize">{nextMonth.label}</p>
+          </div>
+          <p className="text-2xl font-bold tracking-tight text-[#1A463C]">
+            {fmtEur(nextMonth.total)}
+          </p>
+        </div>
+      )}
+
+      <div className="flex items-end gap-2 h-44 border-t border-[#f4f4f5] 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
+                  className={`w-full rounded-t-md transition-all ${
+                    isNext ? "bg-[#1A463C]" : "bg-[#1A463C]/35"
+                  }`}
+                  style={{ height: `${pct}%`, minHeight: m.total > 0 ? "4px" : "0" }}
+                  title={`${m.label}: ${m.total.toLocaleString("it-IT", { style: "currency", currency: "EUR", minimumFractionDigits: 2 })}`}
+                />
+              </div>
+              <span
+                className={`text-[10px] capitalize ${
+                  isNext ? "font-bold text-[#1A463C]" : "text-[#71717a]"
+                }`}
+              >
+                {m.label.split(" ")[0]}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/admin/dashboard/FollowUpWidget.tsx

@@ -1,46 +1,96 @@
 import { getLeadsNeedingFollowUp } from "@/lib/lead-service";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { AlertCircle } from "lucide-react";
 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);
+  const diffMs = Date.now() - d.getTime();
+  const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+  if (days <= 0) return "Contattato oggi";
+  if (days === 1) return "Contattato ieri";
+  return `Contattato ${days} giorni fa`;
+}
+
 export async function FollowUpWidget() {
-  const leadsNeedingFollowUp = await getLeadsNeedingFollowUp(7);
+  const leads = await getLeadsNeedingFollowUp(7);
+
+  if (leads.length === 0) {
+    return (
+      <div className="bg-white rounded-xl border border-[#e5e7eb] px-5 py-4">
+        <div className="flex items-center gap-2">
+          <h2 className="text-sm font-bold text-[#1a1a1a]">Follow-up</h2>
+        </div>
+        <p className="text-sm text-[#71717a] mt-2">Tutti i lead sono aggiornati ✓</p>
+      </div>
+    );
+  }
+
+  const visible = leads.slice(0, MAX_ROWS);
 
   return (
-    <Card className="border-orange-200 bg-orange-50">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <AlertCircle className="h-5 w-5 text-orange-600" />
-          Richiedi Follow-up
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {leadsNeedingFollowUp.length > 0 ? (
-          <>
-            <p className="text-lg font-bold text-orange-900">
-              {leadsNeedingFollowUp.length} lead da contattare
-            </p>
-            <ul className="space-y-2 text-sm">
-              {leadsNeedingFollowUp.slice(0, 3).map((lead) => (
-                <li key={lead.id} className="flex justify-between items-center">
-                  <span>{lead.name}</span>
-                  <Button variant="ghost" size="sm" asChild>
-                    <Link href={`/admin/leads/${lead.id}`}>Contatta</Link>
-                  </Button>
-                </li>
-              ))}
-            </ul>
-            {leadsNeedingFollowUp.length > 3 && (
-              <Button variant="outline" className="w-full" asChild>
-                <Link href="/admin/leads">Vedi Tutto ({leadsNeedingFollowUp.length})</Link>
-              </Button>
-            )}
-          </>
-        ) : (
-          <p className="text-gray-600 text-sm">Tutti i lead sono aggiornati!</p>
-        )}
-      </CardContent>
-    </Card>
+    <div className="bg-white rounded-xl border border-[#e5e7eb] overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-3.5 border-b border-[#f4f4f5]">
+        <div className="flex items-center gap-2.5">
+          <h2 className="text-sm font-bold text-[#1a1a1a]">Follow-up</h2>
+          <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-[#1A463C] text-white text-[11px] font-bold">
+            {leads.length}
+          </span>
+        </div>
+        <Link
+          href="/admin/leads"
+          className="text-xs font-medium text-[#71717a] hover:text-[#1A463C] transition-colors"
+        >
+          Vedi tutti →
+        </Link>
+      </div>
+
+      {/* Lead rows */}
+      <ul className="divide-y divide-[#f4f4f5]">
+        {visible.map((lead) => (
+          <li key={lead.id}>
+            <Link
+              href={`/admin/leads/${lead.id}`}
+              className="flex items-center gap-3 px-5 py-3 hover:bg-[#f9f9f9] transition-colors group"
+            >
+              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#1A463C]/10 text-[#1A463C] text-xs font-bold">
+                {initials(lead.name)}
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-semibold text-[#1a1a1a] truncate">{lead.name}</p>
+                <p className="text-xs text-[#71717a] truncate">
+                  {lead.next_action
+                    ? lead.next_action
+                    : [lead.company, relativeDays(lead.last_contact_date)]
+                        .filter(Boolean)
+                        .join(" · ")}
+                </p>
+              </div>
+              <span className="text-xs font-medium text-[#71717a] group-hover:text-[#1A463C] transition-colors shrink-0">
+                Contatta →
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+
+      {leads.length > MAX_ROWS && (
+        <Link
+          href="/admin/leads"
+          className="block px-5 py-2.5 text-center text-xs font-medium text-[#71717a] hover:text-[#1A463C] border-t border-[#f4f4f5] transition-colors"
+        >
+          Vedi tutti i {leads.length} lead
+        </Link>
+      )}
+    </div>
   );
 }

src/components/admin/tabs/PaymentsTab.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import {
   updatePaymentStatus,
   updateAcceptedTotal,
+  setPaymentPaidAt,
 } from "@/app/admin/clients/[id]/actions";
 import { setPaymentPlan } from "@/app/admin/projects/project-actions";
 import { Button } from "@/components/ui/button";
@@ -27,6 +28,16 @@ const statusLabels: Record<string, string> = {
   saldato: "Saldato",
 };
 
+// paid_at (Date | string | null, serializzato sul confine RSC) → "YYYY-MM" per <input type="month">
+function toMonthValue(paidAt: Date | string | null | undefined): string {
+  if (!paidAt) {
+    const now = new Date();
+    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
+  }
+  const d = paidAt instanceof Date ? paidAt : new Date(paidAt);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
+}
+
 type PlanMode = "single" | "two" | "three";
 
 const planOptions: { mode: PlanMode; label: string; description: string }[] = [
@@ -90,6 +101,17 @@ export function PaymentsTab({
     }
   }
 
+  async function handlePaidMonthUpdate(paymentId: string, monthStr: string) {
+    if (!monthStr) return;
+    setStatusLoading(paymentId);
+    try {
+      await setPaymentPaidAt(paymentId, clientId, monthStr);
+      router.refresh();
+    } finally {
+      setStatusLoading(null);
+    }
+  }
+
   return (
     <div className="space-y-6 max-w-md">
       {/* Totale preventivo */}
@@ -240,6 +262,21 @@ export function PaymentsTab({
                 <span className="text-xs text-[#71717a]">...</span>
               )}
             </div>
+            {p.status === "saldato" && (
+              <div className="flex items-center gap-2 mt-2">
+                <Label htmlFor={`paid-${p.id}`} className="text-xs text-[#71717a] shrink-0">
+                  Incassato nel mese
+                </Label>
+                <input
+                  id={`paid-${p.id}`}
+                  type="month"
+                  defaultValue={toMonthValue(p.paid_at)}
+                  disabled={statusLoading === p.id}
+                  onChange={(e) => handlePaidMonthUpdate(p.id, e.target.value)}
+                  className="text-sm border border-gray-200 rounded px-2 py-1 bg-white"
+                />
+              </div>
+            )}
           </div>
         );
       })}