billing/internal/web/templates/dashboard.html

{{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">{{if eq .Subscription.Status "cancelling"}}access until{{else}}next billing date{{end}}</span>
            <span class="status-row__dots"></span>
            <span class="status-row__value">{{.Subscription.CurrentPeriodEnd | fmtDate}}</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}}