-
Notifications
You must be signed in to change notification settings - Fork 717
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1110 from AbleKSaju/feat-print-payment-entries
feat: print template for payment entries
- Loading branch information
Showing
4 changed files
with
175 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,126 @@ | ||
<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">{{t`Bill`}}</h3> | ||
<div class="w-2/3 text-gray-800"> | ||
<p class="font-semibold">{{ doc.name }}</p> | ||
|
||
<div class="flex gap-2"> | ||
<p>{{ doc.date }}</p> | ||
<p>{{doc?.time }}</p> | ||
</div> | ||
</div> | ||
</section> | ||
|
||
<!-- Party Details --> | ||
<section class="mt-4 flex"> | ||
<h3 class="w-1/3 font-semibold">{{t`party`}}</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> | ||
|
||
<!-- Payment Details --> | ||
<section class="px-12 py-12 text-lg"> | ||
<div class="w-3/4 grid grid-cols-7 grid-rows-2 p-2 gap-3"> | ||
<div class="col-span-2 font-bold"><p>{{t`Payment Type`}}</p></div> | ||
<div class="col-start-3">:</div> | ||
<div class="col-span-4 col-start-4">{{ doc.paymentType }}</div> | ||
|
||
<div class="col-span-2 row-start-2 font-bold">{{t`Payment Method`}}</div> | ||
<div class="col-start-3 row-start-2">:</div> | ||
<div class="col-span-4 col-start-4 row-start-2"> | ||
{{ doc.paymentMethod }} | ||
</div> | ||
</div> | ||
</section> | ||
|
||
<section class="w-1/2 px-12 pb-6 text-lg" v-if="doc.taxes.length"> | ||
<p class="flex justify-center font-semibold text-lg mt-2"> | ||
{{t`Tax Summary`}} | ||
</p> | ||
|
||
<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> | ||
|
||
<div class="flex justify-between pl-5 text-base"> | ||
<p>{{t`Total Ex.Tax`}}</p> | ||
<p>{{doc.subTotal}}</p> | ||
</div> | ||
</section> | ||
<!-- Invoice Footer --> | ||
<footer class="px-12 text-lg"> | ||
<section class="pt-5 text-lg"> | ||
<div class="w-full grid grid-cols-7 grid-rows-5 p-2 gap-3"> | ||
<div class="col-span-2 font-bold"> | ||
<p>{{t`Grand Total`}}</p> | ||
</div> | ||
|
||
<div class="col-start-3">:</div> | ||
|
||
<div class="col-span-4 col-start-4 font-bold"> | ||
<p>{{ doc.amount }}</p> | ||
<p class="font-normal">{{ doc.grandTotalInWords }}</p> | ||
</div> | ||
|
||
<div class="col-span-2 row-start-2 font-bold">{{t`Amount Paid`}}</div> | ||
|
||
<div class="col-start-3 row-start-2">:</div> | ||
|
||
<div class="col-span-4 col-start-4 row-start-2 font-bold"> | ||
<p>{{ doc.amountPaid }}</p> | ||
<p class="font-normal">{{ doc.amountPaidInWords }}</p> | ||
</div> | ||
</div> | ||
</section> | ||
|
||
<!-- Invoice Terms --> | ||
<section class="mt-12" v-if="doc.terms"> | ||
<h3 class="text-lg font-semibold">{{t`Notes`}}</h3> | ||
|
||
<p class="mt-4 text-lg whitespace-pre-line">{{ doc.terms }}</p> | ||
</section> | ||
</footer> | ||
</main> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters