radiantrh/Vue/Accueil/index.php

<div class="container text-primary">
    <h1><i class="fas fa-tachometer-alt"></i> Synthèse</h1>

    <!-- KPIs -->
    <div class="kpis">
        <div class="card">
            <h3><?= _('Total Contrats')?></h3>
            <div class="value"><?= format_N($kpis["nbPolice"]) ?> </div>
        </div>

        <div class="card">
            <h3><?= _('Total Assurés')?></h3>
            <div class="value"><?= format_N($kpis["nbBeneficiaire"]) ?></div>
            <div class="sub-values">
                <div class="sub-item">
                    <span><?= _('Salariés') ?> :</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> 

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

    <div class="grid-1">
        <div class="card">
            <section class="accordion-section">
                <h2 class="accordion-header">
                    <i class="fas fa-file-medical text-primary"></i> 
                    <span class="accordion-title"><?= _("Liste des contrats")?></span>
                    <i class="accordion-icon bi bi-chevron-down"></i>
                </h2>
                <div class="accordion-content">

                </div>
            </section>
        </div>
    </div>

    <!-- Activité & Alertes -->
    <!--
    <div class="grid-2">
        <div class="card">
            <h3><?= _('Activité récente')?></h3>
            <ul>
                <?php foreach ($activities as $activity): ?>
                    <li>
                        <i class="<?= $activity["icon"] ?>"></i>
                        <?= $activity["label"] ?>
                        <small style="float:right;color:#999"><?= $activity["time"] ?></small>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>

        <div class="card">
            <h3><?= _('Alertes')?></h3>
            <ul>
                <?php foreach ($alerts as $alert): ?>
                    <li class="alert">
                        <i class="fas fa-exclamation-triangle"></i>
                        <?= $alert ?>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
    </div>
    -->

    <!-- Graphiques (placeholders) -->
    <div class="grid-2">
        <div class="card">
            <h3><?= _('Sinistralité') ?></h3>
            <div class="chart">
                <canvas id="lossRatioBar"></canvas>
            </div>
        </div>

        <div class="card">
            <h3><?= _('Répartition des sinistres')?></h3>
            <div class="chart">
                <canvas id="claimsPie"></canvas>
            </div>
        </div>
    </div>

</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<script>
    // Répartition des sinistres
    const dataClaims = <?= $dataTabClaims ?>;
    new Chart(document.getElementById('claimsPie'), {
        type: 'doughnut',
        data: {
            labels: dataClaims.claimsLabels,
            datasets: [{
                data: dataClaims.claimsValues
            }]
        },
        options: {
            plugins: {
                legend: { position: 'right' }
            }
        }
    });

    // Évolution des cotisations / primes
    new Chart(document.getElementById('cotisationLine'), {
        type: 'line',
        data: {
            labels: <?= json_encode($months) ?>,
            datasets: [{
                label: "Cotisations",
                data: <?= json_encode($monthlyCotisations) ?>,
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            scales: {
                y: { beginAtZero: false }
            }
        }
    });

    // Sinistralité
    new Chart(document.getElementById('lossRatioBar'), {
        type: 'bar',
        data: {
            labels: <?= json_encode($lossRatioLabels) ?>,
            datasets: [{
                label: "Sinistralité (%)",
                data: <?= json_encode($lossRatioValues) ?>
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });
</script>

<script>
	document.addEventListener('DOMContentLoaded', function() {
        // Laisser Bootstrap gérer les accordéons - suppression du script conflictuel
        // Bootstrap s'occupe déjà du fonctionnement des accordéons
        
        // Si vous voulez garder votre système personnalisé pour les grandes sections,
        // assurez-vous qu'il ne cible pas les mêmes éléments que Bootstrap
				
		const sectionHeaders = document.querySelectorAll('.accordion-section .accordion-header');
				
		sectionHeaders.forEach(header => {
			header.addEventListener('click', function() {
                // Vérifier si cet accordéon est géré par Bootstrap
                if (!this.querySelector('[data-bs-toggle="collapse"]')) {
                    const content = this.nextElementSibling;
                    const isCurrentlyActive = this.classList.contains('active');
                    
                    // Fermer toutes les sections d'abord
                    document.querySelectorAll('.accordion-section .accordion-content').forEach(content => {
                        content.style.display = 'none';
                    });
                    document.querySelectorAll('.accordion-section .accordion-header').forEach(header => {
                        header.classList.remove('active');
                    });
                    
                    // Si la section n'était pas active, l'ouvrir
                    if (!isCurrentlyActive) {
                        this.classList.add('active');
                        content.style.display = 'block';
                    }
                }
			});
		});
	});	
</script>