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 text-danger"><?= 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><?= _('Cotisations / Primes')?></h3>
            <div class="value text-success"><?= format_N($kpis["primeTtc"]).' '.$_SESSION['devise_C'] ?></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["fraisReel"]).' '.$_SESSION['devise_C'] ?></strong>
                </div>
                <div class="sub-item">
                    <span><?= _('Sinistralité') ?> :</span> 
                    <strong><?= $kpis["rapportSp"].'%' ?></strong>
                </div>
            </div>
        </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-1">
        <div class="card">
            <h3><?= _('Évolution des cotisations / primes') ?></h3>
            <div class="chart">
                <canvas id="cotisationLine"></canvas>
            </div>
        </div>
    </div>
   
    <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>