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.                 {% set evolution = ((comparaisonMois.mois_actuel - comparaisonMois.mois_precedent) / comparaisonMois.mois_precedent * 100)|round %}
  193.                 <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 %}">
  194.                     <div class="flex items-center justify-between">
  195.                         <div class="flex items-center space-x-3">
  196.                             <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 %}">
  197.                                 <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">
  198.                                     <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 %}"/>
  199.                                 </svg>
  200.                             </div>
  201.                             <div>
  202.                                 <p class="font-medium {% if evolution > 0 %}text-green-800 dark:text-green-400{% else %}text-red-800 dark:text-red-400{% endif %}">
  203.                                     {% if evolution > 0 %}
  204.                                         Progression de {{ evolution }}%
  205.                                     {% else %}
  206.                                         Baisse de {{ evolution|abs }}%
  207.                                     {% endif %}
  208.                                 </p>
  209.                                 <p class="text-sm text-gray-600 dark:text-gray-400">par rapport au mois précédent</p>
  210.                             </div>
  211.                         </div>
  212.                         <div class="text-2xl">
  213.                             {% if evolution > 0 %}📈{% else %}📉{% endif %}
  214.                         </div>
  215.                     </div>
  216.                 </div>
  218.                 {# Info supplémentaire #}
  219.                 <div class="mt-4 flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
  220.                     <svg class="w-4 h-4 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  221.                         <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"/>
  222.                     </svg>
  223.                     <span>Comparaison basée sur les {{ "now"|date('j') }} premiers jours de chaque mois</span>
  224.                 </div>
  225.             </div>
  226.         </div>
  227.     </div>
  229.     <!-- Modals -->
  230.     <div id="modalContainer" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
  231.         <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white">
  232.             <div class="flex justify-between items-center mb-4">
  233.                 <h3 class="text-lg font-medium text-gray-900" id="modalTitle"></h3>
  234.                 <button onclick="closeModal()" class="text-gray-400 hover:text-gray-500">
  235.                     <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  236.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
  237.                     </svg>
  238.                 </button>
  239.             </div>
  240.             <div id="modalContent" class="mt-4"></div>
  241.         </div>
  242.     </div>
  245.     <style>
  246.         .modal-enter {
  247.             animation: fadeIn 0.3s ease-out;
  248.         }
  250.         @keyframes fadeIn {
  251.             from {
  252.                 opacity: 0;
  253.                 transform: translateY(-20px);
  254.             }
  255.             to {
  256.                 opacity: 1;
  257.                 transform: translateY(0);
  258.             }
  259.         }
  261.     </style>
  262. {% endblock %}
  264. {% block javascripts %}
  265.     {{ parent() }}
  266.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  267.     <script>
  268.         document.addEventListener('DOMContentLoaded', function() {
  269.             const ctx = document.getElementById('evolutionChart').getContext('2d');
  270.             const data = {{ evolutionMensuelle|json_encode|raw }};
  272.             const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
  273.                 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
  275.             new Chart(ctx, {
  276.                 type: 'line',
  277.                 data: {
  278.                     labels: data.map(item => months[item.mois - 1]),
  279.                     datasets: [{
  280.                         label: 'Chiffre d\'affaires',
  281.                         data: data.map(item => item.total),
  282.                         borderColor: '#4f46e5',
  283.                         backgroundColor: 'rgba(79, 70, 229, 0.1)',
  284.                         tension: 0.4,
  285.                         fill: true,
  286.                         pointBackgroundColor: '#4f46e5',
  287.                         pointBorderColor: '#ffffff',
  288.                         pointBorderWidth: 2,
  289.                         pointRadius: 4,
  290.                         pointHoverRadius: 6
  291.                     }]
  292.                 },
  293.                 options: {
  294.                     responsive: true,
  295.                     maintainAspectRatio: false,
  296.                     plugins: {
  297.                         legend: {
  298.                             display: false
  299.                         },
  300.                         tooltip: {
  301.                             backgroundColor: '#1f2937',
  302.                             titleColor: '#ffffff',
  303.                             bodyColor: '#ffffff',
  304.                             padding: 12,
  305.                             displayColors: false,
  306.                             callbacks: {
  307.                                 label: function(context) {
  308.                                     return new Intl.NumberFormat('fr-FR', {
  309.                                         style: 'currency',
  310.                                         currency: 'EUR'
  311.                                     }).format(context.parsed.y);
  312.                                 }
  313.                             }
  314.                         }
  315.                     },
  316.                     scales: {
  317.                         x: {
  318.                             grid: {
  319.                                 display: false
  320.                             },
  321.                             ticks: {
  322.                                 color: '#6b7280'
  323.                             }
  324.                         },
  325.                         y: {
  326.                             beginAtZero: true,
  327.                             grid: {
  328.                                 color: '#e5e7eb'
  329.                             },
  330.                             ticks: {
  331.                                 color: '#6b7280',
  332.                                 callback: function(value) {
  333.                                     return new Intl.NumberFormat('fr-FR', {
  334.                                         style: 'currency',
  335.                                         currency: 'EUR',
  336.                                         maximumFractionDigits: 0
  337.                                     }).format(value);
  338.                                 }
  339.                             }
  340.                         }
  341.                     }
  342.                 }
  343.             });
  344.         });
  346.         function openModal(type) {
  347.             const modal = document.getElementById('modalContainer');
  348.             const title = document.getElementById('modalTitle');
  350.             modal.classList.remove('hidden');
  352.             switch(type) {
  353.                 case 'cb':
  354.                     title.textContent = 'Détails des paiements par Carte Bancaire';
  355.                     loadDetails('cb');
  356.                     break;
  357.                 case 'acompte':
  358.                     title.textContent = 'Détails des acomptes Planity';
  359.                     loadDetails('acompte');
  360.                     break;
  361.                 case 'especes':
  362.                     title.textContent = 'Détails des paiements en espèces';
  363.                     loadDetails('especes');
  364.                     break;
  365.             }
  366.         }
  368.         function closeModal() {
  369.             document.getElementById('modalContainer').classList.add('hidden');
  370.         }
  372.         function loadDetails(type) {
  373.             const routes = {
  374.                 'cb': '{{ path('app_dashboard_cb_details') }}',
  375.                 'acompte': '{{ path('app_dashboard_acompte_details') }}',
  376.                 'especes': '{{ path('app_dashboard_especes_details') }}'
  377.             };
  379.             fetch(routes[type])
  380.                 .then(response => response.json())
  381.                 .then(data => {
  382.                     document.getElementById('modalContent').innerHTML = generateTableHTML(data);
  383.                 });
  384.         }
  386.         function generateTableHTML(data) {
  387.             return `
  388.         <div class="mb-4 grid grid-cols-1 sm:grid-cols-3 gap-4">
  389.             <!-- Filtres -->
  390.             <div class="relative">
  391.                 <input type="text"
  392.                        id="dateFilter"
  393.                        placeholder="Filtrer par date"
  394.                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
  395.                        onkeyup="filterTable()">
  396.             </div>
  397.             <div class="relative">
  398.                 <input type="text"
  399.                        id="clientFilter"
  400.                        placeholder="Filtrer par client"
  401.                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
  402.                        onkeyup="filterTable()">
  403.             </div>
  404.             <div class="relative">
  405.                 <input type="text"
  406.                        id="montantFilter"
  407.                        placeholder="Filtrer par montant"
  408.                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
  409.                        onkeyup="filterTable()">
  410.             </div>
  411.         </div>
  412.         <div class="overflow-x-auto">
  413.             <div class="inline-block min-w-full align-middle">
  414.                 <div class="overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5">
  415.                     <!-- Version mobile -->
  416.                     <div class="block sm:hidden" id="mobileContent">
  417.                         ${generateMobileRows(data)}
  418.                     </div>
  420.                     <!-- Version desktop -->
  421.                     <table class="hidden sm:table min-w-full divide-y divide-gray-300">
  422. <thead class="bg-gray-50">
  423.     <tr>
  424.         <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 cursor-pointer" onclick="sortTable(0)">
  425.             <div class="flex items-center">
  426.                 Date
  427.                 <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  428.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
  429.                 </svg>
  430.             </div>
  431.         </th>
  432.         <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 cursor-pointer" onclick="sortTable(1)">
  433.             <div class="flex items-center">
  434.                 Client
  435.                 <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  436.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
  437.                 </svg>
  438.             </div>
  439.         </th>
  440.         <th class="px-3 py-3.5 text-right text-sm font-semibold text-gray-900 cursor-pointer" onclick="sortTable(2)">
  441.             <div class="flex items-center justify-end">
  442.                 Montant
  443.                 <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  444.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
  445.                 </svg>
  446.             </div>
  447.         </th>
  448.     </tr>
  449. </thead>
  451.                         <tbody class="divide-y divide-gray-200 bg-white" id="tableBody">
  452.                             ${generateTableRows(data)}
  453.                         </tbody>
  454.                         <tfoot class="bg-gray-50">
  455.                             <tr>
  456.                                 <td colspan="2" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Total</td>
  457.                                 <td class="px-3 py-3.5 text-right text-sm font-semibold text-gray-900" id="totalMontant">
  458.                                     ${calculateTotal(data)} â‚¬
  459.                                 </td>
  460.                             </tr>
  461.                         </tfoot>
  462.                     </table>
  463.                 </div>
  464.             </div>
  465.         </div>
  466.     `;
  467.         }
  469.         // Fonction pour générer les lignes du tableau
  470.         function generateTableRows(data) {
  471.             return data.map(item => `
  472.         <tr class="hover:bg-gray-50">
  473.             <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">${item.date}</td>
  474.             <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-900">${item.client}</td>
  475.             <td class="whitespace-nowrap px-3 py-4 text-sm text-right font-medium text-gray-900">${item.montant} â‚¬</td>
  476.         </tr>
  477.     `).join('');
  478.         }
  480.         // Fonction pour générer les lignes mobiles
  481.         function generateMobileRows(data) {
  482.             return data.map(item => `
  483.         <div class="bg-white border-b border-gray-200 p-4">
  484.             <div class="flex justify-between items-center mb-2">
  485.                 <div class="font-medium text-gray-900">${item.client}</div>
  486.                 <div class="text-lg font-bold text-gray-900">${item.montant} â‚¬</div>
  487.             </div>
  488.             <div class="text-sm text-gray-500">${item.date}</div>
  489.         </div>
  490.     `).join('');
  491.         }
  493.         // Fonction pour calculer le total
  494.         function calculateTotal(data) {
  495.             return data.reduce((sum, item) => sum + parseFloat(item.montant.replace(',', '.')), 0)
  496.                 .toFixed(2)
  497.                 .replace('.', ',');
  498.         }
  500.         // Fonction de filtrage
  501.         function filterTable() {
  502.             const dateFilter = document.getElementById('dateFilter').value.toLowerCase();
  503.             const clientFilter = document.getElementById('clientFilter').value.toLowerCase();
  504.             const montantFilter = document.getElementById('montantFilter').value.toLowerCase();
  506.             const rows = document.getElementById('tableBody').getElementsByTagName('tr');
  507.             let totalMontant = 0;
  509.             for (let row of rows) {
  510.                 const dateCell = row.cells[0].textContent.toLowerCase();
  511.                 const clientCell = row.cells[1].textContent.toLowerCase();
  512.                 const montantCell = row.cells[2].textContent.toLowerCase();
  514.                 const dateMatch = dateCell.includes(dateFilter);
  515.                 const clientMatch = clientCell.includes(clientFilter);
  516.                 const montantMatch = montantCell.includes(montantFilter);
  518.                 if (dateMatch && clientMatch && montantMatch) {
  519.                     row.style.display = '';
  520.                     totalMontant += parseFloat(montantCell.replace('€', '').replace(',', '.').trim());
  521.                 } else {
  522.                     row.style.display = 'none';
  523.                 }
  524.             }
  526.             // Mise Ã  jour du total
  527.             document.getElementById('totalMontant').textContent =
  528.                 totalMontant.toFixed(2).replace('.', ',') + ' â‚¬';
  529.         }
  531.         // Fonction de tri
  532.         let sortDirection = 1;
  533.         function sortTable(columnIndex) {
  534.             const table = document.getElementById('tableBody');
  535.             const rows = Array.from(table.getElementsByTagName('tr'));
  537.             rows.sort((a, b) => {
  538.                 let aValue = a.cells[columnIndex].textContent;
  539.                 let bValue = b.cells[columnIndex].textContent;
  541.                 // Pour les montants, convertir en nombres
  542.                 if (columnIndex === 2) {
  543.                     aValue = parseFloat(aValue.replace('€', '').replace(',', '.').trim());
  544.                     bValue = parseFloat(bValue.replace('€', '').replace(',', '.').trim());
  545.                 }
  547.                 if (aValue < bValue) return -1 * sortDirection;
  548.                 if (aValue > bValue) return 1 * sortDirection;
  549.                 return 0;
  550.             });
  552.             // Inverser la direction pour le prochain tri
  553.             sortDirection *= -1;
  555.             // Réinsérer les lignes triées
  556.             rows.forEach(row => table.appendChild(row));
  557.         }
  559.     </script>
  560. {% endblock %}