<!DOCTYPE html>

<html>

<head>

    <title>Dashboard GSII Simple</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

    <style>

        body { font-family: Arial, sans-serif; margin: 20px; }

        .filter { margin: 10px 0; }

        table { width: 100%; border-collapse: collapse; }

        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }

        th { background-color: #f2f2f2; }

    </style>

</head>

<body>

    <h1>📊 Dashboard GSII</h1>

    

    <div class="filter">

        <label>Année: <input type="text" id="filterYear" placeholder="Ex: 2024"></label>

        <label>Client: <input type="text" id="filterClient" placeholder="Nom du client"></label>

        <button onclick="filterData()">Filtrer</button>

        <button onclick="clearFilters()">Effacer</button>

    </div>


    <div id="data-container">

        <p>Chargez votre fichier Excel ici...</p>

        <input type="file" id="fileInput" accept=".xlsx,.xls" onchange="loadExcel(event)">

    </div>


    <script>

        let allData = [];

        

        function loadExcel(event) {

            const file = event.target.files[0];

            const reader = new FileReader();

            reader.onload = function(e) {

                const data = new Uint8Array(e.target.result);

                const workbook = XLSX.read(data, {type: 'array'});

                const sheetName = workbook.SheetNames[0];

                const worksheet = workbook.Sheets[sheetName];

                allData = XLSX.utils.sheet_to_json(worksheet);

                displayData(allData);

            };

            reader.readAsArrayBuffer(file);

        }

        

        function displayData(data) {

            if (data.length === 0) return;

            

            let html = `<table><thead><tr>`;

            Object.keys(data[0]).forEach(key => {

                html += `<th>${key}</th>`;

            });

            html += `</tr></thead><tbody>`;

            

            data.forEach(row => {

                html += `<tr>`;

                Object.values(row).forEach(value => {

                    html += `<td>${value || ''}</td>`;

                });

                html += `</tr>`;

            });

            html += `</tbody></table>`;

            

            document.getElementById('data-container').innerHTML = html;

        }

        

        function filterData() {

            const yearFilter = document.getElementById('filterYear').value;

            const clientFilter = document.getElementById('filterClient').value.toLowerCase();

            

            const filtered = allData.filter(row => {

                let match = true;

                if (yearFilter && !String(row.Date || row.Année || '').includes(yearFilter)) match = false;

                if (clientFilter && !String(row.Client || row.Intitulé || '').toLowerCase().includes(clientFilter)) match = false;

                return match;

            });

            

            displayData(filtered);

        }

        

        function clearFilters() {

            document.getElementById('filterYear').value = '';

            document.getElementById('filterClient').value = '';

            displayData(allData);

        }

    </script>

</body>

</html>