288 lines
16 KiB
HTML
288 lines
16 KiB
HTML
{% extends "layouts/base.html" %}
|
|
|
|
{% block title %} Dashboard {% endblock title %}
|
|
|
|
<!-- Specific CSS goes HERE -->
|
|
{% block stylesheets %}{% endblock stylesheets %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- ### $App Screen Content ### -->
|
|
<main class='main-content bgc-grey-100'>
|
|
<div id='mainContent'>
|
|
<div class="row gap-20 masonry pos-r">
|
|
<div class="masonry-sizer col-md-6"></div>
|
|
<div class="masonry-item w-100">
|
|
<div class="row gap-20">
|
|
<!-- #Toatl Tickets ==================== -->
|
|
<div class='col-md-3'>
|
|
<div class="layers bd bgc-white p-20">
|
|
<div class="layer w-100 mB-10">
|
|
<h6 class="lh-1">Total Tickets</h6>
|
|
</div>
|
|
<div class="layer w-100">
|
|
<div class="peers ai-sb fxw-nw">
|
|
<div class="peer peer-greed">
|
|
<span id="sparklinedash"></span>
|
|
</div>
|
|
<div class="peer">
|
|
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">+10%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- #Open Tickets ==================== -->
|
|
<div class='col-md-3'>
|
|
<div class="layers bd bgc-white p-20">
|
|
<div class="layer w-100 mB-10">
|
|
<h6 class="lh-1">Open Tickets</h6>
|
|
</div>
|
|
<div class="layer w-100">
|
|
<div class="peers ai-sb fxw-nw">
|
|
<div class="peer peer-greed">
|
|
<span id="sparklinedash2"></span>
|
|
</div>
|
|
<div class="peer">
|
|
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-red-50 c-red-500">-7%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- #Pending Tickets ==================== -->
|
|
<div class='col-md-3'>
|
|
<div class="layers bd bgc-white p-20">
|
|
<div class="layer w-100 mB-10">
|
|
<h6 class="lh-1">Pending Tickets</h6>
|
|
</div>
|
|
<div class="layer w-100">
|
|
<div class="peers ai-sb fxw-nw">
|
|
<div class="peer peer-greed">
|
|
<span id="sparklinedash3"></span>
|
|
</div>
|
|
<div class="peer">
|
|
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">~12%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- #Closed Tickets ==================== -->
|
|
<div class='col-md-3'>
|
|
<div class="layers bd bgc-white p-20">
|
|
<div class="layer w-100 mB-10">
|
|
<h6 class="lh-1">Closed Tickets</h6>
|
|
</div>
|
|
<div class="layer w-100">
|
|
<div class="peers ai-sb fxw-nw">
|
|
<div class="peer peer-greed">
|
|
<span id="sparklinedash4"></span>
|
|
</div>
|
|
<div class="peer">
|
|
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">33%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-12">
|
|
<div class="bd bgc-white">
|
|
<div class="peers fxw-nw@lg+ ai-s">
|
|
<div class="peer peer-greed w-70p@lg- p-20">
|
|
<div class="layers">
|
|
<div class="layer w-100 pX-20 pT-20">
|
|
<h6 class="lh-1">Monthly Stats</h6>
|
|
</div>
|
|
<div class="layer w-100 p-20 pos-r">
|
|
<canvas id="line-chart" class="mw-100p" height="220"></canvas>
|
|
</div>
|
|
<div class="layer bdT p-20 w-100">
|
|
<div class="peers ai-c jc-c gapX-20">
|
|
<div class="peer fw-600">
|
|
<span class="fsz-def fw-600 mR-10 c-grey-800">2% <i class="fa fa-level-down c-red-500"></i></span>
|
|
<small class="c-grey-500 fw-600">Open Tickets</small>
|
|
</div>
|
|
<div class="peer fw-600">
|
|
<span class="fsz-def fw-600 mR-10 c-grey-800">15% <i class="fa fa-level-up c-green-500"></i></span>
|
|
<small class="c-grey-500 fw-600">Pending Tickets</small>
|
|
</div>
|
|
<div class="peer fw-600">
|
|
<span class="fsz-def fw-600 mR-10 c-grey-800">8% <i class="fa fa-level-down c-red-500"></i></span>
|
|
<small class="c-grey-500 fw-600">Closed Tickets</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="peer bdL p-20 w-30p@lg+ w-100p@lg-">
|
|
<div class="layers">
|
|
<div class="layer w-100">
|
|
<!-- Progress Bars -->
|
|
<div class="layers">
|
|
<div class="layer w-100">
|
|
<h5 class="mB-5">14</h5>
|
|
<small class="fw-600 c-grey-700">Open Tickets</small>
|
|
<span class="pull-right c-grey-600 fsz-sm">35%</span>
|
|
<div class="progress mT-10">
|
|
<div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width:35%;">
|
|
<span class="visually-hidden">35% Complete</span>
|
|
</div>
|
|
<div class="progress-bar bgc-grey-300" role="progressbar" style="width: 65%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="layer w-100 mT-15">
|
|
<h5 class="mB-5">10</h5>
|
|
<small class="fw-600 c-grey-700">Pending Tickets</small>
|
|
<span class="pull-right c-grey-600 fsz-sm">25%</span>
|
|
<div class="progress mT-10">
|
|
<div class="progress-bar bgc-grey-300" role="progressbar" style="width: 35%;"></div>
|
|
<div class="progress-bar bgc-blue-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:25%;">
|
|
<span class="visually-hidden">25% Complete</span>
|
|
</div>
|
|
<div class="progress-bar bgc-grey-300" role="progressbar" style="width: 40%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="layer w-100 mT-15">
|
|
<h5 class="mB-5">16</h5>
|
|
<small class="fw-600 c-grey-700">Closed Tickets</small>
|
|
<span class="pull-right c-grey-600 fsz-sm">40%</span>
|
|
<div class="progress mT-10">
|
|
<div class="progress-bar bgc-grey-300" role="progressbar" style="width: 60%;"></div>
|
|
<div class="progress-bar bgc-red-500" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%;">
|
|
<span class="visually-hidden">40% Complete</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Pie Charts -->
|
|
<div class="peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
|
|
<div class="peer">
|
|
<div class="easy-pie-chart" data-size='80' data-percent="75" data-bar-color='#f44336'>
|
|
<span></span>
|
|
</div>
|
|
<h6 class="fsz-sm">Low Priority</h6>
|
|
</div>
|
|
<div class="peer">
|
|
<div class="easy-pie-chart" data-size='80' data-percent="50" data-bar-color='#2196f3'>
|
|
<span></span>
|
|
</div>
|
|
<h6 class="fsz-sm">Medium Priority</h6>
|
|
</div>
|
|
<div class="peer">
|
|
<div class="easy-pie-chart" data-size='80' data-percent="90" data-bar-color='#ff9800'>
|
|
<span></span>
|
|
</div>
|
|
<h6 class="fsz-sm">High Priority</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-md-6">
|
|
<!-- #Sales Report ==================== -->
|
|
<div class="bd bgc-white">
|
|
<div class="layers">
|
|
<div class="layer w-100 p-20">
|
|
<h6 class="lh-1">Tickets Report</h6>
|
|
</div>
|
|
<div class="layer w-100">
|
|
<div class="bgc-light-blue-500 c-white p-20">
|
|
<div class="peers ai-c jc-sb gap-40">
|
|
<div class="peer peer-greed">
|
|
<h5>January 2024</h5>
|
|
<p class="mB-0">Tickets Report</p>
|
|
</div>
|
|
<div class="peer">
|
|
<h3 class="text-end">17 Solved</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive p-20">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th class=" bdwT-0">Name</th>
|
|
<th class=" bdwT-0">Status</th>
|
|
<th class=" bdwT-0">Date</th>
|
|
<th class=" bdwT-0">Department</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-600">Ticket #01</td>
|
|
<td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Closed</span> </td>
|
|
<td>Jan 18</td>
|
|
<td><span class="">Sales</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-600">Ticket #02</td>
|
|
<td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c rounded-pill">Open</span></td>
|
|
<td>Jan 19</td>
|
|
<td><span class="">Sales</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-600">Ticket #03</td>
|
|
<td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Closed</span></td>
|
|
<td>Jan 20</td>
|
|
<td><span class="">Sales</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-600">Ticket #04</td>
|
|
<td><span class="badge bgc-blue-50 c-blue-700 p-10 lh-0 tt-c rounded-pill">Pending</span></td>
|
|
<td>Jan 21</td>
|
|
<td><span class="">Sales</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-600">Ticket #05</td>
|
|
<td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c rounded-pill">Open</span></td>
|
|
<td>Jan 22</td>
|
|
<td><span class="">Sales</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-600">Ticket #06</td>
|
|
<td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c rounded-pill">Open</span> </td>
|
|
<td>Jan 23</td>
|
|
<td><span class="">Sales</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-600">Ticket #07</td>
|
|
<td><span class="badge bgc-blue-50 c-blue-700 p-10 lh-0 tt-c rounded-pill">Pending</span></td>
|
|
<td>Jan 22</td>
|
|
<td><span class="">Sales</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ta-c bdT w-100 p-20">
|
|
<a href="#">Check all the tickets</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">Bar Chart</h6>
|
|
<div class="mT-30">
|
|
<canvas id="bar-chart" height="220"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% endblock content %}
|
|
|
|
<!-- Specific Page JS goes HERE -->
|
|
{% block javascripts %}{% endblock javascripts %}
|