A R R R Associates
121 lines
7.6 KiB
HTML
121 lines
7.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{{ invoice_ctx.invoice_title }} {{ invoice.invoice_no }}</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
@page { size: A4; margin: 14mm; }
|
|
@media print { .no-print { display: none !important; } body { background: white !important; } }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-100 text-slate-900">
|
|
<div class="no-print mx-auto my-4 flex max-w-5xl justify-end gap-2">
|
|
<button onclick="window.print()" class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Print / Save PDF</button>
|
|
<a href="/billing/{{ invoice.id }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700">Back</a>
|
|
</div>
|
|
<main class="mx-auto max-w-5xl bg-white p-8 shadow print:shadow-none">
|
|
<header class="border-b-2 border-slate-900 pb-4">
|
|
<div class="flex items-start justify-between gap-6">
|
|
<div>
|
|
<div class="text-2xl font-bold">{{ invoice_ctx.firm_name }}</div>
|
|
<div class="mt-1 whitespace-pre-line text-sm text-slate-600">{{ invoice_ctx.firm_address or '' }}</div>
|
|
<div class="mt-2 text-sm text-slate-700">GSTIN: <b>{{ invoice_ctx.firm_gstin or '-' }}</b> | PAN: <b>{{ invoice_ctx.firm_pan or '-' }}</b></div>
|
|
<div class="text-sm text-slate-700">Email: {{ invoice_ctx.firm_contact_email or '-' }} | Mobile: {{ invoice_ctx.firm_contact_mobile or '-' }}</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-2xl font-bold uppercase">{{ invoice_ctx.invoice_title }}</div>
|
|
<div class="mt-2 text-sm">Invoice No: <b>{{ invoice.invoice_no }}</b></div>
|
|
<div class="text-sm">Invoice Date: <b>{{ invoice.invoice_date }}</b></div>
|
|
<div class="text-sm">Due Date: <b>{{ invoice.due_date or '-' }}</b></div>
|
|
<div class="text-sm">Status: <b>{{ invoice.status }}</b></div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="mt-5 grid grid-cols-2 gap-4 text-sm">
|
|
<div class="rounded-lg border border-slate-300 p-4">
|
|
<div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Bill To</div>
|
|
<div class="mt-2 text-base font-bold">{{ invoice.client_legal_name or '-' }}</div>
|
|
<div class="mt-1 text-slate-700">{{ invoice.client_billing_address or '-' }}</div>
|
|
<div class="mt-2">GSTIN: <b>{{ invoice.client_gstin or '-' }}</b></div>
|
|
<div>PAN: <b>{{ invoice.client_pan or '-' }}</b></div>
|
|
</div>
|
|
<div class="rounded-lg border border-slate-300 p-4">
|
|
<div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Tax Particulars</div>
|
|
<div class="mt-2">Place of Supply: <b>{{ invoice.place_of_supply or '-' }}</b></div>
|
|
<div>Tax Type: <b>{{ invoice.tax_type }}</b></div>
|
|
<div>Reverse Charge: <b>{{ 'Yes' if invoice.reverse_charge else 'No' }}</b></div>
|
|
<div>Client State Code: <b>{{ invoice.client_state_code or '-' }}</b></div>
|
|
</div>
|
|
</section>
|
|
|
|
<table class="mt-5 w-full border-collapse text-sm">
|
|
<thead>
|
|
<tr class="bg-slate-100">
|
|
<th class="border border-slate-300 px-2 py-2 text-left">#</th>
|
|
<th class="border border-slate-300 px-2 py-2 text-left">Description</th>
|
|
<th class="border border-slate-300 px-2 py-2 text-left">SAC</th>
|
|
<th class="border border-slate-300 px-2 py-2 text-right">Qty</th>
|
|
<th class="border border-slate-300 px-2 py-2 text-right">Rate</th>
|
|
<th class="border border-slate-300 px-2 py-2 text-right">Taxable</th>
|
|
<th class="border border-slate-300 px-2 py-2 text-right">GST %</th>
|
|
<th class="border border-slate-300 px-2 py-2 text-right">Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for line in invoice.lines %}
|
|
<tr>
|
|
<td class="border border-slate-300 px-2 py-2">{{ loop.index }}</td>
|
|
<td class="border border-slate-300 px-2 py-2">{{ line.description }}</td>
|
|
<td class="border border-slate-300 px-2 py-2">{{ line.sac_code or '-' }}</td>
|
|
<td class="border border-slate-300 px-2 py-2 text-right">{{ line.quantity }}</td>
|
|
<td class="border border-slate-300 px-2 py-2 text-right">{{ '%.2f'|format(line.rate or 0) }}</td>
|
|
<td class="border border-slate-300 px-2 py-2 text-right">{{ '%.2f'|format(line.taxable_amount or 0) }}</td>
|
|
<td class="border border-slate-300 px-2 py-2 text-right">{{ line.gst_rate }}</td>
|
|
<td class="border border-slate-300 px-2 py-2 text-right">{{ '%.2f'|format(line.line_total or 0) }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr><td colspan="7" class="border border-slate-300 px-2 py-2 text-right font-semibold">Subtotal</td><td class="border border-slate-300 px-2 py-2 text-right font-semibold">{{ '%.2f'|format(invoice.subtotal or 0) }}</td></tr>
|
|
<tr><td colspan="7" class="border border-slate-300 px-2 py-2 text-right font-semibold">Discount</td><td class="border border-slate-300 px-2 py-2 text-right font-semibold">{{ '%.2f'|format(invoice.discount_amount or 0) }}</td></tr>
|
|
<tr><td colspan="7" class="border border-slate-300 px-2 py-2 text-right font-semibold">Taxable Value</td><td class="border border-slate-300 px-2 py-2 text-right font-semibold">{{ '%.2f'|format(invoice.taxable_amount or 0) }}</td></tr>
|
|
<tr><td colspan="7" class="border border-slate-300 px-2 py-2 text-right font-semibold">CGST</td><td class="border border-slate-300 px-2 py-2 text-right font-semibold">{{ '%.2f'|format(invoice.cgst_amount or 0) }}</td></tr>
|
|
<tr><td colspan="7" class="border border-slate-300 px-2 py-2 text-right font-semibold">SGST</td><td class="border border-slate-300 px-2 py-2 text-right font-semibold">{{ '%.2f'|format(invoice.sgst_amount or 0) }}</td></tr>
|
|
<tr><td colspan="7" class="border border-slate-300 px-2 py-2 text-right font-semibold">IGST</td><td class="border border-slate-300 px-2 py-2 text-right font-semibold">{{ '%.2f'|format(invoice.igst_amount or 0) }}</td></tr>
|
|
<tr class="bg-slate-100"><td colspan="7" class="border border-slate-300 px-2 py-2 text-right text-base font-bold">Grand Total</td><td class="border border-slate-300 px-2 py-2 text-right text-base font-bold">₹ {{ '%.2f'|format(invoice.total_amount or 0) }}</td></tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
<section class="mt-5 grid grid-cols-2 gap-4 text-sm">
|
|
<div class="rounded-lg border border-slate-300 p-4">
|
|
<div class="font-semibold">Amount in Words</div>
|
|
<div class="mt-1">{{ invoice.amount_in_words or '-' }}</div>
|
|
</div>
|
|
<div class="rounded-lg border border-slate-300 p-4">
|
|
<div class="font-semibold">Payment Details</div>
|
|
<div class="mt-1">Bank: {{ invoice_ctx.bank_name or '-' }}</div>
|
|
<div>A/c: {{ invoice_ctx.bank_account_number or '-' }}</div>
|
|
<div>IFSC: {{ invoice_ctx.bank_ifsc or '-' }}</div>
|
|
<div>UPI: {{ invoice_ctx.upi_id or '-' }}</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mt-5 text-sm">
|
|
{% if invoice_ctx.terms %}<div><b>Terms:</b> {{ invoice_ctx.terms }}</div>{% endif %}
|
|
{% if invoice_ctx.declaration %}<div class="mt-2"><b>Declaration:</b> {{ invoice_ctx.declaration }}</div>{% endif %}
|
|
</section>
|
|
|
|
<footer class="mt-12 flex items-end justify-between text-sm">
|
|
<div>{{ invoice_ctx.footer_note or '' }}</div>
|
|
<div class="text-center">
|
|
<div class="mb-10">For {{ invoice_ctx.firm_name }}</div>
|
|
<div class="border-t border-slate-500 px-8 pt-2">{{ invoice_ctx.authorised_signatory_name or 'Authorised Signatory' }}</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|