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"]) ?></strong>
                </div>

                <div class="sub-item">
                    <span><?= _('TTC') ?> :</span> 
                    <strong><?= format_N($kpis["primeTtc"]) ?></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"]) ?></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" id="headingContrats">
                        <button class="accordion-button collapsed" 
                                type="button" 
                                data-bs-toggle="collapse" 
                                data-bs-target="#contratsCollapse" 
                                aria-expanded="false" 
                                aria-controls="contratsCollapse">
                            <i class="fas fa-file-contract text-primary me-2"></i>
                            <span class="accordion-title"><?= _("Contrats santé")?></span>
                            <i class="accordion-icon bi bi-chevron-down ms-auto"></i>
                        </button>
                    </h2>
                    <div id="contratsCollapse" 
                        class="accordion-collapse collapse" 
                        aria-labelledby="headingContrats" 
                        data-bs-parent="#dashboardAccordion"
                        data-open-fn="charger_contrats" 
                        data-close-fn="reset_contrats">
                        <div class="accordion-body">
                            <div id="div_liste_contrats"></div>
                        </div>
                    </div>
                </section>

                <!-- Section Graphiques -->
                <section class="accordion-section">
                    <h2 class="accordion-header" id="headingGraphiques">
                        <button class="accordion-button collapsed" 
                                type="button" 
                                data-bs-toggle="collapse" 
                                data-bs-target="#graphiqueCollapse" 
                                aria-expanded="false" 
                                aria-controls="graphiqueCollapse">
                            <i class="fas fa-chart-line text-primary me-2"></i>
                            <span class="accordion-title"><?= _("Graphiques sinistres")?></span>
                            <i class="accordion-icon bi bi-chevron-down ms-auto"></i>
                        </button>
                    </h2>
                    <div id="graphiqueCollapse" 
                        class="accordion-collapse collapse" 
                        aria-labelledby="headingGraphiques" 
                        data-bs-parent="#dashboardAccordion"
                        data-open-fn="graphique_sinistre" 
                        data-close-fn="reset_graphique">
                        <div class="accordion-body">
                            <div id="div_graphique">
                                <canvas id="claimsChart"></canvas>
                                <canvas id="claimsMonthChart"></canvas>
                                <canvas id="lossRatioChart"></canvas>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.accordion-button').forEach(btn => {
        btn.addEventListener('click', function(e) {
            const targetSel = this.getAttribute('data-bs-target') || this.dataset.bsTarget;
            const target = document.querySelector(targetSel);
            if (!target) return;

            e.preventDefault(); // on prend la main
            const instance = bootstrap.Collapse.getInstance(target) 
                           || new bootstrap.Collapse(target, { toggle: false });

            // Toggle explicite : si ouvert => fermer, sinon => ouvrir
            if (target.classList.contains('collapsing') || target.classList.contains('show')) {
                console.log('Click', targetSel, '=> fermeture');
                instance.hide();
            } else {
                console.log('Click', targetSel, '=> ouverture');
                instance.show();
            }
        });
    });
});
</script>