motorbike/app/Views/performance/index.php

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1 class="font-stretch-50%">
        Rapport pour chaque employé
    </h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Accueil</a></li>
      <li class="active">RAPPORT POUR CHAQUE EMPLOYE</li>
    </ol>
  </section>

  <section class="content">
    <div class="row">
      <div class="col-md-12 col-xs-12">

        <div class="box">
          <div class="box-header">
            <h3 class="box-title">Performance des employés</h3>
          </div>

          
          <div style="display: flex; gap: 20px; align-items: center; margin: 20px;">
            <div>
              <label for="day">Jour :</label>
              <input type="date" id="day" name="day" class="form-control" placeholder="Choisissez un jour">
            </div>
            <div>
              <label for="week">Semaine :</label>
              <input type="week" id="week" name="week" class="form-control" placeholder="Choisissez une semaine">
            </div>
            <div>
              <label for="month">Mois :</label>
              <input type="month" id="month" name="month" class="form-control" placeholder="Choisissez un mois">
            </div>
          </div>

          <div class="box-body">
            <table id="manageTable" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>Nom</th>
                  <th>Nombre de vente</th>
                  <th>Bénéfice réalisé</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>

      </div>
    </div>
    <!-- CENTRER les deux boîtes -->
    <div class="row d-flex justify-content-center my-4 ">
  <div class="col-lg-3 col-6">
    <div class="small-box" style="background-color: #A9A9A9;">
      <div class="inner text-center">
        <h3 id="total_commande"></h3>
        <p>Total commande</p>
      </div>
      <div class="icon">
        <i class="fa fa-shopping-cart"></i>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-6">
    <div class="small-box" style="background-color: #A9A9A9;">
      <div class="inner text-center">
        <h3 id="total_benefice"></h3>
        <p>Total bénéfice</p>
      </div>
      <div class="icon">
      <i class="fa fa-line-chart"></i>
      </div>
    </div>
  </div>
</div>

</section>

  
</div>

     


<!-- ... contenu existant ... -->

<script>
  let manageTable;

  $(document).ready(function () {
    // datatable-fr.js
$.extend(true, $.fn.dataTable.defaults, {
    language: {
        sProcessing:   "Traitement en cours...",
        sSearch:       "Rechercher&nbsp;:",
        sLengthMenu:   "Afficher _MENU_ &eacute;l&eacute;ments",
        sInfo:         "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
        sInfoEmpty:    "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
        sInfoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
        sLoadingRecords: "Chargement en cours...",
        sZeroRecords:  "Aucun &eacute;l&eacute;ment &agrave; afficher",
        sEmptyTable:   "Aucune donn&eacute;e disponible dans le tableau",
        oPaginate: {
            sFirst:    "Premier",
            sPrevious: "Pr&eacute;c&eacute;dent",
            sNext:     "Suivant",
            sLast:     "Dernier"
        },
        oAria: {
            sSortAscending:  ": activer pour trier la colonne par ordre croissant",
            sSortDescending: ": activer pour trier la colonne par ordre d&eacute;croissant"
        }
    }
});

    $("#performance_menu").addClass('active');

    function initDataTable(date = '', type = 'day') {
      if (manageTable) {
        manageTable.destroy(); // On détruit l'ancien tableau
      }

      manageTable = $('#manageTable').DataTable({
        ajax: {
          url: 'fetchPerformanceData',
          type: 'GET',
          data: {
            date: date,
            type: type
          }
        },
        columns: [
          { data: 0 },
          { data: 1 },
          { data: 2 },
        ],
        order: [],
        columnDefs: [
          { targets: 1, className: 'text-right rowmontant' }
        ]
      });
    }

    // Initialise avec la date du jour
    initDataTable();

    function disableOtherFields(exceptId) {
      ['day', 'week', 'month'].forEach(id => {
        if (id !== exceptId) {
          $('#' + id).prop('disabled', true);
        }
      });
    }

    function resetFields() {
      $('#day, #week, #month').val('').prop('disabled', false);
    }

    $('#day').on('change', function () {
      const date = $(this).val();
      if (date) {
        
        initDataTable(date, 'day');
        getGlobalTotals(week,'week');
      } else {
        resetFields();
        initDataTable();
      }
    });

    $('#week').on('change', function () {
      const week = $(this).val();
      if (week) {
        initDataTable(week, 'week');
        getGlobalTotals(week,'week');
      } else {
        resetFields();
        initDataTable();
      }
    });

    $('#month').on('change', function () {
      const month = $(this).val();
      if (month) {
        initDataTable(month, 'month');
        getGlobalTotals(week,'week');
      } else {
        resetFields();
        initDataTable();
      }
    });
  });

  function getGlobalTotals(date,type) {
  $.ajax({
    url: 'fetchTotalPerformanceData',
    type: 'GET',
    data: {date: date,
          type: type},
    dataType: 'json',
    success: function(response) {
      $('#total_commande').text(response.total_commande );
      $('#total_benefice').text(response.total_benefice + ' Ar');
    },
    error: function() {
      $('#total_commande').text('Erreur');
      $('#total_benefice').text('Erreur');
    }
  });
}

getGlobalTotals(); // On l'appelle au chargement

</script>