<div class="page page-invoices"> <!-- page header --> <div class="pageheader"> <h2>{{page.title}} <span>// {{page.subtitle}}</span></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 href="javascript:;">Shop</a> </li> <li> <a ui-sref="app.shop.invoices">{{page.title}}</a> </li> </ul> </div> </div> <!-- /page header --> <!-- page content --> <div class="pagecontent"> <!-- row --> <div class="row"> <!-- col --> <div class="col-md-12"> <div class="alert alert-danger"> <strong>Note!</strong> This table have only demo purpose. Data are not loaded from database but from dummy json. </div> <!-- tile --> <section class="tile" fullscreen="isFullscreen01"> <!-- tile header --> <div class="tile-header dvd dvd-btm"> <h1 class="custom-font"><strong>Invoices</strong> List</h1> <ul class="controls"> <li><a href="javascipt:;"><i class="fa fa-plus mr-5"></i> New Invoice</a></li> <li class="dropdown" uib-dropdown on-toggle="toggled(open)"> <a href class="dropdown-toggle" uib-dropdown-toggle>Tools <i class="fa fa-angle-down ml-5"></i></a> <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp"> <li> <a href>Export to XLS</a> </li> <li> <a href>Export to CSV</a> </li> <li> <a href>Export to XML</a> </li> <li role="presentation" class="divider"></li> <li> <a href>Print Invoices</a> </li> </ul> </li> <li class="dropdown" uib-dropdown on-toggle="toggled(open)"> <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a> <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp"> <li> <a href tile-control-toggle> <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span> <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span> </a> </li> <li> <a href tile-control-refresh ng-click="ajaxFaker()"> <fa name="refresh"></fa> Refresh </a> </li> <li> <a href tile-control-fullscreen ng-click="isFullscreen01 = !isFullscreen01"> <fa name="expand"></fa> Fullscreen </a> </li> </ul> </li> <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li> </ul> </div> <!-- /tile header --> <!-- tile body --> <div class="tile-body" ng-controller="InvoicesTableCtrl as showCase"> <div class="table-responsive-wide"> <table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="table table-striped table-hover table-custom" style="min-width: 1000px"> <thead> <tr> <th style="width:40px"> <label class="checkbox checkbox-custom checkbox-custom-sm m-0"> <input type="checkbox" ng-model="showCase.selectedAll" ng-click="showCase.selectAll()"><i></i> </label>  <th style="width:80px">Invoice ID <th style="width:120px">Created at <th style="width:180px">Customer <th style="width:80px">Status <th style="width:90px">Total <th style="width:150px">Actions   <tfoot> <tr> <th> <th>ID <th>Date <th>Customer <th>Status <th>Total <th>   <tbody> <tr ng-repeat="invoice in showCase.invoices"> <td><label class="checkbox checkbox-custom checkbox-custom-sm m-0"><input type="checkbox" ng-model="invoice.selected"><i></i></label> <td>{{ invoice.id }} <td>{{ invoice.date | date:'mediumDate'}} <td>{{ invoice.invoicefor }} <td><span class="label" ng-class="{'bg-success' : invoice.status == 'paid','bg-warning' : invoice.status == 'unpaid','bg-lightred' : invoice.status == 'cancelled','bg-primary' : invoice.status == 'sent'}">{{ invoice.status }}</span> <td>{{ invoice.total | currency}} <td> <a ui-sref="app.shop.single-invoice" class="btn btn-xs btn-default"><i class="fa fa-search"></i> View</a> <a href="javascript:;" class="btn btn-xs btn-lightred"><i class="fa fa-times"></i> Delete</a>    </table> </div> </div> <!-- /tile body --> </section> <!-- /tile --> </div> <!-- /col --> </div> <!-- /row --> </div> <!-- /page content --> </div>