Options Admin - Responsive Web Application Kit

1,789,235 Lifetime Sales


<a class="dashboard-stat bg-primary" href="#">
    <span class="number counter">1,789,235</span>
    <span class="name">Lifetime Sales</span>
    <span class="bg-icon"><i class="fa fa-usd"></i></span>
</a>
<!-- /.dashboard-stat -->

<!-- ========== JS ========== -->
<script>
    $(function(){
        $('.counter').counterUp();
    });
</script>

65,500 Total Orders


<a class="dashboard-stat bg-danger" href="#">
    <span class="number counter">65,500</span>
    <span class="name">Total Orders</span>
    <span class="bg-icon"><i class="fa fa-shopping-cart"></i></span>
</a>
<!-- /.dashboard-stat -->

<!-- ========== JS ========== -->
<script>
    $(function(){
        $('.counter').counterUp();
    });
</script>

13,500 Average Monthly Orders


<a class="dashboard-stat bg-warning" href="#">
    <span class="number counter">13,500</span>
    <span class="name">Average Monthly Orders</span>
    <span class="bg-icon"><i class="fa fa-area-chart"></i></span>
</a>
<!-- /.dashboard-stat -->

<!-- ========== JS ========== -->
<script>
    $(function(){
        $('.counter').counterUp();
    });
</script>

450 Daily Orders


<a class="dashboard-stat bg-success" href="#">
    <span class="number counter">450</span>
    <span class="name">Daily Orders</span>
    <span class="bg-icon"><i class="fa fa-thumbs-o-up"></i></span>
</a>
<!-- /.dashboard-stat -->

<!-- ========== JS ========== -->
<script>
    $(function(){
        $('.counter').counterUp();
    });
</script>

Online Revenue Chart


<!-- ========== HTML ========== -->
<div id="chart2" class="op-chart"></div>

<!-- ========== JS ========== -->
<script>
    $(function($) {
        // chart2
        var chart2 = AmCharts.makeChart( "chart2", {
          "type": "serial",
          "theme": "light",
          "fontFamily": "Poppins",
          "dataProvider": [ {
            "revenue": "500012",
            "year": 2001
          },{
            "revenue": "623012",
            "year": 2002
          },{
            "revenue": "756895",
            "year": 2003
          },{
            "revenue": "846658",
            "year": 2004
          },{
            "revenue": "954284",
            "year": 2005
          },{
            "revenue": "1024364",
            "year": 2006
          }, {
            "revenue": "1125975",
            "year": 2007
          }, {
            "revenue": "1236364",
            "year": 2008
          }, {
            "revenue": "1352024",
            "year": 2009
          }, {
            "revenue": "1458256",
            "year": 2010
          }, {
            "revenue": "1568964",
            "year": 2011
          }, {
            "revenue": "1592035",
            "year": 2012
          }, {
            "revenue": "1794678",
            "year": 2013
          }, {
            "revenue": "1865598",
            "year": 2014
          }, {
            "revenue": "1962587",
            "year": 2015
          }, {
            "revenue": "2225468",
            "year": 2016
          }, {
            "revenue": "2557487",
            "year": 2017
          } ],
          "valueAxes": [ {
            "gridColor": "#FFFFFF",
            "gridAlpha": 0.2,
            "dashLength": 0,
            "title": "Generated Revenue, USD"
          } ],
          "gridAboveGraphs": true,
          "startDuration": 1,
          "graphs": [ {
            "balloonText": "[[category]]: [[value]]",
            "fillAlphas": 0.8,
            "lineAlpha": 0.2,
            "type": "column",
            "valueField": "revenue"
          } ],
          "chartCursor": {
            "categoryBalloonEnabled": false,
            "cursorAlpha": 0,
            "zoomable": false
          },
          "categoryField": "year",
          "categoryAxis": {
            "gridPosition": "start",
            "gridAlpha": 0,
            "tickPosition": "start",
            "tickLength": 20,
            "title": "Years"
          },
          "export": {
            "enabled": true
          }
        } );
    });
</script>

List Of Order

Order #	Purchased On	Purchased Price	Customer	Username	Email	Status
1	12/02/2016	650.40$	Otto	@mdo	mark@gmail.com	Pending
2	22/02/2016	870.40$	Thornton	@fat	jacob@gmail.com	Delivered
3	15/02/2016	250.40$	the Bird	@twitter	larry@gmail.com	On Hold
4	17/02/2016	230.40$	Bird	@twitter	larry@gmail.com	On Hold
5	22/02/2016	870.40$	Thornton	@fat	jacob@gmail.com	Delivered
6	12/02/2016	650.40$	Otto	@mdo	mark@gmail.com	Pending
7	19/02/2016	290.40$	the Bird	@twitter	larry@gmail.com	Not Delivered


<table class="table table-striped">
    <caption>Optional table caption.</caption>
    <thead>
        <tr>
            <th>Order #</th>
            <th>Purchased On</th>
            <th>Purchased Price</th>
            <th>Customer</th>
            <th>Username</th>
            <th>Email</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>12/02/2016</td>
            <td>650.40$</td>
            <td>Otto</td>
            <td>@mdo</td>
            <td>mark@gmail.com</td>
            <td>
                <span class="label label-info label-wide">Pending</span>
            </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>

John Doe

Ecommerce Dashboard

Online Revenue Chart

List Of Order

Useful Sidebar