204 lines
8.9 KiB
HTML
204 lines
8.9 KiB
HTML
<div class="container my-5">
|
|
<!-- Header Section (unchanged) -->
|
|
<div class="d-flex justify-content-between align-items-start mb-5">
|
|
{% if logo_url %}
|
|
<img src="{{ logo_url }}" alt="Company Logo" class="img-fluid" style="max-height: 80px; max-width: 200px;">
|
|
{% endif %}
|
|
<div class="text-end">
|
|
<div class="d-inline-block p-3 bg-light rounded-3">
|
|
<h1 class="h4 mb-1">
|
|
<span class="text-muted small">
|
|
{% if invoice.type == invoice.INVOICE_TYPES.INVOICE %}Invoice{% endif %}
|
|
{% if invoice.type == invoice.INVOICE_TYPES.PROFORMA %}Order Confirmation{% endif %}
|
|
{% if invoice.type == invoice.INVOICE_TYPES.DUPLICATE %}Invoice (Duplicate){% endif %}
|
|
</span>
|
|
<div id="full_number" class="fw-bold fs-3">{{ invoice.full_number }}</div>
|
|
</h1>
|
|
<div class="badge bg-{% if copy %}warning{% else %}primary{% endif %} bg-opacity-10 text-{% if copy %}warning{% else %}primary{% endif %} mb-2">
|
|
{{ copy|yesno:"COPY,ORIGINAL" }}
|
|
</div>
|
|
<div class="d-flex flex-column text-start">
|
|
<div class="mb-1"><span class="text-muted">Issued:</span> <strong>{{ invoice.issued|date:"F j, Y" }}</strong></div>
|
|
{% if invoice.type != invoice.INVOICE_TYPES.PROFORMA %}
|
|
<div><span class="text-muted">Order Date:</span> <strong>{{ invoice.selling_date|date:"F j, Y" }}</strong></div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Company Information (unchanged) -->
|
|
<div class="row mb-5 g-4">
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 fw-semibold">Seller</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<address class="mb-0">
|
|
<strong>{{ invoice.issuer_name }}</strong><br>
|
|
{{ invoice.issuer_street }}<br>
|
|
{{ invoice.issuer_zipcode }} {{ invoice.issuer_city }}<br>
|
|
{{ invoice.issuer_country.name }}<br>
|
|
<span class="text-muted">VAT ID:</span> {{ invoice.issuer_tax_number }}
|
|
</address>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 fw-semibold">Buyer</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<address class="mb-0">
|
|
<strong>{{ invoice.buyer_name }}</strong><br>
|
|
{{ invoice.buyer_street }}<br>
|
|
{{ invoice.buyer_zipcode }} {{ invoice.buyer_city }}<br>
|
|
{{ invoice.buyer_country.name }}<br>
|
|
{% if invoice.buyer_tax_number %}
|
|
<span class="text-muted">VAT ID:</span> {{ invoice.buyer_tax_number }}
|
|
{% endif %}
|
|
</address>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shipping Address (unchanged) -->
|
|
{% if invoice.shipping_name %}
|
|
<div class="card border-0 shadow-sm mb-5">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 fw-semibold">Shipping Address</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<address class="mb-0">
|
|
<strong>{{ invoice.shipping_name }}</strong><br>
|
|
{{ invoice.shipping_street }}<br>
|
|
{{ invoice.shipping_zipcode }} {{ invoice.shipping_city }}<br>
|
|
{{ invoice.buyer_country.name }}
|
|
</address>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Items Table - Now with horizontal scrolling -->
|
|
<div class="card border-0 shadow-sm mb-5">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 fw-semibold">Invoice Items</h5>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive" style="overflow-x: auto;">
|
|
<div style="min-width: 800px;"> <!-- Minimum width to ensure scrolling on smaller screens -->
|
|
<table class="table table-hover mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="text-center sticky-col" style="width: 5%; left: 0; background-color: #f8f9fa; z-index: 1;">#</th>
|
|
<th style="width: 25%; min-width: 200px;">Description</th>
|
|
<th class="text-end" style="width: 10%; min-width: 100px;">Unit Price</th>
|
|
<th class="text-center" style="width: 8%; min-width: 80px;">Qty.</th>
|
|
<th class="text-center" style="width: 8%; min-width: 80px;">Unit</th>
|
|
{% if invoice.rebate %}
|
|
<th class="text-center" style="width: 8%; min-width: 80px;">Rebate</th>
|
|
{% endif %}
|
|
<th class="text-end" style="width: 10%; min-width: 100px;">Subtotal</th>
|
|
<th class="text-center" style="width: 8%; min-width: 80px;">VAT</th>
|
|
<th class="text-end" style="width: 10%; min-width: 100px;">VAT Amount</th>
|
|
<th class="text-end" style="width: 10%; min-width: 100px;">Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-center sticky-col" style="left: 0; background-color: white; z-index: 1;">1</td>
|
|
<td>{{ invoice.item_description }}</td>
|
|
<td class="text-end">{{ invoice.unit_price_net|floatformat:2 }} {{ invoice.currency }}</td>
|
|
<td class="text-center">{{ invoice.quantity }}</td>
|
|
<td class="text-center">units</td>
|
|
{% if invoice.rebate %}
|
|
<td class="text-center">{{ invoice.rebate|floatformat:2 }}%</td>
|
|
{% endif %}
|
|
<td class="text-end">{{ invoice.total_net|floatformat:2 }} {{ invoice.currency }}</td>
|
|
<td class="text-center">{% if invoice.tax != None %}{{ invoice.tax|floatformat:2 }}%{% else %}n/a{% endif %}</td>
|
|
<td class="text-end">{% if invoice.tax_total != None %}{{ invoice.tax_total|floatformat:2 }} {{ invoice.currency }}{% else %}n/a{% endif %}</td>
|
|
<td class="text-end fw-bold">{{ invoice.total|floatformat:2 }} {{ invoice.currency }}</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot class="table-light">
|
|
<tr>
|
|
<td colspan="{% if invoice.rebate %}6{% else %}5{% endif %}" class="text-end fw-bold sticky-col" style="left: 0; background-color: #f8f9fa; z-index: 1;">Total</td>
|
|
<td class="text-end fw-bold">{{ invoice.total_net|floatformat:2 }} {{ invoice.currency }}</td>
|
|
<td class="text-center fw-bold">{% if invoice.tax != None %}{{ invoice.tax|floatformat:2 }}%{% else %}n/a{% endif %}</td>
|
|
<td class="text-end fw-bold">{% if invoice.tax_total != None %}{{ invoice.tax_total|floatformat:2 }} {{ invoice.currency }}{% else %}n/a{% endif %}</td>
|
|
<td class="text-end fw-bold text-primary">{{ invoice.total|floatformat:2 }} {{ invoice.currency }}</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Information (unchanged) -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 fw-semibold">Payment Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if invoice.type != invoice.INVOICE_TYPES.PROFORMA %}
|
|
<div class="mb-2">
|
|
<span class="text-muted">Method:</span>
|
|
<strong>Electronic Payment</strong>
|
|
</div>
|
|
{% endif %}
|
|
<div class="mb-2">
|
|
<span class="text-muted">Due Date:</span>
|
|
<strong>{{ invoice.payment_date|date:"F j, Y" }}</strong>
|
|
</div>
|
|
{% if invoice.type != invoice.INVOICE_TYPES.PROFORMA %}
|
|
<div class="alert alert-success p-2 mb-0">
|
|
<i class="fas fa-check-circle me-2"></i> Payment Received
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 fw-semibold">Notes</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if invoice.type == invoice.INVOICE_TYPES.PROFORMA %}
|
|
<div class="alert alert-warning p-2 mb-2">
|
|
<i class="fas fa-exclamation-triangle me-2"></i> This document is not an invoice.
|
|
</div>
|
|
{% endif %}
|
|
{% if invoice.tax == None and invoice.is_UE_customer %}
|
|
<div class="alert alert-info p-2 mb-0">
|
|
<i class="fas fa-info-circle me-2"></i> Reverse charge applied.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer (unchanged) -->
|
|
<div class="mt-5 pt-4 border-top text-center text-muted small">
|
|
<p class="mb-1">Thank you for your business!</p>
|
|
<p class="mb-0">If you have any questions about this invoice, please contact us.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.sticky-col {
|
|
position: sticky;
|
|
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
|
|
}
|
|
.table-responsive {
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
</style> |