You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
3.7 KiB
110 lines
3.7 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Client Dashboard - OutsideTheBox</title> |
|
<link rel="stylesheet" href="/static/css/style.css"> |
|
<link rel="icon" type="image/png" href="/static/favicon.png"> |
|
</head> |
|
<body> |
|
{% include "includes/site_nav.html" %} |
|
|
|
<div class="portal-shell"> |
|
<div class="portal-wrap"> |
|
<div class="portal-page-header"> |
|
<div> |
|
<h1 class="portal-page-title">Client Dashboard</h1> |
|
<p class="portal-client-name">{{ client.company_name or client.contact_name or client.email }}</p> |
|
<p class="portal-page-subtitle">Invoices, balances, and account activity in one place.</p> |
|
</div> |
|
|
|
<div class="portal-toolbar"> |
|
<a class="portal-btn primary" href="/portal/invoices/download-all">Download All Invoices</a> |
|
<a class="portal-btn" href="mailto:support@outsidethebox.top?subject=Customer%20Support">Customer Support</a> |
|
<a class="portal-btn" href="/portal/logout">Logout</a> |
|
</div> |
|
</div> |
|
|
|
<div class="summary-grid"> |
|
<div class="summary-card"> |
|
<h3>Total Invoices</h3> |
|
<div class="summary-value">{{ invoice_count }}</div> |
|
<div class="summary-sub">Invoices currently visible in your portal</div> |
|
</div> |
|
|
|
<div class="summary-card"> |
|
<h3>Total Outstanding</h3> |
|
<div class="summary-value">{{ total_outstanding }}</div> |
|
<div class="summary-sub">Current unpaid balance</div> |
|
</div> |
|
|
|
<div class="summary-card"> |
|
<h3>Total Paid</h3> |
|
<div class="summary-value">{{ total_paid }}</div> |
|
<div class="summary-sub">Payments already applied</div> |
|
</div> |
|
</div> |
|
|
|
<h2 class="section-title">Invoices</h2> |
|
|
|
<div class="table-card"> |
|
<table class="portal-table"> |
|
<thead> |
|
<tr> |
|
<th>Invoice</th> |
|
<th>Status</th> |
|
<th>Created</th> |
|
<th>Total</th> |
|
<th>Paid</th> |
|
<th>Outstanding</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
{% for row in invoices %} |
|
<tr> |
|
<td> |
|
<a class="invoice-link" href="/portal/invoice/{{ row.id }}"> |
|
{{ row.invoice_number or ("INV-" ~ row.id) }} |
|
</a> |
|
</td> |
|
<td> |
|
{% set s = (row.status or "")|lower %} |
|
{% if s == "paid" %} |
|
<span class="status-badge status-paid">{{ row.status }}</span> |
|
{% if row.payment_method_label %} |
|
<div class="summary-sub" style="margin-top:6px;">via {{ row.payment_method_label }}</div> |
|
{% endif %} |
|
{% elif s == "pending" %} |
|
<span class="status-badge status-pending">{{ row.status }}</span> |
|
{% elif s == "overdue" %} |
|
<span class="status-badge status-overdue">{{ row.status }}</span> |
|
{% else %} |
|
<span class="status-badge status-other">{{ row.status }}</span> |
|
{% endif %} |
|
</td> |
|
<td>{{ row.created_at }}</td> |
|
<td>{{ row.total_amount }}</td> |
|
<td>{{ row.amount_paid }}</td> |
|
<td>{{ row.outstanding }}</td> |
|
</tr> |
|
{% else %} |
|
<tr> |
|
<td colspan="6">No invoices available.</td> |
|
</tr> |
|
{% endfor %} |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
(function() { |
|
setTimeout(function() { window.location.reload(); }, 20000); |
|
})(); |
|
</script> |
|
|
|
{% include "footer.html" %} |
|
</body> |
|
</html>
|
|
|