122 lines
4.9 KiB
HTML
122 lines
4.9 KiB
HTML
<div class="loading" ng-show="loading">
|
|
<i class="fa fa-spinner fa-spin fa-3x"></i>
|
|
</div>
|
|
|
|
<div class="loading" ng-show="!loading && !organization">
|
|
No matching organization found
|
|
</div>
|
|
|
|
<div class="org-admin container" ng-show="!loading && organization">
|
|
<div class="organization-header" organization="organization"></div>
|
|
|
|
<div class="row">
|
|
<!-- Side tabs -->
|
|
<div class="col-md-2">
|
|
<ul class="nav nav-pills nav-stacked">
|
|
<li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#plan">Plan and Usage</a></li>
|
|
<li><a href="javascript:void(0)" data-toggle="tab" data-target="#members" ng-click="loadMembers()">Members</a></li>
|
|
<li><a href="javascript:void(0)" data-toggle="tab" data-target="#billing" ng-click="loadInvoices()">Billing</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="col-md-10">
|
|
<div class="tab-content">
|
|
<!-- Plans tab -->
|
|
<div id="plan" class="tab-pane active">
|
|
<div class="plan-manager" organization="orgname"></div>
|
|
</div>
|
|
|
|
<!-- Billing tab -->
|
|
<div id="billing" class="tab-pane">
|
|
<div class="billing-options" organization="organization"></div>
|
|
|
|
<div ng-show="invoiceLoading">
|
|
Loading billing history: <i class="fa fa-spinner fa-spin fa-2x" style="vertical-align: middle; margin-left: 4px"></i>
|
|
</div>
|
|
|
|
<div ng-show="!invoiceLoading && !invoices">
|
|
No invoices have been created
|
|
</div>
|
|
|
|
<div ng-show="!invoiceLoading && invoices">
|
|
<table class="table">
|
|
<thead>
|
|
<th>Billing Date/Time</th>
|
|
<th>Amount Due</th>
|
|
<th>Status</th>
|
|
</thead>
|
|
|
|
<tbody class="invoice" ng-repeat="invoice in invoices">
|
|
<tr class="invoice-title" ng-click="toggleInvoice(invoice.id)">
|
|
<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>
|
|
</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>
|
|
<dt>Plan</dt>
|
|
<dd>
|
|
<span>{{ plan_map[invoice.plan].title }}</span>
|
|
</dd>
|
|
</dl>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Members tab -->
|
|
<div id="members" class="tab-pane">
|
|
<i class="fa fa-spinner fa-spin fa-3x" ng-show="membersLoading"></i>
|
|
|
|
<div ng-show="!membersLoading">
|
|
<div class="side-controls">
|
|
<div class="result-count">
|
|
Showing {{(membersFound | filter:search | limitTo:50).length}} of {{(membersFound | filter:search).length}} matching members
|
|
</div>
|
|
<div class="filter-input">
|
|
<input id="member-filter" class="form-control" placeholder="Filter Members" type="text" ng-model="search.$">
|
|
</div>
|
|
</div>
|
|
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<th>User</th>
|
|
<th>Teams</th>
|
|
</thead>
|
|
|
|
<tr ng-repeat="memberInfo in (membersFound | filter:search | limitTo:50)">
|
|
<td>
|
|
<i class="fa fa-user"></i>
|
|
{{ memberInfo.username }}
|
|
</td>
|
|
<td>
|
|
<span class="team-link" ng-repeat="team in memberInfo.teams">
|
|
<i class="fa fa-group"></i>
|
|
<a href="/organization/{{ organization.name }}/teams/{{ team }}">{{ team }}</a>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|