templates/report/custom.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ title }}{% endblock %}
  5. {% block body %}
  6.     <div class="card">
  7.         <div class="card-header border-0 pt-6">
  8.             <div class="card-title"></div>
  9.         </div>
  10.         <div class="card-body pt-0">
  11.             <div class="pb-10 row g-6 g-xl-9">
  12.                 <div class="col-md-4"></div>
  13.                 <div class="col-md-4"><input id="logDate" type="text" class="form-control form-control-solid"
  14.                                              autocomplete="false"></div>
  15.                 <div class="col-md-2"></div>
  16.             </div>
  17.             <!--begin::Wrapper-->
  18.             <div class="d-flex flex-stack flex-wrap mb-5">
  19.                 <!--begin::Search-->
  20.                 <div class="d-flex align-items-center position-relative my-1 mb-2 mb-md-0">
  21.                     <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
  22.                     <span class="svg-icon svg-icon-1 position-absolute ms-6">
  23.                                                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
  24.                                                              xmlns="http://www.w3.org/2000/svg">
  25.                                                             <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546"
  26.                                                                   height="2" rx="1"
  27.                                                                   transform="rotate(45 17.0365 15.1223)"
  28.                                                                   fill="currentColor"/>
  29.                                                             <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
  30.                                                                   fill="currentColor"/>
  31.                                                         </svg>
  32.                                                     </span>
  33.                     <!--end::Svg Icon-->
  34.                     <input type="text" data-table-filter="search" class="form-control form-control-solid w-250px ps-15"
  35.                            placeholder="Search"/>
  36.                 </div>
  37.                 <!--end::Search-->
  38.             </div>
  39.             <!--end::Wrapper-->
  40.             <div class="dataTables_wrapper dt-bootstrap4 no-footer">
  41.                 <div class="table-responsive">
  42.                     <table id="kt_datatable_row_grouping"
  43.                            class="table table-row-bordered gy-5 gs-7 border rounded w-100">
  44.                         <thead>
  45.                         <tr>
  46.                             <th>ID</th>
  47.                             <th>Mat</th>
  48.                             <th>Nom Complet</th>
  49.                             <th>SF</th>
  50.                             <th>NE</th>
  51.                             <th>Département</th>
  52.                             <th>Poste</th>
  53.                             <th>Prix</th>
  54.                             <th>Nombre d'heures</th>
  55.                             <th>Total</th>
  56.                             <th>Statut</th>
  57.                         </tr>
  58.                         </thead>
  59.                         <tbody>
  60.                         {% if data.logs is defined %}
  61.                             {% for logData in data.logs %}
  62.                                 <tr>
  63.                                     <td>{{ logData.employee.id }}</td>
  64.                                     <td>{{ logData.employee.registrationNumber }}</td>
  65.                                     <td>{{ logData.employee.fullName }}</td>
  66.                                     <td>{{ logData.employee.relationshipStatus.title }}</td>
  67.                                     <td>{{ logData.employee.numberOfChildrens }}</td>
  68.                                     <td>{{ logData.department }}</td>
  69.                                     <td>{{ logData.position }}</td>
  70.                                     <td>{{ logData.price }}</td>
  71.                                     <td>{{ logData.duration }}</td>
  72.                                     <td>{{ logData.total }}</td>
  73.                                     <td>{{ logData.status }}</td>
  74.                                 </tr>
  75.                             {% endfor %}
  76.                         {% endif %}
  77.                         </tbody>
  78.                     </table>
  80.                     <div class="d-flex flex-column flex-grow-1 pe-8">
  81.                         <!--begin::Stats-->
  82.                         <div class="d-flex flex-wrap">
  83.                             <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
  84.                                 <!--begin::Number-->
  85.                                 <div class="d-flex align-items-center">
  86.                                     <div class="fs-2 fw-bold counted" data-kt-countup="true"
  87.                                          data-kt-countup-value="{{ data.totalDuration|number_format(2, '.', ',') }}" data-kt-countup-prefix="H"
  88.                                          data-kt-initialized="1">{{ data.totalDuration|number_format(2, '.', ',') }} H
  89.                                     </div>
  90.                                 </div>
  91.                                 <!--end::Number-->
  92.                                 <!--begin::Label-->
  93.                                 <div class="fw-semibold fs-6 text-gray-400">Heures</div>
  94.                                 <!--end::Label-->
  95.                             </div>
  96.                             <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
  97.                                 <!--begin::Number-->
  98.                                 <div class="d-flex align-items-center">
  99.                                     <!--begin::Svg Icon | path: icons/duotune/arrows/arr065.svg-->
  100.                                     <span class="svg-icon svg-icon-3 svg-icon-danger me-2">
  101.                                                                             <svg width="24" height="24"
  102.                                                                                  viewBox="0 0 24 24" fill="none"
  103.                                                                                  xmlns="http://www.w3.org/2000/svg">
  104.                                                                                 <rect opacity="0.5" x="11" y="18"
  105.                                                                                       width="13" height="2" rx="1"
  106.                                                                                       transform="rotate(-90 11 18)"
  107.                                                                                       fill="currentColor"></rect>
  108.                                                                                 <path d="M11.4343 15.4343L7.25 11.25C6.83579 10.8358 6.16421 10.8358 5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75L11.2929 18.2929C11.6834 18.6834 12.3166 18.6834 12.7071 18.2929L18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25C17.8358 10.8358 17.1642 10.8358 16.75 11.25L12.5657 15.4343C12.2533 15.7467 11.7467 15.7467 11.4343 15.4343Z"
  109.                                                                                       fill="currentColor"></path>
  110.                                                                             </svg>
  111.                                                                         </span>
  112.                                     <!--end::Svg Icon-->
  113.                                     <div class="fs-2 fw-bold counted" data-kt-countup="true" data-kt-countup-value="80"
  114.                                          data-kt-initialized="1">{{ data.totalPrice|number_format(2, '.', ',') }}
  115.                                     </div>
  116.                                 </div>
  117.                                 <!--end::Number-->
  118.                                 <!--begin::Label-->
  119.                                 <div class="fw-semibold fs-6 text-gray-400">Coût</div>
  120.                                 <!--end::Label-->
  121.                             </div>
  122.                             <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
  123.                                 <!--begin::Number-->
  124.                                 <div class="d-flex align-items-center">
  125.                                     <!--begin::Svg Icon | path: icons/duotune/arrows/arr065.svg-->
  126.                                     <span class="svg-icon svg-icon-3 svg-icon-danger me-2">
  127.                                                                             <svg width="24" height="24"
  128.                                                                                  viewBox="0 0 24 24" fill="none"
  129.                                                                                  xmlns="http://www.w3.org/2000/svg">
  130.                                                                                 <rect opacity="0.5" x="11" y="18"
  131.                                                                                       width="13" height="2" rx="1"
  132.                                                                                       transform="rotate(-90 11 18)"
  133.                                                                                       fill="currentColor"></rect>
  134.                                                                                 <path d="M11.4343 15.4343L7.25 11.25C6.83579 10.8358 6.16421 10.8358 5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75L11.2929 18.2929C11.6834 18.6834 12.3166 18.6834 12.7071 18.2929L18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25C17.8358 10.8358 17.1642 10.8358 16.75 11.25L12.5657 15.4343C12.2533 15.7467 11.7467 15.7467 11.4343 15.4343Z"
  135.                                                                                       fill="currentColor"></path>
  136.                                                                             </svg>
  137.                                                                         </span>
  138.                                     <!--end::Svg Icon-->
  139.                                     <div class="fs-2 fw-bold counted" data-kt-countup="true" data-kt-countup-value="80"
  140.                                          data-kt-initialized="1">{{ data.totalEmployee|number_format(2, '.', ',') }}
  141.                                     </div>
  142.                                 </div>
  143.                                 <!--end::Number-->
  144.                                 <!--begin::Label-->
  145.                                 <div class="fw-semibold fs-6 text-gray-400">Nombre</div>
  146.                                 <!--end::Label-->
  147.                             </div>
  148.                         </div>
  149.                         <!--end::Stats-->
  150.                     </div>
  151.                 </div>
  152.             </div>
  153.         </div>
  154.     </div>
  155. {% endblock %}
  157. {% block javascripts %}
  158.     <script>
  159.         window.startDate = '{{ startDate }}';
  160.         window.endDate = '{{ endDate }}';
  161.         var logDate = $('#logDate');
  162.         logDate.daterangepicker({
  163.             showDropdowns: true,
  164.             autoUpdateInput: true,
  165.             startDate: window.startDate,
  166.             endDate: window.endDate,
  167.             locale: {
  168.                 format: "DD/MM/YYYY",
  169.                 applyLabel: "Appliquer",
  170.                 cancelLabel: "Annuler",
  171.                 weekLabel: "W",
  172.                 firstDay: 1,
  173.             }
  174.         });
  176.         logDate.on('apply.daterangepicker', function (ev, picker) {
  177.             let startDate = picker.startDate.format("DD/MM/YYYY");
  178.             let endDate = picker.endDate.format("DD/MM/YYYY");
  179.             $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
  180.             window.location.href = window.location.href.replace(/[\?#].*|$/, "?startDate=" + startDate + "&endDate=" + endDate);
  181.         });
  183.         logDate.on('cancel.daterangepicker', function (ev, picker) {
  184.             $(this).val(window.date);
  185.         });
  186.     </script>
  187. {% endblock %}