quay/static/directives/billing-invoices.html

<div class="billing-invoices-element">
  <div class="cor-loader" ng-show="loading"></div>

  <div ng-show="!loading && !invoices">
    No invoices have been created
  </div>

  <div ng-show="!loading && invoices">
    <table class="co-table">
      <thead>
        <td>Billing Date/Time</td>
        <td>Amount Due</td>
        <td>Status</td>
        <td class="options-col"></td>
      </thead>

      <tbody class="invoice" ng-repeat="invoice in invoices">
        <tr class="invoice-title">
          <td><span class="invoice-datetime">{{ invoice.date * 1000 | date:'medium' }}</span></td>
          <td><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 class="options-col">
            <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>
      </tbody>
    </table>
  </div>

</div>