mirror of
https://github.com/frappe/books.git
synced 2025-01-23 15:18:24 +00:00
upd: print template in POS
This commit is contained in:
AbleKSaju
parent
2e9516a40f
commit
087daf97ed
@ -1,148 +1,142 @@
|
||||
<main class="bg-white h-full px-6" :style="{ 'font-family': print.font }">
|
||||
<!-- Invoice Header -->
|
||||
<header class="py-4 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-2 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>
|
||||
<main class="h-auto w-auto m-2.5 p-0.5 pb-5 bg-white border border-gray-500">
|
||||
<!-- Invoice Header -->
|
||||
<header class="pt-4 flex flex-col items-center">
|
||||
<!-- Company Logo & Name -->
|
||||
<img
|
||||
v-if="print.displayLogo"
|
||||
class="h-18 py-1 w-full object-contain"
|
||||
:src="print.logo"
|
||||
/>
|
||||
<h2 class="font-semibold text-xl" :style="{ color: print.color }">
|
||||
{{ print.companyName }}
|
||||
</h2>
|
||||
|
||||
<!-- Company Address -->
|
||||
<p v-if="print.address" class="w-11/12 text-lg text-center">
|
||||
{{ print.links.address.addressDisplay }}
|
||||
</p>
|
||||
<!-- Company Contacts -->
|
||||
<p class="mt-1 text-base">{{ print.phone }}</p>
|
||||
<p class="text-base">{{ print.email }}</p>
|
||||
<p class="text-base">VAT: 100202308100003</p>
|
||||
</header>
|
||||
<!-- Invoice Details -->
|
||||
|
||||
<section class="mt-1 flex flex-col justify-between items-center">
|
||||
<h4 class="font-semibold text-xl">Invoice</h4>
|
||||
</section>
|
||||
|
||||
<div class="w-auto text-xs grid grid-cols-7 grid-rows-3 p-2">
|
||||
<div class="col-span-2 font-bold"><p>Invoice No</p></div>
|
||||
<div class="col-start-3">:</div>
|
||||
<div class="col-span-4 col-start-4">{{ doc.name }}</div>
|
||||
<div class="col-span-2 row-start-2 font-bold">Customer</div>
|
||||
<div class="col-start-3 row-start-2">:</div>
|
||||
<div class="col-span-4 col-start-4 row-start-2">{{ doc.party }}</div>
|
||||
<div class="col-span-2 col-start-1 row-start-3 font-bold">Date</div>
|
||||
<div class="col-span-2 col-start-3 row-start-3">:</div>
|
||||
<div class="col-span-4 col-start-4 row-start-3">{{doc.date}}</div>
|
||||
</div>
|
||||
|
||||
<!-- Items Table -->
|
||||
<section class="mt-1 mx-2 text-sm">
|
||||
<!-- Heading Row -->
|
||||
<section class="font-bold w-auto flex border-b border-t border-black">
|
||||
<div class="py-1 w-4">{{ t`SI` }}</div>
|
||||
<div class="py-1 w-1/4">{{ t`Item` }}</div>
|
||||
<div class="py-1 text-right w-2/12" v-if="doc.showHSN">
|
||||
{{ t`HSN/SAC` }}
|
||||
</div>
|
||||
<div class="py-1 text-right w-1/12">{{ t`Qty` }}</div>
|
||||
<div class="py-1 text-right w-3/12">{{ t`Price` }}</div>
|
||||
<div class="py-1 text-right w-4/12">{{ t`Amount` }}</div>
|
||||
</section>
|
||||
|
||||
<!-- Items Table -->
|
||||
<section class="mt-1 text-base">
|
||||
<!-- Heading Row -->
|
||||
<section class="text-gray-600 w-full flex border-b">
|
||||
<div class="py-1 w-5/12">{{ t`Item` }}</div>
|
||||
<div class="py-1 text-right w-2/12" v-if="doc.showHSN">
|
||||
{{ t`HSN/SAC` }}
|
||||
</div>
|
||||
<div class="py-1 text-right w-1/12">{{ t`Quantity` }}</div>
|
||||
<div class="py-1 text-right w-3/12">{{ t`Rate` }}</div>
|
||||
<div class="py-1 text-right w-3/12">{{ t`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-1">{{ row.item }}</div>
|
||||
<div class="w-2/12 text-right py-1" v-if="doc.showHSN">
|
||||
{{ row.hsnCode }}
|
||||
</div>
|
||||
<div class="w-1/12 text-right py-1">{{ row.quantity }}</div>
|
||||
<div class="w-3/12 text-right py-1">{{ row.rate }}</div>
|
||||
<div class="w-3/12 text-right py-1">{{ row.amount }}</div>
|
||||
</section>
|
||||
|
||||
<!-- Body Rows -->
|
||||
<section
|
||||
class="flex py-1 px-1 text-gray-900 w-auto"
|
||||
v-for="(row,index) in doc.items"
|
||||
:key="row.name"
|
||||
>
|
||||
<div class="w-3 py-1">{{ index + 1 }}</div>
|
||||
<div class="w-1/4 py-1">{{ row.item }}</div>
|
||||
<div class="w-2/12 text-right py-1" v-if="doc.showHSN">
|
||||
{{ row.hsnCode }}
|
||||
</div>
|
||||
<div class="w-1/12 py-1">{{ row.quantity }}</div>
|
||||
<div class="w-4/12 text-right py-1">{{ row.rate }}</div>
|
||||
<div class="w-4/12 text-right py-1">{{ row.amount }}</div>
|
||||
</section>
|
||||
|
||||
<!-- Invoice Footer -->
|
||||
<footer class="mt-4 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">
|
||||
{{ t`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-2 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-2
|
||||
border-t
|
||||
text-green-600
|
||||
font-semibold
|
||||
text-base
|
||||
"
|
||||
>
|
||||
<h3>{{ t`Grand Total` }}</h3>
|
||||
<p>{{ doc.grandTotal }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<!-- Totaled Amounts -->
|
||||
<section class="flex justify-between border-b border-t border-black py-1">
|
||||
<p>Total</p>
|
||||
<p>{{ doc.netTotal}}</p>
|
||||
</section>
|
||||
|
||||
<!-- Grand Total -->
|
||||
<section class="flex justify-between border-b border-black pt-3">
|
||||
<p class="font-semibold text-lg">Net Total To Pay</p>
|
||||
<p class="font-semibold text-xl">{{ doc.grandTotal }}</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Tax Breakdown -->
|
||||
<section class="mx-2">
|
||||
<p class="flex justify-center font-semibold text-lg mt-2">Vat Summary</p>
|
||||
|
||||
<div class="flex justify-between pl-5 text-base">
|
||||
<p>Total Ex.Vat</p>
|
||||
<p>{{doc.subTotal}}</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-between pl-5 text-base"
|
||||
v-for="tax in doc.taxes"
|
||||
:key="tax.name"
|
||||
>
|
||||
<p>{{ tax.account }}</p>
|
||||
<p>{{ tax.amount }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-1 pt-2 text-sm mr-1">
|
||||
<div class="grid grid-cols-4 grid-rows-1">
|
||||
<div>{{ t`Payment` }}</div>
|
||||
<div class="text-right">{{ t`Tendered` }}</div>
|
||||
<div class="text-right">{{ t`Amount` }}</div>
|
||||
<div class="text-right">{{ t`Balance` }}</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="
|
||||
w-auto
|
||||
grid grid-cols-4 grid-rows-2
|
||||
border-b border-t border-black
|
||||
text-xs
|
||||
gap-y-1
|
||||
"
|
||||
>
|
||||
<div>{{ t`Discount` }}</div>
|
||||
<div class="text-right font-medium">
|
||||
{{ doc.totalDiscount ? doc.totalDiscount : '00.00'}}
|
||||
</div>
|
||||
<div class="text-right font-medium">
|
||||
{{ doc.totalDiscount ? doc.totalDiscount : '00.00'}}
|
||||
</div>
|
||||
<div class="row-start-2">{{ doc.paymentMethod }}</div>
|
||||
<div class="row-start-2 font-medium text-right">{{ doc.grandTotal }}</div>
|
||||
<div class="row-start-2 font-medium text-right">{{ doc.grandTotal }}</div>
|
||||
<div class="row-start-2 font-medium text-right">
|
||||
{{ doc.outstandingAmount }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="w-full mt-3 flex flex-col justify-center items-center">
|
||||
<p class="w-11/12 text-sm text-center">
|
||||
No Cash Refund Exchange Only..Keep bill for Exchange
|
||||
</p>
|
||||
<p class="pt-1 text-lg">***** Thank You Visit Again *****</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user