Dashboard amministratore e profilo per il tesseramento

Implementa la voce "Dashboard amministratore" della roadmap v1.1, come descritta in docs/modules/profilo-giocatore.md, insieme alla parte di profilo che la alimenta. - /admin: stato dei profili della squadra, download di documento, certificato e foto tessera, export CSV con i 12 campi del tesseramento CSI. Un certificato scaduto non conta come valido. - Profilo giocatore: dati personali, documento (fronte e retro), certificato e foto tessera, con widget di completamento in Home che sparisce al 100%. - I permessi di amministrazione arrivano da user_roles (DD-011) e non più dalla lista di nomi in crapp-data.ts, che resta come ponte finché VITE_AUTH_OBBLIGATORIA non viene acceso in produzione. - Login Google via Supabase Auth: al primo accesso l'account si collega a uno slot libero di giocatori_squadra, e il vincolo lo fa rispettare il trigger di M1 (DD-016 regola 2). Migration additive: M2 crea profili_giocatore, M3 il bucket privato profili-giocatore. Nessuna tabella v1.0 viene toccata, quindi si possono applicare senza cambiare il comportamento attuale dell'app. supabase/config.toml e seed.sql configurano lo stack locale: serve perché il progetto Supabase è uno solo, condiviso tra sviluppo e produzione. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-30 17:57:59 +02:00
parent ea29f053e3
commit da51517ffc
23 changed files with 1635 additions and 63 deletions
@@ -0,0 +1,280 @@
+import { useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { ChevronDown, Download, FileText, IdCard, Image, Loader2, Lock } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { PageHeader, Section, StatTile } from "@/components/crapp/ui-bits";
+import { useGiocatoriSquadra, nomeCompleto } from "@/lib/giocatori-squadra";
+import { useProfili, scaricaFile } from "@/lib/profili";
+import {
+  completamento,
+  csvTesseramento,
+  sezioniComplete,
+  statoScadenza,
+  type Profilo,
+  type StatoScadenza,
+} from "@/lib/profili-core";
+import { oggiISO } from "@/lib/palloni-core";
+import { scaricaCsv } from "@/lib/scout-export";
+import { useIsAdmin } from "@/lib/ruoli";
+import { Reveal } from "@/components/motion/Reveal";
+
+export const Route = createFileRoute("/admin")({
+  head: () => ({
+    meta: [
+      { title: "Dashboard amministratore — CrAPP" },
+      {
+        name: "description",
+        content:
+          "Area riservata: stato dei profili, documenti e certificati della squadra, ed export dei dati per il tesseramento CSI.",
+      },
+      { property: "og:title", content: "Dashboard amministratore — CrAPP" },
+      {
+        property: "og:description",
+        content: "Stato dei profili della squadra ed export per il tesseramento CSI.",
+      },
+    ],
+  }),
+  component: Dashboard,
+});
+
+const statoClasse: Record<StatoScadenza | "presente" | "assente", string> = {
+  valido: "bg-success text-success-foreground",
+  presente: "bg-success text-success-foreground",
+  scaduto: "bg-destructive text-destructive-foreground",
+  mancante: "bg-secondary text-muted-foreground",
+  assente: "bg-secondary text-muted-foreground",
+};
+
+function Riga({ etichetta, valore }: { etichetta: string; valore: string | null }) {
+  return (
+    <div className="flex items-baseline justify-between gap-3 py-1 text-sm">
+      <span className="shrink-0 text-muted-foreground">{etichetta}</span>
+      <span className="truncate text-right font-medium">{valore || "—"}</span>
+    </div>
+  );
+}
+
+function Documento({
+  icona,
+  label,
+  stato,
+  path,
+}: {
+  icona: React.ReactNode;
+  label: string;
+  stato: StatoScadenza | "presente" | "assente";
+  path: string | null;
+}) {
+  const [inCorso, setInCorso] = useState(false);
+
+  async function scarica() {
+    if (!path || inCorso) return;
+    setInCorso(true);
+    try {
+      await scaricaFile(path);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Download non riuscito");
+    } finally {
+      setInCorso(false);
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={scarica}
+      disabled={!path || inCorso}
+      className={cn(
+        "premi flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-bold uppercase disabled:opacity-60",
+        statoClasse[stato],
+      )}
+    >
+      {inCorso ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : icona}
+      {label}
+      {path ? <Download className="h-3 w-3" /> : null}
+    </button>
+  );
+}
+
+function SchedaGiocatore({
+  nome,
+  ruolo,
+  numero,
+  profilo,
+  oggi,
+  indice,
+}: {
+  nome: string;
+  ruolo: string;
+  numero: number;
+  profilo: Profilo | undefined;
+  oggi: string;
+  indice: number;
+}) {
+  const [aperta, setAperta] = useState(false);
+  const perc = completamento(profilo);
+  const sezioni = sezioniComplete(profilo);
+  const certificato = statoScadenza(profilo?.certificatoScadenza, profilo?.certificatoPath, oggi);
+  const fronte = statoScadenza(profilo?.documentoScadenza, profilo?.documentoFrontePath, oggi);
+  const retro = statoScadenza(profilo?.documentoScadenza, profilo?.documentoRetroPath, oggi);
+
+  return (
+    <Reveal indice={indice} className="rounded-2xl bg-card p-4 shadow-card">
+      <button
+        type="button"
+        onClick={() => setAperta((v) => !v)}
+        className="flex w-full items-center gap-3 text-left"
+      >
+        <div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-secondary font-display text-sm tabular-nums">
+          {numero}
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="truncate font-semibold leading-tight">{nome}</p>
+          <p className="text-xs text-muted-foreground">
+            {ruolo} · profilo {perc}%
+          </p>
+        </div>
+        <ChevronDown
+          className={cn(
+            "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
+            aperta && "rotate-180",
+          )}
+        />
+      </button>
+
+      <div className="mt-3 h-1.5 overflow-hidden rounded-full bg-secondary">
+        <div
+          className="h-full rounded-full bg-accent-grad transition-all"
+          style={{ width: `${perc}%` }}
+        />
+      </div>
+
+      <div className="mt-3 flex flex-wrap gap-2">
+        <Documento
+          icona={<IdCard className="h-3.5 w-3.5" />}
+          label="Doc fronte"
+          stato={fronte}
+          path={profilo?.documentoFrontePath ?? null}
+        />
+        <Documento
+          icona={<IdCard className="h-3.5 w-3.5" />}
+          label="Doc retro"
+          stato={retro}
+          path={profilo?.documentoRetroPath ?? null}
+        />
+        <Documento
+          icona={<FileText className="h-3.5 w-3.5" />}
+          label="Certificato"
+          stato={certificato}
+          path={profilo?.certificatoPath ?? null}
+        />
+        <Documento
+          icona={<Image className="h-3.5 w-3.5" />}
+          label="Foto"
+          stato={sezioni.foto ? "presente" : "assente"}
+          path={profilo?.fotoPath ?? null}
+        />
+      </div>
+
+      {aperta ? (
+        <div className="mt-3 border-t border-border pt-3">
+          <Riga etichetta="Data di nascita" valore={profilo?.dataNascita ?? null} />
+          <Riga etichetta="Luogo di nascita" valore={profilo?.luogoNascita ?? null} />
+          <Riga etichetta="Indirizzo" valore={profilo?.indirizzo ?? null} />
+          <Riga etichetta="Telefono" valore={profilo?.telefono ?? null} />
+          <Riga etichetta="Email" valore={profilo?.email ?? null} />
+          <Riga
+            etichetta="Documento"
+            valore={
+              profilo?.documentoNumero
+                ? `${profilo.documentoTipo ?? ""} ${profilo.documentoNumero}`.trim()
+                : null
+            }
+          />
+          <Riga etichetta="Rilasciato da" valore={profilo?.documentoRilasciatoDa ?? null} />
+          <Riga etichetta="Scadenza documento" valore={profilo?.documentoScadenza ?? null} />
+          <Riga etichetta="Scadenza certificato" valore={profilo?.certificatoScadenza ?? null} />
+        </div>
+      ) : null}
+    </Reveal>
+  );
+}
+
+function Dashboard() {
+  const admin = useIsAdmin();
+  const { righe: squadra } = useGiocatoriSquadra();
+  const { profili, isPending } = useProfili();
+  const oggi = oggiISO();
+
+  if (!admin) {
+    return (
+      <>
+        <PageHeader titolo="Dashboard" sottotitolo="Area riservata" />
+        <div className="px-5 pt-4">
+          <p className="flex items-center justify-center gap-2 rounded-3xl bg-card p-5 text-center text-sm text-muted-foreground shadow-card">
+            <Lock className="h-4 w-4 shrink-0" />
+            Riservata agli amministratori della squadra.
+          </p>
+        </div>
+      </>
+    );
+  }
+
+  const attivi = squadra.filter((g) => g.attivo);
+  const completi = attivi.filter((g) => completamento(profili[g.id]) === 100).length;
+  const certificatiOk = attivi.filter(
+    (g) =>
+      statoScadenza(profili[g.id]?.certificatoScadenza, profili[g.id]?.certificatoPath, oggi) ===
+      "valido",
+  ).length;
+
+  return (
+    <>
+      <PageHeader titolo="Dashboard" sottotitolo="Profili e tesseramento" />
+
+      <Section titolo="Squadra">
+        <div className="grid grid-cols-3 gap-2">
+          <StatTile valore={attivi.length} label="Giocatori" />
+          <StatTile valore={`${completi}/${attivi.length}`} label="Profili completi" />
+          <StatTile
+            valore={`${certificatiOk}/${attivi.length}`}
+            label="Certificati validi"
+            hint="non scaduti"
+          />
+        </div>
+        <button
+          type="button"
+          onClick={() =>
+            scaricaCsv(`tesseramento-csi-${oggi}.csv`, csvTesseramento(attivi, profili))
+          }
+          className="premi mt-3 flex w-full items-center justify-center gap-2 rounded-2xl bg-accent-grad py-3 text-sm font-bold uppercase text-accent-foreground shadow-pop"
+        >
+          <Download className="h-4 w-4" /> Esporta CSV tesseramento
+        </button>
+      </Section>
+
+      <Section titolo="Profili" indice={1}>
+        {isPending ? (
+          <p className="rounded-2xl bg-card p-5 text-center text-sm text-muted-foreground shadow-card">
+            Caricamento…
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {attivi.map((g, i) => (
+              <SchedaGiocatore
+                key={g.id}
+                nome={nomeCompleto(g)}
+                ruolo={g.ruolo}
+                numero={g.numero}
+                profilo={profili[g.id]}
+                oggi={oggi}
+                indice={i}
+              />
+            ))}
+          </div>
+        )}
+      </Section>
+    </>
+  );
+}
@@ -1,7 +1,18 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { LogIn } from "lucide-react";
+import { toast } from "sonner";
 import { TeamLogo } from "@/components/crapp/ui-bits";
 import { giocatori } from "@/lib/crapp-data";
+import { accediConGoogle, authObbligatoria, useSessione } from "@/lib/auth";
+import {
+  nomeCompleto,
+  slotDi,
+  slotLiberi,
+  useCollegaGiocatore,
+  useGiocatoriSquadra,
+  type GiocatoreSquadra,
+} from "@/lib/giocatori-squadra";
 import { impostaGiocatore, useGiocatoreCorrente } from "@/lib/user-store";

 export const Route = createFileRoute("/benvenuto")({
@@ -10,27 +21,89 @@ export const Route = createFileRoute("/benvenuto")({
      { title: "Benvenuto — CrAPP DEVELOP" },
      {
        name: "description",
-        content: "Seleziona il tuo profilo giocatore per iniziare.",
+        content: "Accedi e collega il tuo profilo giocatore per iniziare.",
      },
      { property: "og:title", content: "Benvenuto — CrAPP DEVELOP" },
      {
        property: "og:description",
-        content: "Seleziona il tuo profilo giocatore per iniziare.",
+        content: "Accedi e collega il tuo profilo giocatore per iniziare.",
      },
    ],
  }),
  component: Benvenuto,
 });

+function Scheda({
+  titolo,
+  sottotitolo,
+  onClick,
+  iniziali,
+}: {
+  titolo: string;
+  sottotitolo: string;
+  onClick: () => void;
+  iniziali: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex w-full items-center gap-4 rounded-2xl bg-card p-4 shadow-card transition-transform active:scale-[0.98]"
+    >
+      <div className="grid h-12 w-12 shrink-0 place-items-center rounded-xl bg-secondary font-display text-lg">
+        {iniziali}
+      </div>
+      <div className="min-w-0 flex-1 text-left">
+        <p className="font-semibold leading-tight">{titolo}</p>
+        <p className="text-xs text-muted-foreground">{sottotitolo}</p>
+      </div>
+    </button>
+  );
+}
+
 function Benvenuto() {
  const navigate = useNavigate();
  const giocatore = useGiocatoreCorrente();
+  const { pronta, utenteId } = useSessione();
+  const { righe } = useGiocatoriSquadra();
+  const collega = useCollegaGiocatore();
+  const [inCorso, setInCorso] = useState(false);
+
+  const mioSlot = slotDi(righe, utenteId);
+  // Con l'auth obbligatoria si entra solo da loggati; finché non lo è, la selezione
+  // diretta resta come ponte per chi non ha ancora collegato l'account (DD-011).
+  const puoEntrare = !!giocatore && (!!utenteId || !authObbligatoria());

  useEffect(() => {
-    if (giocatore) {
-      navigate({ to: "/" });
+    if (puoEntrare) navigate({ to: "/" });
+  }, [puoEntrare, navigate]);
+
+  // L'account è già collegato a uno slot: nessuna scelta da fare.
+  useEffect(() => {
+    if (mioSlot) impostaGiocatore(mioSlot.id);
+  }, [mioSlot]);
+
+  async function accedi() {
+    setInCorso(true);
+    try {
+      await accediConGoogle();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Accesso non riuscito");
+      setInCorso(false);
    }
-  }, [giocatore, navigate]);
+  }
+
+  async function reclama(g: GiocatoreSquadra) {
+    if (!utenteId) return;
+    try {
+      await collega.mutateAsync({ giocatoreId: g.id, utenteId });
+      impostaGiocatore(g.id);
+    } catch {
+      toast.error("Profilo già collegato a un altro account. Chiedi a un amministratore.");
+    }
+  }
+
+  const liberi = slotLiberi(righe);

  return (
    <div className="flex min-h-screen flex-col items-center justify-center px-6 py-12">
@@ -38,29 +111,63 @@ function Benvenuto() {
      <h1 className="mt-6 text-center font-display text-4xl uppercase leading-none">
        Benvenuto in CrAPP DEVELOP
      </h1>
-      <p className="mt-2 text-center text-sm text-muted-foreground">
-        Seleziona chi sei per personalizzare l'app.
-      </p>
-      <div className="mt-8 w-full max-w-sm space-y-2">
-        {giocatori.map((g) => (
+
+      {!pronta ? null : !utenteId ? (
+        <>
+          <p className="mt-2 text-center text-sm text-muted-foreground">
+            Accedi con il tuo account Google per collegare il profilo giocatore.
+          </p>
          <button
-            key={g.id}
            type="button"
-            onClick={() => impostaGiocatore(g.id)}
-            className="flex w-full items-center gap-4 rounded-2xl bg-card p-4 shadow-card transition-transform active:scale-[0.98]"
+            onClick={accedi}
+            disabled={inCorso}
+            className="premi mt-8 flex w-full max-w-sm items-center justify-center gap-2 rounded-2xl bg-accent-grad py-3.5 text-sm font-bold uppercase text-accent-foreground shadow-pop disabled:opacity-60"
          >
-            <div className="grid h-12 w-12 shrink-0 place-items-center rounded-xl bg-secondary font-display text-lg">
-              {g.iniziali}
-            </div>
-            <div className="min-w-0 flex-1 text-left">
-              <p className="font-semibold leading-tight">{g.nome}</p>
-              <p className="text-xs text-muted-foreground">
-                #{g.numero} · {g.ruolo}
-              </p>
-            </div>
+            <LogIn className="h-4 w-4" /> Accedi con Google
          </button>
-        ))}
-      </div>
+
+          {authObbligatoria() ? null : (
+            <div className="mt-10 w-full max-w-sm">
+              <p className="mb-3 text-center text-xs text-muted-foreground">
+                Oppure entra scegliendo il tuo nome, come prima.
+              </p>
+              <div className="space-y-2">
+                {giocatori.map((g) => (
+                  <Scheda
+                    key={g.id}
+                    titolo={g.nome}
+                    sottotitolo={`#${g.numero} · ${g.ruolo}`}
+                    iniziali={g.iniziali}
+                    onClick={() => impostaGiocatore(g.id)}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          <p className="mt-2 text-center text-sm text-muted-foreground">
+            Sei entrato. Scegli il tuo nome: resterà collegato a questo account.
+          </p>
+          <div className="mt-8 w-full max-w-sm space-y-2">
+            {liberi.map((g) => (
+              <Scheda
+                key={g.id}
+                titolo={nomeCompleto(g)}
+                sottotitolo={`#${g.numero} · ${g.ruolo}`}
+                iniziali={`${g.nome[0] ?? ""}${g.cognome[0] ?? ""}`.toUpperCase()}
+                onClick={() => void reclama(g)}
+              />
+            ))}
+            {liberi.length === 0 ? (
+              <p className="rounded-2xl bg-card p-4 text-center text-sm text-muted-foreground shadow-card">
+                Nessun profilo libero: chiedi a un amministratore di collegarti.
+              </p>
+            ) : null}
+          </div>
+        </>
+      )}
    </div>
  );
 }
@@ -5,9 +5,9 @@ import { Link } from "@tanstack/react-router";
 import { cn } from "@/lib/utils";
 import { EventoCard, linkPerEvento } from "@/components/crapp/EventoCard";
 import { PageHeader, Section } from "@/components/crapp/ui-bits";
-import { isAdmin } from "@/lib/crapp-data";
 import { compleanniEventi, useEventi, type Evento } from "@/lib/eventi";
 import { useGiocatoreCorrente } from "@/lib/user-store";
+import { useIsAdmin } from "@/lib/ruoli";
 import {
  Drawer,
  DrawerClose,
@@ -97,6 +97,7 @@ function Calendario() {
  const [giornoSelezionato, setGiornoSelezionato] = useState<number | null>(null);
  const [drawerAperto, setDrawerAperto] = useState(false);
  const io = useGiocatoreCorrente();
+  const admin = useIsAdmin();
  const { eventi } = useEventi();
  const { anno, mese, precedente, successivo } = useMeseNav();
  const { giorni, offsetLunedi } = giorniDelMese(anno, mese);
@@ -245,7 +246,7 @@ function Calendario() {
        </Section>
      ) : null}

-      {io && isAdmin(io.id) ? (
+      {admin ? (
        <div className="px-5 pt-4">
          <Link
            to="/eventi"
@@ -4,7 +4,7 @@ import { ArrowLeft, CalendarPlus, Loader2, Pencil, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { PageHeader, Section } from "@/components/crapp/ui-bits";
-import { formatData, giocatori, isAdmin } from "@/lib/crapp-data";
+import { formatData, giocatori } from "@/lib/crapp-data";
 import {
  categoriaEvento,
  daCategoria,
@@ -16,6 +16,7 @@ import {
  type Evento,
 } from "@/lib/eventi";
 import { useGiocatoreCorrente } from "@/lib/user-store";
+import { useIsAdmin } from "@/lib/ruoli";

 export const Route = createFileRoute("/eventi")({
  head: () => ({
@@ -47,12 +48,13 @@ const tipi: Array<{ id: CategoriaEvento; label: string }> = [

 function GestioneEventi() {
  const io = useGiocatoreCorrente();
+  const admin = useIsAdmin();
  const { eventi, isPending } = useEventi();
  const salva = useSalvaEvento();
  const elimina = useEliminaEvento();
  const [bozza, setBozza] = useState<Evento | null>(null);

-  if (!io || !isAdmin(io.id)) {
+  if (!io || !admin) {
    return (
      <>
        <PageHeader titolo="Gestione eventi" sottotitolo="Area riservata" />
@@ -4,6 +4,7 @@ import { EventoCard, linkPerEvento } from "@/components/crapp/EventoCard";
 import { PromemoriaPalloni } from "@/components/crapp/PromemoriaPalloni";
 import { ScoutEntry } from "@/components/crapp/ScoutEntry";
 import { Section, StatTile, TeamLogo } from "@/components/crapp/ui-bits";
+import { CompletaProfilo } from "@/components/crapp/ProfiloAmministrativo";
 import { Reveal } from "@/components/motion/Reveal";
 import { Barra } from "@/components/motion/Barra";
 import { Numero } from "@/components/motion/Numero";
@@ -24,7 +25,8 @@ export const Route = createFileRoute("/")({
      { property: "og:title", content: "CrAPP — L'app del CRAP Volley" },
      {
        property: "og:description",
-        content: "Convocazioni, presenze, statistiche e classifica del CRAP Volley in un'unica app mobile.",
+        content:
+          "Convocazioni, presenze, statistiche e classifica del CRAP Volley in un'unica app mobile.",
      },
    ],
  }),
@@ -105,6 +107,8 @@ function Index() {
        </div>
      </Section>

+      <CompletaProfilo giocatoreId={giocatore.id} indice={2} />
+
      <Section titolo="Da confermare" indice={2}>
        <div className="space-y-3">
          {prossimi.slice(1).map((e) => {
@@ -155,25 +159,29 @@ function Index() {
        titolo="Obiettivo di squadra"
        indice={4}
        azione={
-          <Link to="/squadra" className="inline-flex items-center text-xs font-semibold text-accent">
+          <Link
+            to="/squadra"
+            className="inline-flex items-center text-xs font-semibold text-accent"
+          >
            Tutti <ChevronRight className="h-3 w-3" />
          </Link>
        }
      >
        {obiettivo ? (
-        <div className="premi rounded-3xl bg-card p-4 shadow-card">
-          <div className="flex items-center gap-2 text-sm font-bold">
-            <span className="text-base leading-none">{obiettivo.emoji}</span> {obiettivo.titolo}
+          <div className="premi rounded-3xl bg-card p-4 shadow-card">
+            <div className="flex items-center gap-2 text-sm font-bold">
+              <span className="text-base leading-none">{obiettivo.emoji}</span> {obiettivo.titolo}
+            </div>
+            <Barra percentuale={progressoObiettivo(obiettivo)} trackClassName="mt-3" />
+            <p className="mt-2 text-xs text-muted-foreground">
+              Siamo al <Numero valore={progressoObiettivo(obiettivo)} suffisso="%" /> —{" "}
+              {obiettivo.valore}/{obiettivo.target} {obiettivo.unita}.
+            </p>
+            <p className="mt-1 text-xs font-semibold text-accent">
+              {microcopyObiettivo(obiettivo)}
+            </p>
+            <p className="mt-1 text-[11px] text-muted-foreground">{obiettivo.impatto}</p>
          </div>
-          <Barra percentuale={progressoObiettivo(obiettivo)} trackClassName="mt-3" />
-          <p className="mt-2 text-xs text-muted-foreground">
-            Siamo al <Numero valore={progressoObiettivo(obiettivo)} suffisso="%" /> —{" "}
-            {obiettivo.valore}/{obiettivo.target}{" "}
-            {obiettivo.unita}.
-          </p>
-          <p className="mt-1 text-xs font-semibold text-accent">{microcopyObiettivo(obiettivo)}</p>
-          <p className="mt-1 text-[11px] text-muted-foreground">{obiettivo.impatto}</p>
-        </div>
        ) : null}
      </Section>

@@ -2,13 +2,14 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { ArrowLeft, MapPin, Clock, Users, Trophy, Swords, Download } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { PageHeader, Section } from "@/components/crapp/ui-bits";
-import { storicoMatch, formatData, giocatori, isAdmin } from "@/lib/crapp-data";
+import { storicoMatch, formatData, giocatori } from "@/lib/crapp-data";
 import { convocatiEvento, useEvento } from "@/lib/eventi";
 import { Pagelle } from "@/components/crapp/Pagelle";
 import { SondaggioCacche } from "@/components/crapp/SondaggioCacche";
 import { useScoutMatches, totaliPerGiocatore, totaliSquadra } from "@/lib/scout-store";
 import { csvScoutMatch, scaricaCsv } from "@/lib/scout-export";
 import { useGiocatoreCorrente } from "@/lib/user-store";
+import { useIsAdmin } from "@/lib/ruoli";
 import { VotazioneMvp } from "@/components/crapp/VotazioneMvp";
 import { VotoSocial } from "@/components/crapp/VotoSocial";
 import { TurnoPalloni } from "@/components/crapp/TurnoPalloni";
@@ -36,6 +37,7 @@ function PartitaDetail() {
  const { id } = Route.useParams();
  const { evento } = useEvento(id);
  const io = useGiocatoreCorrente();
+  const admin = useIsAdmin();
  const scoutMatches = useScoutMatches();
  const { risposte } = usePresenzeEvento(id);
  const presentiVeri = giocatori.filter(
@@ -224,7 +226,7 @@ function PartitaDetail() {
                );
              })}
            </div>
-            {io && isAdmin(io.id) ? (
+            {admin ? (
              <button
                type="button"
                onClick={() => scaricaCsv(`scout-${scout.data}-${scout.avversario}.csv`, csvScoutMatch(scout))}
@@ -1,13 +1,14 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
-import { Flame, Camera, Users, Trash2, Bell } from "lucide-react";
+import { Flame, Camera, Users, Trash2, Bell, LogOut, ShieldCheck } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { PageHeader, Section, StatTile } from "@/components/crapp/ui-bits";
 import { Avatar } from "@/components/crapp/Avatar";
 import { fileToAvatar, salvaAvatar, rimuoviAvatar, useAvatar } from "@/lib/avatar-store";
 import { SerieGriglia } from "@/components/crapp/SerieCard";
 import { CollezioneBadge } from "@/components/crapp/CollezioneBadge";
+import { ProfiloAmministrativo } from "@/components/crapp/ProfiloAmministrativo";
 import { useVotiSocial } from "@/lib/badge-social";
 import { useIo } from "@/lib/rosa";
 import { usePresenzeUltimoMese } from "@/lib/presenze-mese";
@@ -18,6 +19,8 @@ import {
  statoNotifiche,
 } from "@/lib/push-client";
 import { resetGiocatore } from "@/lib/user-store";
+import { esci, useSessione } from "@/lib/auth";
+import { useIsAdmin } from "@/lib/ruoli";
 import { Reveal } from "@/components/motion/Reveal";

 export const Route = createFileRoute("/profilo")({
@@ -38,6 +41,8 @@ export const Route = createFileRoute("/profilo")({
 function Profilo() {
  const votiSocial = useVotiSocial();
  const g = useIo();
+  const admin = useIsAdmin();
+  const { sessione } = useSessione();
  const ultimoMese = usePresenzeUltimoMese(g?.id);
  const inputRef = useRef<HTMLInputElement>(null);
  const foto = useAvatar(g?.id);
@@ -72,6 +77,15 @@ function Profilo() {
    }
  }

+  async function logout() {
+    try {
+      await esci();
+      resetGiocatore();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Uscita non riuscita");
+    }
+  }
+
  const percPresenze = Math.round((g.presenze / g.totaliEventi) * 100);

  async function onFile(e: React.ChangeEvent<HTMLInputElement>) {
@@ -168,6 +182,8 @@ function Profilo() {
        <CollezioneBadge g={g} votiSocial={votiSocial.data ?? []} />
      </Section>

+      <ProfiloAmministrativo giocatoreId={g.id} indice={4} />
+
      <Section titolo="Impostazioni">
        <div className="divide-y divide-border overflow-hidden rounded-3xl bg-card shadow-card">
          <button
@@ -203,6 +219,15 @@ function Profilo() {
              </label>
            ),
          )}
+          {admin ? (
+            <Link
+              to="/admin"
+              className="flex w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
+            >
+              <span className="min-w-0 truncate">Dashboard amministratore</span>
+              <ShieldCheck className="h-4 w-4 text-muted-foreground" />
+            </Link>
+          ) : null}
          <button
            type="button"
            onClick={() => resetGiocatore()}
@@ -211,6 +236,16 @@ function Profilo() {
            <span className="min-w-0 truncate">Cambia giocatore</span>
            <Users className="h-4 w-4 text-muted-foreground" />
          </button>
+          {sessione ? (
+            <button
+              type="button"
+              onClick={logout}
+              className="flex w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5"
+            >
+              <span className="min-w-0 truncate">Esci</span>
+              <LogOut className="h-4 w-4 text-muted-foreground" />
+            </button>
+          ) : null}
        </div>
      </Section>
    </>
@@ -3,9 +3,10 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { Undo2, Save, CheckCircle2, Radio, Lock, CalendarX2, LogOut } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
-import { giocatori, formatData, isAdmin } from "@/lib/crapp-data";
+import { giocatori, formatData } from "@/lib/crapp-data";
 import type { Evento } from "@/lib/eventi";
 import { useGiocatoreCorrente } from "@/lib/user-store";
+import { useIsAdmin } from "@/lib/ruoli";
 import { usePresenzeEvento } from "@/lib/presenze";
 import {
  statoIniziale,
@@ -70,6 +71,7 @@ function Blocco({ icona, titolo, testo, children }: { icona: React.ReactNode; ti
 function Scout() {
  const { pronto, partita } = usePartitaDiOggi();
  const io = useGiocatoreCorrente();
+  const admin = useIsAdmin();
  const sessione = useSessioneScout(partita?.id ?? null);
  const statoSalvato = useStatoScout(partita?.id ?? null);
  const apri = useApriSessioneScout();
@@ -88,7 +90,7 @@ function Scout() {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [controllo, partita?.id, io?.id]);

-  if (io && !isAdmin(io.id)) {
+  if (io && !admin) {
    return (
      <Blocco
        icona={<Lock className="h-6 w-6" />}