<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Suivi Recharge Électrique | e.pahl.fr</title>

    <link rel="stylesheet" href="style.css">

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>

<body>

    <div class="container">

        <header>

            <h1>⚡ Suivi Recharge Vivaro</h1>

            <div class="header-actions">

                <button onclick="exportData('csv')" class="btn btn-outline">📥 Export CSV</button>

                <button onclick="exportData('json')" class="btn btn-outline">📥 Export JSON</button>

                <a href="admin.html" class="btn btn-primary">🔒 Admin</a>

            </div>

        </header>

        <section class="kpi-grid">

            <div class="kpi-card">

                <div class="kpi-label">Total Énergie</div>

                <div class="kpi-value" id="total-kwh">-</div>

            </div>

            <div class="kpi-card">

                <div class="kpi-label">Coût Total</div>

                <div class="kpi-value" id="total-cost">-</div>

            </div>

            <div class="kpi-card">

                <div class="kpi-label">Distance Totale</div>

                <div class="kpi-value" id="total-km">-</div>

            </div>

            <div class="kpi-card">

                <div class="kpi-label">Moyenne €/km</div>

                <div class="kpi-value" id="avg-cost-km">-</div>

            </div>

            <div class="kpi-card">

                <div class="kpi-label">Prix Moyen €/kWh</div>

                <div class="kpi-value" id="avg-cost-kwh">-</div>

            </div>

            <div class="kpi-card">

                <div class="kpi-label">Sessions</div>

                <div class="kpi-value" id="total-sessions">-</div>

            </div>

        </section>

        <section class="charts-grid">

            <div class="card">

                <h2>📈 Évolution des dépenses mensuelles</h2>

                <canvas id="costChart"></canvas>

            </div>

            <div class="card">

                <h2>🔌 Part de marché par réseau (kWh)</h2>

                <canvas id="networkChart"></canvas>

            </div>

            <div class="card">

                <h2>💰 Prix moyen par réseau (€/kWh)</h2>

                <canvas id="priceChart"></canvas>

            </div>

            <div class="card">

                <h2>⚡ Puissance moyenne par réseau (kW)</h2>

                <canvas id="powerChart"></canvas>

            </div>

        </section>

        <section class="card">

            <h2>📋 Historique des recharges (10 dernières)</h2>

            <div class="table-wrapper">

                <table id="sessions-table">

                    <thead>

                        <tr>

                            <th>Date</th>

                            <th>Ville</th>

                            <th>Réseau</th>

                            <th>kWh</th>

                            <th>Coût</th>

                            <th>€/kWh</th>

                            <th>€/km</th>

                        </tr>

                    </thead>

                    <tbody></tbody>

                </table>

            </div>

        </section>

        <footer>

            <p>Dernière mise à