templates/admin/index.html.twig line 1

Open in your IDE?
  1. {% extends 'admin/base.html.twig' %}
  3. {% block title %}Dashboard{% endblock %}
  4. {% block body %}
  6.      <div class="page-holder bg-gray-100">
  7.         <div class="container-fluid px-lg-4 px-xl-5">
  9.           <section class="mb-3 mb-lg-5">
  10.             <div class="row">
  11.               <div class="col-xl-3 col-md-6 mb-4">
  12.                 <div class="card-widget h-100">
  13.                   <div class="card-widget-body">
  14.                     <div class="dot me-3 bg-indigo"></div>
  15.                     <div class="text">
  16.                       <h6 class="mb-0">Carte 1</h6><span class="text-gray-500">145,14</span>
  17.                     </div>
  18.                   </div>
  19.                   <div class="icon text-white bg-indigo"><i class="fas fa-server"></i></div>
  20.                 </div>
  21.               </div>
  22.               <div class="col-xl-3 col-md-6 mb-4">
  23.                 <div class="card-widget h-100">
  24.                   <div class="card-widget-body">
  25.                     <div class="dot me-3 bg-green"></div>
  26.                     <div class="text">
  27.                       <h6 class="mb-0">Carte 2</h6><span class="text-gray-500">32</span>
  28.                     </div>
  29.                   </div>
  30.                   <div class="icon text-white bg-green"><i class="far fa-clipboard"></i></div>
  31.                 </div>
  32.               </div>
  33.               <div class="col-xl-3 col-md-6 mb-4">
  34.                 <div class="card-widget h-100">
  35.                   <div class="card-widget-body">
  36.                     <div class="dot me-3 bg-blue"></div>
  37.                     <div class="text">
  38.                       <h6 class="mb-0">Carte 3</h6><span class="text-gray-500">400</span>
  39.                     </div>
  40.                   </div>
  41.                   <div class="icon text-white bg-blue"><i class="fa fa-dolly-flatbed"></i></div>
  42.                 </div>
  43.               </div>
  44.               <div class="col-xl-3 col-md-6 mb-4">
  45.                 <div class="card-widget h-100">
  46.                   <div class="card-widget-body">
  47.                     <div class="dot me-3 bg-red"></div>
  48.                     <div class="text">
  49.                       <h6 class="mb-0">Carte 4</h6><span class="text-gray-500">123</span>
  50.                     </div>
  51.                   </div>
  52.                   <div class="icon text-white bg-red"><i class="fas fa-receipt"></i></div>
  53.                 </div>
  54.               </div>
  55.             </div>
  56.           </section>
  57.           <section class="mb-4 mb-lg-5">
  58.             <h2 class="section-heading section-heading-ms mb-4 mb-lg-5">Paiements ðŸ’°</h2>
  59.             <div class="row">
  60.               <div class="col-lg-7 mb-4 mb-lg-0">
  61.                 <div class="card h-100">
  62.                   <div class="card-header">
  63.                     <h4 class="card-heading">Totaux paiments sur les derniers mois</h4>
  64.                   </div>
  65.                   <div class="card-body">
  66.                     <div class="chart-holder w-100">
  67.                       <canvas id="lineChart1"></canvas>
  68.                     </div>
  69.                   </div>
  70.                 </div>
  71.               </div>
  72.               <div class="col-lg-5 mb-4 mb-lg-0">
  73.                 <div class="h-50 pb-4 pb-lg-2">
  74.                   <div class="card h-100">
  75.                     <div class="card-body d-flex">
  76.                       <div class="row w-100 align-items-center">
  77.                         <div class="col-sm-5 mb-4 mb-sm-0">
  78.                           <h2 class="mb-0 d-flex align-items-center"><span>86.4</span><span class="dot bg-green d-inline-block ms-3"></span></h2><span class="text-muted text-uppercase small">Lorem ipsum</span>
  79.                           <hr><small class="text-muted">Paiements en lignes</small>
  80.                         </div>
  81.                         <div class="col-sm-7">
  82.                           <canvas id="pieChartHome1"></canvas>
  83.                         </div>
  84.                       </div>
  85.                     </div>
  86.                   </div>
  87.                 </div>
  88.                 <div class="h-50 pt-lg-2">
  89.                   <div class="card h-100">
  90.                     <div class="card-body d-flex">
  91.                       <div class="row w-100 align-items-center">
  92.                         <div class="col-sm-5 mb-4 mb-sm-0">
  93.                           <h2 class="mb-0 d-flex align-items-center"><span>325</span><span class="dot bg-indigo d-inline-block ms-3"></span></h2><span class="text-muted text-uppercase small">Lorem ipsum</span>
  94.                           <hr><small class="text-muted">Paiements sur place</small>
  95.                         </div>
  96.                         <div class="col-sm-7">
  97.                           <canvas id="pieChartHome2"></canvas>
  98.                         </div>
  99.                       </div>
  100.                     </div>
  101.                   </div>
  102.                 </div>
  103.               </div>
  104.             </div>
  105.           </section>
  106.           <section class="mb-4 mb-lg-5">
  107.             <h2 class="section-heading section-heading-ms mb-4 mb-lg-5">Statistiques ðŸ“ˆ   </h2>
  108.             <div class="row">
  109.               <div class="col-lg-5 mb-4 mb-lg-0">
  110.                 <div class="h-50 pb-4 pb-lg-2">
  111.                   <div class="card h-100">
  112.                     <div class="card-body d-flex">
  113.                       <div class="row w-100 align-items-center">
  114.                         <div class="col-sm-5 mb-4 mb-sm-0">
  115.                           <h2 class="mb-0 d-flex align-items-center"><span>86%</span><span class="dot bg-pink d-inline-block ms-3"></span></h2><span class="text-muted text-uppercase small">Lorem ipsum</span>
  116.                           <hr><small class="text-muted">Derniére semaine</small>
  117.                         </div>
  118.                         <div class="col-sm-7">
  119.                           <canvas id="pieChartHome3"></canvas>
  120.                         </div>
  121.                       </div>
  122.                     </div>
  123.                   </div>
  124.                 </div>
  125.                 <div class="h-50 pt-lg-2">
  126.                   <div class="card h-100">
  127.                     <div class="card-body d-flex">
  128.                       <div class="row w-100 align-items-center">
  129.                         <div class="col-sm-5 mb-4 mb-sm-0">
  130.                           <h2 class="mb-0 d-flex align-items-center"><span>€126,41</span><span class="dot bg-green d-inline-block ms-3"></span></h2><span class="text-muted text-uppercase small">Lorem ipsum</span>
  131.                           <hr><small class="text-muted">Mois dernier</small>
  132.                         </div>
  133.                         <div class="col-sm-7">
  134.                           <canvas id="pieChartHome4"></canvas>
  135.                         </div>
  136.                       </div>
  137.                     </div>
  138.                   </div>
  139.                 </div>
  140.               </div>
  141.               <div class="col-lg-7">
  142.                 <div class="card">
  143.                   <div class="card-header">
  144.                     <h4 class="card-heading">Données exemple</h4>
  145.                   </div>
  146.                   <div class="card-body">
  147.                     <div class="chart-holder">
  148.                       <canvas id="lineChart2"></canvas>
  149.                     </div>
  150.                   </div>
  151.                 </div>
  152.               </div>
  153.             </div>
  154.           </section>
  155.           <section class="mb-4 mb-lg-5">
  156.             <h2 class="section-heading section-heading-ms mb-4 mb-lg-5">Mises Ã  jours ðŸ†• </h2>
  157.             <div class="row">
  158.               <div class="col-lg-7 col-xl-6 mb-5 mb-lg-0">   
  159.                 <div class="card h-100"> 
  160.                   <div class="card-header">
  161.                     <h4 class="card-heading">Dérnières reservations</h4>
  162.                   </div>
  163.                   <div class="card-body">
  164.                     <p class="text-gray-500 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  165.                     <div class="d-flex justify-content-between align-items-start align-items-sm-center mb-4 flex-column flex-sm-row">
  166.                       <div class="left d-flex align-items-center">
  167.                         <div class="icon icon-lg shadow me-3 text-gray-700"><i class="far fa-calendar-check"></i></div>
  168.                         <div class="text">
  169.                           <h6 class="mb-0 d-flex align-items-center"> <span>Reservation #2577</span><span class="dot dot-sm ms-2 bg-indigo"></span></h6><small class="text-gray-500">Lorem ipsum</small>
  170.                         </div>
  171.                       </div>
  172.                       <div class="right ms-5 ms-sm-0 ps-3 ps-sm-0">
  173.                         <h5>€780</h5>
  174.                       </div>
  175.                     </div>
  176.                     <div class="d-flex justify-content-between align-items-start align-items-sm-center mb-4 flex-column flex-sm-row">
  177.                       <div class="left d-flex align-items-center">
  178.                         <div class="icon icon-lg shadow me-3 text-gray-700"><i class="far fa-calendar-check"></i></div>
  179.                         <div class="text">
  180.                           <h6 class="mb-0 d-flex align-items-center"> <span>Reservation #3565.</span><span class="dot dot-sm ms-2 bg-green"></span></h6><small class="text-gray-500">Lorem ipsum</small>
  181.                         </div>
  182.                       </div>
  183.                       <div class="right ms-5 ms-sm-0 ps-3 ps-sm-0">
  184.                         <h5>€2000</h5>
  185.                       </div>
  186.                     </div>
  187.                     <div class="d-flex justify-content-between align-items-start align-items-sm-center mb-4 flex-column flex-sm-row">
  188.                       <div class="left d-flex align-items-center">
  189.                         <div class="icon icon-lg shadow me-3 text-gray-700"><i class="far fa-calendar-check"></i></div>
  190.                         <div class="text">
  191.                           <h6 class="mb-0 d-flex align-items-center"> <span>Rservation #2345</span><span class="dot dot-sm ms-2 bg-blue"></span></h6><small class="text-gray-500">Lorem ipsum</small>
  192.                         </div>
  193.                       </div>
  194.                       <div class="right ms-5 ms-sm-0 ps-3 ps-sm-0">
  195.                         <h5>€9820</h5>
  196.                       </div>
  197.                     </div>
  198.                     <div class="d-flex justify-content-between align-items-start align-items-sm-center mb-4 flex-column flex-sm-row">
  199.                       <div class="left d-flex align-items-center">
  200.                         <div class="icon icon-lg shadow me-3 text-gray-700"><i class="far fa-calendar-check"></i></div>
  201.                         <div class="text">
  202.                           <h6 class="mb-0 d-flex align-items-center"> <span>Reservation #2536</span><span class="dot dot-sm ms-2 bg-red"></span></h6><small class="text-gray-500">Lorem ipsum</small>
  203.                         </div>
  204.                       </div>
  205.                       <div class="right ms-5 ms-sm-0 ps-3 ps-sm-0">
  206.                         <h5>€987</h5>
  207.                       </div>
  208.                     </div>
  209.                     <div class="d-flex justify-content-between align-items-start align-items-sm-center mb-4 flex-column flex-sm-row">
  210.                       <div class="left d-flex align-items-center">
  211.                         <div class="icon icon-lg shadow me-3 text-gray-700"><i class="far fa-calendar-check"></i></div>
  212.                         <div class="text">
  213.                           <h6 class="mb-0 d-flex align-items-center"> <span> Reservation #345</span><span class="dot dot-sm ms-2 bg-primary"></span></h6><small class="text-gray-500">Lorem ipsum</small>
  214.                         </div>
  215.                       </div>
  216.                       <div class="right ms-5 ms-sm-0 ps-3 ps-sm-0">
  217.                         <h5>€6780</h5>
  218.                       </div>
  219.                     </div>
  221.                   </div>
  222.                 </div>
  223.               </div>
  224.               <div class="col-lg-5 col-xl-6">
  225.                 <div class="row h-100">
  226.                   <div class="col-xxl-6">
  227.                     <div class="card-widget mb-4">
  228.                       <div class="card-widget-body">
  229.                         <div class="dot me-3 bg-indigo"></div>
  230.                         <div class="text">
  231.                           <h6 class="mb-0">Lorem ipsum</h6><span class="text-gray-500">127 Lorem ipsum</span>
  232.                         </div>
  233.                       </div>
  234.                       <div class="icon text-white bg-indigo"><i class="fas fa-clipboard-check"></i></div>
  235.                     </div>
  236.                   </div>
  237.                   <div class="col-xxl-6">
  238.                     <div class="card-widget mb-4">
  239.                       <div class="card-widget-body">
  240.                         <div class="dot me-3 bg-green"></div>
  241.                         <div class="text">
  242.                           <h6 class="mb-0">Lorem ipsum</h6><span class="text-gray-500">214 Lorem ipsum</span>
  243.                         </div>
  244.                       </div>
  245.                       <div class="icon text-white bg-green"><i class="fas fa-dollar-sign"></i></div>
  246.                     </div>
  247.                   </div>
  248.                   <div class="col-xxl-6">
  249.                     <div class="card-widget mb-4">
  250.                       <div class="card-widget-body">
  251.                         <div class="dot me-3 bg-blue"></div>
  252.                         <div class="text">
  253.                           <h6 class="mb-0">New Lorem ipsum</h6><span class="text-gray-500">25 new Lorem ipsum</span>
  254.                         </div>
  255.                       </div>
  256.                       <div class="icon text-white bg-blue"><i class="fas fa-user-friends"></i></div>
  257.                     </div>
  258.                   </div>
  259.                   <div class="col-12 order-xxl-1">
  260.                     <div class="card h-100">
  261.                       <div class="card-body">
  262.                         <h2 class="mb-0 d-flex align-items-center"><span>86.4</span><span class="dot bg-red d-inline-block ms-3"></span></h2><span class="text-muted">Lorem ipsum</span>
  263.                         <div class="chart-holder w-100">
  264.                           <canvas id="lineChart3"></canvas>
  265.                         </div>
  266.                       </div>
  267.                     </div>
  268.                   </div>
  269.                 </div>
  270.               </div>
  271.             </div>
  272.           </section>
  273.          
  274.     </div>
  275.     
  278. {% endblock %}