radiantrh/Vue/Accueil/index.php

<div id="div_accueil" class="container container-fluid py-4">

    <h1 class="text-primary"><i class="fas fa-tachometer-alt"></i> <?= _('Tableau de bord') ?></h1>

    <!-- KPIs -->
    <div class="kpis">
        <!-- Nombre des contrats santé -->
        <div class="card">
            <h3><?= _('Total Contrats')?></h3>
            <div class="value"><?= number_format($kpis["nbPolice"]) ?></div>
        </div>

        <!-- Adhérents et Ayants droits -->
        <div class="card">
            <h3><?= _('Total Assurés')?></h3>
            <div class="sub-values">
                <div class="sub-item">
                    <span><?= _('Adhérents') ?> :</span> 
                    <strong><?= format_N($kpis["nbAdherent"]) ?></strong>
                </div>
                <div class="sub-item">
                    <span><?= _('Ayants droits') ?> :</span> 
                    <strong><?= format_N($kpis["nbDependant"]) ?></strong>
                </div>
            </div>
        </div> 

        <!-- Primes -->
        <div class="card">
            <h3><?= _('Primes')?></h3>
            <div class="sub-values">
                <div class="sub-item">
                    <span><?= _('Statistique') ?> :</span> 
                    <strong class="text-success"><?= format_N($kpis["primeNetteStat"]).' '.$_SESSION['devise_C'] ?></strong>
                </div>

                <div class="sub-item">
                    <span><?= _('TTC') ?> :</span> 
                    <strong><?= format_N($kpis["primeTtc"]).' '.$_SESSION['devise_C'] ?></strong>
                </div>
            </div>
        </div>

        <!-- Sinistres -->
        <div class="card">
            <h3><?= _('Sinistres')?></h3>
            <div class="sub-values">
                <div class="sub-item">
                    <span><?= _('Montant') ?> :</span> 
                    <strong class="text-danger"><?= format_N($kpis["montantApayer"]).' '.$_SESSION['devise_C'] ?></strong>
                </div>
                <div class="sub-item">
                    <span><?= _('Rapport S/P') ?> :</span> 
                    <?php if($kpis["rapportSp"] > 65 && $kpis["rapportSp"] <= 80):?>
                    <strong class="text-warning"><?= $kpis["rapportSp"].'%' ?></strong>
                    <?php elseif($kpis["rapportSp"] > 80):?>
                    <strong class="text-danger"><?= $kpis["rapportSp"].'%' ?></strong>
                    <?php else:?>
                    <strong class="text-primary"><?= $kpis["rapportSp"].'%' ?></strong>
                    <?php endif;?>
                </div>
            </div>
        </div>
    </div>

    <!-- Accordéons -->
    <div class="grid-1">
        <div class="card">
            <div class="accordion" id="dashboardAccordion">
                <!-- Section Contrats -->
                <section class="accordion-section">
                    <h2 class="accordion-header" data-bs-toggle="collapse" data-bs-target="#contratsCollapse">
                        <i class="fas fa-file-contract text-primary"></i>
                        <span class="accordion-title"><?= _("Contrats santé")?></span>
                        <i class="accordion-icon bi bi-chevron-down"></i>
                    </h2>
                    <div id="contratsCollapse" 
                        class="accordion-collapse collapse" 
                        data-bs-parent="#dashboardAccordion"
                        data-open-fn="charger_contrats" 
                        data-close-fn="reset_contrats">
                        <div class="accordion-content">
                            <div id="div_liste_contrats"></div>
                        </div>
                    </div>
                </section>

                <!-- Section Graphiques -->
                <section class="accordion-section">
                    <h2 class="accordion-header" data-bs-toggle="collapse" data-bs-target="#graphiqueCollapse">
                        <i class="fas fa-chart-line text-primary"></i> 
                        <span class="accordion-title"><?= _("Graphiques sinistres")?></span>
                        <!-- Icône conservée -->
                        <i class="accordion-icon bi bi-chevron-down"></i>
                    </h2>
                    <div id="graphiqueCollapse" 
                        class="accordion-collapse collapse" 
                        data-bs-parent="#dashboardAccordion"
                        data-open-fn="graphique_sinistre" 
                        data-close-fn="reset_graphique">
                        <div class="accordion-content">
                            <div id="div_graphique">
                                <canvas id="claimsChart"></canvas>
                                <canvas id="claimsMonthChart"></canvas>
                                <canvas id="lossRatioChart"></canvas>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

<!-- ======================================================= -->
<!-- CHARGEMENT DES LIBRAIRIES GRAPHIQUES ET PDF ICI -->
<!-- Pour éviter de les recharger à chaque appel Ajax -->
<!-- ======================================================= -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<script>
	document.addEventListener('DOMContentLoaded', function() {
        const collapses = document.querySelectorAll('.accordion-collapse');

        collapses.forEach(collapse => {
            // Quand une section s'ouvre
            collapse.addEventListener('show.bs.collapse', function () {
                const fnName = this.dataset.openFn;
                if (fnName && typeof window[fnName] === 'function') {
                    window[fnName]();
                }

                // Changer l’icône en chevron-up
                const header = document.querySelector('[data-bs-target="#' + this.id + '"] .accordion-icon');
                if (header) header.classList.replace('bi-chevron-down', 'bi-chevron-up');
            });

            // Quand une section se ferme
            collapse.addEventListener('hide.bs.collapse', function () {
                const fnName = this.dataset.closeFn;
                if (fnName && typeof window[fnName] === 'function') {
                    window[fnName]();
                }

                // Remettre l’icône en chevron-down
                const header = document.querySelector('[data-bs-target="#' + this.id + '"] .accordion-icon');
                if (header) header.classList.replace('bi-chevron-up', 'bi-chevron-down');
            });
        });
    });
</script>