first commit
This commit is contained in:
Blake Ridgway
144
internal/web/templates/dashboard.html
Normal file
144
internal/web/templates/dashboard.html
Normal file
@@ -0,0 +1,144 @@
|
||||
{{template "base" .}}
|
||||
|
||||
{{define "title"}}Dashboard — Arcline IT Client Portal{{end}}
|
||||
|
||||
{{define "nav-actions"}}
|
||||
<form method="POST" action="/logout" style="display:inline;">
|
||||
<button class="btn btn--ghost btn--sm" type="submit">logout</button>
|
||||
</form>
|
||||
{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<div class="dashboard">
|
||||
<div class="container">
|
||||
|
||||
{{if .Flash}}
|
||||
<div class="alert alert--ok flash">{{.Flash}}</div>
|
||||
{{end}}
|
||||
|
||||
<div class="dash-header">
|
||||
<h1 class="dash-header__title">
|
||||
Welcome back, <span class="dash-header__name">{{.Customer.FirstName}}</span><span class="cursor"></span>
|
||||
</h1>
|
||||
<p class="dash-header__email">{{.Customer.Email}}</p>
|
||||
</div>
|
||||
|
||||
<!-- Subscription panel -->
|
||||
<section class="dash-section">
|
||||
<h2 class="dash-section__title">// subscription</h2>
|
||||
|
||||
{{if .Subscription}}
|
||||
<div class="term-window">
|
||||
<div class="term-window__chrome">
|
||||
<span class="term-window__dot term-window__dot--red"></span>
|
||||
<span class="term-window__dot term-window__dot--yellow"></span>
|
||||
<span class="term-window__dot term-window__dot--green"></span>
|
||||
<span class="term-window__title">subscription.status</span>
|
||||
</div>
|
||||
<div class="term-window__body">
|
||||
<div class="status-row">
|
||||
<span class="status-row__label">plan</span>
|
||||
<span class="status-row__dots"></span>
|
||||
<span class="status-row__value">{{if .Subscription.PlanName}}{{.Subscription.PlanName}}{{else}}active plan{{end}}</span>
|
||||
</div>
|
||||
<div class="status-row">
|
||||
<span class="status-row__label">status</span>
|
||||
<span class="status-row__dots"></span>
|
||||
<span class="status-badge status-badge--{{.Subscription.Status}}">{{.Subscription.Status}}</span>
|
||||
</div>
|
||||
{{if .Subscription.CurrentPeriodEnd}}
|
||||
<div class="status-row">
|
||||
<span class="status-row__label">next billing date</span>
|
||||
<span class="status-row__dots"></span>
|
||||
<span class="status-row__value">{{.Subscription.CurrentPeriodEnd}}</span>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if eq .Subscription.Status "active"}}
|
||||
<div class="dash-actions">
|
||||
<form method="POST" action="/cancel"
|
||||
onsubmit="return confirm('Are you sure you want to cancel your subscription? This cannot be undone.')">
|
||||
<button class="btn btn--danger btn--sm" type="submit">cancel subscription</button>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{else}}
|
||||
<div class="term-window">
|
||||
<div class="term-window__chrome">
|
||||
<span class="term-window__dot term-window__dot--red"></span>
|
||||
<span class="term-window__dot term-window__dot--yellow"></span>
|
||||
<span class="term-window__dot term-window__dot--green"></span>
|
||||
<span class="term-window__title">subscription.status</span>
|
||||
</div>
|
||||
<div class="term-window__body">
|
||||
<p class="dash-empty">No active subscription.</p>
|
||||
<p class="dash-empty-sub">
|
||||
<a href="https://arclineit.com/pricing" class="link">View plans</a> to get started.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</section>
|
||||
|
||||
<!-- Invoices panel -->
|
||||
<section class="dash-section">
|
||||
<h2 class="dash-section__title">// recent invoices</h2>
|
||||
|
||||
{{if .Invoices}}
|
||||
<div class="term-window">
|
||||
<div class="term-window__chrome">
|
||||
<span class="term-window__dot term-window__dot--red"></span>
|
||||
<span class="term-window__dot term-window__dot--yellow"></span>
|
||||
<span class="term-window__dot term-window__dot--green"></span>
|
||||
<span class="term-window__title">invoices</span>
|
||||
</div>
|
||||
<div class="term-window__body">
|
||||
<table class="inv-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="inv-table__th">date</th>
|
||||
<th class="inv-table__th">period</th>
|
||||
<th class="inv-table__th inv-table__th--right">amount</th>
|
||||
<th class="inv-table__th">status</th>
|
||||
<th class="inv-table__th">pdf</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .Invoices}}
|
||||
<tr class="inv-table__row">
|
||||
<td class="inv-table__td inv-table__td--muted">{{.CreatedAt | slice 0 10}}</td>
|
||||
<td class="inv-table__td inv-table__td--muted">{{.PeriodStart | slice 0 10}} – {{.PeriodEnd | slice 0 10}}</td>
|
||||
<td class="inv-table__td inv-table__td--right">{{.AmountDisplay}}</td>
|
||||
<td class="inv-table__td"><span class="status-badge status-badge--{{.Status}}">{{.Status}}</span></td>
|
||||
<td class="inv-table__td">
|
||||
{{if .InvoicePDFURL}}
|
||||
<a href="{{.InvoicePDFURL}}" class="link link--sm" target="_blank" rel="noopener">download</a>
|
||||
{{else}}—{{end}}
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="term-window">
|
||||
<div class="term-window__chrome">
|
||||
<span class="term-window__dot term-window__dot--red"></span>
|
||||
<span class="term-window__dot term-window__dot--yellow"></span>
|
||||
<span class="term-window__dot term-window__dot--green"></span>
|
||||
<span class="term-window__title">invoices</span>
|
||||
</div>
|
||||
<div class="term-window__body">
|
||||
<p class="dash-empty">No invoices yet.</p>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user