templates/app/child/_partials/subscriptions-tab.html.twig line 1

  1. <div
  2.   class="tab-pane active"
  3.   id="subscriptions-tab"
  4.   role="tabpanel"
  5.   data-controller="subscription"
  6. >
  7.   <div class="card">
  8.     <div class="card-header">
  9.       <h5 class="card-title mb-0">{% trans %} Abonnements {% endtrans %}</h5>
  10.     </div>
  12.     <div class="card-body px-0">
  13.       <div class="card-body">
  14.         <div class="row">
  15.           <div class="col-md-12">
  16.             <div
  17.               class="d-flex flex-wrap align-items-center justify-content-end gap-2 mb-3"
  18.             >
  19.               <div>
  20.                 <ul class="nav nav-pills"></ul>
  21.               </div>
  22.               <div>
  23.                 <a
  24.                   href="{{ path('app_subscription_new') }}"
  25.                   class="btn btn-primary"
  26.                   data-bs-toggle="modal"
  27.                   data-bs-target="#add-modal"
  28.                 >
  29.                   <i class="bx bx-plus me-1"></i>
  30.                   {% trans %}Ajouter un nouveau{% endtrans %}
  31.                 </a>
  32.               </div>
  33.               {% include "app/subscription/add-modal.html.twig" with {'form':
  34.               form_new_subscription} %}
  35.             </div>
  36.           </div>
  37.         </div>
  39.         <div class="row">
  40.           <div class="col-xl-4 col-md-6">
  41.             <div class="card card-h-100">
  42.               <div class="card-body">
  43.                 <div class="row align-items-center">
  44.                   <div class="col-6">
  45.                     <span
  46.                       class="text-muted mb-3 lh-1 d-block text-truncate font-size-16"
  47.                     >
  48.                       {% trans %}Total des Abonnements{% endtrans %}
  49.                     </span>
  50.                     <h4 class="mb-3 text-info">
  51.                       <span
  52.                         class="counter-value"
  53.                         data-target="{{ child.totalSubscriptions }}"
  54.                         >0</span
  55.                       >
  56.                       {{ company.currencie }}
  57.                     </h4>
  58.                   </div>
  59.                 </div>
  60.               </div>
  61.             </div>
  62.           </div>
  64.           <div class="col-xl-4 col-md-6">
  65.             <div class="card card-h-100">
  66.               <div class="card-body">
  67.                 <div class="row align-items-center">
  68.                   <div class="col-6">
  69.                     <span
  70.                       class="text-muted mb-3 lh-1 d-block text-truncate font-size-16"
  71.                     >
  72.                       {% trans %}Total payé{% endtrans %}
  73.                     </span>
  74.                     <h4 class="mb-3 text-success">
  75.                       <span
  76.                         class="counter-value"
  77.                         data-target="{{ child.totalPayed }}"
  78.                         >0</span
  79.                       >
  80.                       {{ company.currencie }}
  81.                     </h4>
  82.                   </div>
  83.                 </div>
  84.               </div>
  85.             </div>
  86.           </div>
  88.           <div class="col-xl-4 col-md-6">
  89.             <div class="card card-h-100">
  90.               <div class="card-body">
  91.                 <div class="row align-items-center">
  92.                   <div class="col-6">
  93.                     <span
  94.                       class="text-muted mb-3 lh-1 d-block text-truncate font-size-16"
  95.                     >
  96.                       {% trans %} Total Reste{% endtrans %}
  97.                     </span>
  98.                     <h4 class="mb-3 text-warning">
  99.                       <span
  100.                         class="counter-value"
  101.                         data-target="{{ child.totalReste }}"
  102.                         >0</span
  103.                       >
  104.                       {{ company.currencie }}
  105.                     </h4>
  106.                   </div>
  107.                 </div>
  108.               </div>
  109.             </div>
  110.           </div>
  111.         </div>
  112.       </div>
  114.       <div
  115.         class="table-responsive px-3"
  116.         data-simplebar="init"
  117.         style="max-height: 352px"
  118.       >
  119.         <div class="simplebar-wrapper" style="margin: 0px -16px">
  120.           <div class="simplebar-height-auto-observer-wrapper">
  121.             <div class="simplebar-height-auto-observer"></div>
  122.           </div>
  123.           <div class="simplebar-mask">
  124.             <div class="simplebar-offset" style="right: -20px; bottom: 0px">
  125.               <div
  126.                 class="simplebar-content-wrapper"
  127.                 style="
  128.                   height: auto;
  129.                   padding-right: 20px;
  130.                   padding-bottom: 0px;
  131.                   overflow: hidden scroll;
  132.                 "
  133.               >
  134.                 <div class="simplebar-content" style="padding: 0px 16px">
  135.                   <table
  136.                     class="table align-middle table-nowrap table-borderless"
  137.                   >
  138.                     <tbody>
  139.                       {% for subscription in subscriptions|sort((b, a) =>
  140.                       a.expireDate <=> b.expireDate) %}
  141.                       <tr>
  142.                         {% if date(subscription.expireDate) > date() %}
  143.                         <td
  144.                           style="width: 40px"
  145.                           data-toggle="tooltip"
  146.                           data-placement="top"
  147.                           title="Valid"
  148.                         >
  149.                           <div class="font-size-22 text-success">
  150.                             <i class="bx bx-check-circle d-block"></i>
  151.                           </div>
  152.                         </td>
  153.                         {% else %}
  154.                         <td
  155.                           style="width: 40px"
  156.                           data-toggle="tooltip"
  157.                           data-placement="top"
  158.                           title="Expiré"
  159.                         >
  160.                           <div class="font-size-22 text-danger">
  161.                             <i class="bx bx-error-circle d-block"></i>
  162.                           </div>
  163.                         </td>
  164.                         {% endif %}
  165.                         <td>
  166.                           <div>
  167.                             <h5 class="font-size-16 mb-1">
  168.                               {{
  169.                                 subscription.service
  170.                                   ? subscription.service.name
  171.                                   : ""
  172.                               }}
  173.                               -
  174.                               {{
  175.                                 subscription.service
  176.                                   ? subscription.service.duration
  177.                                   : ""
  178.                               }}
  179.                               Jours
  180.                             </h5>
  181.                             <p class="text-muted mb-0 font-size-14">
  182.                               <b> {% trans %} Prix {% endtrans %} : </b>
  183.                               <span class="text-info"
  184.                                 >{{ subscription.getTotal|number_format(0, '.', ' ') }}
  185.                                 {{ company.currencie }}
  186.                               </span>
  187.                               /
  188.                               <b> {% trans %} Remise {% endtrans %} : </b>
  189.                               <span class="text-info"
  190.                                 >{{ subscription.discount|number_format(0, '.', ' ') }}
  191.                                 {{ company.currencie }}
  192.                               </span>
  193.                             </p>
  194.                           </div>
  195.                         </td>
  197.                         <td>
  198.                           <div class="text-end">
  199.                             <h5 class="font-size-16 mb-0">
  200.                               {{ subscription.startDate|date('Y-m-d') }}
  201.                             </h5>
  202.                             <p class="text-muted mb-0 font-size-14">
  203.                               {% trans %} Date {% endtrans %}
  204.                             </p>
  205.                           </div>
  206.                         </td>
  207.                         <td>
  208.                           <div class="text-end">
  209.                             <h5 class="font-size-16 mb-0">
  210.                               {{ subscription.expireDate|date('Y-m-d') }}
  211.                             </h5>
  212.                             <p class="text-muted mb-0 font-size-14">
  213.                               {% trans %} Expiration {% endtrans %}
  214.                             </p>
  215.                           </div>
  216.                         </td>
  218.                         <td>
  219.                           <div class="text-end">
  220.                             <h5 class="font-size-16 text-info mb-0">
  221.                               {{ (subscription.total - subscription.discount)|number_format(0, '.', ' ') }}
  222.                               {{ company.currencie }}
  223.                             </h5>
  224.                             <p class="text-muted mb-0 font-size-14">
  225.                               {% trans %}Le total à payer {% endtrans %}
  226.                             </p>
  227.                           </div>
  228.                         </td>
  230.                         <td>
  231.                           <div class="text-end">
  232.                             <h5 class="font-size-16 text-success mb-0">
  233.                               {{ (subscription.getTotalToPay() - subscription.getRestToPay())|number_format(0, '.', ' ') }}
  234.                               {{ company.currencie }}
  235.                             </h5>
  236.                             <p class="text-muted mb-0 font-size-14">
  237.                               {% trans %} Payé {% endtrans %}
  238.                             </p>
  239.                           </div>
  240.                         </td>
  242.                         <td>
  243.                           <div class="text-end">
  244.                             <h5 class="font-size-16 text-warning mb-0">
  245.                               {{ subscription.getRestToPay()|number_format(0, '.', ' ') }}
  246.                               {{ company.currencie }}
  247.                             </h5>
  248.                             <p class="text-muted mb-0 font-size-14">
  249.                               {% trans %} Reste {% endtrans %}
  250.                             </p>
  251.                           </div>
  252.                         </td>
  253.                       </tr>
  255.                       {% endfor %}
  256.                     </tbody>
  257.                   </table>
  258.                 </div>
  259.               </div>
  260.             </div>
  261.           </div>
  262.           <div
  263.             class="simplebar-placeholder"
  264.             style="width: auto; height: 455px"
  265.           ></div>
  266.         </div>
  267.         <div
  268.           class="simplebar-track simplebar-horizontal"
  269.           style="visibility: hidden"
  270.         >
  271.           <div
  272.             class="simplebar-scrollbar"
  273.             style="transform: translate3d(0px, 0px, 0px); display: none"
  274.           ></div>
  275.         </div>
  276.         <div
  277.           class="simplebar-track simplebar-vertical"
  278.           style="visibility: visible"
  279.         >
  280.           <div
  281.             class="simplebar-scrollbar"
  282.             style="
  283.               height: 284px;
  284.               transform: translate3d(0px, 0px, 0px);
  285.               display: block;
  286.             "
  287.           ></div>
  288.         </div>
  289.       </div>
  290.     </div>
  292.     <!-- end card body -->
  293.   </div>
  294.   <!-- end card -->
  295. </div>