Fichier : /var/www/html/dcs/tab1_content.php
<h2 class="text-xl font-semibold mb-4">Top 10 des Applications par Grand Client (en €)</h2>
<div class="table-container">
    <table class="min-w-full bg-white dark:bg-gray-800 border">
        <thead>
        <tr>
            <th class="py-2 px-4 border">Nom du Grand Client</th>
            <th class="py-2 px-4 border">Nom de l'Application</th>
            <th class="py-2 px-4 border">Montant (€)</th>
        </tr>
        </thead>
        <tbody>
        <?php foreach ($tab1_data as $row): ?>
            <tr>
                <td class="py-2 px-4 border"><?= htmlspecialchars($row['NomGrandClient']) ?></td>
                <td class="py-2 px-4 border"><?= htmlspecialchars($row['nomAppli']) ?></td>
                <td class="py-2 px-4 border"><?= number_format($row['total'], 2, ',', ' ') ?></td>
            </tr>
        <?php endforeach; ?>
        </tbody>
    </table>
</div>

Fichier : /var/www/html/dcs/scripts.js
// Fonction pour ouvrir un onglet
function openTab(evt, tabName) {
    const tabcontents = document.getElementsByClassName("tabcontent");
    for (let i = 0; i < tabcontents.length; i++) {
        tabcontents[i].classList.add("hidden");
    }
    const tablinks = document.getElementsByClassName("tablinks");
    for (let i = 0; i < tablinks.length; i++) {
        tablinks[i].classList.remove("border-blue-500");
        tablinks[i].classList.add("border-transparent");
    }
    document.getElementById(tabName).classList.remove("hidden");
    evt.currentTarget.classList.add("border-blue-500");
}

// Fonction pour mettre à jour l'icône du thème
function updateIcon() {
    const sunIcon = document.getElementById("sunIcon");
    const moonIcon = document.getElementById("moonIcon");
    if (document.documentElement.classList.contains("dark")) {
        sunIcon.classList.remove("hidden");
        moonIcon.classList.add("hidden");
    } else {
        sunIcon.classList.add("hidden");
        moonIcon.classList.remove("hidden");
    }
}

// Ajouter un écouteur d'événement pour le bouton de changement de thème
document.addEventListener('DOMContentLoaded', function() {
    const toggleBtn = document.getElementById("toggleMode");

    toggleBtn.addEventListener("click", function() {
        const htmlElement = document.documentElement;
        htmlElement.classList.toggle('dark');
        console.log('Dark mode:', htmlElement.classList.contains('dark'));
        updateIcon();

        const xhr = new XMLHttpRequest();
        xhr.open('POST', window.location.href, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    try {
                        const response = JSON.parse(xhr.responseText);
                        console.log('Response:', xhr.responseText); // Debug
                        if (!response.success) {
                            console.error('Échec de la sauvegarde du thème');
                        } else {
                            console.log('Thème sauvegardé avec succès:', response.theme);
                        }
                    } catch (e) {
                        console.error('Erreur de parsing JSON:', e);
                        console.log('Réponse brute:', xhr.responseText); // Show the raw response
                    }
                } else {
                    console.error('Erreur AJAX:', xhr.status);
                }
            }
        };
        const theme = htmlElement.classList.contains('dark') ? 'dark' : 'light';
        xhr.send('theme=' + encodeURIComponent(theme));
    });

    updateIcon();

    // Initialisation des graphiques
    const datasetsMontants = tab2Data.map(client => ({
        label: client.NomClient,
        data: client.data,
        borderColor: 'rgba(' + Math.floor(Math.random()*255) + ',' +
            Math.floor(Math.random()*255) + ',' +
            Math.floor(Math.random()*255) + ',1)',
        backgroundColor: 'rgba(' + Math.floor(Math.random()*255) + ',' +
            Math.floor(Math.random()*255) + ',' +
            Math.floor(Math.random()*255) + ',0.2)',
        fill: true,
        tension: 0.1
    }));

    const ctxMontants = document.getElementById('chartMontants').getContext('2d');
    new Chart(ctxMontants, {
        type: 'line',
        data: {
            labels: months,
            datasets: datasetsMontants
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'top' },
                title: { display: true, text: 'Montants (€) par Mois' }
            }
        }
    });

    const datasetsVolumes = tab3Data.map(prod => ({
        label: prod.NOM_PRODUIT,
        data: prod.data,
        borderColor: 'rgba(' + Math.floor(Math.random()*255) + ',' +
            Math.floor(Math.random()*255) + ',' +
            Math.floor(Math.random()*255) + ',1)',
        backgroundColor: 'rgba(' + Math.floor(Math.random()*255) + ',' +
            Math.floor(Math.random()*255) + ',' +
            Math.floor(Math.random()*255) + ',0.2)',
        fill: true,
        tension: 0.1
    }));

    const ctxVolumes = document.getElementById('chartVolumes').getContext('2d');
    new Chart(ctxVolumes, {
        type: 'line',
        data: {
            labels: months,
            datasets: datasetsVolumes
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'top' },
                title: { display: true, text: 'Volumes par Mois' }
            }
        }
    });
});

Fichier : /var/www/html/dcs/styles.css
body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
.tabcontent {
    height: calc(100vh - 120px); /* Adjust based on header and tab height */
    display: flex;
    flex-direction: column;
}
.chart-container {
    flex-grow: 1;
    position: relative;
}
.table-container {
    flex-grow: 1;
    overflow-y: auto;
}


Fichier : /var/www/html/dcs/tab3_content.php
<h2 class="text-xl font-semibold mb-4">
    Évolution des Volumes pour PRODUIT1_1 et PRODUIT1_4<br />
    <span class="text-sm text-gray-600 dark:text-gray-400">Janvier 2021 à Avril 2022</span>
</h2>
<div class="chart-container">
    <canvas id="chartVolumes" class="bg-white dark:bg-gray-800 p-4 rounded shadow"></canvas>
</div>

Fichier : /var/www/html/dcs/header.php
<header class="p-4 flex justify-between items-center">
    <h1 class="text-2xl font-bold">Tableau de Bord</h1>
    <button id="toggleMode" class="p-2 focus:outline-none">
        <svg id="sunIcon" class="w-6 h-6 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m8.66-12.66l-.71.71M4.05 19.95l-.71-.71M21 12h-1M4 12H3m15.36 6.36l-.71-.71M6.34 6.34l-.71-.71M12 5a7 7 0 100 14 7 7 0 000-14z" />
        </svg>
        <svg id="moonIcon" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
        </svg>
    </button>
</header>

Fichier : /var/www/html/dcs/tab2_content.php
<h2 class="text-xl font-semibold mb-4">
    Évolution des Montants pour les 5 Plus Gros Clients<br />
    <span class="text-sm text-gray-600 dark:text-gray-400">Janvier 2021 à Avril 2022</span>
</h2>
<div class="chart-container">
    <canvas id="chartMontants" class="bg-white dark:bg-gray-800 p-4 rounded shadow"></canvas>
</div>

Fichier : /var/www/html/dcs/tabs.php
<div class="px-4">
    <div class="flex space-x-2 border-b">
        <button class="tablinks py-2 px-4 focus:outline-none border-b-2 border-transparent hover:border-blue-500" onclick="openTab(event, 'tab1')">Top 10 Applications</button>
        <button class="tablinks py-2 px-4 focus:outline-none border-b-2 border-transparent hover:border-blue-500" onclick="openTab(event, 'tab2')">Montants 5 Plus Gros Clients</button>
        <button class="tablinks py-2 px-4 focus:outline-none border-b-2 border-transparent hover:border-blue-500" onclick="openTab(event, 'tab3')">Volumes PRODUIT1_1 &amp; PRODUIT1_4</button>
    </div>
</div>

Fichier : /var/www/html/dcs/index.php
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Vérifie si une requête POST est envoyée pour changer le thème
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['theme'])) {
    $_SESSION['theme'] = $_POST['theme'];
    header('Content-Type: application/json');
    echo json_encode(['success' => true, 'theme' => $_POST['theme']]);
    exit;
}

// Connexion à la base de données MySQL
$mysqli = new mysqli("localhost", "root", "212002", "dcs");
if ($mysqli->connect_errno) {
    die("Échec de connexion MySQL : " . $mysqli->connect_error);
}

// Requête pour obtenir les top 10 applications par grand client
$query1 = "SELECT gc.NomGrandClient, a.nomAppli, SUM(lf.prix) AS total
FROM ligne_facturation lf
JOIN application a ON lf.IRT = a.IRT
JOIN clients c ON lf.CentreActiviteID = c.CentreActiviteID
JOIN grandclients gc ON c.GrandClientID = gc.GrandClientID
GROUP BY gc.NomGrandClient, a.nomAppli
ORDER BY total DESC
LIMIT 10";
$result1 = $mysqli->query($query1);
$tab1_data = [];
if ($result1) {
    while ($row = $result1->fetch_assoc()) {
        $tab1_data[] = $row;
    }
}

// Requête pour obtenir les 5 plus gros clients
$query2 = "SELECT c.ClientID, c.NomClient, SUM(lf.prix) AS total
FROM ligne_facturation lf
JOIN clients c ON lf.CentreActiviteID = c.CentreActiviteID
WHERE lf.mois BETWEEN '2021-01-01' AND '2022-04-30'
GROUP BY c.ClientID
ORDER BY total DESC
LIMIT 5";
$result2 = $mysqli->query($query2);
$top5_clients = [];
if ($result2) {
    while ($row = $result2->fetch_assoc()) {
        $top5_clients[] = $row;
    }
}

// Génération des mois entre janvier 2021 et avril 2022
$start = new DateTime("2021-01-01");
$end = new DateTime("2022-04-01");
$months = [];
while ($start <= $end) {
    $months[] = $start->format("Y-m");
    $start->modify('+1 month');
}

// Requête pour obtenir les montants mensuels pour les 5 plus gros clients
$tab2_data = [];
foreach ($top5_clients as $client) {
    $client_id = $client['ClientID'];
    $query_client = "SELECT DATE_FORMAT(lf.mois, '%Y-%m') AS month, SUM(lf.prix) AS total
    FROM ligne_facturation lf
    JOIN clients c ON lf.CentreActiviteID = c.CentreActiviteID
    WHERE lf.mois BETWEEN '2021-01-01' AND '2022-04-30'
      AND c.ClientID = $client_id
    GROUP BY month
    ORDER BY month ASC";
    $result_client = $mysqli->query($query_client);
    $monthly = array_fill_keys($months, 0);
    if ($result_client) {
        while ($row = $result_client->fetch_assoc()) {
            $monthly[$row['month']] = floatval($row['total']);
        }
    }
    $tab2_data[] = [
        'NomClient' => $client['NomClient'],
        'data' => array_values($monthly)
    ];
}

// Requête pour obtenir les volumes mensuels pour PRODUIT1_1 et PRODUIT1_4
$query3 = "SELECT p.NOM_PRODUIT, DATE_FORMAT(lf.mois, '%Y-%m') AS month, SUM(lf.volume) AS totalVolume
FROM ligne_facturation lf
JOIN produit p ON lf.produitID = p.produitID
WHERE p.NOM_PRODUIT IN ('PRODUIT1_1', 'PRODUIT1_4')
  AND lf.mois BETWEEN '2021-01-01' AND '2022-04-30'
GROUP BY p.NOM_PRODUIT, month
ORDER BY p.NOM_PRODUIT, month";
$result3 = $mysqli->query($query3);

$products = ['PRODUIT1_1' => array_fill_keys($months, 0), 'PRODUIT1_4' => array_fill_keys($months, 0)];
if ($result3) {
    while ($row = $result3->fetch_assoc()) {
        $prod = $row['NOM_PRODUIT'];
        $month = $row['month'];
        $products[$prod][$month] = floatval($row['totalVolume']);
    }
}
$tab3_data = [
    ['NOM_PRODUIT' => 'PRODUIT1_1', 'data' => array_values($products['PRODUIT1_1'])],
    ['NOM_PRODUIT' => 'PRODUIT1_4', 'data' => array_values($products['PRODUIT1_4'])]
];

$mysqli->close();
?>

<!DOCTYPE html>
<html lang="fr" class="<?= isset($_SESSION['theme']) && $_SESSION['theme'] === 'dark' ? 'dark' : '' ?>">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tableau de Bord</title>
    <!-- Inclure les fichiers CSS et JS -->
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const months = <?php echo json_encode($months); ?>;
        const tab2Data = <?php echo json_encode($tab2_data); ?>;
        const tab3Data = <?php echo json_encode($tab3_data); ?>;
    </script>
    <script defer src="scripts.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
    <?php include 'header.php'; ?>
    <?php include 'tabs.php'; ?>
    <div id="tab1" class="tabcontent p-4">
        <?php include 'tab1_content.php'; ?>
    </div>
    <div id="tab2" class="tabcontent p-4 hidden">
        <?php include 'tab2_content.php'; ?>
    </div>
    <div id="tab3" class="tabcontent p-4 hidden">
        <?php include 'tab3_content.php'; ?>
    </div>
</body>
</html>