motorbike/app/Views/statistic/index.php

<style>
  /* --- Style général --- */
  body {
    background: #f4f6f9;
    font-family: 'Poppins', sans-serif;
  }

  h1 {
    font-weight: 600;
    color: #2c3e50;
  }

  small {
    color: #7f8c8d;
  }

  /* --- En-tête --- */
  .content-header {
    background: linear-gradient(135deg, #3498db, #2ecc71);
    color: white;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .breadcrumb {
    background: transparent;
    margin-top: 10px;
  }

  .breadcrumb a {
    color: #ecf0f1;
  }

  /* --- Boîte principale --- */
  .box {
    background: white;
    border-radius: 16px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    padding: 20px;
    animation: fadeIn 0.6s ease;
  }

  @keyframes fadeIn {
    from {opacity: 0; transform: translateY(15px);}
    to {opacity: 1; transform: translateY(0);}
  }

  /* --- Cartes utilisateurs --- */
  .small-box {
    position: relative;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-radius: 15px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
  }

  .small-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
  }

  .small-box .inner {
    padding: 20px;
    text-align: center;
  }

  .small-box h3 {
    font-size: 22px;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: capitalize;
  }

  .small-box p {
    font-size: 15px;
  }

  .small-box b {
    color: #f1c40f;
  }

  .small-box .icon {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 60px;
    opacity: 0.15;
    transition: opacity 0.3s ease;
  }

  .small-box:hover .icon {
    opacity: 0.3;
  }

  .small-box-footer {
    display: block;
    text-align: center;
    padding: 10px;
    color: #ecf0f1;
    background: rgba(0,0,0,0.15);
    border-radius: 0 0 15px 15px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s ease;
  }

  .small-box-footer:hover {
    background: rgba(0,0,0,0.3);
  }

  /* --- Couleurs aléatoires dynamiques pour chaque carte --- */
  .small-box:nth-child(4n+1) {
    background: linear-gradient(135deg, #3498db, #2980b9);
  }
  .small-box:nth-child(4n+2) {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
  }
  .small-box:nth-child(4n+3) {
    background: linear-gradient(135deg, #e67e22, #d35400);
  }
  .small-box:nth-child(4n+4) {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
  }

  /* --- Responsive --- */
  @media (max-width: 768px) {
    .small-box {
      margin-bottom: 15px;
    }
  }
</style>

<div class="content-wrapper">
  <section class="content-header">
    <h1>
      Tableau de bord
      <small>Statistiques des utilisateurs</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Accueil</a></li>
      <li class="active"><a href="../">Tableau de bord</a></li>
    </ol>
  </section>

  <section class="content">
    <div class="box">
      <?php if ($is_admin == true): ?>
        <div class="row" id="dataToMap"></div>
      <?php endif; ?>
    </div>
  </section>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dashboardMainMenu").addClass('active');
  });

  const allUsers = <?php echo json_encode($allUsers); ?>;

  function renderUsers(users) {
    const container = document.getElementById('dataToMap');
    container.innerHTML = '';

    users.forEach(user => {
      const userHtml = `
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
          <div class="small-box">
            <div class="inner">
              <h3>${user.username}</h3>
              <p>Produits vendus : <b>${user.totalVente}</b></p>
            </div>
            <div class="icon">
              <i class="ion ion-stats-bars"></i>
            </div>
            <a href="<?php echo base_url('statistic/') ?>${user.id}" class="small-box-footer">
              Plus d'informations <i class="fa fa-arrow-circle-right"></i>
            </a>
          </div>
        </div>`;
      container.innerHTML += userHtml;
    });
  }

  renderUsers(allUsers);
</script>