<div class="page page-dashboard"> <div class="pageheader"> <h2>{{page.title}}</h2> <div class="page-bar"> <ul class="page-breadcrumb"> <li> <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a> </li> <li> <a ui-sref="app.dashboard">{{page.title}}</a> </li> </ul> </div> </div> <!-- cards row --> <div class="row"> <!-- col --> <div class="card-container col-lg-3 col-sm-6 col-sm-12"> <div class="card"> <div class="front bg-lightred"> <!-- row --> <div class="row"> <!-- col --> <div class="col-xs-4"> <i class="fa fa-gift fa-4x"></i> </div> <!-- /col --> <!-- col --> <div class="col-xs-8"> <p class="text-elg text-strong mb-0" count-to="{{products.length}}" value="0" duration="0.3"></p> <span> <ng-pluralize count="products.length" when="{'0': 'Products',
                       'one': 'Product',
                       'other': 'Products'}"> </ng-pluralize> </span> </div> <!-- /col --> </div> <!-- /row --> </div> <div class="back bg-lightred"> <!-- row --> <div class="row"> <!-- col --> <div class="col-xs-6"> <a href="javascript:;" ui-sref="app.products.list"><i class="fa fa-ellipsis-h fa-2x"></i> Manage Products</a> </div> <div class="col-xs-6"> <a href="javascript:;" ui-sref="app.products.new"><i class="fa fa-plus fa-2x"></i> Add Product</a> </div> <!-- /col --> </div> <!-- /row --> </div> </div> </div> <!-- /col --> <!-- col --> <div class="card-container col-lg-3 col-sm-6 col-sm-12"> <div class="card"> <div class="front bg-greensea"> <!-- row --> <div class="row"> <!-- col --> <div class="col-xs-4"> <i class="fa fa-shopping-cart fa-4x"></i> </div> <!-- /col --> <!-- col --> <div class="col-xs-8"> <p class="text-elg text-strong mb-0" count-to="{{orders.length}}" value="0" duration="0.3"></p> <span> <ng-pluralize count="orders.length" when="{'0': 'Orders',
                       'one': 'Order',
                       'other': 'Orders'}"> </ng-pluralize> </span> </div> <!-- /col --> </div> <!-- /row --> </div> <div class="back bg-greensea"> <!-- row --> <div class="row"> <!-- col --> <div class="col-xs-12"> <a href="javascript:;" ui-sref="app.orders.list"><i class="fa fa-ellipsis-h fa-2x"></i> Manage Orders</a> </div> <!-- /col --> </div> <!-- /row --> </div> </div> </div> <!-- /col --> <!-- col --> <div class="card-container col-lg-3 col-sm-6 col-sm-12"> <div class="card"> <div class="front bg-slategray"> <!-- row --> <div class="row"> <!-- col --> <div class="col-xs-4"> <i class="fa fa-users fa-4x"></i> </div> <!-- /col --> <!-- col --> <div class="col-xs-8"> <p class="text-elg text-strong mb-0" count-to="{{activeUsers.length}}" value="0" duration="0.3"></p> <span> <ng-pluralize count="activeUsers.length" when="{'0': 'Users',
                       'one': 'User',
                       'other': 'Users'}"> </ng-pluralize> </span> </div> <!-- /col --> </div> <!-- /row --> </div> <div class="back bg-slategray"> <!-- row --> <div class="row"> <!-- col --> <div class="col-xs-6"> <a href="javascript:;" ui-sref="app.users.list"><i class="fa fa-ellipsis-h fa-2x"></i> Manage Users</a> </div> <div class="col-xs-6"> <a href="javascript:;" ui-sref="app.users.new"><i class="fa fa-plus fa-2x"></i> Add User</a> </div> <!-- /col --> </div> <!-- /row --> </div> </div> </div> <!-- /col --> <!-- col --> <div class="card-container col-lg-3 col-sm-6 col-sm-12"> <div class="card"> <div class="front bg-blue"> <!-- row --> <div class="row"> <!-- col --> <div class="col-xs-4"> <i class="fa fa-usd fa-4x"></i> </div> <!-- /col --> <!-- col --> <div class="col-xs-8"> <p class="text-elg text-strong mb-0" count-to="{{ordersValue}}" value="0" duration="0.3"></p> <span>Orders value</span> </div> <!-- /col --> </div> <!-- /row --> </div> <div class="back bg-blue"> <!-- row --> <div class="row"> <!-- col --> <div class="col-xs-12"> <a href="javascript:;" ui-sref="app.orders.list"><i class="fa fa-ellipsis-h fa-2x"></i> Manage Orders</a> </div> <!-- /col --> </div> <!-- /row --> </div> </div> </div> <!-- /col --> </div> <!-- /row --> <div class="row"> <div class="col-md-8"> <!-- tile --> <section class="tile tile-simple tile-chart" ng-controller="OrdersChartCtrl"> <!-- tile header --> <div class="tile-header"> <h4>Orders Value</h4> <div class="controls"> <div uib-dropdown> <button type="button" class="btn btn-default btn-rounded-20" uib-dropdown-toggle> <span ng-show="range === '7d'">7 Days</span> <span ng-show="range === '31d'">31 Days</span> <i class="fa fa-chevron-down"></i> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="single-button"> <li role="menuitem"><a href="javascript:;" ng-click="range = '7d'">7 Days</a></li> <li role="menuitem"><a href="javascript:;" ng-click="range = '31d'">31 Days</a></li> </ul> </div> </div> </div> <!-- /tile header --> <!-- tile body --> <div class="tile-body"> <div class="row"> <div class="col-md-12"> <div class="chart-container"> <canvas barchart data="chart" options="options" responsive="true" maintain-aspect-ratio="true" height="350"></canvas> </div> </div> </div> </div> <!-- /tile body --> </section> <!-- /tile --> </div> <div class="col-md-4"> <!-- tile --> <section class="tile tile-simple tile-chart" ng-controller="ProductsChartCtrl"> <!-- tile header --> <div class="tile-header"> <h4>Product Categories</h4> </div> <!-- /tile header --> <!-- tile body --> <div class="tile-body"> <div class="row"> <div class="col-md-12"> <div class="chart-container"> <canvas piechart data="chart" options="options" height="350"></canvas> </div> </div> </div> </div> <!-- /tile body --> </section> <!-- /tile --> </div> </div> </div>