A R R R Associates
121 lines
8.9 KiB
HTML
121 lines
8.9 KiB
HTML
{% extends "ui/templates/base/layout.html" %}
|
|
{% block content %}
|
|
<div class="space-y-6">
|
|
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-semibold text-slate-900">{{ invoice_ctx.invoice_title }} {{ invoice.invoice_no }}</h1>
|
|
<p class="mt-1 text-sm text-slate-500">{{ invoice.client_legal_name or (invoice.client.client_name if invoice.client else '') }} • {{ invoice.invoice_date }}</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% if invoice.status == 'DRAFT' %}
|
|
<form method="post" action="/billing/{{ invoice.id }}/issue">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
|
|
<button class="af-btn af-btn-primary">Issue Invoice</button>
|
|
</form>
|
|
{% endif %}
|
|
{% if can_record_payment and invoice.status not in ['DRAFT','CANCELLED','PAID'] %}
|
|
<a href="/billing/{{ invoice.id }}/payments/new" class="af-btn af-btn-primary">Record Payment</a>
|
|
{% endif %}
|
|
<a href="/billing/{{ invoice.id }}/print" target="_blank" class="af-btn af-btn-secondary">Print / PDF</a>
|
|
<a href="/billing" class="af-btn af-btn-secondary">Back</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="af-card space-y-6">
|
|
<div class="grid gap-4 md:grid-cols-4 lg:grid-cols-7">
|
|
<div><div class="text-xs uppercase text-slate-500">Status</div><div class="font-semibold">{{ invoice.status }}</div></div>
|
|
<div><div class="text-xs uppercase text-slate-500">Due Date</div><div class="font-semibold">{{ invoice.due_date or '-' }}</div></div>
|
|
<div><div class="text-xs uppercase text-slate-500">Place of Supply</div><div class="font-semibold">{{ invoice.place_of_supply or '-' }}</div></div>
|
|
<div><div class="text-xs uppercase text-slate-500">Total</div><div class="font-semibold">₹ {{ '%.2f'|format(invoice.total_amount or 0) }}</div></div>
|
|
<div><div class="text-xs uppercase text-slate-500">Amount Received</div><div class="font-semibold text-emerald-700">₹ {{ '%.2f'|format(invoice.amount_received or 0) }}</div></div>
|
|
<div><div class="text-xs uppercase text-slate-500">TDS Deducted</div><div class="font-semibold text-blue-700">₹ {{ '%.2f'|format(invoice.tds_deducted or 0) }}</div></div>
|
|
<div><div class="text-xs uppercase text-slate-500">Balance</div><div class="font-semibold {% if invoice.balance_amount and invoice.balance_amount > 0 %}text-amber-700{% else %}text-emerald-700{% endif %}">₹ {{ '%.2f'|format(invoice.balance_amount or 0) }}</div></div>
|
|
</div>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div class="rounded-xl border border-slate-200 p-4">
|
|
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Supplier</h2>
|
|
<div class="mt-2 font-semibold text-slate-900">{{ invoice_ctx.firm_name }}</div>
|
|
<div class="text-sm text-slate-600 whitespace-pre-line">{{ invoice_ctx.firm_address or '-' }}</div>
|
|
<div class="mt-2 text-sm text-slate-600">GSTIN: {{ invoice_ctx.firm_gstin or '-' }} • PAN: {{ invoice_ctx.firm_pan or '-' }}</div>
|
|
</div>
|
|
<div class="rounded-xl border border-slate-200 p-4">
|
|
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Bill To</h2>
|
|
<div class="mt-2 font-semibold text-slate-900">{{ invoice.client_legal_name or '-' }}</div>
|
|
<div class="text-sm text-slate-600">{{ invoice.client_billing_address or '-' }}</div>
|
|
<div class="mt-2 text-sm text-slate-600">GSTIN: {{ invoice.client_gstin or '-' }} • PAN: {{ invoice.client_pan or '-' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft">
|
|
<table class="min-w-full divide-y divide-slate-200 text-sm">
|
|
<thead class="bg-slate-50 text-left text-xs font-semibold uppercase text-slate-500">
|
|
<tr><th class="px-4 py-3">Description</th><th class="px-4 py-3">SAC</th><th class="px-4 py-3 text-right">Qty</th><th class="px-4 py-3 text-right">Rate</th><th class="px-4 py-3 text-right">Taxable</th><th class="px-4 py-3 text-right">GST</th><th class="px-4 py-3 text-right">Total</th></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
{% for line in invoice.lines %}
|
|
<tr>
|
|
<td class="px-4 py-3"><div class="font-medium text-slate-900">{{ line.description }}</div><div class="text-xs text-slate-500">{{ line.service.service_name if line.service else '' }}</div></td>
|
|
<td class="px-4 py-3">{{ line.sac_code or '-' }}</td>
|
|
<td class="px-4 py-3 text-right">{{ line.quantity }}</td>
|
|
<td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(line.rate or 0) }}</td>
|
|
<td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(line.taxable_amount or 0) }}</td>
|
|
<td class="px-4 py-3 text-right">{{ line.gst_rate }}%</td>
|
|
<td class="px-4 py-3 text-right font-semibold">₹ {{ '%.2f'|format(line.line_total or 0) }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
<tfoot class="bg-slate-50 text-sm font-semibold">
|
|
<tr><td colspan="6" class="px-4 py-3 text-right">Subtotal</td><td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(invoice.subtotal or 0) }}</td></tr>
|
|
<tr><td colspan="6" class="px-4 py-3 text-right">Discount</td><td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(invoice.discount_amount or 0) }}</td></tr>
|
|
<tr><td colspan="6" class="px-4 py-3 text-right">Taxable Value</td><td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(invoice.taxable_amount or 0) }}</td></tr>
|
|
<tr><td colspan="6" class="px-4 py-3 text-right">CGST</td><td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(invoice.cgst_amount or 0) }}</td></tr>
|
|
<tr><td colspan="6" class="px-4 py-3 text-right">SGST</td><td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(invoice.sgst_amount or 0) }}</td></tr>
|
|
<tr><td colspan="6" class="px-4 py-3 text-right">IGST</td><td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(invoice.igst_amount or 0) }}</td></tr>
|
|
<tr><td colspan="6" class="px-4 py-3 text-right text-base">Grand Total</td><td class="px-4 py-3 text-right text-base">₹ {{ '%.2f'|format(invoice.total_amount or 0) }}</td></tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
<div class="af-card space-y-4">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div>
|
|
<h2 class="font-semibold text-slate-900">Payment History</h2>
|
|
<p class="text-sm text-slate-500">Receipts, TDS deductions and outstanding balance for this invoice.</p>
|
|
</div>
|
|
{% if can_record_payment and invoice.status not in ['DRAFT','CANCELLED','PAID'] %}
|
|
<a href="/billing/{{ invoice.id }}/payments/new" class="af-btn af-btn-primary">Record Payment</a>
|
|
{% endif %}
|
|
</div>
|
|
<div class="overflow-hidden rounded-xl border border-slate-200">
|
|
<table class="min-w-full divide-y divide-slate-200 text-sm">
|
|
<thead class="bg-slate-50 text-left text-xs font-semibold uppercase text-slate-500">
|
|
<tr><th class="px-4 py-3">Receipt</th><th class="px-4 py-3">Date</th><th class="px-4 py-3">Mode</th><th class="px-4 py-3">Reference</th><th class="px-4 py-3 text-right">Received</th><th class="px-4 py-3 text-right">TDS</th><th class="px-4 py-3"></th></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
{% for payment in invoice.payments %}
|
|
<tr>
|
|
<td class="px-4 py-3 font-medium text-slate-900">{{ payment.receipt_no }}</td>
|
|
<td class="px-4 py-3 text-slate-600">{{ payment.payment_date }}</td>
|
|
<td class="px-4 py-3 text-slate-600">{{ payment.mode }}</td>
|
|
<td class="px-4 py-3 text-slate-600">{{ payment.reference_no or '-' }}</td>
|
|
<td class="px-4 py-3 text-right font-semibold">₹ {{ '%.2f'|format(payment.amount_received or 0) }}</td>
|
|
<td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(payment.tds_deducted or 0) }}</td>
|
|
<td class="px-4 py-3 text-right"><a href="/billing/payments/{{ payment.id }}/receipt" target="_blank" class="text-brand-600 hover:underline">Receipt</a></td>
|
|
</tr>
|
|
{% else %}
|
|
<tr><td colspan="7" class="px-4 py-6 text-center text-slate-500">No payments recorded yet.</td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div class="af-card"><h2 class="font-semibold text-slate-900">Amount in Words</h2><p class="mt-2 text-sm text-slate-600">{{ invoice.amount_in_words or '-' }}</p></div>
|
|
<div class="af-card"><h2 class="font-semibold text-slate-900">Bank / UPI Details</h2><p class="mt-2 text-sm text-slate-600 whitespace-pre-line">{% if invoice_ctx.bank_name %}{{ invoice_ctx.bank_name }}{% endif %}{% if invoice_ctx.bank_account_number %}\nA/c: {{ invoice_ctx.bank_account_number }}{% endif %}{% if invoice_ctx.bank_ifsc %}\nIFSC: {{ invoice_ctx.bank_ifsc }}{% endif %}{% if invoice_ctx.upi_id %}\nUPI: {{ invoice_ctx.upi_id }}{% endif %}</p></div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|