53 lines
2 KiB
HTML
53 lines
2 KiB
HTML
<div class="billing-invoices-element">
|
|
<div ng-show="loading">
|
|
<div class="quay-spinner"></div>
|
|
</div>
|
|
|
|
<div ng-show="!loading && !invoices">
|
|
No invoices have been created
|
|
</div>
|
|
|
|
<div ng-show="!loading && invoices">
|
|
<table class="table">
|
|
<thead>
|
|
<th>Billing Date/Time</th>
|
|
<th>Amount Due</th>
|
|
<th>Status</th>
|
|
<th></th>
|
|
</thead>
|
|
|
|
<tbody class="invoice" ng-repeat="invoice in invoices">
|
|
<tr class="invoice-title">
|
|
<td ng-click="toggleInvoice(invoice.id)"><span class="invoice-datetime">{{ invoice.date * 1000 | date:'medium' }}</span></td>
|
|
<td ng-click="toggleInvoice(invoice.id)"><span class="invoice-amount">{{ invoice.amount_due / 100 }}</span></td>
|
|
<td>
|
|
<span class="invoice-status">
|
|
<span class="success" ng-show="invoice.paid">Paid - Thank you!</span>
|
|
<span class="danger" ng-show="!invoice.paid && invoice.attempted && invoice.closed">Payment failed</span>
|
|
<span class="danger" ng-show="!invoice.paid && invoice.attempted && !invoice.closed">Payment failed - Will retry soon</span>
|
|
<span class="pending" ng-show="!invoice.paid && !invoice.attempted">Payment pending</span>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<a ng-show="invoice.paid" href="/receipt?id={{ invoice.id }}" download="receipt.pdf" target="_new">
|
|
<i class="fa fa-download" data-title="Download Receipt" bs-tooltip="tooltip.title"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr ng-class="invoiceExpanded[invoice.id] ? 'in' : 'out'" class="invoice-details panel-collapse collapse">
|
|
<td colspan="3">
|
|
<dl class="dl-normal">
|
|
<dt>Billing Period</dt>
|
|
<dd>
|
|
<span>{{ invoice.period_start * 1000 | date:'mediumDate' }}</span> -
|
|
<span>{{ invoice.period_end * 1000 | date:'mediumDate' }}</span>
|
|
</dd>
|
|
</dl>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|