mirror of
https://github.com/frappe/books.git
synced 2026-08-24 10:04:45 -05:00
incr: insert or update .template.html files
- move .template.html files out of fixtures
This commit is contained in:
18alantom
@@ -0,0 +1,146 @@
|
||||
<main class="bg-white h-full px-6" :style="{ 'font-family': print.font }">
|
||||
<!-- Invoice Header -->
|
||||
<header class="py-6 flex text-sm text-gray-900 border-b">
|
||||
<!-- Company Logo & Name -->
|
||||
<section class="w-1/3">
|
||||
<img
|
||||
v-if="print.displayLogo"
|
||||
class="h-12 max-w-32 object-contain"
|
||||
:src="print.logo"
|
||||
/>
|
||||
<div class="text-xl text-gray-700 font-semibold" v-else>
|
||||
{{ print.companyName }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Company Contacts -->
|
||||
<section class="w-1/3">
|
||||
<div>{{ print.email }}</div>
|
||||
<div class="mt-1">{{ print.phone }}</div>
|
||||
</section>
|
||||
|
||||
<!-- Company Address & GSTIN -->
|
||||
<section class="w-1/3">
|
||||
<div v-if="print.address">{{ print.links.address.addressDisplay }}</div>
|
||||
<div v-if="print.gstin">GSTIN: {{ print.gstin }}</div>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<!-- Sub Heading Section -->
|
||||
<section class="mt-8 flex justify-between">
|
||||
<!-- Invoice Details -->
|
||||
<section class="w-1/3">
|
||||
<h2 class="text-2xl font-semibold">{{ doc.name }}</h2>
|
||||
<p class="py-2 text-base">{{ doc.date }}</p>
|
||||
</section>
|
||||
|
||||
<!-- Party Details -->
|
||||
<section class="w-1/3" v-if="doc.party">
|
||||
<h2 class="py-1 text-right text-lg font-semibold">{{ doc.party }}</h2>
|
||||
<p
|
||||
v-if="doc.links.party.address"
|
||||
class="mt-1 text-xs text-gray-600 text-right"
|
||||
>
|
||||
{{ doc.links.party.links.address.addressDisplay }}
|
||||
</p>
|
||||
<p
|
||||
v-if="doc.links.party.gstin"
|
||||
class="mt-1 text-xs text-gray-600 text-right"
|
||||
>
|
||||
GSTIN: {{ doc.partyGSTIN }}
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Items Table -->
|
||||
<section class="mt-8 text-base">
|
||||
<!-- Heading Row -->
|
||||
<section class="text-gray-600 w-full flex border-b">
|
||||
<div class="py-4 w-5/12">Item</div>
|
||||
<div class="py-4 text-right w-2/12" v-if="doc.showHSN">HSN/SAC</div>
|
||||
<div class="py-4 text-right w-1/12">Quantity</div>
|
||||
<div class="py-4 text-right w-3/12">Rate</div>
|
||||
<div class="py-4 text-right w-3/12">Amount</div>
|
||||
</section>
|
||||
|
||||
<!-- Body Rows -->
|
||||
<section
|
||||
class="flex py-1 text-gray-900 w-full border-b"
|
||||
v-for="row in doc.items"
|
||||
:key="row.name"
|
||||
>
|
||||
<div class="w-5/12 py-4">{{ row.item }}</div>
|
||||
<div class="w-2/12 text-right py-4" v-if="doc.showHSN">
|
||||
{{ row.hsnCode }}
|
||||
</div>
|
||||
<div class="w-1/12 text-right py-4">{{ row.quantity }}</div>
|
||||
<div class="w-3/12 text-right py-4">{{ row.rate }}</div>
|
||||
<div class="w-3/12 text-right py-4">{{ row.amount }}</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Invoice Footer -->
|
||||
<footer class="mt-8 flex justify-end text-base">
|
||||
<!-- Invoice Terms -->
|
||||
<section class="w-1/2">
|
||||
<h3 class="text-sm tracking-widest text-gray-600 mt-2" v-if="doc.terms">
|
||||
Notes
|
||||
</h3>
|
||||
<p class="my-4 text-lg whitespace-pre-line">{{ doc.terms }}</p>
|
||||
</section>
|
||||
|
||||
<!-- Totaled Amounts -->
|
||||
<section class="w-1/2">
|
||||
<!-- Subtotal -->
|
||||
<div class="flex pl-2 justify-between py-3 border-b">
|
||||
<h3>{{ t`Subtotal` }}</h3>
|
||||
<p>{{ doc.netTotal }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Discount (if applied before tax) -->
|
||||
<div
|
||||
class="flex pl-2 justify-between py-3 border-b"
|
||||
v-if="doc.totalDiscount && !doc.discountAfterTax"
|
||||
>
|
||||
<h3>{{ t`Discount` }}</h3>
|
||||
<p>{{ doc.totalDiscount }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Tax Breakdown -->
|
||||
<div
|
||||
class="flex pl-2 justify-between py-3"
|
||||
v-for="tax in doc.taxes"
|
||||
:key="tax.name"
|
||||
>
|
||||
<h3>{{ tax.account }}</h3>
|
||||
<p>{{ tax.amount }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Discount (if applied after tax) -->
|
||||
<div
|
||||
class="flex pl-2 justify-between py-3 border-t"
|
||||
v-if="doc.totalDiscount && doc.discountAfterTax"
|
||||
>
|
||||
<h3>{{ t`Discount` }}</h3>
|
||||
<p>{{ doc.totalDiscount }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Grand Total -->
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
pl-2
|
||||
justify-between
|
||||
py-3
|
||||
border-t
|
||||
text-green-600
|
||||
font-semibold
|
||||
text-base
|
||||
"
|
||||
>
|
||||
<h3>{{ t`Grand Total` }}</h3>
|
||||
<p>{{ doc.grandTotal }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
</main>
|
||||
@@ -0,0 +1,130 @@
|
||||
<main class="bg-white h-full" :style="{ 'font-family': print.font }">
|
||||
<!-- Invoice Header -->
|
||||
<header class="bg-gray-100 px-12 py-10">
|
||||
<!-- Company Details -->
|
||||
<section class="flex items-center">
|
||||
<img
|
||||
v-if="print.displayLogo"
|
||||
class="h-12 max-w-32 object-contain mr-4"
|
||||
:src="print.logo"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<p class="font-semibold text-xl" :style="{ color: print.color }">
|
||||
{{ print.companyName }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-800" v-if="print.address">
|
||||
{{ print.links.address.addressDisplay }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-800" v-if="print.gstin">
|
||||
GSTIN: {{ print.gstin }}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sub Heading Section -->
|
||||
<div class="mt-8 text-lg">
|
||||
<!-- Doc Details -->
|
||||
<section class="flex">
|
||||
<h3 class="w-1/3 font-semibold">
|
||||
{{ doc.entryType === 'SalesInvoice' ? 'Invoice' : 'Bill' }}
|
||||
</h3>
|
||||
<div class="w-2/3 text-gray-800">
|
||||
<p class="font-semibold">{{ doc.name }}</p>
|
||||
<p>{{ doc.date }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Party Details -->
|
||||
<section class="mt-4 flex">
|
||||
<h3 class="w-1/3 font-semibold">
|
||||
{{ doc.entryType === 'SalesInvoice' ? 'Customer' : 'Supplier' }}
|
||||
</h3>
|
||||
|
||||
<div class="w-2/3 text-gray-800" v-if="doc.party">
|
||||
<p class="font-semibold">{{ doc.party }}</p>
|
||||
<p v-if="doc.links.party.address">
|
||||
{{ doc.links.party.links.address.addressDisplay }}
|
||||
</p>
|
||||
<p v-if="doc.links.party.gstin">GSTIN: {{ doc.links.party.gstin }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Items Table -->
|
||||
<section class="px-12 pt-12 text-lg">
|
||||
<!-- Heading Row -->
|
||||
<section class="mb-4 flex font-semibold">
|
||||
<div class="w-4/12">Item</div>
|
||||
<div class="w-2/12 text-right" v-if="doc.showHSN">HSN/SAC</div>
|
||||
<div class="w-2/12 text-right">Quantity</div>
|
||||
<div class="w-3/12 text-right">Rate</div>
|
||||
<div class="w-3/12 text-right">Amount</div>
|
||||
</section>
|
||||
|
||||
<!-- Body Rows -->
|
||||
<section
|
||||
class="flex py-1 text-gray-800"
|
||||
v-for="row in doc.items"
|
||||
:key="row.name"
|
||||
>
|
||||
<div class="w-4/12">{{ row.item }}</div>
|
||||
<div class="w-2/12 text-right" v-if="doc.showHSN">{{ row.hsnCode }}</div>
|
||||
<div class="w-2/12 text-right">{{ row.quantity }}</div>
|
||||
<div class="w-3/12 text-right">{{ row.rate }}</div>
|
||||
<div class="w-3/12 text-right">{{ row.amount }}</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Invoice Footer -->
|
||||
<footer class="px-12 py-12 text-lg">
|
||||
<!-- Totaled Amounts -->
|
||||
<section class="flex -mx-3 justify-end flex-1 bg-gray-100 gap-8">
|
||||
<!-- Subtotal -->
|
||||
<div class="text-right py-3">
|
||||
<h3 class="text-gray-800">{{ t`Subtotal` }}</h3>
|
||||
<p class="text-xl mt-2">{{ doc.netTotal }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Discount (if applied before tax) -->
|
||||
<div
|
||||
class="text-right py-3"
|
||||
v-if="doc.totalDiscount && !doc.discountAfterTax"
|
||||
>
|
||||
<h3 class="text-gray-800">{{ t`Discount` }}</h3>
|
||||
<p class="text-xl mt-2">{{ doc.totalDiscount }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Tax Breakdown -->
|
||||
<div class="text-right py-3" v-for="tax in doc.taxes" :key="tax.name">
|
||||
<h3 class="text-gray-800">{{ tax.account }}</h3>
|
||||
<p class="text-xl mt-2">{{ tax.amount }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Discount (if applied after tax) -->
|
||||
<div
|
||||
class="text-right py-3"
|
||||
v-if="doc.totalDiscount && doc.discountAfterTax"
|
||||
>
|
||||
<h3 class="text-gray-800">{{ t`Discount` }}</h3>
|
||||
<p class="text-xl mt-2">{{ doc.totalDiscount }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Grand Total -->
|
||||
<div
|
||||
class="py-3 px-4 text-right text-white"
|
||||
:style="{ backgroundColor: print.color }"
|
||||
>
|
||||
<h3>{{ t`Grand Total` }}</h3>
|
||||
<p class="text-2xl mt-2 font-semibold">{{ doc.grandTotal }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Invoice Terms -->
|
||||
<section class="mt-12" v-if="doc.terms">
|
||||
<h3 class="text-lg font-semibold">Notes</h3>
|
||||
<p class="mt-4 text-lg whitespace-pre-line">{{ doc.terms }}</p>
|
||||
</section>
|
||||
</footer>
|
||||
</main>
|
||||
@@ -0,0 +1,170 @@
|
||||
<main class="h-full" :style="{ 'font-family': print.font }">
|
||||
<!-- Invoice Header -->
|
||||
<header class="flex items-center justify-between w-full border-b px-12 py-10">
|
||||
<!-- Left Section -->
|
||||
<section class="flex items-center">
|
||||
<img
|
||||
v-if="print.displayLogo"
|
||||
class="h-12 max-w-32 object-contain mr-4"
|
||||
:src="print.logo"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<p class="font-semibold text-xl" :style="{ color: print.color }">
|
||||
{{ print.companyName }}
|
||||
</p>
|
||||
<p>{{ doc.date }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Right Section -->
|
||||
<section class="text-right">
|
||||
<p class="font-semibold text-xl" :style="{ color: print.color }">
|
||||
{{ doc.entryType }}
|
||||
</p>
|
||||
<p>{{ doc.name }}</p>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<!-- Party && Company Details -->
|
||||
<section class="flex px-12 py-10 border-b">
|
||||
<!-- Party Details -->
|
||||
<section class="w-1/2">
|
||||
<h3 class="uppercase text-sm font-semibold tracking-widest text-gray-800">
|
||||
{{ doc.entryType === 'SalesInvoice' ? 'To' : 'From' }}
|
||||
</h3>
|
||||
<p class="mt-4 text-black leading-relaxed text-lg">{{ doc.party }}</p>
|
||||
<p
|
||||
v-if="doc.links.party.address"
|
||||
class="mt-2 text-black leading-relaxed text-lg"
|
||||
>
|
||||
{{ doc.links.party.links.address.addressDisplay ?? '' }}
|
||||
</p>
|
||||
<p
|
||||
v-if="doc.links.party.gstin"
|
||||
class="mt-2 text-black leading-relaxed text-lg"
|
||||
>
|
||||
GSTIN: {{ doc.links.party.gstin }}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Company Details -->
|
||||
<section class="w-1/2">
|
||||
<h3
|
||||
class="
|
||||
uppercase
|
||||
text-sm
|
||||
font-semibold
|
||||
tracking-widest
|
||||
text-gray-800
|
||||
ml-8
|
||||
"
|
||||
>
|
||||
{{ doc.entryType === 'SalesInvoice' ? 'From' : 'To' }}
|
||||
</h3>
|
||||
<p class="mt-4 ml-8 text-black leading-relaxed text-lg">
|
||||
{{ print.companyName }}
|
||||
</p>
|
||||
<p
|
||||
v-if="print.address"
|
||||
class="mt-2 ml-8 text-black leading-relaxed text-lg"
|
||||
>
|
||||
{{ print.links.address.addressDisplay }}
|
||||
</p>
|
||||
<p
|
||||
v-if="print.gstin"
|
||||
class="mt-2 ml-8 text-black leading-relaxed text-lg"
|
||||
>
|
||||
GSTIN: {{ print.gstin }}
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Items Table -->
|
||||
<section class="px-12 py-10 border-b">
|
||||
<!-- Heading Row -->
|
||||
<section
|
||||
class="
|
||||
mb-4
|
||||
flex
|
||||
uppercase
|
||||
text-sm
|
||||
tracking-widest
|
||||
font-semibold
|
||||
text-gray-800
|
||||
"
|
||||
>
|
||||
<div class="w-4/12 text-left">Item</div>
|
||||
<div class="w-2/12 text-right" v-if="doc.showHSN">HSN/SAC</div>
|
||||
<div class="w-2/12 text-right">Quantity</div>
|
||||
<div class="w-3/12 text-right">Rate</div>
|
||||
<div class="w-3/12 text-right">Amount</div>
|
||||
</section>
|
||||
|
||||
<!-- Body Rows -->
|
||||
<section class="flex py-1 text-lg" v-for="row in doc.items" :key="row.name">
|
||||
<div class="w-4/12 text-left">{{ row.item }}</div>
|
||||
<div class="w-2/12 text-right" v-if="doc.showHSN">{{ row.hsnCode }}</div>
|
||||
<div class="w-2/12 text-right">{{ row.quantity }}</div>
|
||||
<div class="w-3/12 text-right">{{ row.rate }}</div>
|
||||
<div class="w-3/12 text-right">{{ row.amount }}</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Invoice Footer -->
|
||||
<footer class="flex px-12 py-10">
|
||||
<!-- Invoice Terms -->
|
||||
<section class="w-1/2" v-if="doc.terms">
|
||||
<h3 class="uppercase text-sm tracking-widest font-semibold text-gray-800">
|
||||
Notes
|
||||
</h3>
|
||||
<p class="mt-4 text-lg whitespace-pre-line">{{ doc.terms }}</p>
|
||||
</section>
|
||||
|
||||
<!-- Totaled Amounts -->
|
||||
<section class="w-1/2 text-lg ml-auto">
|
||||
<!-- Subtotal -->
|
||||
<div class="flex pl-2 justify-between py-1">
|
||||
<h3>{{ t`Subtotal` }}</h3>
|
||||
<p>{{ doc.netTotal }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Discount (if applied before tax) -->
|
||||
<div
|
||||
class="flex pl-2 justify-between py-1"
|
||||
v-if="doc.totalDiscount && !doc.discountAfterTax"
|
||||
>
|
||||
<h3>{{ t`Discount` }}</h3>
|
||||
<p>{{ doc.totalDiscount }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Tax Breakdown -->
|
||||
<div
|
||||
class="flex pl-2 justify-between py-1"
|
||||
v-for="tax in doc.taxes"
|
||||
:key="tax.name"
|
||||
>
|
||||
<h3>{{ tax.account }}</h3>
|
||||
<p>{{ tax.amount }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Discount (if applied after tax) -->
|
||||
<div
|
||||
class="flex pl-2 justify-between py-1"
|
||||
v-if="doc.totalDiscount && doc.discountAfterTax"
|
||||
>
|
||||
<h3>{{ t`Discount` }}</h3>
|
||||
<p>{{ doc.totalDiscount }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Grand Total -->
|
||||
<div
|
||||
class="flex pl-2 justify-between py-1 font-semibold"
|
||||
:style="{ color: print.color }"
|
||||
>
|
||||
<h3>{{ t`Grand Total` }}</h3>
|
||||
<p>{{ doc.grandTotal }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
</main>
|
||||
Reference in New Issue
Block a user