templates/admin/tresorerie.html.twig line 1

Open in your IDE?
  1. {% extends 'sidebar.twig' %}
  3. {% block title %}Dashboard Trésorerie{% endblock %}
  5. {% block page_emoji %}💰{% endblock %}
  7. {% block page_titre %}Trésorerie{% endblock %}
  9. {% block page_info %}Vue d'ensemble de vos revenus{% endblock %}
  11. {% block admin_content %}
  12.     <style>
  13.         .dark .dark\:bg-gray-800 {
  14.             background-color: #1f2937;
  15.         }
  16.         .dark .dark\:text-white {
  17.             color: #ffffff;
  18.         }
  19.         .dark .dark\:text-gray-400 {
  20.             color: #9ca3af;
  21.         }
  22.         .transition-all {
  23.             transition-property: all;
  24.             transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  25.             transition-duration: 150ms;
  26.         }
  27.         .hover\:shadow-md:hover {
  28.             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  29.         }
  30.     </style>
  32.     {% set moisFr = {
  33.         '1': 'Janvier',
  34.         '2': 'Février',
  35.         '3': 'Mars',
  36.         '4': 'Avril',
  37.         '5': 'Mai',
  38.         '6': 'Juin',
  39.         '7': 'Juillet',
  40.         '8': 'Août',
  41.         '9': 'Septembre',
  42.         '10': 'Octobre',
  43.         '11': 'Novembre',
  44.         '12': 'Décembre'
  45.     } %}
  48.     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  49.         <div class="space-y-8">
  50.             {# Première section : KPIs principaux #}
  51.             {# Première section : KPIs principaux #}
  52.             <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
  53.                 {# CA Annuel #}
  54.                 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-all">
  55.                     <div class="flex items-center justify-between">
  56.                         <div>
  57.                             <p class="text-sm font-medium text-gray-600 dark:text-gray-400">CA Annuel {{ "now"|date('Y') }}</p>
  58.                             <p class="text-2xl font-bold text-gray-900 dark:text-white mt-2">
  59.                                 {{ caAnnuel|number_format(2, ',', ' ') }} â‚¬
  60.                             </p>
  61.                         </div>
  62.                         <div class="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-full">
  63.                             <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  64.                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  65.                             </svg>
  66.                         </div>
  67.                     </div>
  68.                 </div>
  70.                 {# CA Mois en cours #}
  71.                 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-all">
  72.                     <div class="flex items-center justify-between">
  73.                         <div>
  74.                             <p class="text-sm font-medium text-gray-600 dark:text-gray-400">
  75.                                 CA {{ moisFr[("now"|date('n'))] }}
  76.                             </p>
  77.                             <p class="text-2xl font-bold text-gray-900 dark:text-white mt-2">
  78.                                 {{ caMoisEnCours|number_format(2, ',', ' ') }} â‚¬
  79.                             </p>
  80.                         </div>
  81.                         <div class="p-3 bg-green-50 dark:bg-green-900/20 rounded-full">
  82.                             <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  83.                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
  84.                             </svg>
  85.                         </div>
  86.                     </div>
  87.                 </div>
  89.                 {# Card CB #}
  90.                 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-all cursor-pointer" onclick="openModal('cb')">
  91.                     <div class="flex items-center justify-between">
  92.                         <div>
  93.                             <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Carte Bancaire</p>
  94.                             <p class="text-2xl font-bold text-gray-900 dark:text-white mt-2">
  95.                                 {{ paiementCB|number_format(2, ',', ' ') }} â‚¬
  96.                             </p>
  97.                         </div>
  98.                         <div class="p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-full">
  99.                             <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  100.                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
  101.                             </svg>
  102.                         </div>
  103.                     </div>
  104.                 </div>
  106.                 {# Card Acomptes #}
  107.                 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-all cursor-pointer" onclick="openModal('acompte')">
  108.                     <div class="flex items-center justify-between">
  109.                         <div>
  110.                             <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Planity</p>
  111.                             <p class="text-2xl font-bold text-gray-900 dark:text-white mt-2">
  112.                                 {{ acomptes|number_format(2, ',', ' ') }} â‚¬
  113.                             </p>
  114.                         </div>
  115.                         <div class="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-full">
  116.                             <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  117.                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
  118.                             </svg>
  119.                         </div>
  120.                     </div>
  121.                 </div>
  123.                 {# Card Espèces #}
  124.                 <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-all cursor-pointer" onclick="openModal('especes')">
  125.                     <div class="flex items-center justify-between">
  126.                         <div>
  127.                             <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Espèces</p>
  128.                             <p class="text-2xl font-bold text-gray-900 dark:text-white mt-2">
  129.                                 {{ paiementEspeces|number_format(2, ',', ' ') }} â‚¬
  130.                             </p>
  131.                         </div>
  132.                         <div class="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-full">
  133.                             <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  134.                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z"></path>
  135.                             </svg>
  136.                         </div>
  137.                     </div>
  138.                 </div>
  139.             </div>
  142.             {# Graphique d'évolution #}
  143.             <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
  144.                 <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-6">Évolution mensuelle du CA</h3>
  145.                 <div class="h-[400px]">
  146.                     <canvas id="evolutionChart"></canvas>
  147.                 </div>
  148.             </div>
  150.             {# Comparaison périodes #}
  151.             <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
  152.                 <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-6">Comparaison des périodes</h3>
  154.                 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 relative">
  155.                     {# Période actuelle #}
  156.                     <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-6">
  157.                         <div class="flex items-center space-x-3 mb-4">
  158.                             <div class="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
  159.                                 <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  160.                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
  161.                                 </svg>
  162.                             </div>
  163.                             <span class="text-sm font-medium text-gray-900 dark:text-white">
  164.     1-{{ "now"|date('j') }} {{ moisFr[("now"|date('n'))] }}
  165. </span>
  166.                         </div>
  167.                         <p class="text-2xl font-bold text-gray-900 dark:text-white">
  168.                             {{ comparaisonMois.mois_actuel|number_format(2, ',', ' ') }} â‚¬
  169.                         </p>
  170.                         <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Période en cours</p>
  171.                     </div>
  173.                     {# Période précédente #}
  174.                     <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-6">
  175.                         <div class="flex items-center space-x-3 mb-4">
  176.                             <div class="p-2 bg-gray-100 dark:bg-gray-600 rounded-lg">
  177.                                 <svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  178.                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
  179.                                 </svg>
  180.                             </div>
  181.                             <span class="text-sm font-medium text-gray-900 dark:text-white">
  182.     1-{{ "now"|date('j') }} {{ moisFr[("first day of last month"|date('n'))] }}
  183. </span>
  184.                         </div>
  185.                         <p class="text-2xl font-bold text-gray-900 dark:text-white">
  186.                             {{ comparaisonMois.mois_precedent|number_format(2, ',', ' ') }} â‚¬
  187.                         </p>
  188.                         <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Même période mois précédent</p>
  189.                     </div>
  190.                 </div>
  192.                 {% if comparaisonMois.mois_precedent != 0 %}
  193.                     {% set evolution = ((comparaisonMois.mois_actuel - comparaisonMois.mois_precedent) / comparaisonMois.mois_precedent * 100)|round %}
  194.                 {% else %}
  195.                     {% if comparaisonMois.mois_actuel > 0 %}
  196.                         {% set evolution = 100 %}
  197.                     {% elseif comparaisonMois.mois_actuel == 0 %}
  198.                         {% set evolution = 0 %}
  199.                     {% else %}
  200.                         {% set evolution = -100 %}
  201.                     {% endif %}
  202.                 {% endif %}
  203.                 <div class="mt-6 p-4 rounded-xl {% if evolution > 0 %}bg-green-50 dark:bg-green-900/20{% else %}bg-red-50 dark:bg-red-900/20{% endif %}">
  204.                     <div class="flex items-center justify-between">
  205.                         <div class="flex items-center space-x-3">
  206.                             <div class="p-2 rounded-lg {% if evolution > 0 %}bg-green-100 dark:bg-green-800{% else %}bg-red-100 dark:bg-red-800{% endif %}">
  207.                                 <svg class="w-5 h-5 {% if evolution > 0 %}text-green-600 dark:text-green-400{% else %}text-red-600 dark:text-red-400{% endif %}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  208.                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{% if evolution > 0 %}M13 7h8m0 0v8m0-8l-8 8-4-4-6 6{% else %}M13 17h8m0 0V9m0 8l-8-8-4 4-6-6{% endif %}"/>
  209.                                 </svg>
  210.                             </div>
  211.                             <div>
  212.                                 <p class="font-medium {% if evolution > 0 %}text-green-800 dark:text-green-400{% else %}text-red-800 dark:text-red-400{% endif %}">
  213.                                     {% if evolution > 0 %}
  214.                                         Progression de {{ evolution }}%
  215.                                     {% else %}
  216.                                         Baisse de {{ evolution|abs }}%
  217.                                     {% endif %}
  218.                                 </p>
  219.                                 <p class="text-sm text-gray-600 dark:text-gray-400">par rapport au mois précédent</p>
  220.                             </div>
  221.                         </div>
  222.                         <div class="text-2xl">
  223.                             {% if evolution > 0 %}📈{% else %}📉{% endif %}
  224.                         </div>
  225.                     </div>
  226.                 </div>
  228.                 {# Info supplémentaire #}
  229.                 <div class="mt-4 flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
  230.                     <svg class="w-4 h-4 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  231.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
  232.                     </svg>
  233.                     <span>Comparaison basée sur les {{ "now"|date('j') }} premiers jours de chaque mois</span>
  234.                 </div>
  235.             </div>
  236.         </div>
  237.     </div>
  239.     <!-- Modals -->
  240.     <div id="modalContainer" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
  241.         <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white">
  242.             <div class="flex justify-between items-center mb-4">
  243.                 <h3 class="text-lg font-medium text-gray-900" id="modalTitle"></h3>
  244.                 <button onclick="closeModal()" class="text-gray-400 hover:text-gray-500">
  245.                     <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  246.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
  247.                     </svg>
  248.                 </button>
  249.             </div>
  250.             <div id="modalContent" class="mt-4"></div>
  251.         </div>
  252.     </div>
  255.     <style>
  256.         .modal-enter {
  257.             animation: fadeIn 0.3s ease-out;
  258.         }
  260.         @keyframes fadeIn {
  261.             from {
  262.                 opacity: 0;
  263.                 transform: translateY(-20px);
  264.             }
  265.             to {
  266.                 opacity: 1;
  267.                 transform: translateY(0);
  268.             }
  269.         }
  271.     </style>
  272. {% endblock %}
  274. {% block javascripts %}
  275.     {{ parent() }}
  276.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  277.     <script>
  278.         document.addEventListener('DOMContentLoaded', function() {
  279.             const ctx = document.getElementById('evolutionChart').getContext('2d');
  280.             const data = {{ evolutionMensuelle|json_encode|raw }};
  282.             const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
  283.                 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
  285.             new Chart(ctx, {
  286.                 type: 'line',
  287.                 data: {
  288.                     labels: data.map(item => months[item.mois - 1]),
  289.                     datasets: [{
  290.                         label: 'Chiffre d\'affaires',
  291.                         data: data.map(item => item.total),
  292.                         borderColor: '#4f46e5',
  293.                         backgroundColor: 'rgba(79, 70, 229, 0.1)',
  294.                         tension: 0.4,
  295.                         fill: true,
  296.                         pointBackgroundColor: '#4f46e5',
  297.                         pointBorderColor: '#ffffff',
  298.                         pointBorderWidth: 2,
  299.                         pointRadius: 4,
  300.                         pointHoverRadius: 6
  301.                     }]
  302.                 },
  303.                 options: {
  304.                     responsive: true,
  305.                     maintainAspectRatio: false,
  306.                     plugins: {
  307.                         legend: {
  308.                             display: false
  309.                         },
  310.                         tooltip: {
  311.                             backgroundColor: '#1f2937',
  312.                             titleColor: '#ffffff',
  313.                             bodyColor: '#ffffff',
  314.                             padding: 12,
  315.                             displayColors: false,
  316.                             callbacks: {
  317.                                 label: function(context) {
  318.                                     return new Intl.NumberFormat('fr-FR', {
  319.                                         style: 'currency',
  320.                                         currency: 'EUR'
  321.                                     }).format(context.parsed.y);
  322.                                 }
  323.                             }
  324.                         }
  325.                     },
  326.                     scales: {
  327.                         x: {
  328.                             grid: {
  329.                                 display: false
  330.                             },
  331.                             ticks: {
  332.                                 color: '#6b7280'
  333.                             }
  334.                         },
  335.                         y: {
  336.                             beginAtZero: true,
  337.                             grid: {
  338.                                 color: '#e5e7eb'
  339.                             },
  340.                             ticks: {
  341.                                 color: '#6b7280',
  342.                                 callback: function(value) {
  343.                                     return new Intl.NumberFormat('fr-FR', {
  344.                                         style: 'currency',
  345.                                         currency: 'EUR',
  346.                                         maximumFractionDigits: 0
  347.                                     }).format(value);
  348.                                 }
  349.                             }
  350.                         }
  351.                     }
  352.                 }
  353.             });
  354.         });
  356.         function openModal(type) {
  357.             const modal = document.getElementById('modalContainer');
  358.             const title = document.getElementById('modalTitle');
  360.             modal.classList.remove('hidden');
  362.             switch(type) {
  363.                 case 'cb':
  364.                     title.textContent = 'Détails des paiements par Carte Bancaire';
  365.                     loadDetails('cb');
  366.                     break;
  367.                 case 'acompte':
  368.                     title.textContent = 'Détails des acomptes Planity';
  369.                     loadDetails('acompte');
  370.                     break;
  371.                 case 'especes':
  372.                     title.textContent = 'Détails des paiements en espèces';
  373.                     loadDetails('especes');
  374.                     break;
  375.             }
  376.         }
  378.         function closeModal() {
  379.             document.getElementById('modalContainer').classList.add('hidden');
  380.         }
  382.         function loadDetails(type) {
  383.             const routes = {
  384.                 'cb': '{{ path('app_dashboard_cb_details') }}',
  385.                 'acompte': '{{ path('app_dashboard_acompte_details') }}',
  386.                 'especes': '{{ path('app_dashboard_especes_details') }}'
  387.             };
  389.             fetch(routes[type])
  390.                 .then(response => response.json())
  391.                 .then(data => {
  392.                     document.getElementById('modalContent').innerHTML = generateTableHTML(data);
  393.                 });
  394.         }
  396.         function generateTableHTML(data) {
  397.             return `
  398.         <div class="mb-4 grid grid-cols-1 sm:grid-cols-3 gap-4">
  399.             <!-- Filtres -->
  400.             <div class="relative">
  401.                 <input type="text"
  402.                        id="dateFilter"
  403.                        placeholder="Filtrer par date"
  404.                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
  405.                        onkeyup="filterTable()">
  406.             </div>
  407.             <div class="relative">
  408.                 <input type="text"
  409.                        id="clientFilter"
  410.                        placeholder="Filtrer par client"
  411.                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
  412.                        onkeyup="filterTable()">
  413.             </div>
  414.             <div class="relative">
  415.                 <input type="text"
  416.                        id="montantFilter"
  417.                        placeholder="Filtrer par montant"
  418.                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
  419.                        onkeyup="filterTable()">
  420.             </div>
  421.         </div>
  422.         <div class="overflow-x-auto">
  423.             <div class="inline-block min-w-full align-middle">
  424.                 <div class="overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5">
  425.                     <!-- Version mobile -->
  426.                     <div class="block sm:hidden" id="mobileContent">
  427.                         ${generateMobileRows(data)}
  428.                     </div>
  430.                     <!-- Version desktop -->
  431.                     <table class="hidden sm:table min-w-full divide-y divide-gray-300">
  432. <thead class="bg-gray-50">
  433.     <tr>
  434.         <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 cursor-pointer" onclick="sortTable(0)">
  435.             <div class="flex items-center">
  436.                 Date
  437.                 <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  438.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
  439.                 </svg>
  440.             </div>
  441.         </th>
  442.         <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 cursor-pointer" onclick="sortTable(1)">
  443.             <div class="flex items-center">
  444.                 Client
  445.                 <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  446.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
  447.                 </svg>
  448.             </div>
  449.         </th>
  450.         <th class="px-3 py-3.5 text-right text-sm font-semibold text-gray-900 cursor-pointer" onclick="sortTable(2)">
  451.             <div class="flex items-center justify-end">
  452.                 Montant
  453.                 <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  454.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
  455.                 </svg>
  456.             </div>
  457.         </th>
  458.     </tr>
  459. </thead>
  461.                         <tbody class="divide-y divide-gray-200 bg-white" id="tableBody">
  462.                             ${generateTableRows(data)}
  463.                         </tbody>
  464.                         <tfoot class="bg-gray-50">
  465.                             <tr>
  466.                                 <td colspan="2" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Total</td>
  467.                                 <td class="px-3 py-3.5 text-right text-sm font-semibold text-gray-900" id="totalMontant">
  468.                                     ${calculateTotal(data)} â‚¬
  469.                                 </td>
  470.                             </tr>
  471.                         </tfoot>
  472.                     </table>
  473.                 </div>
  474.             </div>
  475.         </div>
  476.     `;
  477.         }
  479.         // Fonction pour générer les lignes du tableau
  480.         function generateTableRows(data) {
  481.             return data.map(item => `
  482.         <tr class="hover:bg-gray-50">
  483.             <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">${item.date}</td>
  484.             <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-900">${item.client}</td>
  485.             <td class="whitespace-nowrap px-3 py-4 text-sm text-right font-medium text-gray-900">${item.montant} â‚¬</td>
  486.         </tr>
  487.     `).join('');
  488.         }
  490.         // Fonction pour générer les lignes mobiles
  491.         function generateMobileRows(data) {
  492.             return data.map(item => `
  493.         <div class="bg-white border-b border-gray-200 p-4">
  494.             <div class="flex justify-between items-center mb-2">
  495.                 <div class="font-medium text-gray-900">${item.client}</div>
  496.                 <div class="text-lg font-bold text-gray-900">${item.montant} â‚¬</div>
  497.             </div>
  498.             <div class="text-sm text-gray-500">${item.date}</div>
  499.         </div>
  500.     `).join('');
  501.         }
  503.         // Fonction pour calculer le total
  504.         function calculateTotal(data) {
  505.             return data.reduce((sum, item) => sum + parseFloat(item.montant.replace(',', '.')), 0)
  506.                 .toFixed(2)
  507.                 .replace('.', ',');
  508.         }
  510.         // Fonction de filtrage
  511.         function filterTable() {
  512.             const dateFilter = document.getElementById('dateFilter').value.toLowerCase();
  513.             const clientFilter = document.getElementById('clientFilter').value.toLowerCase();
  514.             const montantFilter = document.getElementById('montantFilter').value.toLowerCase();
  516.             const rows = document.getElementById('tableBody').getElementsByTagName('tr');
  517.             let totalMontant = 0;
  519.             for (let row of rows) {
  520.                 const dateCell = row.cells[0].textContent.toLowerCase();
  521.                 const clientCell = row.cells[1].textContent.toLowerCase();
  522.                 const montantCell = row.cells[2].textContent.toLowerCase();
  524.                 const dateMatch = dateCell.includes(dateFilter);
  525.                 const clientMatch = clientCell.includes(clientFilter);
  526.                 const montantMatch = montantCell.includes(montantFilter);
  528.                 if (dateMatch && clientMatch && montantMatch) {
  529.                     row.style.display = '';
  530.                     totalMontant += parseFloat(montantCell.replace('€', '').replace(',', '.').trim());
  531.                 } else {
  532.                     row.style.display = 'none';
  533.                 }
  534.             }
  536.             // Mise Ã  jour du total
  537.             document.getElementById('totalMontant').textContent =
  538.                 totalMontant.toFixed(2).replace('.', ',') + ' â‚¬';
  539.         }
  541.         // Fonction de tri
  542.         let sortDirection = 1;
  543.         function sortTable(columnIndex) {
  544.             const table = document.getElementById('tableBody');
  545.             const rows = Array.from(table.getElementsByTagName('tr'));
  547.             rows.sort((a, b) => {
  548.                 let aValue = a.cells[columnIndex].textContent;
  549.                 let bValue = b.cells[columnIndex].textContent;
  551.                 // Pour les montants, convertir en nombres
  552.                 if (columnIndex === 2) {
  553.                     aValue = parseFloat(aValue.replace('€', '').replace(',', '.').trim());
  554.                     bValue = parseFloat(bValue.replace('€', '').replace(',', '.').trim());
  555.                 }
  557.                 if (aValue < bValue) return -1 * sortDirection;
  558.                 if (aValue > bValue) return 1 * sortDirection;
  559.                 return 0;
  560.             });
  562.             // Inverser la direction pour le prochain tri
  563.             sortDirection *= -1;
  565.             // Réinsérer les lignes triées
  566.             rows.forEach(row => table.appendChild(row));
  567.         }
  569.     </script>
  570. {% endblock %}