Dashboard
One stop solution for perfect admin dashboard!
1,411
Comments
<a class="dashboard-stat bg-primary" href="#">
<span class="number counter">1,411</span>
<span class="name">Comments</span>
<span class="bg-icon"><i class="fa fa-comments"></i></span>
</a>
<!-- /.dashboard-stat -->
<!-- ========== JS ========== -->
<script>
$(function(){
$('.counter').counterUp();
});
</script>
322
Total Tickets
<a class="dashboard-stat bg-danger" href="#">
<span class="number counter">322</span>
<span class="name">Total Tickets</span>
<span class="bg-icon"><i class="fa fa-ticket"></i></span>
</a>
<!-- /.dashboard-stat -->
<!-- ========== JS ========== -->
<script>
$(function(){
$('.counter').counterUp();
});
</script>
5,551
Bank Credits
<a class="dashboard-stat bg-warning" href="#">
<span class="number counter">5,551</span>
<span class="name">Bank Credits</span>
<span class="bg-icon"><i class="fa fa-bank"></i></span>
</a>
<!-- /.dashboard-stat -->
<!-- ========== JS ========== -->
<script>
$(function(){
$('.counter').counterUp();
});
</script>
16,710
Thumbs Up
<a class="dashboard-stat bg-success" href="#">
<span class="number counter">16,710</span>
<span class="name">Thumbs Up</span>
<span class="bg-icon"><i class="fa fa-thumbs-o-up"></i></span>
</a>
<!-- /.dashboard-stat -->
<!-- ========== JS ========== -->
<script>
$(function(){
$('.counter').counterUp();
});
</script>
Production Change over years
<div id="production-chart" class="op-chart"></div>
<!-- ========== JS ========== -->
<script src="js/production-chart.js"></script>
Traffic Stats over years
<div id="traffic-chart" class="op-chart"></div>
<!-- ========== JS ========== -->
<script src="js/traffic-chart.js"></script>
User Table Details
![]() |
Alepy Macintyre Lorem Ipsum is simply dummy text of the printing and typesetting industry. Approved |
10.10pm |
![]() |
Alepy Macintyre Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum Approved |
12.15am |
![]() |
Alepy Macintyre Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum Pending |
09:58am |
![]() |
Celpy Macintyre Lorem Ipsum is simply dummy text of the printing and typesetting industry. Pending |
8:16pm |
<div class="panel-body p-20">
<!-- Nav tabs -->
<ul class="nav nav-tabs border-bottom border-primary" role="tablist">
<li role="presentation" class="active"><a class="" href="#home7" aria-controls="home7" role="tab" data-toggle="tab">Approved</a></li>
<li role="presentation"><a class="" href="#profile7" aria-controls="profile7" role="tab" data-toggle="tab">Pending</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content bg-white p-15">
<div role="tabpanel" class="tab-pane active" id="home7">
<table class="table table-clean">
<tbody>
<tr>
<td class="line-height-60"><img src="images/letter/a.png" alt="" class="border-radius-50 img-size-50"></td>
<td class="line-height-30"><b>Alepy Macintyre</b> <br>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br><span class="color-success">Approved</span></td>
<td class="w-10">10.10pm</td>
</tr>
...
</tbody>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="profile7">
<table class="table table-clean">
<tbody>
<tr>
<td class="line-height-60"><img src="images/letter/a.png" alt="" class="border-radius-50 img-size-50"></td>
<td class="line-height-30"><b>Alepy Macintyre</b> <br>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br><span class="color-warning">Pending</span></td>
<td class="w-10">8:16pm</td>
</tr>
...
</tbody>
</table>
</div>
</div>
</div>
Tasks with priority indicator
Following is the list of all the pending tasks. Click on task to mark it done. You can toggle the status by clicking on an item.
<div class="tasks-list col-md-8 col-md-offset-2">
<div class="task mb-10">
<input type="checkbox" name="one" class="line-style-blue">
<label>This is medium priority task. It is indicated in primary color.</label>
</div>
<!-- /.task -->
<div class="task mb-10">
<input type="checkbox" name="one" class="line-style-red">
<label>This is top priority task. It is indicated in danger color.</label>
</div>
<!-- /.task -->
<div class="task mb-10">
<input type="checkbox" name="one" class="line-style-green">
<label>This is low priority task. It is indicated in success color. </label>
</div>
<!-- /.task -->
<div class="task mb-10">
<input type="checkbox" name="one" class="line-style-blue" checked="">
<label>This is medium priority task. It is indicated in primary color.</label>
</div>
<!-- /.task -->
</div>
<!-- /.tasks-list -->
<!-- ========== JS ========== -->
<script src="js/task-list.js"></script>