added invoice note and total in words

4 files changed, 49 insertions, 17 deletions

diff --git a/src/components/InvoiceHeaderEditor.vue b/src/components/InvoiceHeaderEditor.vue
index d0bf81e..5b1f925 100644
--- a/src/components/InvoiceHeaderEditor.vue
+++ b/src/components/InvoiceHeaderEditor.vue
@@ -96,6 +96,7 @@ const submit = async (e: Event) => {
       "issuerfirmemail": u.Email,
       "issuerfirmwebsite": u.Website,
       "issuerfirmdetails": u.Details,
+      "note": u.DefaultInvoiceNote,
     })
 
     route.push({ name: "edit-invoice", params: { id: res.data.data.ID }})
diff --git a/src/components/PrintPreview.vue b/src/components/PrintPreview.vue
index b733310..a4344b7 100644
--- a/src/components/PrintPreview.vue
+++ b/src/components/PrintPreview.vue
@@ -14,8 +14,10 @@
     <PrintPreviewRecipientDetails 
       :invoice="props.invoice"/>
     <PrintPreviewItemsList 
-      :items="props.invoice.Items"/>
+      :items="props.invoice.Items"
+      :total="props.total"/>
     <PrintPreviewFooter 
+      :invoice="props.invoice"
       :total="props.total"/>
   </div>
 </template>
diff --git a/src/components/PrintPreviewFooter.vue b/src/components/PrintPreviewFooter.vue
index 48c9e51..61837ed 100644
--- a/src/components/PrintPreviewFooter.vue
+++ b/src/components/PrintPreviewFooter.vue
@@ -1,14 +1,30 @@
 <script setup lang="ts">
   import Converter from "number-to-words"
 
-  const props = defineProps(["total"])
+  const props = defineProps(["invoice", "total"])
 </script>
 
 <template>
   <div class="print-preview-footer">
     <div class="footer--col1">
-      <div class="total-words-label"></div>
-      <div class="total-words">{{ Number.isFinite(props.total.TotalWithGST.value) && `${Converter.toWords(props.total.TotalWithGST.value)} only` }}</div>
+      <div class="footer--col1--row1">
+        <p class="total-words">
+          <strong>Total (in words):</strong>
+          {{ Number.isFinite(props.total.TotalWithGST.value) && `${Converter.toWords(props.total.TotalWithGST.value)} only` }}
+        </p>
+      </div>
+
+      <div class="footer--col1--row2">
+      </div>
+
+      <div class="footer--col1--row3">
+        <div>
+          <strong>Note:</strong>
+        </div>
+        <div>
+          {{ props.invoice.Note }}
+        </div>
+      </div>
     </div>
     <div class="footer--col2">
       <div class="total-summary">
@@ -38,6 +54,10 @@
 .total-words {
   text-transform: capitalize;
 }
+.footer--col1--row1 {
+  border-bottom: 1px solid gray;
+  padding: 0.1em 0.3em;
+}
 .print-preview-footer {
   border: 1px solid gray;
   display: grid;
@@ -47,7 +67,7 @@
 .footer--col1 {
   border-right: 1pt solid gray;
   display: grid;
-  grid-template-rows: 2fr 8fr;
+  grid-template-rows: 2fr 4fr 6fr;
 }
 .firm-signature-wrapper {
   display: flex;
@@ -62,9 +82,18 @@
 .total-summary {
   display: grid;
   grid-template-columns: 1fr;
+  padding: 0.1em 0.3em;
 }
 .total-summary-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
 }
+.footer--col1--row3 {
+  display: grid;
+  grid-template-rows: 1.3em 1fr;
+  white-space: pre-wrap;
+  line-height: 1.3;
+  padding: 0.1em 0.3em;
+  border-top: 1px solid gray;
+}
 </style>
diff --git a/src/components/PrintPreviewRecipientDetails.vue b/src/components/PrintPreviewRecipientDetails.vue
index 6f1f5b7..f7733c9 100644
--- a/src/components/PrintPreviewRecipientDetails.vue
+++ b/src/components/PrintPreviewRecipientDetails.vue
@@ -17,11 +17,11 @@
     <div class="recipient-info--row2">
       <div class="recipient-info--col1 recipient-contact">
         <div class="label">
-          <span><strong>Bill To</strong></span>
+          <span><strong>Bill To:</strong></span>
           <span>{{ props.invoice.CustomerName }}</span>
         </div>
         <div class="label">
-          <span><strong>Address</strong></span>
+          <span><strong>Address:</strong></span>
           <span>
             {{ props.invoice.BillingAddress.AddressText }}<br>
             {{ props.invoice.BillingAddress.City }}
@@ -31,23 +31,23 @@
           </span>
         </div>
         <div class="label">
-          <span><strong>Contact</strong></span>
+          <span><strong>Contact:</strong></span>
           <span>{{ props.invoice.CustomerContactName }}</span>
         </div>
         <div class="label">
-          <span><strong>Phone</strong></span>
+          <span><strong>Phone:</strong></span>
           <span>{{ props.invoice.CustomerPhone }}</span>
         </div>
         <div class="label">
-          <span><strong>Email</strong></span>
+          <span><strong>Email:</strong></span>
           <span>{{ props.invoice.CustomerEmail }}</span>
         </div>
         <div class="label">
-          <span><strong>Website</strong></span>
+          <span><strong>Website:</strong></span>
           <span>{{ props.invoice.CustomerWebsite }}</span>
         </div>
         <div class="label">
-          <span><strong>GSTIN</strong></span>
+          <span><strong>GSTIN:</strong></span>
           <span>{{ props.invoice.CustomerGstin }}</span>
         </div>
       </div>
@@ -64,7 +64,7 @@
         </div>
         <div class="shipping-address">
           <div class="label">
-            <span><strong>Shipping Address</strong></span>
+            <span><strong>Shipping Address:</strong></span>
             <span>
               {{ props.invoice.ShippingAddress.AddressText }}<br>
               {{ props.invoice.ShippingAddress.City }}
@@ -73,16 +73,16 @@
               {{ props.invoice.ShippingAddress.Country }}
             </span>
             
-            <span><strong>City</strong></span>
+            <span><strong>City:</strong></span>
             <span>{{ props.invoice.ShippingAddress.City }}</span>
 
-            <span><strong>State</strong></span>
+            <span><strong>State:</strong></span>
             <span>{{ props.invoice.ShippingAddress.State }}</span>
 
-            <span><strong>ZIP Code</strong></span>
+            <span><strong>ZIP Code:</strong></span>
             <span>{{ props.invoice.ShippingAddress.PostalCode }}</span>
 
-            <span><strong>Country</strong></span>
+            <span><strong>Country:</strong></span>
             <span>{{ props.invoice.ShippingAddress.Country }}</span>
           </div>
         </div>