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

<!-- ======================================================= -->
<!-- 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 headerBtn = document.querySelector('[data-bs-target="#' + this.id + '"] .accordion-icon');
                if (headerBtn) headerBtn.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 headerBtn = document.querySelector('[data-bs-target="#' + this.id + '"] .accordion-icon');
                if (headerBtn) headerBtn.classList.replace('bi-chevron-up', 'bi-chevron-down');
            });
        });
    });
</script>