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-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-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() {
    
    // On cible tous les boutons qui pointent vers un accordéon
    const accordionButtons = document.querySelectorAll('.accordion-button');

    accordionButtons.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetSelector = this.getAttribute('data-bs-target');
            const targetEl = document.querySelector(targetSelector);
            
            if (!targetEl) return;

            // On récupère l'instance existante ou on en crée une proprement
            // Le "parent" permet de fermer automatiquement les autres sections
            const instance = bootstrap.Collapse.getOrCreateInstance(targetEl, {
                parent: '#dashboardAccordion',
                toggle: false
            });

            // On déclenche l'action manuellement
            instance.toggle();
        });
    });

    // Gestion des icônes et des fonctions de chargement (open-fn / close-fn)
    const collapses = document.querySelectorAll('.accordion-collapse');
    
    collapses.forEach(collapseEl => {
        // Au moment où il commence à s'ouvrir
        collapseEl.addEventListener('show.bs.collapse', function () {
            const btn = document.querySelector(`[data-bs-target="#${this.id}"]`);
            btn.classList.remove('collapsed');
            const icon = btn?.querySelector('.accordion-icon');
            if (icon) icon.classList.replace('bi-chevron-down', 'bi-chevron-up');

            const fnName = this.dataset.openFn;
            if (fnName && typeof window[fnName] === 'function') window[fnName]();
        });

        // Au moment où il commence à se fermer
        collapseEl.addEventListener('hide.bs.collapse', function () {
            const btn = document.querySelector(`[data-bs-target="#${this.id}"]`);
            btn.classList.add('collapsed');
            const icon = btn?.querySelector('.accordion-icon');
            if (icon) icon.classList.replace('bi-chevron-up', 'bi-chevron-down');

            const fnName = this.dataset.closeFn;
            if (fnName && typeof window[fnName] === 'function') window[fnName]();
        });
    });
});
</script>