templates/app/dashboard/home.html.twig line 1

  1. {% extends 'app/index.html.twig' %} {% block title %}Tableau de bord {% endblock
  2. %} {% block content %} {% include "app/_partials/breadcrumb.html.twig" with {
  3. 'title': 'Tableau de bord'|trans, 'parent': 'Clever Nursery'|trans } %}
  5. <div class="row" data-controller="dashboardcards">
  6.   <div class="col-xl-3 col-md-6">
  7.     <div class="card card-h-100">
  8.       <div class="card-body">
  9.         <div class="row align-items-center">
  10.           <div class="col-6">
  11.             <span class="text-muted mb-3 lh-1 d-block text-truncate">
  12.               {% trans %} Enfants {% endtrans %}
  13.             </span>
  14.             <h4 class="mb-3" style="font-size: 2.3125rem">
  15.               <span class="counter-value" data-target="{{ children_count }}"
  16.                 >0</span
  17.               >
  18.             </h4>
  19.           </div>
  21.           <div class="col-6">
  22.             <div
  23.               id="mini-chart1"
  24.               data-colors='["#8a0da0"]'
  25.               class="apex-charts mb-2"
  26.             ></div>
  27.           </div>
  28.         </div>
  29.         <div class="text-nowrap">
  30.           <span class="badge" id="ratio-chart-one"></span>
  31.           <span class="ms-1 text-muted font-size-13">
  32.             {% trans %} Depuis le mois dernier {% endtrans %}
  33.           </span>
  34.         </div>
  35.       </div>
  36.     </div>
  37.   </div>
  39.   <div class="col-xl-3 col-md-6">
  40.     <div class="card card-h-100">
  41.       <div class="card-body">
  42.         <div class="row align-items-center">
  43.           <div class="col-6">
  44.             <span class="text-muted mb-3 lh-1 d-block text-truncate">
  45.               {% trans %} Enfants en attente {% endtrans %}
  46.             </span>
  47.             <h4 class="mb-3" style="font-size: 2.3125rem">
  48.               <span class="counter-value" data-target="{{ prechildren_count }}"
  49.                 >0</span
  50.               >
  51.             </h4>
  52.           </div>
  54.           <div class="col-6">
  55.             <div
  56.               id="mini-chart2"
  57.               data-colors='["#8a0da0"]'
  58.               class="apex-charts mb-2"
  59.             ></div>
  60.           </div>
  61.         </div>
  62.         <div class="text-nowrap">
  63.           <span class="badge" id="ratio-chart-two"></span>
  64.           <span class="ms-1 text-muted font-size-13">
  65.             {% trans %} Depuis le mois dernier {% endtrans %}
  66.           </span>
  67.         </div>
  68.       </div>
  69.     </div>
  70.   </div>
  72.   <div class="col-xl-3 col-md-6">
  73.     <div class="card card-h-100">
  74.       <div class="card-body">
  75.         <div class="row align-items-center">
  76.           <div class="col-6">
  77.             <span class="text-muted mb-3 lh-1 d-block text-truncate">
  78.               {% trans %} Abonnements {% endtrans %}
  79.             </span>
  80.             <h4 class="mb-3" style="font-size: 2.3125rem">
  81.               <span
  82.                 class="counter-value"
  83.                 data-target="{{ subscriptions_count }}"
  84.                 >0</span
  85.               >
  86.             </h4>
  87.           </div>
  89.           <div class="col-6">
  90.             <div
  91.               id="mini-chart3"
  92.               data-colors='["#8a0da0"]'
  93.               class="apex-charts mb-2"
  94.             ></div>
  95.           </div>
  96.         </div>
  97.         <div class="text-nowrap">
  98.           <span class="badge" id="ratio-chart-three"></span>
  99.           <span class="ms-1 text-muted font-size-13">
  100.             {% trans %} Depuis le mois dernier {% endtrans %}
  101.           </span>
  102.         </div>
  103.       </div>
  104.     </div>
  105.   </div>
  107.   <div class="col-xl-3 col-md-6">
  108.     <div class="card card-h-100">
  109.       <div class="card-body">
  110.         <div class="row align-items-center">
  111.           <div class="col-6">
  112.             <span class="text-muted mb-3 lh-1 d-block text-truncate">
  113.               {% trans %} Employés {% endtrans %}
  114.             </span>
  115.             <h4 class="mb-3" style="font-size: 2.3125rem">
  116.               <span class="counter-value" data-target="{{ employees_count }}"
  117.                 >0</span
  118.               >
  119.             </h4>
  120.           </div>
  122.           <div class="col-6">
  123.             <div
  124.               id="mini-chart4"
  125.               data-colors='["#8a0da0"]'
  126.               class="apex-charts mb-2"
  127.             ></div>
  128.           </div>
  129.         </div>
  130.         <div class="text-nowrap">
  131.           <span class="badge" id="ratio-chart-four"></span>
  132.           <span class="ms-1 text-muted font-size-13">
  133.             {% trans %} Depuis le mois dernier {% endtrans %}
  134.           </span>
  135.         </div>
  136.       </div>
  137.     </div>
  138.   </div>
  139. </div>
  141. <div class="row">
  142.   <div class="col-xl-8">
  143.     <div class="row">
  144.       <div class="col-xl-6" data-controller="dashboardtasks">
  145.         {% include "app/dashboard/my-tasks-events.html.twig" %}
  146.       </div>
  147.       <div class="col-xl-6" data-controller="dashboardsubscriptions">
  148.         {% include "app/dashboard/my-subscriptions.html.twig" %}
  149.       </div>
  150.     </div>
  151.     <div class="row">
  152.       <div class="col-xl-4 col-md-6">
  153.         <div class="card card-h-100">
  154.           <div class="card-body">
  155.             <div class="row align-items-center">
  156.               <div class="col-6">
  157.                 <span class="text-muted mb-3 lh-1 d-block text-truncate">
  158.                   {% trans %} Salles de classe {% endtrans %}
  159.                 </span>
  160.                 <h4 class="mb-3" style="font-size: 2.3125rem">
  161.                   <span
  162.                     class="counter-value"
  163.                     data-target="{{ classrooms_count }}"
  164.                     >0</span
  165.                   >
  166.                 </h4>
  167.               </div>
  168.               <div class="col-6">
  169.                 <div
  170.                   id="mini-chart5"
  171.                   data-colors='["#8a0da0"]'
  172.                   class="apex-charts mb-2"
  173.                 ></div>
  174.               </div>
  175.             </div>
  176.             <div class="text-nowrap">
  177.               <span class="badge" id="ratio-chart-five"></span>
  178.               <span class="ms-1 text-muted font-size-13">
  179.                 {% trans %} in active classrooms {% endtrans %}
  180.               </span>
  181.             </div>
  182.           </div>
  183.         </div>
  184.       </div>
  186.       <div class="col-xl-4 col-md-6">
  187.         <div class="card card-h-100">
  188.           <div class="card-body">
  189.             <div class="row align-items-center">
  190.               <div class="col-6">
  191.                 <span class="text-muted mb-3 lh-1 d-block text-truncate">
  192.                   {% trans %} Tâches {% endtrans %}
  193.                 </span>
  194.                 <h4 class="mb-3" style="font-size: 2.3125rem">
  195.                   <span class="counter-value" data-target="{{ tasks_count }}"
  196.                     >0</span
  197.                   >
  198.                 </h4>
  199.               </div>
  201.               <div class="col-6">
  202.                 <div
  203.                   id="mini-chart6"
  204.                   data-colors='["#8a0da0"]'
  205.                   class="apex-charts mb-2"
  206.                 ></div>
  207.               </div>
  208.             </div>
  209.             <div class="text-nowrap">
  210.               <span class="badge" id="ratio-chart-six"></span>
  211.               <span class="ms-1 text-muted font-size-13">
  212.                 {% trans %} Tâches à faire {% endtrans %}
  213.               </span>
  214.             </div>
  215.           </div>
  216.         </div>
  217.       </div>
  219.       <div class="col-xl-4 col-md-6">
  220.         <div class="card card-h-100">
  221.           <div class="card-body">
  222.             <div class="row align-items-center">
  223.               <div class="col-6">
  224.                 <span class="text-muted mb-3 lh-1 d-block text-truncate">
  225.                   {% trans %} Événements {% endtrans %}
  226.                 </span>
  227.                 <h4 class="mb-3" style="font-size: 2.3125rem">
  228.                   <span class="counter-value" data-target="{{ events_count }}"
  229.                     >0</span
  230.                   >
  231.                 </h4>
  232.               </div>
  234.               <div class="col-6">
  235.                 <div
  236.                   id="mini-chart7"
  237.                   data-colors='["#8a0da0"]'
  238.                   class="apex-charts mb-2"
  239.                 ></div>
  240.               </div>
  241.             </div>
  242.             <div class="text-nowrap">
  243.               <span class="badge" id="ratio-chart-seven"></span>
  244.               <span class="ms-1 text-muted font-size-13">
  245.                 {% trans %} Ce mois-ci {% endtrans %}
  246.               </span>
  247.             </div>
  248.           </div>
  249.         </div>
  250.       </div>
  251.     </div>
  252.   </div>
  253.   <div class="col-xl-4" data-controller="dashboardposts">
  254.     {% include "app/dashboard/my-posts.html.twig" %}
  255.   </div>
  256. </div>
  257. {% endblock %}