259 lines
13 KiB
HTML
259 lines
13 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="icon-saudi_riyal"></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="icon-saudi_riyal"></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="icon-saudi_riyal"></span>
|
|
{% else %}
|
|
{{ _("n/a") }}
|
|
{% endif %}
|
|
</td>
|
|
<td class="text-center fw-bold">
|
|
{{ invoice.total|floatformat:2 }} <span class="icon-saudi_riyal"></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="icon-saudi_riyal"></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="icon-saudi_riyal"></span>
|
|
{% else %}
|
|
{{ _("n/a") }}
|
|
{% endif %}
|
|
</td>
|
|
<td class="text-center fw-bold text-primary">
|
|
{{ invoice.total|floatformat:2 }} <span class="icon-saudi_riyal"></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>
|