templates/timesheet/index.html.twig line 1

Open in your IDE?
  1. {# templates/timesheet/index.html.twig #}
  2. {% extends 'admin/baseAdmin.html.twig' %}
  4. {% block title %}Feuille d'heures - Recherche{% endblock %}
  6. {% block stylesheets %}
  7.     {{ parent() }}
  8.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
  9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  10.     <style>
  11.         :root {
  12.             --primary-color: #4361ee;
  13.             --primary-light: #eef2ff;
  14.             --secondary-color: #3a0ca3;
  15.             --success-color: #06d6a0;
  16.             --warning-color: #ffd166;
  17.             --info-color: #118ab2;
  18.             --dark-color: #2b2d42;
  19.             --light-color: #f8f9fa;
  20.         }
  21.         
  22.         body {
  23.             background-color: #f5f7fb;
  24.         }
  25.         
  26.         .page-header {
  27.             background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  28.             color: white;
  29.             padding: 2rem 0;
  30.             margin-bottom: 2rem;
  31.             border-radius: 0 0 15px 15px;
  32.             box-shadow: 0 4px 20px rgba(67, 97, 238, 0.15);
  33.         }
  34.         
  35.         .page-header h1 {
  36.             font-weight: 700;
  37.             margin-bottom: 0.5rem;
  38.             text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  39.         }
  40.         
  41.         .page-header .subtitle {
  42.             opacity: 0.9;
  43.             font-size: 1.1rem;
  44.         }
  45.         
  46.         .card {
  47.             border: none;
  48.             border-radius: 12px;
  49.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  50.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  51.             overflow: hidden;
  52.         }
  53.         
  54.         .card:hover {
  55.             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  56.         }
  57.         
  58.         .card-header {
  59.             background: linear-gradient(to right, var(--primary-light), white);
  60.             border-bottom: 2px solid var(--primary-light);
  61.             padding: 1.25rem 1.5rem;
  62.             font-weight: 600;
  63.             color: var(--dark-color);
  64.             position: relative;
  65.         }
  66.         
  67.         .card-header::before {
  68.             content: '';
  69.             position: absolute;
  70.             left: 0;
  71.             top: 0;
  72.             height: 100%;
  73.             width: 4px;
  74.             background: var(--primary-color);
  75.             border-radius: 0 3px 3px 0;
  76.         }
  77.         
  78.         .card-header h5 {
  79.             margin: 0;
  80.             font-weight: 700;
  81.             font-size: 1.1rem;
  82.         }
  83.         
  84.         .form-section {
  85.             padding: 1.5rem;
  86.         }
  87.         
  88.         .form-label {
  89.             font-weight: 600;
  90.             color: var(--dark-color);
  91.             margin-bottom: 0.5rem;
  92.             display: flex;
  93.             align-items: center;
  94.         }
  95.         
  96.         .form-label i {
  97.             margin-right: 8px;
  98.             color: var(--primary-color);
  99.         }
  100.         
  101.         .form-control {
  102.             border: 2px solid #e2e8f0;
  103.             border-radius: 8px;
  104.             padding: 0.75rem 1rem;
  105.             font-size: 0.95rem;
  106.             transition: all 0.3s ease;
  107.             background-color: white;
  108.         }
  109.         
  110.         .form-control:focus {
  111.             border-color: var(--primary-color);
  112.             box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
  113.             background-color: white;
  114.         }
  115.         
  116.         .input-group-text {
  117.             background-color: var(--primary-light);
  118.             border: 2px solid #e2e8f0;
  119.             border-right: none;
  120.             color: var(--primary-color);
  121.             font-weight: 600;
  122.         }
  123.         
  124.         .btn {
  125.             border-radius: 8px;
  126.             padding: 0.75rem 1.5rem;
  127.             font-weight: 600;
  128.             transition: all 0.3s ease;
  129.             border: none;
  130.             display: inline-flex;
  131.             align-items: center;
  132.             justify-content: center;
  133.         }
  134.         
  135.         .btn-primary {
  136.             background: linear-gradient(135deg, var(--primary-color), #5a6ff0);
  137.             color: white;
  138.             box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);
  139.         }
  140.         
  141.         .btn-primary:hover {
  142.             background: linear-gradient(135deg, #3a56e9, #4a5fed);
  143.             transform: translateY(-2px);
  144.             box-shadow: 0 6px 18px rgba(67, 97, 238, 0.35);
  145.         }
  146.         
  147.         .btn-success {
  148.             background: linear-gradient(135deg, var(--success-color), #1bdecb);
  149.             color: white;
  150.             box-shadow: 0 4px 12px rgba(6, 214, 160, 0.25);
  151.         }
  152.         
  153.         .btn-success:hover {
  154.             background: linear-gradient(135deg, #05c896, #16d9c5);
  155.             transform: translateY(-2px);
  156.             box-shadow: 0 6px 18px rgba(6, 214, 160, 0.35);
  157.         }
  158.         
  159.         /* Table styles */
  160.         .results-card {
  161.             border-radius: 12px;
  162.             overflow: hidden;
  163.             box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  164.             margin-bottom: 2rem;
  165.         }
  166.         
  167.         .table-container {
  168.             max-height: 600px;
  169.             overflow-y: auto;
  170.             border-radius: 8px;
  171.         }
  172.         
  173.         .table {
  174.             margin-bottom: 0;
  175.             font-size: 0.9rem;
  176.         }
  177.         
  178.         .table thead {
  179.             background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  180.             color: white;
  181.             position: sticky;
  182.             top: 0;
  183.             z-index: 10;
  184.         }
  185.         
  186.         .table th {
  187.             border: none;
  188.             padding: 1rem 0.75rem;
  189.             font-weight: 600;
  190.             text-transform: uppercase;
  191.             font-size: 0.8rem;
  192.             letter-spacing: 0.5px;
  193.             white-space: nowrap;
  194.         }
  195.         
  196.         .table td {
  197.             padding: 0.85rem 0.75rem;
  198.             vertical-align: middle;
  199.             border-bottom: 1px solid #f1f5f9;
  200.             transition: background-color 0.2s ease;
  201.         }
  202.         
  203.         .table-striped tbody tr:nth-of-type(odd) {
  204.             background-color: rgba(67, 97, 238, 0.02);
  205.         }
  206.         
  207.         .table-hover tbody tr:hover {
  208.             background-color: rgba(67, 97, 238, 0.08);
  209.         }
  210.         
  211.         .total-row {
  212.             background: linear-gradient(to right, #f8fafc, #e2e8f0) !important;
  213.             font-weight: 700;
  214.         }
  215.         
  216.         .total-row td {
  217.             border-top: 2px solid var(--primary-color);
  218.             border-bottom: none;
  219.             padding: 1rem 0.75rem;
  220.         }
  221.         
  222.         /* Cell styles */
  223.         .date-cell {
  224.             font-weight: 600;
  225.             color: var(--dark-color);
  226.             min-width: 100px;
  227.         }
  228.         
  229.         .date-cell .weekday {
  230.             display: block;
  231.             font-size: 0.75rem;
  232.             color: #64748b;
  233.             font-weight: normal;
  234.             margin-top: 2px;
  235.         }
  236.         
  237.         .time-cell {
  238.             text-align: center;
  239.             font-family: 'Courier New', 'SF Mono', monospace;
  240.             font-weight: 600;
  241.             background-color: var(--primary-light);
  242.             border-radius: 6px;
  243.             padding: 0.4rem 0.6rem;
  244.             min-width: 75px;
  245.             color: var(--primary-color);
  246.             border: 1px solid rgba(67, 97, 238, 0.1);
  247.         }
  248.         
  249.         .number-cell {
  250.             text-align: right;
  251.             font-family: 'Courier New', 'SF Mono', monospace;
  252.             font-weight: 600;
  253.             min-width: 85px;
  254.             color: #334155;
  255.         }
  256.         
  257.         .highlight-cell {
  258.             background-color: rgba(255, 209, 102, 0.15);
  259.             border: 1px solid rgba(255, 209, 102, 0.2);
  260.         }
  261.         
  262.         /* Vacation badges */
  263.         .vacation-badge {
  264.             display: inline-flex;
  265.             align-items: center;
  266.             justify-content: center;
  267.             width: 28px;
  268.             height: 28px;
  269.             border-radius: 50%;
  270.             font-weight: 700;
  271.             font-size: 0.85rem;
  272.             box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  273.             transition: transform 0.2s ease, box-shadow 0.2s ease;
  274.         }
  275.         
  276.         .vacation-badge:hover {
  277.             transform: scale(1.1);
  278.             box-shadow: 0 5px 12px rgba(0,0,0,0.15);
  279.         }
  280.         
  281.         .vacation-1 { 
  282.             background: linear-gradient(135deg, #a5b4fc, #818cf8);
  283.             color: white;
  284.         }
  285.         .vacation-2 { 
  286.             background: linear-gradient(135deg, #34d399, #10b981);
  287.             color: white;
  288.         }
  289.         .vacation-3 { 
  290.             background: linear-gradient(135deg, #fbbf24, #f59e0b);
  291.             color: white;
  292.         }
  293.         .vacation-4 { 
  294.             background: linear-gradient(135deg, #f87171, #ef4444);
  295.             color: white;
  296.         }
  297.         
  298.         /* Stats cards */
  299.         .stats-grid {
  300.             display: grid;
  301.             grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  302.             gap: 1.5rem;
  303.             margin-top: 2rem;
  304.         }
  305.         
  306.         .stat-card {
  307.             background: white;
  308.             border-radius: 12px;
  309.             padding: 1.5rem;
  310.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  311.             transition: all 0.3s ease;
  312.             border-top: 4px solid;
  313.             position: relative;
  314.             overflow: hidden;
  315.         }
  316.         
  317.         .stat-card::before {
  318.             content: '';
  319.             position: absolute;
  320.             top: 0;
  321.             left: 0;
  322.             right: 0;
  323.             height: 4px;
  324.             background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  325.         }
  326.         
  327.         .stat-card:hover {
  328.             transform: translateY(-5px);
  329.             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  330.         }
  331.         
  332.         .stat-icon {
  333.             width: 48px;
  334.             height: 48px;
  335.             border-radius: 12px;
  336.             display: flex;
  337.             align-items: center;
  338.             justify-content: center;
  339.             margin-bottom: 1rem;
  340.             font-size: 1.5rem;
  341.         }
  342.         
  343.         .stat-title {
  344.             font-size: 0.85rem;
  345.             font-weight: 600;
  346.             color: #64748b;
  347.             text-transform: uppercase;
  348.             letter-spacing: 0.5px;
  349.             margin-bottom: 0.5rem;
  350.         }
  351.         
  352.         .stat-value {
  353.             font-size: 1.8rem;
  354.             font-weight: 700;
  355.             margin-bottom: 0.25rem;
  356.         }
  357.         
  358.         .stat-subtitle {
  359.             font-size: 0.85rem;
  360.             color: #94a3b8;
  361.         }
  362.         
  363.         .work-hours .stat-icon { background: rgba(67, 97, 238, 0.1); color: var(--primary-color); }
  364.         .work-hours { border-top-color: var(--primary-color); }
  365.         
  366.         .paid-hours .stat-icon { background: rgba(6, 214, 160, 0.1); color: var(--success-color); }
  367.         .paid-hours { border-top-color: var(--success-color); }
  368.         
  369.         .vacations .stat-icon { background: rgba(255, 209, 102, 0.1); color: #f59e0b; }
  370.         .vacations { border-top-color: #f59e0b; }
  371.         
  372.         .delta .stat-icon { background: rgba(17, 138, 178, 0.1); color: var(--info-color); }
  373.         .delta { border-top-color: var(--info-color); }
  374.         
  375.         /* Alert */
  376.         .alert {
  377.             border-radius: 10px;
  378.             border: none;
  379.             padding: 1.25rem 1.5rem;
  380.             box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  381.         }
  382.         
  383.         .alert-warning {
  384.             background: linear-gradient(135deg, #fffbeb, #fef3c7);
  385.             border-left: 4px solid #f59e0b;
  386.             color: #92400e;
  387.         }
  388.         
  389.         /* Footer */
  390.         .card-footer {
  391.             background-color: #f8fafc;
  392.             border-top: 1px solid #e2e8f0;
  393.             padding: 1rem 1.5rem;
  394.             font-size: 0.85rem;
  395.             color: #64748b;
  396.         }
  397.         
  398.         /* Action buttons */
  399.         .action-buttons {
  400.             display: flex;
  401.             gap: 0.75rem;
  402.             align-items: center;
  403.         }
  404.         
  405.         .action-btn {
  406.             width: 40px;
  407.             height: 40px;
  408.             border-radius: 8px;
  409.             display: flex;
  410.             align-items: center;
  411.             justify-content: center;
  412.             background: var(--primary-light);
  413.             color: var(--primary-color);
  414.             border: none;
  415.             transition: all 0.3s ease;
  416.         }
  417.         
  418.         .action-btn:hover {
  419.             background: var(--primary-color);
  420.             color: white;
  421.             transform: translateY(-2px);
  422.             box-shadow: 0 4px 12px rgba(67, 97, 238, 0.2);
  423.         }
  424.         
  425.         /* Results count badge */
  426.         .results-badge {
  427.             background: linear-gradient(135deg, var(--success-color), #1bdecb);
  428.             color: white;
  429.             padding: 0.5rem 1rem;
  430.             border-radius: 20px;
  431.             font-weight: 600;
  432.             font-size: 0.9rem;
  433.             box-shadow: 0 3px 10px rgba(6, 214, 160, 0.2);
  434.         }
  435.         
  436.         /* Delta styling */
  437.         .delta-positive {
  438.             color: #10b981;
  439.             font-weight: 700;
  440.             background-color: rgba(16, 185, 129, 0.1);
  441.             border-radius: 4px;
  442.             padding: 2px 6px;
  443.         }
  444.         
  445.         .delta-negative {
  446.             color: #ef4444;
  447.             font-weight: 700;
  448.             background-color: rgba(239, 68, 68, 0.1);
  449.             border-radius: 4px;
  450.             padding: 2px 6px;
  451.         }
  452.         
  453.         /* Responsive */
  454.         @media (max-width: 768px) {
  455.             .stats-grid {
  456.                 grid-template-columns: 1fr;
  457.             }
  458.             
  459.             .table-container {
  460.                 font-size: 0.8rem;
  461.             }
  462.             
  463.             .table th, .table td {
  464.                 padding: 0.6rem 0.5rem;
  465.             }
  466.             
  467.             .time-cell, .number-cell {
  468.                 min-width: 60px;
  469.             }
  470.             
  471.             .action-buttons {
  472.                 flex-wrap: wrap;
  473.             }
  474.         }
  475.         
  476.         /* Animation */
  477.         @keyframes fadeIn {
  478.             from { opacity: 0; transform: translateY(10px); }
  479.             to { opacity: 1; transform: translateY(0); }
  480.         }
  481.         
  482.         .fade-in {
  483.             animation: fadeIn 0.5s ease forwards;
  484.         }
  485.         
  486.         /* Print styles */
  487.         @media print {
  488.             .page-header, .btn, .action-buttons, .card-footer {
  489.                 display: none;
  490.             }
  491.             
  492.             .table thead {
  493.                 background: #f1f5f9 !important;
  494.                 color: var(--dark-color) !important;
  495.             }
  496.         }
  497.     </style>
  498. {% endblock %}
  500. {% block body %}
  501. <!-- Page Header -->
  502. <div class="page-header">
  503.     <div class="container-fluid">
  504.         <div class="row align-items-center">
  505.             <div class="col-md-8">
  506.                 <h1><i class="fas fa-chart-line me-2"></i>Feuille d'heures</h1>
  507.                 <p class="subtitle mb-0">Analyse complète des heures travaillées et payées</p>
  508.             </div>
  509.             <div class="col-md-4 text-end">
  510.                 <span class="results-badge">
  511.                     <i class="fas fa-calendar-alt me-1"></i>
  512.                     {{ "now"|date('F Y')|capitalize }}
  513.                 </span>
  514.             </div>
  515.         </div>
  516.     </div>
  517. </div>
  519. <div class="container-fluid pb-5">
  520.     <!-- Search Form -->
  521.     <div class="card fade-in mb-4">
  522.         <div class="card-header">
  523.             <h5><i class="fas fa-search me-2"></i>Recherche avancée</h5>
  524.         </div>
  525.         <div class="form-section">
  526.             {{ form_start(form, {'attr': {'class': 'row g-4', 'id': 'search-form'}}) }}
  527.                 <div class="col-lg-3 col-md-6">
  528.                     {{ form_label(form.nom_client) }}
  529.                     <div class="input-group">
  530.                         <span class="input-group-text"><i class="fas fa-user"></i></span>
  531.                         {{ form_widget(form.nom_client, {'attr': {
  532.                             'class': 'form-control',
  533.                             'list': 'conducteurs-list',
  534.                             'placeholder': 'Sélectionnez un conducteur'
  535.                         }}) }}
  536.                     </div>
  537.                     <datalist id="conducteurs-list">
  538.                         {% for conducteur in conducteurs %}
  539.                             <option value="{{ conducteur }}">
  540.                         {% endfor %}
  541.                     </datalist>
  542.                 </div>
  543.                 
  544.                 <div class="col-lg-3 col-md-6">
  545.                     {{ form_label(form.immatriculation) }}
  546.                     <div class="input-group">
  547.                         <span class="input-group-text"><i class="fas fa-car"></i></span>
  548.                         {{ form_widget(form.immatriculation, {'attr': {
  549.                             'class': 'form-control',
  550.                             'list': 'immatriculations-list',
  551.                             'placeholder': 'Toutes les immatriculations'
  552.                         }}) }}
  553.                     </div>
  554.                     <datalist id="immatriculations-list">
  555.                         {% for immat in immatriculations %}
  556.                             <option value="{{ immat }}">
  557.                         {% endfor %}
  558.                     </datalist>
  559.                 </div>
  560.                 
  561.                 <div class="col-lg-3 col-md-6">
  562.                     {{ form_label(form.agence) }}
  563.                     <div class="input-group">
  564.                         <span class="input-group-text"><i class="fas fa-building"></i></span>
  565.                         {{ form_widget(form.agence, {'attr': {
  566.                             'class': 'form-control',
  567.                             'list': 'agences-list',
  568.                             'placeholder': 'Toutes les agences'
  569.                         }}) }}
  570.                     </div>
  571.                     <datalist id="agences-list">
  572.                         {% for agence in agences %}
  573.                             <option value="{{ agence }}">
  574.                         {% endfor %}
  575.                     </datalist>
  576.                 </div>
  577.                 
  578.                 <div class="col-lg-3 col-md-6">
  579.                     {{ form_label(form.date_debut) }}
  580.                     <div class="input-group">
  581.                         <span class="input-group-text"><i class="fas fa-calendar-day"></i></span>
  582.                         {{ form_widget(form.date_debut, {'attr': {
  583.                             'class': 'form-control'
  584.                         }}) }}
  585.                     </div>
  586.                 </div>
  587.                 
  588.                 <div class="col-lg-3 col-md-6">
  589.                     {{ form_label(form.date_fin) }}
  590.                     <div class="input-group">
  591.                         <span class="input-group-text"><i class="fas fa-calendar-week"></i></span>
  592.                         {{ form_widget(form.date_fin, {'attr': {
  593.                             'class': 'form-control'
  594.                         }}) }}
  595.                     </div>
  596.                 </div>
  597.                 
  598.                 <div class="col-12 mt-2">
  599.                     <div class="d-flex flex-wrap align-items-center justify-content-between">
  600.                         <div class="action-buttons">
  601.                             {{ form_widget(form.rechercher, {'attr': {
  602.                                 'class': 'btn btn-primary',
  603.                                 'value': '🔍 Rechercher'
  604.                             }}) }}
  605.                             
  606.                             <button type="submit" 
  607.                                     name="export" 
  608.                                     class="btn btn-success"
  609.                                     formaction="{{ export_url }}"
  610.                                     formnovalidate="true">
  611.                                 <i class="fas fa-file-excel me-2"></i> Exporter
  612.                             </button>
  613.                             
  614.                             {# <button type="button" class="action-btn" id="print-btn" title="Imprimer">
  615.                                 <i class="fas fa-print"></i>
  616.                             </button> #}
  617.                             
  618.                             <button type="button" class="action-btn" id="help-btn" title="Aide">
  619.                                 <i class="fas fa-question-circle"></i>
  620.                             </button>
  621.                         </div>
  622.                         
  623.                         <a href="javascript:void(0)" class="text-primary" id="reset-form">
  624.                             <i class="fas fa-redo-alt me-1"></i> Réinitialiser
  625.                         </a>
  626.                     </div>
  627.                 </div>
  628.                 
  629.                 {# Champs cachés pour l'export #}
  630.                 <input type="hidden" name="immatriculation" value="{{ search_params.immatriculation ?? '' }}">
  631.                 <input type="hidden" name="nom_client" value="{{ search_params.nom_client ?? '' }}">
  632.                 <input type="hidden" name="agence" value="{{ search_params.agence ?? '' }}">
  633.                 <input type="hidden" name="date_debut" value="{% if search_params.date_debut is defined and search_params.date_debut %}{{ search_params.date_debut|date('Y-m-d') }}{% endif %}">
  634.                 <input type="hidden" name="date_fin" value="{% if search_params.date_fin is defined and search_params.date_fin %}{{ search_params.date_fin|date('Y-m-d') }}{% endif %}">
  635.             {{ form_end(form) }}
  636.         </div>
  637.     </div>
  638.     
  639.     <!-- Results -->
  640.     {% if results is not empty %}
  641.         <div class="results-card fade-in" style="animation-delay: 0.1s">
  642.             <div class="card-header d-flex justify-content-between align-items-center">
  643.                 <h5><i class="fas fa-list-check me-2"></i>Résultats de la recherche</h5>
  644.                 <div class="d-flex align-items-center">
  645.                     <span class="me-3" style="color: var(--primary-color); font-weight: 600;">
  646.                         <i class="fas fa-calendar-check me-1"></i>
  647.                         {{ results|length }} jour{{ results|length > 1 ? 's' : '' }}
  648.                     </span>
  649.                     <div class="action-buttons">
  650.                         {# <button type="button" class="action-btn" id="export-pdf" title="Exporter PDF">
  651.                             <i class="fas fa-file-pdf"></i>
  652.                         </button>
  653.                         <button type="button" class="action-btn" id="copy-data" title="Copier les données">
  654.                             <i class="fas fa-copy"></i>
  655.                         </button> #}
  656.                     </div>
  657.                 </div>
  658.             </div>
  659.             
  660.             <div class="table-container">
  661.                 <table class="table table-hover table-striped">
  662.                     <thead>
  663.                         <tr>
  664.                             <th>Date</th>
  665.                             <th>Conducteur</th>
  666.                             <th>Véhicule</th>
  667.                             <th colspan="2" class="text-center">Tranche 1</th>
  668.                             <th colspan="2" class="text-center">Tranche 2</th>
  669.                             <th colspan="2" class="text-center">Tranche 3</th>
  670.                             <th colspan="2" class="text-center">Tranche 4</th>
  671.                             <th>Total</th>
  672.                             <th>Centièmes</th>
  673.                             <th>Vac.</th>
  674.                             <th>Forfait</th>
  675.                             <th>Déduc.</th>
  676.                             <th>Δ Delta</th>
  677.                             <th>Payé</th>
  678.                             <th>Centièmes payés</th>
  679.                         </tr>
  680.                     </thead>
  681.                     <tbody>
  682.                         {% for day in results %}
  683.                             <tr>
  684.                                 <td class="date-cell">
  685.                                     {{ day.date|date('d/m/Y') }}
  686.                                     <span class="weekday">{{ day.date|date('D')|trans }}</span>
  687.                                 </td>
  688.                                 <td><strong>{{ day.nom_client }}</strong></td>
  689.                                 <td><span class="badge bg-secondary">{{ day.immatriculation }}</span></td>
  690.                                 
  691.                                 {# Tranches horaires #}
  692.                                 {% for tranche in day.tranches %}
  693.                                     <td class="time-cell">{{ tranche.debut ?? '-' }}</td>
  694.                                     <td class="time-cell">{{ tranche.fin ?? '-' }}</td>
  695.                                 {% endfor %}
  696.                                 
  697.                                 {# Si moins de 4 tranches, ajouter des cellules vides #}
  698.                                 {% for i in day.tranches|length..3 %}
  699.                                     <td class="time-cell text-muted">-</td>
  700.                                     <td class="time-cell text-muted">-</td>
  701.                                 {% endfor %}
  702.                                 
  703.                                 {# Calculs #}
  704.                                 <td class="time-cell highlight-cell"><strong>{{ day.total_worked }}</strong></td>
  705.                                 <td class="number-cell">{{ day.total_centièmes|number_format(2, ',', ' ') }}</td>
  706.                                 <td class="text-center">
  707.                                     <span class="vacation-badge vacation-{{ day.nb_vacations }}" 
  708.                                           title="{{ day.nb_vacations }} vacation(s)">
  709.                                         {{ day.nb_vacations }}
  710.                                     </span>
  711.                                 </td>
  712.                                 <td class="time-cell">{{ day.forfait }}</td>
  713.                                 <td class="time-cell">{{ day.deduction }}</td>
  714.                                 <td class="time-cell">
  715.                                     <span class="{% if day.delta|replace({':': ''})|default(0) > 0 %}delta-positive{% else %}delta-negative{% endif %}">
  716.                                         {{ day.delta }}
  717.                                     </span>
  718.                                 </td>
  719.                                 <td class="time-cell highlight-cell"><strong>{{ day.paid_hours }}</strong></td>
  720.                                 <td class="number-cell">{{ day.paid_centièmes|number_format(2, ',', ' ') }}</td>
  721.                             </tr>
  722.                         {% endfor %}
  723.                         
  724.                         {# Ligne des totaux #}
  725.                         {% if totals is not empty %}
  726.                             <tr class="total-row">
  727.                                 <td colspan="11" class="text-end fw-bold">TOTAUX :</td>
  728.                                 <td class="time-cell fw-bold">{{ totals.total_worked }}</td>
  729.                                 <td class="number-cell fw-bold">{{ totals.total_centièmes|number_format(2, ',', ' ') }}</td>
  730.                                 <td class="text-center fw-bold">{{ totals.total_vacations }}</td>
  731.                                 <td class="time-cell fw-bold">{{ totals.total_forfait }}</td>
  732.                                 <td class="time-cell fw-bold">{{ totals.total_deduction }}</td>
  733.                                 <td class="time-cell fw-bold">
  734.                                     <span class="{% if totals.total_delta|replace({':': ''})|default(0) > 0 %}delta-positive{% else %}delta-negative{% endif %}">
  735.                                         {{ totals.total_delta }}
  736.                                     </span>
  737.                                 </td>
  738.                                 <td class="time-cell fw-bold">{{ totals.total_paid }}</td>
  739.                                 <td class="number-cell fw-bold">{{ totals.total_paid_centièmes|number_format(2, ',', ' ') }}</td>
  740.                             </tr>
  741.                         {% endif %}
  742.                     </tbody>
  743.                 </table>
  744.             </div>
  745.             
  746.             <div class="card-footer">
  747.                 <div class="row align-items-center">
  748.                     <div class="col-md-8">
  749.                         <small class="text-muted">
  750.                             <i class="fas fa-circle-info me-1"></i>
  751.                             Système de calcul avancé • Δ Delta = Différence heures travaillées/payées
  752.                         </small>
  753.                     </div>
  754.                     <div class="col-md-4 text-end">
  755.                         <small class="text-muted">
  756.                             <i class="fas fa-clock me-1"></i>
  757.                             Généré le {{ "now"|date('d/m/Y à H:i') }}
  758.                         </small>
  759.                     </div>
  760.                 </div>
  761.             </div>
  762.         </div>
  763.         
  764.         <!-- Stats Cards -->
  765.         <div class="stats-grid fade-in" style="animation-delay: 0.2s">
  766.             <div class="stat-card work-hours">
  767.                 <div class="stat-icon">
  768.                     <i class="fas fa-clock"></i>
  769.                 </div>
  770.                 <div class="stat-title">Heures travaillées</div>
  771.                 <div class="stat-value text-primary">{{ totals.total_worked }}</div>
  772.                 <div class="stat-subtitle">{{ totals.total_centièmes|number_format(2, ',', ' ') }} centièmes</div>
  773.             </div>
  774.             
  775.             <div class="stat-card paid-hours">
  776.                 <div class="stat-icon">
  777.                     <i class="fas fa-money-bill-wave"></i>
  778.                 </div>
  779.                 <div class="stat-title">Heures payées</div>
  780.                 <div class="stat-value text-success">{{ totals.total_paid }}</div>
  781.                 <div class="stat-subtitle">{{ totals.total_paid_centièmes|number_format(2, ',', ' ') }} centièmes</div>
  782.             </div>
  783.             
  784.             <div class="stat-card vacations">
  785.                 <div class="stat-icon">
  786.                     <i class="fas fa-calendar-alt"></i>
  787.                 </div>
  788.                 <div class="stat-title">Total vacations</div>
  789.                 <div class="stat-value" style="color: #f59e0b;">{{ totals.total_vacations }}</div>
  790.                 <div class="stat-subtitle">Réparties sur {{ results|length }} jour{{ results|length > 1 ? 's' : '' }}</div>
  791.             </div>
  792.             
  793.             <div class="stat-card delta">
  794.                 <div class="stat-icon">
  795.                     <i class="fas fa-balance-scale"></i>
  796.                 </div>
  797.                 <div class="stat-title">Balance Δ</div>
  798.                 <div class="stat-value {% if totals.total_delta|replace({':': ''})|default(0) > 0 %}text-success{% else %}text-danger{% endif %}">
  799.                     {{ totals.total_delta }}
  800.                 </div>
  801.                 <div class="stat-subtitle">
  802.                     {% if totals.total_delta|replace({':': ''})|default(0) > 0 %}
  803.                         <i class="fas fa-arrow-up me-1"></i> Excédent favorable
  804.                     {% elseif totals.total_delta|replace({':': ''})|default(0) < 0 %}
  805.                         <i class="fas fa-arrow-down me-1"></i> Déficit à combler
  806.                     {% else %}
  807.                         <i class="fas fa-equals me-1"></i> Équilibre parfait
  808.                     {% endif %}
  809.                 </div>
  810.             </div>
  811.         </div>
  812.         
  813.         <!-- Summary Note -->
  814.         <div class="alert alert-info mt-4 fade-in" style="animation-delay: 0.3s">
  815.             <div class="d-flex">
  816.                 <i class="fas fa-chart-pie me-3 fs-4" style="color: var(--info-color);"></i>
  817.                 <div>
  818.                     <h6 class="alert-heading mb-2">Synthèse de l'analyse</h6>
  819.                     <p class="mb-0">
  820.                         L'analyse révèle un taux d'efficacité de 
  821.                         <strong>
  822.                             {% if totals.total_worked|replace({':': ''})|default(0) > 0 %}
  823.                                 {{ ((totals.total_paid|replace({':': ''}) / totals.total_worked|replace({':': ''})) * 100)|number_format(1) }}%
  824.                             {% else %}
  825.                                 0%
  826.                             {% endif %}
  827.                         </strong> 
  828.                         entre les heures travaillées et payées. 
  829.                         {% if totals.total_delta|replace({':': ''})|default(0) > 0 %}
  830.                             <span class="text-success">Excellent résultat avec un excédent favorable.</span>
  831.                         {% elseif totals.total_delta|replace({':': ''})|default(0) < 0 %}
  832.                             <span class="text-danger">Attention au déficit qui nécessite une attention particulière.</span>
  833.                         {% else %}
  834.                             <span class="text-info">Équilibre parfait entre travail et rémunération.</span>
  835.                         {% endif %}
  836.                     </p>
  837.                 </div>
  838.             </div>
  839.         </div>
  840.         
  841.     {% elseif form_submitted %}
  842.         <div class="alert alert-warning fade-in">
  843.             <div class="d-flex align-items-center">
  844.                 <i class="fas fa-search-minus me-3 fs-4"></i>
  845.                 <div>
  846.                     <h6 class="alert-heading mb-1">Aucun résultat trouvé</h6>
  847.                     <p class="mb-0">Modifiez vos critères de recherche ou élargissez la période pour obtenir des résultats.</p>
  848.                 </div>
  849.             </div>
  850.         </div>
  851.         
  852.         <div class="text-center mt-4">
  853.             <button class="btn btn-outline-primary" id="show-all-data">
  854.                 <i class="fas fa-eye me-2"></i>Afficher toutes les données
  855.             </button>
  856.         </div>
  857.     {% endif %}
  858. </div>
  859. {% endblock %}
  861. {% block javascripts %}
  862.     {{ parent() }}
  863.     <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
  864.     <script>
  865.         document.addEventListener('DOMContentLoaded', function() {
  866.             // Réinitialisation du formulaire
  867.             document.getElementById('reset-form').addEventListener('click', function(e) {
  868.                 e.preventDefault();
  869.                 document.getElementById('search-form').reset();
  870.                 // Mettre les dates par défaut
  871.                 const today = new Date();
  872.                 const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
  873.                 
  874.                 document.querySelector('#{{ form.date_debut.vars.id }}').value = 
  875.                     firstDay.toISOString().split('T')[0];
  876.                 document.querySelector('#{{ form.date_fin.vars.id }}').value = 
  877.                     today.toISOString().split('T')[0];
  878.             });
  879.             
  880.             // Afficher toutes les données
  881.             const showAllBtn = document.getElementById('show-all-data');
  882.             if (showAllBtn) {
  883.                 showAllBtn.addEventListener('click', function() {
  884.                     document.getElementById('search-form').reset();
  885.                     document.getElementById('search-form').submit();
  886.                 });
  887.             }
  888.             
  889.             // Impression
  890.             document.getElementById('print-btn').addEventListener('click', function() {
  891.                 window.print();
  892.             });
  893.             
  894.             // Copie des données
  895.             document.getElementById('copy-data').addEventListener('click', function() {
  896.                 const table = document.querySelector('.table');
  897.                 let text = '';
  898.                 
  899.                 // En-têtes
  900.                 const headers = table.querySelectorAll('thead th');
  901.                 const headerText = Array.from(headers).map(th => th.textContent.trim()).join('\t');
  902.                 text += headerText + '\n';
  903.                 
  904.                 // Données
  905.                 const rows = table.querySelectorAll('tbody tr');
  906.                 rows.forEach(row => {
  907.                     const cells = row.querySelectorAll('td');
  908.                     const rowText = Array.from(cells).map(cell => cell.textContent.trim()).join('\t');
  909.                     text += rowText + '\n';
  910.                 });
  911.                 
  912.                 // Copie dans le presse-papier
  913.                 navigator.clipboard.writeText(text).then(() => {
  914.                     const originalHTML = this.innerHTML;
  915.                     this.innerHTML = '<i class="fas fa-check"></i>';
  916.                     this.style.background = 'var(--success-color)';
  917.                     this.style.color = 'white';
  918.                     
  919.                     setTimeout(() => {
  920.                         this.innerHTML = originalHTML;
  921.                         this.style.background = '';
  922.                         this.style.color = '';
  923.                     }, 2000);
  924.                 });
  925.             });
  926.             
  927.             // Bouton d'aide
  928.             document.getElementById('help-btn').addEventListener('click', function() {
  929.                 alert("ℹ️ AIDE\n\n• Utilisez les filtres pour affiner votre recherche\n• Le delta (Δ) montre la différence entre heures travaillées et payées\n• Exportez les données en Excel pour analyse approfondie\n• Les vacations sont colorées pour une lecture rapide");
  930.             });
  931.             
  932.             // Export PDF (simulé)
  933.             document.getElementById('export-pdf').addEventListener('click', function() {
  934.                 alert("📄 La fonction d'export PDF sera bientôt disponible !");
  935.             });
  936.             
  937.             // Mise à jour des champs cachés pour l'export
  938.             document.getElementById('search-form').addEventListener('submit', function() {
  939.                 this.querySelector('input[name="immatriculation"]').value = 
  940.                     this.querySelector('#{{ form.immatriculation.vars.id }}').value;
  941.                 this.querySelector('input[name="nom_client"]').value = 
  942.                     this.querySelector('#{{ form.nom_client.vars.id }}').value;
  943.                 this.querySelector('input[name="agence"]').value = 
  944.                     this.querySelector('#{{ form.agence.vars.id }}').value;
  945.                 this.querySelector('input[name="date_debut"]').value = 
  946.                     this.querySelector('#{{ form.date_debut.vars.id }}').value;
  947.                 this.querySelector('input[name="date_fin"]').value = 
  948.                     this.querySelector('#{{ form.date_fin.vars.id }}').value;
  949.             });
  950.             
  951.             // Animation des cartes au survol
  952.             const statCards = document.querySelectorAll('.stat-card');
  953.             statCards.forEach(card => {
  954.                 card.addEventListener('mouseenter', function() {
  955.                     this.style.transform = 'translateY(-8px) scale(1.02)';
  956.                 });
  957.                 
  958.                 card.addEventListener('mouseleave', function() {
  959.                     this.style.transform = 'translateY(0) scale(1)';
  960.                 });
  961.             });
  962.             
  963.             // Animation des badges de vacations
  964.             const vacationBadges = document.querySelectorAll('.vacation-badge');
  965.             vacationBadges.forEach(badge => {
  966.                 badge.addEventListener('mouseenter', function() {
  967.                     this.style.transform = 'scale(1.15) rotate(5deg)';
  968.                 });
  969.                 
  970.                 badge.addEventListener('mouseleave', function() {
  971.                     this.style.transform = 'scale(1) rotate(0)';
  972.                 });
  973.             });
  974.             
  975.             // Effet de focus sur les champs de formulaire
  976.             const formInputs = document.querySelectorAll('.form-control');
  977.             formInputs.forEach(input => {
  978.                 input.addEventListener('focus', function() {
  979.                     this.parentElement.style.transform = 'translateY(-2px)';
  980.                 });
  981.                 
  982.                 input.addEventListener('blur', function() {
  983.                     this.parentElement.style.transform = 'translateY(0)';
  984.                 });
  985.             });
  986.         });
  987.     </script>
  988. {% endblock %}