templates/default/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Accueil | {{ parent() }}{% endblock %}
  5. {% block body %}
  6.     <div class="breadcrumb">
  7.         <h1 class="mr-2">{{ app_name }}</h1>
  8.         <ul>
  9.             <li><a href="{{ path('default') }}">Accueil</a></li>
  10.             <li>{{ app_name }}</li>
  11.         </ul>
  12.     </div>
  13.     <div class="separator-breadcrumb border-top"></div>
  14.     <div class="row">
  15.         <!-- ICON BG-->
  16.         <div class="col-lg-3 col-md-6 col-sm-6">
  17.             <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
  18.                 <div class="card-body text-center"><i class="i-Add-User"></i>
  19.                     <div class="content">
  20.                         <p class="text-muted mt-2 mb-0">New Leads</p>
  21.                         <p class="text-primary text-24 line-height-1 mb-2">205</p>
  22.                     </div>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.         <div class="col-lg-3 col-md-6 col-sm-6">
  27.             <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
  28.                 <div class="card-body text-center"><i class="i-Financial"></i>
  29.                     <div class="content">
  30.                         <p class="text-muted mt-2 mb-0">Sales</p>
  31.                         <p class="text-primary text-24 line-height-1 mb-2">$4021</p>
  32.                     </div>
  33.                 </div>
  34.             </div>
  35.         </div>
  36.         <div class="col-lg-3 col-md-6 col-sm-6">
  37.             <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
  38.                 <div class="card-body text-center"><i class="i-Checkout-Basket"></i>
  39.                     <div class="content">
  40.                         <p class="text-muted mt-2 mb-0">Orders</p>
  41.                         <p class="text-primary text-24 line-height-1 mb-2">80</p>
  42.                     </div>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.         <div class="col-lg-3 col-md-6 col-sm-6">
  47.             <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
  48.                 <div class="card-body text-center"><i class="i-Money-2"></i>
  49.                     <div class="content">
  50.                         <p class="text-muted mt-2 mb-0">Expense</p>
  51.                         <p class="text-primary text-24 line-height-1 mb-2">$1200</p>
  52.                     </div>
  53.                 </div>
  54.             </div>
  55.         </div>
  56.     </div>
  57.     <div class="row">
  58.         <div class="col-lg-8 col-md-12">
  59.             <div class="card mb-4">
  60.                 <div class="card-body">
  61.                     <div class="card-title">This Year Sales</div>
  62.                     <div id="echartBar" style="height: 300px;"></div>
  63.                 </div>
  64.             </div>
  65.         </div>
  66.         <div class="col-lg-4 col-sm-12">
  67.             <div class="card mb-4">
  68.                 <div class="card-body">
  69.                     <div class="card-title">Sales by Countries</div>
  70.                     <div id="echartPie" style="height: 300px;"></div>
  71.                 </div>
  72.             </div>
  73.         </div>
  74.     </div>
  75.     <div class="row">
  76.         <div class="col-lg-6 col-md-12">
  77.             <div class="row">
  78.                 <div class="col-lg-6 col-md-12">
  79.                     <div class="card card-chart-bottom o-hidden mb-4">
  80.                         <div class="card-body">
  81.                             <div class="text-muted">Last Month Sales</div>
  82.                             <p class="mb-4 text-primary text-24">$40250</p>
  83.                         </div>
  84.                         <div id="echart1" style="height: 260px;"></div>
  85.                     </div>
  86.                 </div>
  87.                 <div class="col-lg-6 col-md-12">
  88.                     <div class="card card-chart-bottom o-hidden mb-4">
  89.                         <div class="card-body">
  90.                             <div class="text-muted">Last Week Sales</div>
  91.                             <p class="mb-4 text-warning text-24">$10250</p>
  92.                         </div>
  93.                         <div id="echart2" style="height: 260px;"></div>
  94.                     </div>
  95.                 </div>
  96.             </div>
  97.             <div class="row">
  98.                 <div class="col-md-12">
  99.                     <div class="card o-hidden mb-4">
  100.                         <div class="card-header d-flex align-items-center border-0">
  101.                             <h3 class="w-50 float-left card-title m-0">New Users</h3>
  102.                             <div class="dropdown dropleft text-right w-50 float-right">
  103.                                 <button class="btn bg-gray-100" id="dropdownMenuButton1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="nav-icon i-Gear-2"></i></button>
  104.                                 <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1"><a class="dropdown-item" href="#">Add new user</a><a class="dropdown-item" href="#">View All users</a><a class="dropdown-item" href="#">Something else here</a></div>
  105.                             </div>
  106.                         </div>
  107.                         <div>
  108.                             <div class="table-responsive">
  109.                                 <table class="table text-center" id="user_table">
  110.                                     <thead>
  111.                                         <tr>
  112.                                             <th scope="col">#</th>
  113.                                             <th scope="col">Name</th>
  114.                                             <th scope="col">Avatar</th>
  115.                                             <th scope="col">Email</th>
  116.                                             <th scope="col">Status</th>
  117.                                             <th scope="col">Action</th>
  118.                                         </tr>
  119.                                     </thead>
  120.                                     <tbody>
  121.                                         <tr>
  122.                                             <th scope="row">1</th>
  123.                                             <td>Smith Doe</td>
  124.                                             <td><img class="rounded-circle m-0 avatar-sm-table" src="{{ asset('assets/dist-assets/images/faces/1.jpg') }}" alt="" /></td>
  125.                                             <td>Smith@gmail.com</td>
  126.                                             <td><span class="badge badge-success">Active</span></td>
  127.                                             <td><a class="text-success mr-2" href="#"><i class="nav-icon i-Pen-2 font-weight-bold"></i></a><a class="text-danger mr-2" href="#"><i class="nav-icon i-Close-Window font-weight-bold"></i></a></td>
  128.                                         </tr>
  129.                                         <tr>
  130.                                             <th scope="row">2</th>
  131.                                             <td>Jhon Doe</td>
  132.                                             <td><img class="rounded-circle m-0 avatar-sm-table" src="{{ asset('assets/dist-assets/images/faces/1.jpg') }}" alt="" /></td>
  133.                                             <td>Jhon@gmail.com</td>
  134.                                             <td><span class="badge badge-info">Pending</span></td>
  135.                                             <td><a class="text-success mr-2" href="#"><i class="nav-icon i-Pen-2 font-weight-bold"></i></a><a class="text-danger mr-2" href="#"><i class="nav-icon i-Close-Window font-weight-bold"></i></a></td>
  136.                                         </tr>
  137.                                         <tr>
  138.                                             <th scope="row">3</th>
  139.                                             <td>Alex</td>
  140.                                             <td><img class="rounded-circle m-0 avatar-sm-table" src="{{ asset('assets/dist-assets/images/faces/1.jpg') }}" alt="" /></td>
  141.                                             <td>Otto@gmail.com</td>
  142.                                             <td><span class="badge badge-warning">Not Active</span></td>
  143.                                             <td><a class="text-success mr-2" href="#"><i class="nav-icon i-Pen-2 font-weight-bold"></i></a><a class="text-danger mr-2" href="#"><i class="nav-icon i-Close-Window font-weight-bold"></i></a></td>
  144.                                         </tr>
  145.                                         <tr>
  146.                                             <th scope="row">4</th>
  147.                                             <td>Mathew Doe</td>
  148.                                             <td><img class="rounded-circle m-0 avatar-sm-table" src="{{ asset('assets/dist-assets/images/faces/1.jpg') }}" alt="" /></td>
  149.                                             <td>Mathew@gmail.com</td>
  150.                                             <td><span class="badge badge-success">Active</span></td>
  151.                                             <td><a class="text-success mr-2" href="#"><i class="nav-icon i-Pen-2 font-weight-bold"></i></a><a class="text-danger mr-2" href="#"><i class="nav-icon i-Close-Window font-weight-bold"></i></a></td>
  152.                                         </tr>
  153.                                     </tbody>
  154.                                 </table>
  155.                             </div>
  156.                         </div>
  157.                     </div>
  158.                 </div>
  159.             </div>
  160.         </div>
  161.         <div class="col-lg-6 col-md-12">
  162.             <div class="card mb-4">
  163.                 <div class="card-body">
  164.                     <div class="card-title">Top Selling Products</div>
  165.                     <div class="d-flex flex-column flex-sm-row align-items-sm-center mb-3"><img class="avatar-lg mb-3 mb-sm-0 rounded mr-sm-3" src="{{ asset('assets/dist-assets/images/products/headphone-4.jpg') }}" alt="" />
  166.                         <div class="flex-grow-1">
  167.                             <h5><a href="">Wireless Headphone E23</a></h5>
  168.                             <p class="m-0 text-small text-muted">Lorem ipsum dolor sit amet consectetur.</p>
  169.                             <p class="text-small text-danger m-0">$450
  170.                                 <del class="text-muted">$500</del>
  171.                             </p>
  172.                         </div>
  173.                         <div>
  174.                             <button class="btn btn-outline-primary mt-3 mb-3 m-sm-0 btn-rounded btn-sm">
  175.                                 View
  176.                                 details
  177.                             </button>
  178.                         </div>
  179.                     </div>
  180.                     <div class="d-flex flex-column flex-sm-row align-items-sm-center mb-3"><img class="avatar-lg mb-3 mb-sm-0 rounded mr-sm-3" src="{{ asset('assets/dist-assets/images/products/headphone-2.jpg') }}" alt="" />
  181.                         <div class="flex-grow-1">
  182.                             <h5><a href="">Wireless Headphone Y902</a></h5>
  183.                             <p class="m-0 text-small text-muted">Lorem ipsum dolor sit amet consectetur.</p>
  184.                             <p class="text-small text-danger m-0">$550
  185.                                 <del class="text-muted">$600</del>
  186.                             </p>
  187.                         </div>
  188.                         <div>
  189.                             <button class="btn btn-outline-primary mt-3 mb-3 m-sm-0 btn-sm btn-rounded">
  190.                                 View
  191.                                 details
  192.                             </button>
  193.                         </div>
  194.                     </div>
  195.                     <div class="d-flex flex-column flex-sm-row align-items-sm-center mb-3"><img class="avatar-lg mb-3 mb-sm-0 rounded mr-sm-3" src="{{ asset('assets/dist-assets/images/products/headphone-3.jpg') }}" alt="" />
  196.                         <div class="flex-grow-1">
  197.                             <h5><a href="">Wireless Headphone E09</a></h5>
  198.                             <p class="m-0 text-small text-muted">Lorem ipsum dolor sit amet consectetur.</p>
  199.                             <p class="text-small text-danger m-0">$250
  200.                                 <del class="text-muted">$300</del>
  201.                             </p>
  202.                         </div>
  203.                         <div>
  204.                             <button class="btn btn-outline-primary mt-3 mb-3 m-sm-0 btn-sm btn-rounded">
  205.                                 View
  206.                                 details
  207.                             </button>
  208.                         </div>
  209.                     </div>
  210.                     <div class="d-flex flex-column flex-sm-row align-items-sm-center mb-3"><img class="avatar-lg mb-3 mb-sm-0 rounded mr-sm-3" src="{{ asset('assets/dist-assets/images/products/headphone-4.jpg') }}" alt="" />
  211.                         <div class="flex-grow-1">
  212.                             <h5><a href="">Wireless Headphone X89</a></h5>
  213.                             <p class="m-0 text-small text-muted">Lorem ipsum dolor sit amet consectetur.</p>
  214.                             <p class="text-small text-danger m-0">$450
  215.                                 <del class="text-muted">$500</del>
  216.                             </p>
  217.                         </div>
  218.                         <div>
  219.                             <button class="btn btn-outline-primary mt-3 mb-3 m-sm-0 btn-sm btn-rounded">
  220.                                 View
  221.                                 details
  222.                             </button>
  223.                         </div>
  224.                     </div>
  225.                 </div>
  226.             </div>
  227.             <div class="card mb-4">
  228.                 <div class="card-body p-0">
  229.                     <div class="card-title border-bottom d-flex align-items-center m-0 p-3"><span>User activity</span><span class="flex-grow-1"></span><span class="badge badge-pill badge-warning">Updated daily</span></div>
  230.                     <div class="d-flex border-bottom justify-content-between p-3">
  231.                         <div class="flex-grow-1"><span class="text-small text-muted">Pages / Visit</span>
  232.                             <h5 class="m-0">2065</h5>
  233.                         </div>
  234.                         <div class="flex-grow-1"><span class="text-small text-muted">New user</span>
  235.                             <h5 class="m-0">465</h5>
  236.                         </div>
  237.                         <div class="flex-grow-1"><span class="text-small text-muted">Last week</span>
  238.                             <h5 class="m-0">23456</h5>
  239.                         </div>
  240.                     </div>
  241.                     <div class="d-flex border-bottom justify-content-between p-3">
  242.                         <div class="flex-grow-1"><span class="text-small text-muted">Pages / Visit</span>
  243.                             <h5 class="m-0">1829</h5>
  244.                         </div>
  245.                         <div class="flex-grow-1"><span class="text-small text-muted">New user</span>
  246.                             <h5 class="m-0">735</h5>
  247.                         </div>
  248.                         <div class="flex-grow-1"><span class="text-small text-muted">Last week</span>
  249.                             <h5 class="m-0">92565</h5>
  250.                         </div>
  251.                     </div>
  252.                     <div class="d-flex justify-content-between p-3">
  253.                         <div class="flex-grow-1"><span class="text-small text-muted">Pages / Visit</span>
  254.                             <h5 class="m-0">3165</h5>
  255.                         </div>
  256.                         <div class="flex-grow-1"><span class="text-small text-muted">New user</span>
  257.                             <h5 class="m-0">165</h5>
  258.                         </div>
  259.                         <div class="flex-grow-1"><span class="text-small text-muted">Last week</span>
  260.                             <h5 class="m-0">32165</h5>
  261.                         </div>
  262.                     </div>
  263.                 </div>
  264.             </div>
  265.         </div>
  266.         <div class="col-md-12">
  267.             <div class="card mb-4">
  268.                 <div class="card-body p-0">
  269.                     <h5 class="card-title m-0 p-3">Last 20 Day Leads</h5>
  270.                     <div id="echart3" style="height: 360px;"></div>
  271.                 </div>
  272.             </div>
  273.         </div>
  274.     </div>
  275. {% endblock %}