Jun 28 - Update and polish UI/UX

app/templates/tenant_settings/plan.html

@@ -121,6 +121,67 @@
   </div>
 </div>
 
+{% if billing_enabled and invoices %}
+<div class="card border-0 shadow-sm mt-3">
+  <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
+    <span class="fw-semibold" style="font-size:.9rem;">Invoice History</span>
+    <a href="{{ url_for('billing.portal') }}" class="btn btn-xs btn-outline-secondary"
+       style="font-size:.75rem;padding:2px 10px;">
+      Manage in Stripe &rsaquo;
+    </a>
+  </div>
+  <div class="table-responsive">
+    <table class="table table-sm table-hover mb-0" style="font-size:.85rem;">
+      <thead class="table-light">
+        <tr>
+          <th>Invoice #</th>
+          <th>Date</th>
+          <th>Amount</th>
+          <th>Status</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for inv in invoices %}
+        <tr>
+          <td class="text-muted">{{ inv.number }}</td>
+          <td>{{ inv.date }}</td>
+          <td>{{ inv.amount }}</td>
+          <td>
+            {% if inv.status == 'paid' %}
+              <span class="badge bg-success-subtle text-success border border-success-subtle">Paid</span>
+            {% elif inv.status == 'open' %}
+              <span class="badge bg-warning-subtle text-warning border border-warning-subtle">Open</span>
+            {% elif inv.status == 'void' %}
+              <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Void</span>
+            {% elif inv.status == 'uncollectible' %}
+              <span class="badge bg-danger-subtle text-danger border border-danger-subtle">Uncollectible</span>
+            {% else %}
+              <span class="badge bg-light text-muted border">{{ inv.status }}</span>
+            {% endif %}
+          </td>
+          <td class="text-end">
+            {% if inv.pdf_url %}
+            <a href="{{ inv.pdf_url }}" target="_blank" class="btn btn-xs btn-outline-secondary me-1"
+               style="font-size:.75rem;padding:2px 8px;">
+              <i class="bi bi-file-pdf me-1"></i>PDF
+            </a>
+            {% endif %}
+            {% if inv.hosted_url %}
+            <a href="{{ inv.hosted_url }}" target="_blank" class="btn btn-xs btn-outline-primary"
+               style="font-size:.75rem;padding:2px 8px;">
+              View
+            </a>
+            {% endif %}
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>
+{% endif %}
+
 {% else %}
 <div class="alert alert-info">
   Plan information is only available when multi-tenancy is enabled.