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() {
    // Utilitaire : récupérer ou créer l'instance Collapse sans toggle auto
    function getCollapseInstance(el) {
        return bootstrap.Collapse.getInstance(el) || new bootstrap.Collapse(el, { toggle: false });
    }

    // Synchroniser les icônes une fois l'animation terminée
    document.querySelectorAll('.accordion-collapse').forEach(collapse => {
        collapse.addEventListener('shown.bs.collapse', function () {
            const btn = document.querySelector('[data-bs-target="#' + this.id + '"]');
            const icon = btn?.querySelector('.accordion-icon');
            if (icon) icon.classList.replace('bi-chevron-down', 'bi-chevron-up');
        });
        collapse.addEventListener('hidden.bs.collapse', function () {
            const btn = document.querySelector('[data-bs-target="#' + this.id + '"]');
            const icon = btn?.querySelector('.accordion-icon');
            if (icon) icon.classList.replace('bi-chevron-up', 'bi-chevron-down');
        });

        // Tes callbacks open/close sécurisés
        collapse.addEventListener('show.bs.collapse', function () {
            const fnName = this.dataset.openFn;
            try { if (fnName && typeof window[fnName] === 'function') window[fnName](); } catch(e) { /* no-op */ }
        });
        collapse.addEventListener('hide.bs.collapse', function () {
            const fnName = this.dataset.closeFn;
            try { if (fnName && typeof window[fnName] === 'function') window[fnName](); } catch(e) { /* no-op */ }
        });
    });

    // Toggle explicite au clic, même avec data-bs-parent
    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 isOpen = target.classList.contains('show');

            console.log('Click', targetSel, 'isOpen:', isOpen);

            // Déclare instance UNE seule fois
            const instance = getCollapseInstance(target);

            if (isOpen) {
                instance.hide();
            } else {
                instance.show();
            }
        });
    });
});
</script>