From 916d4011972940d4d06c5925fab572cc26768018 Mon Sep 17 00:00:00 2001
From: Paolo <paolosnz@gmail.com>
Date: Mon, 23 Mar 2026 02:00:03 +0100
Subject: [PATCH] Auto-sync: 20260323_020000

---
 public/report.html | 334 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 334 insertions(+)
 create mode 100644 public/report.html
diff --git a/public/report.html b/public/report.html
new file mode 100644
index 0000000..1b2a0c4
--- /dev/null
+++ b/public/report.html
@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Report Statistiche CAI Facile</title>
+    <style>
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; color: #333; padding: 0; margin: 0; box-sizing: border-box; }
+
+        /* SCHERMATA LOGIN */
+        #login-screen { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #34495e; padding: 20px; }
+        .login-box { background: white; padding: 40px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); text-align: center; width: 100%; max-width: 350px; }
+        .login-box h2 { color: #2c3e50; margin-top: 0; }
+        .login-box input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #bdc3c7; border-radius: 5px; box-sizing: border-box; font-size: 16px; }
+        .login-box button { width: 100%; background-color: #3498db; color: white; border: none; padding: 12px; font-size: 16px; border-radius: 5px; cursor: pointer; font-weight: bold; transition: 0.2s; margin-top: 10px; }
+        .login-box button:hover { background-color: #2980b9; }
+        #login-error { color: #e74c3c; font-weight: bold; font-size: 14px; margin-bottom: 10px; display: none; }
+
+        /* DASHBOARD PRINCIPALE */
+        #dashboard-screen { display: none; padding: 20px; }
+        .container { max-width: 1100px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); box-sizing: border-box;}
+
+        .header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+        h1 { color: #2c3e50; margin: 0; font-size: 24px;}
+
+        .btn-logout { background-color: #e74c3c; color: white; padding: 8px 15px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 14px; white-space: nowrap; cursor: pointer; border: none;}
+        .btn-logout:hover { background-color: #c0392b; }
+
+        .filter-section { background: #eef2f5; padding: 20px; border-radius: 8px; margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; }
+        .form-group { display: flex; flex-direction: column; flex: 1; min-width: 150px; }
+        .form-group label { font-size: 13px; font-weight: bold; color: #34495e; margin-bottom: 5px; }
+        .form-group input, .form-group select { padding: 10px; border: 1px solid #bdc3c7; border-radius: 5px; font-size: 14px; outline: none; box-sizing: border-box; width: 100%;}
+        .form-group input:focus, .form-group select:focus { border-color: #3498db; }
+
+        .btn-filtra { background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s; height: 40px; }
+        .btn-filtra:hover { background-color: #2980b9; }
+        .btn-reset { background-color: #95a5a6; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; font-size: 14px; height: 40px; line-height: 20px; box-sizing: border-box; display: inline-block; text-align: center;}
+        .btn-reset:hover { background-color: #7f8c8d; }
+
+        .dashboard { display: flex; justify-content: space-between; margin-bottom: 30px; gap: 20px; text-align: center; flex-wrap: wrap; }
+        .card { flex: 1; min-width: 150px; background: #ecf0f1; padding: 20px; border-radius: 8px; border-left: 5px solid #3498db; box-sizing: border-box;}
+        .card.ios { border-left-color: #e74c3c; }
+        .card.android { border-left-color: #2ecc71; }
+        .card h3 { margin: 0 0 10px 0; font-size: 14px; color: #7f8c8d; text-transform: uppercase; }
+        .card p { margin: 0; font-size: 28px; font-weight: bold; color: #2c3e50; }
+
+        table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; table-layout: fixed; }
+        th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; word-wrap: break-word;}
+        th { background-color: #34495e; color: white; }
+        tr:hover { background-color: #f1f1f1; }
+
+        .badge { padding: 4px 8px; border-radius: 4px; color: white; font-weight: bold; font-size: 12px; }
+        .badge-ios { background-color: #e74c3c; }
+        .badge-android { background-color: #2ecc71; }
+        .badge-desktop { background-color: #95a5a6; }
+        .empty { text-align: center; padding: 30px; color: #7f8c8d; font-style: italic; background: #f9f9f9; border-radius: 5px;}
+
+        /* --- OTTIMIZZAZIONI MOBILE --- */
+        @media (max-width: 768px) {
+            #dashboard-screen { padding: 10px; }
+            .container { padding: 15px; }
+            .header-top { flex-direction: column; text-align: center; gap: 15px; }
+
+            .filter-section { flex-direction: column; align-items: stretch; gap: 10px; padding: 15px;}
+            .form-group { min-width: 100%; }
+            .btn-filtra, .btn-reset { width: 100%; margin-top: 5px; height: auto; padding: 12px;}
+
+            .dashboard { flex-direction: column; gap: 15px; }
+            .card { min-width: 100%; }
+
+            table, thead, tbody, th, td, tr { display: block; width: 100%; box-sizing: border-box; }
+            thead { display: none; }
+
+            tr { margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+
+            td { display: flex; flex-direction: column; text-align: left; border-bottom: 1px solid #eee; padding: 12px 15px; position: relative; }
+
+            td::before { content: attr(data-label); font-weight: bold; margin-bottom: 5px; color: #34495e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
+
+            td:last-child { border-bottom: none; }
+            td[data-label="Dispositivo"] { white-space: normal !important; word-break: break-all; }
+        }
+    </style>
+</head>
+<body>
+
+<div id="login-screen">
+    <div class="login-box">
+        <h2>Area Riservata</h2>
+        <div id="login-error">Credenziali errate! Riprova.</div>
+        <input type="email" id="email" placeholder="Email amministratore" required>
+        <input type="password" id="password" placeholder="Password" required>
+        <button onclick="login()">Accedi</button>
+    </div>
+</div>
+
+<div id="dashboard-screen">
+    <div class="container">
+        <div class="header-top">
+            <h1>📊 Report Campagna CAI Facile</h1>
+            <button onclick="logout()" class="btn-logout">Esci 🚪</button>
+        </div>
+
+        <div class="filter-section">
+            <div class="form-group">
+                <label for="data_da">Data Da:</label>
+                <input type="date" id="data_da">
+            </div>
+
+            <div class="form-group">
+                <label for="data_a">Data A:</label>
+                <input type="date" id="data_a">
+            </div>
+
+            <div class="form-group">
+                <label for="os">Sistema Operativo:</label>
+                <select id="os">
+                    <option value="">Tutti i sistemi</option>
+                    <option value="iOS">Apple iOS</option>
+                    <option value="Android">Google Android</option>
+                    <option value="Desktop_Altro">Desktop / Altro</option>
+                </select>
+            </div>
+
+            <div class="form-group">
+                <label for="loc">Località (es. Roma):</label>
+                <input type="text" id="loc" placeholder="Cerca città o regione...">
+            </div>
+
+            <button onclick="applicaFiltri()" class="btn-filtra">🔍 Applica Filtri</button>
+            <button onclick="resetFiltri()" class="btn-reset">✖ Reset</button>
+        </div>
+
+        <div class="dashboard">
+            <div class="card">
+                <h3>Scansioni Trovate</h3>
+                <p id="totale-click">0</p>
+            </div>
+            <div class="card ios">
+                <h3>Apple iOS</h3>
+                <p id="click-ios">0</p>
+            </div>
+            <div class="card android">
+                <h3>Google Android</h3>
+                <p id="click-android">0</p>
+            </div>
+            <div class="card">
+                <h3>Desktop / Altro</h3>
+                <p id="click-desktop">0</p>
+            </div>
+        </div>
+
+        <h2>Dettaglio Scansioni</h2>
+
+        <table>
+            <thead>
+            <tr>
+                <th>Data e Ora</th>
+                <th>Sistema</th>
+                <th>Indirizzo IP</th>
+                <th>Località</th>
+                <th>Dispositivo</th>
+            </tr>
+            </thead>
+            <tbody id="table-body">
+            <tr>
+                <td colspan="5" class="empty">Caricamento dati in corso...</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<script type="module">
+    // Importa le funzioni Firebase necessarie
+    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";
+    import { getAuth, signInWithEmailAndPassword, signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-auth.js";
+    import { getFirestore, collection, getDocs, query, orderBy } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-firestore.js";
+
+    // INSERISCI QUI LA TUA CONFIGURAZIONE FIREBASE
+    const firebaseConfig = {
+  apiKey: "AIzaSyARkiWU7jd8BKiV0Jbdgyx1PJRlRmXWaI0",
+  authDomain: "cid-app-sincro.firebaseapp.com",
+  databaseURL: "https://cid-app-sincro-default-rtdb.europe-west1.firebasedatabase.app",
+  projectId: "cid-app-sincro",
+  storageBucket: "cid-app-sincro.firebasestorage.app",
+  messagingSenderId: "1060927868658",
+  appId: "1:1060927868658:web:9fb37eadc23cdc9e084a6b",
+  measurementId: "G-3ETJDF3ELZ"
+};
+
+    // Inizializza Firebase
+    const app = initializeApp(firebaseConfig);
+    const auth = getAuth(app);
+    const db = getFirestore(app);
+
+    let tuttiIDati = []; // Array per conservare i dati grezzi estratti da Firestore
+
+    // Gestione stato autenticazione
+    onAuthStateChanged(auth, (user) => {
+        if (user) {
+            // Utente loggato: mostra dashboard, nascondi login
+            document.getElementById('login-screen').style.display = 'none';
+            document.getElementById('dashboard-screen').style.display = 'block';
+            caricaDatiDaFirestore();
+        } else {
+            // Utente non loggato: mostra login, nascondi dashboard
+            document.getElementById('login-screen').style.display = 'flex';
+            document.getElementById('dashboard-screen').style.display = 'none';
+        }
+    });
+
+    // Funzione di Login
+    window.login = () => {
+        const email = document.getElementById('email').value;
+        const password = document.getElementById('password').value;
+        const errorMsg = document.getElementById('login-error');
+
+        signInWithEmailAndPassword(auth, email, password)
+            .then(() => {
+                errorMsg.style.display = 'none';
+            })
+            .catch((error) => {
+                errorMsg.style.display = 'block';
+                console.error("Errore di login:", error);
+            });
+    };
+
+    // Funzione di Logout
+    window.logout = () => {
+        signOut(auth).then(() => {
+            // Ricarica la pagina o gestisci la UI tramite onAuthStateChanged
+        });
+    };
+
+    // Carica i dati da Firestore
+    async function caricaDatiDaFirestore() {
+        try {
+            // Sostituisci 'statistiche_scansioni' con il nome esatto della tua collection in Firestore
+            const q = query(collection(db, "statistiche_scansioni"), orderBy("timestamp", "desc"));
+            const querySnapshot = await getDocs(q);
+
+            tuttiIDati = [];
+            querySnapshot.forEach((doc) => {
+                tuttiIDati.push(doc.data());
+            });
+
+            // Mostra i dati iniziali (senza filtri)
+            applicaFiltri();
+        } catch (e) {
+            console.error("Errore durante il caricamento dei dati: ", e);
+            document.getElementById('table-body').innerHTML = `<tr><td colspan="5" class="empty">Errore nel caricamento dati. Controlla la console.</td></tr>`;
+        }
+    }
+
+    // Funzione di filtraggio e rendering tabella
+    window.applicaFiltri = () => {
+        const fDataDa = document.getElementById('data_da').value;
+        const fDataA = document.getElementById('data_a').value;
+        const fOs = document.getElementById('os').value;
+        const fLoc = document.getElementById('loc').value.toLowerCase();
+
+        let datiFiltrati = tuttiIDati.filter(row => {
+            let mostra = true;
+
+            // Estrae la data formattata (assumendo che tu abbia un campo stringa 'dataOra' tipo "YYYY-MM-DD HH:MM:SS"
+            // Se usi il timestamp di Firebase nativo, la logica di estrazione data andrà leggermente adattata.
+            let soloData = "";
+            if(row.dataOra) {
+                soloData = row.dataOra.substring(0, 10);
+            }
+
+            if (fDataDa && soloData < fDataDa) mostra = false;
+            if (fDataA && soloData > fDataA) mostra = false;
+            if (fOs && row.os !== fOs) mostra = false;
+            if (fLoc && row.localita && !row.localita.toLowerCase().includes(fLoc)) mostra = false;
+
+            return mostra;
+        });
+
+        aggiornaUI(datiFiltrati);
+    };
+
+    // Reset filtri
+    window.resetFiltri = () => {
+        document.getElementById('data_da').value = '';
+        document.getElementById('data_a').value = '';
+        document.getElementById('os').value = '';
+        document.getElementById('loc').value = '';
+        applicaFiltri();
+    };
+
+    // Aggiorna contatori e tabella
+    function aggiornaUI(dati) {
+        let tClick = 0, tIos = 0, tAnd = 0, tDesk = 0;
+        let htmlTabella = '';
+
+        dati.forEach(row => {
+            tClick++;
+            if (row.os === 'iOS') tIos++;
+            else if (row.os === 'Android') tAnd++;
+            else tDesk++;
+
+            let badgeClass = 'badge-desktop';
+            if (row.os === 'iOS') badgeClass = 'badge-ios';
+            else if (row.os === 'Android') badgeClass = 'badge-android';
+
+            htmlTabella += `
+                <tr>
+                    <td data-label="Data e Ora" style="white-space: nowrap;">${row.dataOra || '-'}</td>
+                    <td data-label="Sistema"><span class="badge ${badgeClass}">${row.os || '-'}</span></td>
+                    <td data-label="Indirizzo IP">${row.ip || '-'}</td>
+                    <td data-label="Località"><strong>${row.localita || '-'}</strong></td>
+                    <td data-label="Dispositivo" style="font-size: 12px; color: #7f8c8d; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${row.userAgent || '-'}">
+                        ${row.userAgent || '-'}
+                    </td>
+                </tr>
+            `;
+        });
+
+        document.getElementById('totale-click').innerText = tClick;
+        document.getElementById('click-ios').innerText = tIos;
+        document.getElementById('click-android').innerText = tAnd;
+        document.getElementById('click-desktop').innerText = tDesk;
+
+        if (dati.length === 0) {
+            htmlTabella = `<tr><td colspan="5" class="empty">Nessun dato corrispondente ai filtri selezionati.</td></tr>`;
+        }
+
+        document.getElementById('table-body').innerHTML = htmlTabella;
+    }
+</script>
+</body>
+</html>
\ No newline at end of file
