John Doe
PHP DeveloperDashboard
One stop solution for perfect admin dashboard!
1,411Comments
<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>
322Total 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,551Bank 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,710Thumbs 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> Table with actions
| # | First Name | Username | Action |
|---|---|---|---|
| 1 | Mark | @mdo | |
| 2 | Jacob | @cool | |
| 5 | Sachin | @the.god | |
| 3 | Larry | ||
| 4 | Salman | @bhai | |
| 6 | Mark | @faceb |
<table class="table table-striped table-bordered"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Username</th> <th>Action</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>@mdo</td> <td> <button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button> <button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button> </td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>@cool</td> <td> <button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button> <button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button> </td> </tr> <tr> <th scope="row">5</th> <td>Sachin</td> <td>@the.god</td> <td> <button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button> <button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button> </td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>@twitter</td> <td> <button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button> <button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button> </td> </tr> <tr> <th scope="row">4</th> <td>Salman</td> <td>@bhai</td> <td> <button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button> <button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button> </td> </tr> <tr> <th scope="row">6</th> <td>Mark</td> <td>@faceb</td> <td> <button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button> <button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button> </td> </tr> </tbody></table> 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>