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.
235 lines
7.0 KiB
235 lines
7.0 KiB
<!doctype html> |
|
<html> |
|
<head> |
|
<title>Invoice {{ invoice.invoice_number }}</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
margin: 30px; |
|
color: #111; |
|
} |
|
.top-links { |
|
margin-bottom: 20px; |
|
} |
|
.top-links a { |
|
margin-right: 15px; |
|
} |
|
.invoice-wrap { |
|
max-width: 900px; |
|
} |
|
.header-row { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: flex-start; |
|
margin-bottom: 25px; |
|
} |
|
.title-box h1 { |
|
margin: 0 0 8px 0; |
|
} |
|
.status-badge { |
|
display: inline-block; |
|
padding: 4px 10px; |
|
border-radius: 999px; |
|
font-size: 12px; |
|
font-weight: bold; |
|
text-transform: uppercase; |
|
} |
|
.status-draft { background: #e5e7eb; color: #111827; } |
|
.status-pending { background: #dbeafe; color: #1d4ed8; } |
|
.status-partial { background: #fef3c7; color: #92400e; } |
|
.status-paid { background: #dcfce7; color: #166534; } |
|
.status-overdue { background: #fee2e2; color: #991b1b; } |
|
.status-cancelled { background: #e5e7eb; color: #4b5563; } |
|
|
|
.info-grid { |
|
display: grid; |
|
grid-template-columns: 1fr 1fr; |
|
gap: 30px; |
|
margin-bottom: 25px; |
|
} |
|
.info-card { |
|
border: 1px solid #ccc; |
|
padding: 15px; |
|
} |
|
.info-card h3 { |
|
margin-top: 0; |
|
} |
|
.summary-table, |
|
.total-table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
margin-bottom: 25px; |
|
} |
|
.summary-table th, |
|
.summary-table td, |
|
.total-table th, |
|
.total-table td { |
|
border: 1px solid #ccc; |
|
padding: 10px; |
|
text-align: left; |
|
} |
|
.total-table { |
|
max-width: 420px; |
|
margin-left: auto; |
|
} |
|
.notes-box { |
|
border: 1px solid #ccc; |
|
padding: 15px; |
|
white-space: pre-wrap; |
|
margin-top: 20px; |
|
} |
|
.print-only { |
|
display: none; |
|
} |
|
@media print { |
|
.top-links, |
|
.screen-only, |
|
footer { |
|
display: none !important; |
|
} |
|
.print-only { |
|
display: block; |
|
} |
|
body { |
|
margin: 0; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div class="invoice-wrap"> |
|
{% if request.args.get('email_sent') == '1' %} |
|
<div style="border:1px solid #166534;background:#dcfce7;padding:10px;margin-bottom:15px;"> |
|
Invoice email sent successfully. |
|
</div> |
|
{% endif %} |
|
{% if request.args.get('email_failed') == '1' %} |
|
<div style="border:1px solid #991b1b;background:#fee2e2;padding:10px;margin-bottom:15px;"> |
|
Invoice email failed. Check SMTP settings or server log. |
|
</div> |
|
{% endif %} |
|
<div class="top-links screen-only"> |
|
<a href="/">Home</a> |
|
<a href="/invoices">Back to Invoices</a> |
|
<a href="/invoices/edit/{{ invoice.id }}">Edit Invoice</a> |
|
<a href="#" onclick="window.print(); return false;">Print</a> |
|
<a href="/invoices/pdf/{{ invoice.id }}">PDF</a> |
|
{% if invoice.email %} |
|
<form method="post" action="/invoices/email/{{ invoice.id }}" style="display:inline;"> |
|
<button type="submit">Send Email</button> |
|
</form> |
|
{% endif %} |
|
</div> |
|
|
|
<div class="header-row"> |
|
|
|
{% if settings.business_logo_url %} |
|
<img src="{{ settings.business_logo_url }}" style="height:70px;margin-bottom:10px;"> |
|
{% endif %} |
|
|
|
<div class="title-box"> |
|
<h1>Invoice {{ invoice.invoice_number }}</h1> |
|
<span class="status-badge status-{{ invoice.status }}">{{ invoice.status }}</span> |
|
</div> |
|
<div style="text-align:right;"> |
|
<strong>{{ settings.business_name or 'OTB Billing' }}</strong><br> |
|
{{ settings.business_tagline or '' }}<br> |
|
{% if settings.business_address %}{{ settings.business_address }}<br>{% endif %} |
|
{% if settings.business_email %}{{ settings.business_email }}<br>{% endif %} |
|
{% if settings.business_phone %}{{ settings.business_phone }}<br>{% endif %} |
|
{% if settings.business_website %}{{ settings.business_website }}{% endif %} |
|
</div> |
|
</div> |
|
|
|
<div class="info-grid"> |
|
<div class="info-card"> |
|
<h3>Bill To</h3> |
|
<strong>{{ invoice.company_name }}</strong><br> |
|
{% if invoice.contact_name %}{{ invoice.contact_name }}<br>{% endif %} |
|
{% if invoice.email %}{{ invoice.email }}<br>{% endif %} |
|
{% if invoice.phone %}{{ invoice.phone }}<br>{% endif %} |
|
Client Code: {{ invoice.client_code }} |
|
</div> |
|
|
|
<div class="info-card"> |
|
<h3>Invoice Details</h3> |
|
Invoice #: {{ invoice.invoice_number }}<br> |
|
Issued: {{ invoice.issued_at|localtime }}<br> |
|
Due: {{ invoice.due_at|localtime }}<br> |
|
{% if invoice.paid_at %}Paid: {{ invoice.paid_at|localtime }}<br>{% endif %} |
|
Currency: {{ invoice.currency_code }}<br> |
|
{% if settings.tax_number %}{{ settings.tax_label or 'Tax' }} Number: {{ settings.tax_number }}<br>{% endif %} |
|
{% if settings.business_number %}Business Number: {{ settings.business_number }}{% endif %} |
|
</div> |
|
</div> |
|
|
|
<table class="summary-table"> |
|
<tr> |
|
<th>Service Code</th> |
|
<th>Service</th> |
|
<th>Description</th> |
|
<th>Total</th> |
|
</tr> |
|
<tr> |
|
<td>{{ invoice.service_code or '-' }}</td> |
|
<td>{{ invoice.service_name or '-' }}</td> |
|
<td>{{ invoice.notes or '-' }}</td> |
|
<td>{{ invoice.total_amount|money(invoice.currency_code) }} {{ invoice.currency_code }}</td> |
|
</tr> |
|
</table> |
|
|
|
<table class="total-table"> |
|
<tr> |
|
<th>Subtotal</th> |
|
<td>{{ invoice.subtotal_amount|money(invoice.currency_code) }} {{ invoice.currency_code }}</td> |
|
</tr> |
|
<tr> |
|
<th>{{ settings.tax_label or 'Tax' }}</th> |
|
<td>{{ invoice.tax_amount|money(invoice.currency_code) }} {{ invoice.currency_code }}</td> |
|
</tr> |
|
<tr> |
|
<th>Total</th> |
|
<td><strong>{{ invoice.total_amount|money(invoice.currency_code) }} {{ invoice.currency_code }}</strong></td> |
|
</tr> |
|
<tr> |
|
<th>Paid</th> |
|
<td>{{ invoice.amount_paid|money(invoice.currency_code) }} {{ invoice.currency_code }}</td> |
|
</tr> |
|
<tr> |
|
<th>Remaining</th> |
|
<td>{{ (invoice.total_amount - invoice.amount_paid)|money(invoice.currency_code) }} {{ invoice.currency_code }}</td> |
|
</tr> |
|
</table> |
|
|
|
{% if latest_email_log %} |
|
<div class="notes-box"> |
|
<strong>Latest Email Activity</strong><br><br> |
|
Status: {{ latest_email_log.status }}<br> |
|
Recipient: {{ latest_email_log.recipient_email }}<br> |
|
Subject: {{ latest_email_log.subject }}<br> |
|
Sent At: {{ latest_email_log.sent_at|localtime }}<br> |
|
{% if latest_email_log.error_message %} |
|
Error: {{ latest_email_log.error_message }} |
|
{% endif %} |
|
</div> |
|
{% endif %} |
|
|
|
{% if settings.payment_terms %} |
|
<div class="notes-box"> |
|
<strong>Payment Terms</strong><br><br> |
|
{{ settings.payment_terms }} |
|
</div> |
|
{% endif %} |
|
|
|
{% if settings.invoice_footer %} |
|
<div class="notes-box"> |
|
<strong>Footer</strong><br><br> |
|
{{ settings.invoice_footer }} |
|
</div> |
|
{% endif %} |
|
</div> |
|
|
|
{% include "footer.html" %} |
|
</body> |
|
</html>
|
|
|