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.
200 lines
6.4 KiB
200 lines
6.4 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Invoice Detail - OutsideTheBox</title> |
|
<link rel="stylesheet" href="/static/css/style.css"> |
|
<style> |
|
.portal-wrap { max-width: 1100px; margin: 2rem auto; padding: 1.25rem; } |
|
.portal-top { |
|
display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; |
|
margin-bottom: 1rem; |
|
} |
|
.portal-actions a { |
|
margin-left: 0.75rem; |
|
text-decoration: underline; |
|
} |
|
.detail-grid { |
|
display:grid; |
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
|
gap:1rem; |
|
margin: 1rem 0 1.25rem 0; |
|
} |
|
.detail-card { |
|
border: 1px solid rgba(255,255,255,0.16); |
|
border-radius: 14px; |
|
padding: 1rem; |
|
background: rgba(255,255,255,0.03); |
|
} |
|
.detail-card h3 { |
|
margin-top: 0; |
|
margin-bottom: 0.4rem; |
|
} |
|
table.portal-table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
margin-top: 1rem; |
|
} |
|
table.portal-table th, table.portal-table td { |
|
padding: 0.8rem; |
|
border-bottom: 1px solid rgba(255,255,255,0.12); |
|
text-align: left; |
|
} |
|
table.portal-table th { |
|
background: #e9eef7; |
|
color: #10203f; |
|
} |
|
.invoice-actions { |
|
margin-top: 1rem; |
|
} |
|
.invoice-actions a { |
|
margin-right: 1rem; |
|
text-decoration: underline; |
|
} |
|
.status-badge { |
|
display: inline-block; |
|
padding: 0.18rem 0.55rem; |
|
border-radius: 999px; |
|
font-size: 0.86rem; |
|
font-weight: 700; |
|
} |
|
.status-paid { |
|
background: rgba(34, 197, 94, 0.18); |
|
color: #4ade80; |
|
} |
|
.status-pending { |
|
background: rgba(245, 158, 11, 0.20); |
|
color: #fbbf24; |
|
} |
|
.status-overdue { |
|
background: rgba(239, 68, 68, 0.18); |
|
color: #f87171; |
|
} |
|
.status-other { |
|
background: rgba(148, 163, 184, 0.20); |
|
color: #cbd5e1; |
|
} |
|
</style> |
|
<link rel="icon" type="image/png" href="/static/favicon.png"> |
|
</head> |
|
<body> |
|
<div class="portal-wrap"> |
|
<div class="portal-top"> |
|
<div> |
|
<h1>Invoice Detail</h1> |
|
<p>{{ client.company_name or client.contact_name or client.email }}</p> |
|
</div> |
|
<div class="portal-actions"> |
|
<a href="/portal/dashboard">Back to Dashboard</a> |
|
<a href="https://outsidethebox.top/">Home</a> |
|
<a href="mailto:support@outsidethebox.top?subject=Portal%20Support">Contact Support</a> |
|
<a href="/portal/logout">Logout</a> |
|
</div> |
|
</div> |
|
|
|
|
|
{% if (invoice.status or "")|lower == "paid" %} |
|
<div style="background:#166534;color:#ecfdf5;padding:12px 14px;margin:0 0 20px 0;border-radius:8px;font-weight:600;border:1px solid rgba(255,255,255,0.12);"> |
|
✓ This invoice has been paid. Thank you! |
|
</div> |
|
{% endif %} |
|
|
|
<div class="detail-grid"> |
|
<div class="detail-card"> |
|
<h3>Invoice</h3> |
|
<div>{{ invoice.invoice_number or ("INV-" ~ invoice.id) }}</div> |
|
</div> |
|
<div class="detail-card"> |
|
<h3>Status</h3> |
|
{% set s = (invoice.status or "")|lower %} |
|
{% if s == "paid" %} |
|
<span class="status-badge status-paid">{{ invoice.status }}</span> |
|
{% elif s == "pending" %} |
|
<span class="status-badge status-pending">{{ invoice.status }}</span> |
|
{% elif s == "overdue" %} |
|
<span class="status-badge status-overdue">{{ invoice.status }}</span> |
|
{% else %} |
|
<span class="status-badge status-other">{{ invoice.status }}</span> |
|
{% endif %} |
|
</div> |
|
<div class="detail-card"> |
|
<h3>Created</h3> |
|
<div>{{ invoice.created_at }}</div> |
|
</div> |
|
<div class="detail-card"> |
|
<h3>Total</h3> |
|
<div>{{ invoice.total_amount }}</div> |
|
</div> |
|
<div class="detail-card"> |
|
<h3>Paid</h3> |
|
<div>{{ invoice.amount_paid }}</div> |
|
</div> |
|
<div class="detail-card"> |
|
<h3>Outstanding</h3> |
|
<div>{{ invoice.outstanding }}</div> |
|
</div> |
|
</div> |
|
|
|
<h2>Invoice Items</h2> |
|
<table class="portal-table"> |
|
<thead> |
|
<tr> |
|
<th>Description</th> |
|
<th>Qty</th> |
|
<th>Unit Price</th> |
|
<th>Line Total</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
{% for item in items %} |
|
<tr> |
|
<td>{{ item.description }}</td> |
|
<td>{{ item.quantity }}</td> |
|
<td>{{ item.unit_price }}</td> |
|
<td>{{ item.line_total }}</td> |
|
</tr> |
|
{% else %} |
|
<tr> |
|
<td colspan="4">No invoice line items found.</td> |
|
</tr> |
|
{% endfor %} |
|
</tbody> |
|
</table> |
|
|
|
|
|
{% if (invoice.status or "")|lower != "paid" %} |
|
<div class="detail-card" style="margin-top:1.25rem;"> |
|
<h3>Payment Instructions</h3> |
|
|
|
<p><strong>Interac e-Transfer</strong><br> |
|
Send payment to:<br> |
|
payment@outsidethebox.top<br> |
|
Reference: Invoice {{ invoice.invoice_number or ("INV-" ~ invoice.id) }} |
|
</p> |
|
|
|
<p><strong>Credit Card (Square)</strong><br> |
|
<a href="/portal/invoice/{{ invoice.id }}/pay-square" target="_blank" rel="noopener noreferrer" |
|
style="display:inline-block;padding:12px 18px;background:#16a34a;color:#ffffff;text-decoration:none;border-radius:8px;font-weight:700;margin:8px 0;"> |
|
Pay Now |
|
</a><br> |
|
Please include your invoice number in the payment note. |
|
</p> |
|
|
|
<p> |
|
If you have questions please contact |
|
<a href="mailto:support@outsidethebox.top?subject=Portal%20Support">support@outsidethebox.top</a> |
|
</p> |
|
</div> |
|
{% endif %} |
|
|
|
{% if pdf_url %} |
|
<div class="invoice-actions"> |
|
<a href="/portal/invoice/{{ invoice.id }}/pdf" target="_blank" rel="noopener noreferrer">Open Invoice PDF</a> |
|
</div> |
|
{% endif %} |
|
</div> |
|
|
|
{% include "footer.html" %} |
|
</body> |
|
</html>
|
|
|