diff --git a/src/app/admin/analytics/page.tsx b/src/app/admin/analytics/page.tsx
new file mode 100644
index 0000000..5d894f9
--- /dev/null
+++ b/src/app/admin/analytics/page.tsx
@@ -0,0 +1,97 @@
+import { getAnalyticsByYear, getMonthlyCollected, getAvailableYears } from "@/lib/analytics-queries";
+import { YearSelector, MonthlyChart } from "@/components/admin/YearSelector";
+
+export const revalidate = 0;
+
+function fmt(n: number) {
+ return n.toLocaleString("it-IT", { style: "currency", currency: "EUR", minimumFractionDigits: 2 });
+}
+
+interface MetricCardProps {
+ label: string;
+ value: string;
+ sub?: string;
+ accent?: boolean;
+}
+
+function MetricCard({ label, value, sub, accent }: MetricCardProps) {
+ return (
+
+
+ {label}
+
+
+ {value}
+
+ {sub && (
+
{sub}
+ )}
+
+ );
+}
+
+export default async function AnalyticsPage({
+ searchParams,
+}: {
+ searchParams: Promise<{ year?: string }>;
+}) {
+ const { year: yearParam } = await searchParams;
+ const year = parseInt(yearParam ?? "") || new Date().getFullYear();
+
+ const [data, monthly, availableYears] = await Promise.all([
+ getAnalyticsByYear(year),
+ getMonthlyCollected(year),
+ getAvailableYears(),
+ ]);
+
+ const collectedPct = data.contracted > 0
+ ? Math.round((data.collected / data.contracted) * 100)
+ : 0;
+
+ return (
+
+ {/* Header */}
+
+
+
Statistiche
+
Panoramica finanziaria per anno
+
+
+
+
+ {/* Metrics grid */}
+
+
+
+
+
+
+
+ {/* Monthly chart */}
+
+
+ {data.contracted === 0 && (
+
+ Nessun cliente registrato nel {year}.
+
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/admin/NavBar.tsx b/src/components/admin/NavBar.tsx
index 5035761..687e534 100644
--- a/src/components/admin/NavBar.tsx
+++ b/src/components/admin/NavBar.tsx
@@ -9,12 +9,12 @@ export function NavBar() {
iamcavalli
-
+
Clienti
+
+ Statistiche
+
+ go(currentYear - 1)}
+ className="w-8 h-8 rounded-lg border border-[#e5e7eb] flex items-center justify-center text-[#71717a] hover:border-[#1A463C] hover:text-[#1A463C] transition-colors"
+ aria-label="Anno precedente"
+ >
+ ←
+
+
+ {currentYear}
+
+ go(currentYear + 1)}
+ disabled={currentYear >= thisYear}
+ className="w-8 h-8 rounded-lg border border-[#e5e7eb] flex items-center justify-center text-[#71717a] hover:border-[#1A463C] hover:text-[#1A463C] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+ aria-label="Anno successivo"
+ >
+ →
+
+
+ );
+}
+
+export function MonthlyChart({ data, year }: { data: number[]; year: number }) {
+ const max = Math.max(...data, 1);
+
+ return (
+
+
Incassato mese per mese — {year}
+
+ {data.map((val, i) => {
+ const pct = Math.round((val / max) * 100);
+ return (
+
+
+
0 ? "4px" : "0" }}
+ title={`€ ${val.toLocaleString("it-IT", { minimumFractionDigits: 2 })}`}
+ />
+
+
{MONTHS[i]}
+
+ );
+ })}
+
+
+ );
+}
\ No newline at end of file