208 lines
9.4 KiB
HTML
208 lines
9.4 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 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">
|
|
{% if copy %}
|
|
{{ _("COPY") }}
|
|
{% else %}
|
|
{{ _("ORIGINAL") }}
|
|
{% endif %}
|
|
</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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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 align-items-center table-flush table-hover">
|
|
<thead class="">
|
|
<tr class="bg-body-highlight">
|
|
<th class="text-center sticky-col" style="width: 5%; 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;">{{ _("Quantity") }}</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-center" style="width: 10%; min-width: 100px;">{{ _("Total") }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-center sticky-col" style=" z-index: 1;">1</td>
|
|
<td>{{ invoice.item_description }}</td>
|
|
<td class="text-end">{{ invoice.unit_price_net|floatformat:2 }} <span class="currency">{{ CURRENCY }}</span></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 }} <span class="currency">{{ CURRENCY }}</span></td>
|
|
<td class="text-center">{% if invoice.tax != None %}{{ invoice.tax|floatformat }}%{% else %}n/a{% endif %}</td>
|
|
<td class="text-end">{% if invoice.tax_total != None %}{{ invoice.tax_total|floatformat:2 }} <span class="currency">{{ CURRENCY }}</span>{% else %}{{ _("n/a")}}{% endif %}</td>
|
|
<td class="text-center fw-bold">{{ invoice.total|floatformat:2 }} <span class="currency">{{ CURRENCY }}</span></td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot class="">
|
|
<tr>
|
|
<td colspan="{% if invoice.rebate %}6{% else %}5{% endif %}" class="text-end fw-bold sticky-col" style="left: 0; z-index: 1;">{{ _("Total") }}</td>
|
|
<td class="text-end fw-bold">{{ invoice.total_net|floatformat:2 }} <span class="currency">{{ CURRENCY }}</span></td>
|
|
<td class="text-center fw-bold">{% if invoice.tax != None %}{{ invoice.tax|floatformat }}%{% else %}{{ _("n/a")}}{% endif %}</td>
|
|
<td class="text-end fw-bold">{% if invoice.tax_total != None %}{{ invoice.tax_total|floatformat:2 }} <span class="currency">{{ CURRENCY }}</span>{% else %}{{ _("n/a")}}{% endif %}</td>
|
|
<td class="text-center fw-bold text-primary">{{ invoice.total|floatformat:2 }} <span class="currency">{{ CURRENCY }}</span></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">
|
|
<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">
|
|
<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> |