templates/dashboard/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Dashboard
  4. {% endblock %}
  5. {% block breadcrumb %}
  6.     <li class="breadcrumb-item active">{% trans %}
  7.         Dashboard
  8.         {% endtrans %}</li>
  9. {% endblock %}
  10. {% block pagetitle %}
  11.     {% trans %}
  12.     Dashboard{% endtrans %}
  13. {% endblock %}
  14. {% block body %}
  15.     <div class="row">
  16.         <div class="col-12 col-sm-6 col-md-3">
  17.             <div class="info-box">
  18.                 <span class="info-box-icon bg-info elevation-1">
  19.                     <i class="fas fa-project-diagram"></i>
  20.                 </span>
  22.                 <div class="info-box-content">
  23.                     <span class="info-box-text">Completed Projects</span>
  24.                     <span class="info-box-number"> {{ closed_project|length }}
  25.                     </span>
  26.                 </div>
  27.             </div>
  28.         </div>
  30.         <div class="col-12 col-sm-6 col-md-3">
  31.             <div class="info-box mb-3">
  32.                 <span class="info-box-icon bg-danger elevation-1">
  33.                     <i class="fas fa-project-diagram"></i>
  34.                 </span>
  36.                 <div class="info-box-content">
  37.                     <span class="info-box-text">Ongoing Projects</span>
  38.                     <span class="info-box-number"> {{ active_project|length }}
  39.                     </span>
  40.                 </div>
  41.             </div>
  42.         </div>
  44.         <div class="clearfix hidden-md-up"></div>
  46.         <div class="col-12 col-sm-6 col-md-3">
  47.             <div class="info-box mb-3">
  48.                 <span class="info-box-icon bg-success elevation-1">
  49.                     <i class="fas fa-tasks"></i>
  50.                 </span>
  52.                 <div class="info-box-content">
  53.                     <span class="info-box-text">Completed Tasks</span>
  54.                     <span class="info-box-number">20</span>
  55.                 </div>
  56.             </div>
  57.         </div>
  58.         <div class="col-12 col-sm-6 col-md-3">
  59.             <div class="info-box mb-3">
  60.                 <span class="info-box-icon bg-warning elevation-1">
  61.                     <i class="fas fa-tasks"></i>
  62.                 </span>
  64.                 <div class="info-box-content">
  65.                     <span class="info-box-text">Pending Tasks</span>
  66.                     <span class="info-box-number">7</span>
  67.                 </div>
  68.             </div>
  69.         </div>
  70.     </div><br>
  71.     <div class="row">
  72.         <div class="col-md-8">
  73.             <div class="card">
  74.                 <div class="card-header border-0">
  75.                     <h3 class="card-title">My Projects</h3>
  76.                     <div class="card-tools">
  77.                         <a href="#" class="btn btn-tool btn-sm">
  78.                             <i class="fas fa-bars"></i>
  79.                         </a>
  80.                     </div>
  81.                 </div>
  82.                 <div class="card-body table-responsive p-0">
  83.                     <table class="table table-striped table-valign-middle">
  84.                         <thead>
  85.                             <tr>
  86.                                 <th>Name</th>
  87.                                 <th>Amount</th>
  88.                                 <th>Start Date</th>
  89.                                 <th>End Date</th>
  90.                                 <th class="text-center">Actions</th>
  91.                             </tr>
  92.                         </thead>
  93.                         <tbody>
  94.                             {% for project in projects %}
  95.                                 <tr>
  96.                                     <td>
  97.                                         <a href="{{ path('project_dashboard', {'id': project.id })}}">{{ project.name }}</a>
  98.                                     </td>
  99.                                     <td>{{ project.currency.abbreviation }} {{ project.amount }}</td>
  100.                                     <td>{{ project.startDate ? project.startDate|date('Y-m-d') : '' }}</td>
  101.                                     <td>{{ project.endDate ? project.endDate|date('Y-m-d') : '' }}</td>
  102.                                     <td class="text-center">
  103.                                         <a href="{{path('project_activity_index', {'project': project.id})}}" class="btn btn-sm btn-primary mr-2">{% trans %}Activity{% endtrans %}</a>
  104.                                         <a href="{{ path('project_milestone_index', {'project': project.id })}}" class="btn btn-sm btn-success mr-2">{% trans %}Milestone{% endtrans %}</a>
  105.                                         <a href="{{ path('project_members_index', {'project': project.id })}}" class="btn btn-sm btn-warning text-white">{% trans %}Members{% endtrans %}</a>
  106.                                     </td>
  107.                                 </tr>
  108.                             {% endfor %}
  109.                         </tbody>
  110.                     </table>
  111.                 </div>
  112.             </div>
  113.         </div>
  114.         <div class="col-md-4">
  115.             <div class="card bg-gradient-success">
  116.                 <div class="card-header border-0">
  118.                     <h3 class="card-title">
  119.                         <i class="far fa-calendar-alt"></i>
  120.                         Calendar
  121.                     </h3>
  122.                     <div class="card-tools">
  123.                         <button type="button" class="btn btn-success btn-sm" data-card-widget="collapse">
  124.                             <i class="fas fa-minus"></i>
  125.                         </button>
  126.                     </div>
  127.                 </div>
  128.                 <div class="card-body pt-0 text-center">
  129.                     <div id="calendar" style="width: 100%"></div>
  130.                 </div>
  131.             </div>
  132.         </div>
  133.     </div><br>
  134.     <div class="row">
  135.         <div class="col-md-6">
  136.             <div class="card">
  137.                 <div class="card-header border-0">
  138.                     <h3 class="card-title">Overdue Tasks</h3>
  139.                     <div class="card-tools">
  140.                         <a href="#" class="btn btn-tool btn-sm">
  141.                             <i class="fas fa-bars"></i>
  142.                         </a>
  143.                     </div>
  144.                 </div>
  145.                 <div class="card-body table-responsive p-0">
  146.                     <table class="table table-striped table-valign-middle">
  147.                         <thead>
  148.                             <tr>
  149.                                 <th>Project</th>
  150.                                 <th>Task</th>
  151.                                 <th class="text-center">Overdue Days</th>
  152.                             </tr>
  153.                         </thead>
  154.                         <tbody>
  155.                             <tr>
  156.                                 <td>
  157.                                     City Portal
  158.                                 </td>
  159.                                 <td>UI/UX Implementation</td>
  160.                                 <td class="text-center">
  161.                                     <span class="text-danger">
  162.                                         12
  163.                                     </span>
  164.                                 </td>
  165.                             </tr>
  166.                         </tbody>
  167.                     </table>
  168.                 </div>
  169.             </div>
  170.         </div>
  171.         <div class="col-md-6">
  172.             <div class="card">
  173.                 <div class="card-header border-0">
  174.                     <h3 class="card-title">Upcoming Tasks</h3>
  175.                     <div class="card-tools">
  176.                         <a href="#" class="btn btn-tool btn-sm">
  177.                             <i class="fas fa-bars"></i>
  178.                         </a>
  179.                     </div>
  180.                 </div>
  181.                 <div class="card-body table-responsive p-0">
  182.                     <table class="table table-striped table-valign-middle">
  183.                         <thead>
  184.                             <tr>
  185.                                 <th>Project</th>
  186.                                 <th>Task</th>
  187.                                 <th class="text-center">Due Date</th>
  188.                             </tr>
  189.                         </thead>
  190.                         <tbody>
  191.                             <tr>
  192.                                 <td>
  193.                                     Demo
  194.                                 </td>
  195.                                 <td>Task Name</td>
  196.                                 <td class="text-center">
  197.                                     <span class="bg-warning p-2">
  198.                                         August 18, 2021
  199.                                     </span>
  200.                                 </td>
  201.                             </tr>
  202.                         </tbody>
  203.                     </table>
  204.                 </div>
  205.             </div>
  206.         </div>
  207.     </div>
  208. {% endblock %}
  209. {% block javascripts %}
  210.     <script src="{{ asset('assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js')}}"></script>
  211.     <script>
  212.       $('#calendar').datetimepicker({
  213.     format: 'L',
  214.     inline: true
  215.   })
  216.   </script>
  217. {% endblock %}