<!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>