populated items list and total in print preview

7 files changed, 129 insertions, 133 deletions

diff --git a/src/components/PrintPreview.vue b/src/components/PrintPreview.vue
index ecbda88..1e98eb7 100644
--- a/src/components/PrintPreview.vue
+++ b/src/components/PrintPreview.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
+  import { ref, toRaw, onMounted } from "vue"
+
   import PrintPreviewHeader from './PrintPreviewHeader.vue'
   import PrintPreviewRecipientDetails from './PrintPreviewRecipientDetails.vue'
   import PrintPreviewItemsList from './PrintPreviewItemsList.vue'
+  import PrintPreviewFooter from './PrintPreviewFooter.vue'
 
-  const props = defineProps(["invoice"])
-
-  setTimeout(() => {
-    console.log(props.invoice)
-  }, 1000)
+  const props = defineProps(["invoice", "total"])
 </script>
 
 <template>
@@ -18,6 +17,8 @@
       :invoice="props.invoice"/>
     <PrintPreviewItemsList 
       :items="props.invoice.Items"/>
+    <PrintPreviewFooter 
+      :total="props.total"/>
   </div>
 </template>
 
@@ -28,4 +29,9 @@
 .print-preview p {
   margin: 0;
 }
+.print-preview {
+  display: grid;
+  grid-template-rows: 1fr 2fr auto 1.5fr;
+  row-gap: 1em;
+}
 </style>
diff --git a/src/components/PrintPreviewFooter.vue b/src/components/PrintPreviewFooter.vue
new file mode 100644
index 0000000..4594a92
--- /dev/null
+++ b/src/components/PrintPreviewFooter.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+  import { toRaw, onMounted } from "vue"
+  import { InvoiceTotal } from "./../classes/invoice.ts"
+
+  const props = defineProps(["total"])
+</script>
+
+<template>
+  <div class="print-preview-footer">
+    <div class="footer--col1">
+      <div class="total-words-label"></div>
+      <div class="total-words"></div>
+    </div>
+    <div class="footer--col2">
+      <div class="total-summary">
+        <span class="total-summary-row">
+          <span><strong>Total Before Tax</strong></span>
+          <span>{{props.total.TotalWithoutGST}}</span>
+        </span>
+
+        <span class="total-summary-row">
+          <span><strong>Total Tax Amount</strong></span>
+          <span>{{props.total.TotalGSTValue}}</span>
+        </span>
+
+        <span class="total-summary-row">
+          <span><strong>Total Amount</strong></span>
+          <span>{{props.total.TotalWithGST}}</span>
+        </span>
+      </div>
+      <div class="firm-signature-wrapper">
+        <img src="../assets/placeholdersignature.png"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.print-preview-footer {
+  border: 1px solid gray;
+  display: grid;
+  grid-template-columns: 4fr 3fr;
+  width: 100%;
+}
+.footer--col1 {
+  border-right: 1pt solid gray;
+  display: grid;
+  grid-template-rows: 2fr 8fr;
+}
+.firm-signature-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 1.7in;
+}
+.firm-signature-wrapper img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.total-summary {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+.total-summary-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+</style>
diff --git a/src/components/PrintPreviewHeader.vue b/src/components/PrintPreviewHeader.vue
index 33f82f2..4492eb5 100644
--- a/src/components/PrintPreviewHeader.vue
+++ b/src/components/PrintPreviewHeader.vue
@@ -49,7 +49,6 @@
   grid-template-columns: 1.7in 2.4in auto;
   grid-column-gap: 1em;
   width: 100%;
-  margin-bottom: 1em;
 }
 .logo-container {
   display: flex;
diff --git a/src/components/PrintPreviewItemsList.vue b/src/components/PrintPreviewItemsList.vue
index 72f0fc1..2e81e9a 100644
--- a/src/components/PrintPreviewItemsList.vue
+++ b/src/components/PrintPreviewItemsList.vue
@@ -12,20 +12,32 @@
       <div class="cell">Unit Price</div>
       <div class="cell">Discount</div>
       <div class="cell">Taxable Value</div>
-      <div class="cell">GST</div>
+      <div class="cell nested-col-header">
+        <div>GST</div>
+        <div class="nested-col">
+          <div class="nested-cell">%</div>
+          <div class="nested-cell">cgst</div>
+          <div class="nested-cell nested-cell-last">sgst</div>
+        </div>
+      </div>
       <div class="cell">Total</div>
     </div>
     <div class="item-list">
       <div v-for="(item, index) in props.items" :key="item['id']" class="item-list-row">
-        <div class="cell">{{ index + 1 }}</div>
-        <div class="cell">{{ item.Name }}</div>
+        <div class="cell text-center">{{ index + 1 }}</div>
+        <div class="cell">{{ item.Brand }} {{ item.Name }}</div>
         <div class="cell">{{ item.HSN }}</div>
-        <div class="cell">1</div>
-        <div class="cell">100</div>
-        <div class="cell">0</div>
-        <div class="cell">10</div>
-        <div class="cell">18</div>
-        <div class="cell">1000</div>
+        <div class="cell">{{ item.Quantity }}</div>
+        <div class="cell">{{ item.UnitPrice }}</div>
+        <div class="cell">null</div>
+        <div class="cell">{{ item.AmountWithoutGST }}</div>
+        <div class="cell nested-col">
+          <!-- TODO: check if cgst+sgst or igst needs to be calculated -->
+          <div class="nested-cell">{{ item.GSTPercentage }}%</div>
+          <div class="nested-cell">{{ item.TotalGSTValue.distribute(2)[0] }}</div>
+          <div class="nested-cell nested-cell-last">{{ item.TotalGSTValue.distribute(2)[1] }}</div>
+        </div>
+        <div class="cell">{{ item.TotalAmount }}</div>
       </div>
     </div>
   </div>
@@ -33,7 +45,6 @@
 
 <style>
 .items-list-wrapper {
-  margin-top: 1em;
   border-top: 1px solid gray;
   border-left: 1px solid gray;
 }
@@ -43,7 +54,13 @@
 }
 .items-list-header, .item-list-row {
   display: grid;
-  grid-template-columns: 0.3in 2in 0.5in 0.5in 0.5in 0.6in 0.77in 1.5in 0.6in;
+  grid-template-columns: 0.3fr 3fr 0.8fr 0.8fr 1fr 1fr 1.1fr 2fr 0.8fr;
+}
+.nested-cell {
+  border-right: 1px solid gray;
+}
+.nested-cell-last {
+  border-right: none;
 }
 .items-list-header .cell {
   font-weight: bold;
@@ -56,4 +73,16 @@
   display: flex;
   flex-direction: column;
 }
+.items-list-header .nested-col-header {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr;
+}
+.items-list-header .nested-col {
+  border-top: 1px solid gray;
+}
+.nested-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
 </style>
diff --git a/src/components/invoice_header.vue b/src/components/invoice_header.vue
index fe35980..846c811 100644
--- a/src/components/invoice_header.vue
+++ b/src/components/invoice_header.vue
@@ -3,112 +3,9 @@ const props = defineProps(["invoice"])
 </script>
 
 <template>
-  <div class="row g-3">
-    <div class="col-md-2"><!-- spacer --></div>
-
-    <!-- customer details -->
-    <div class="col-md-3">
-      <table class="table">
-        <tr>
-          <td>Invoice Number</td>
-          <td>{{ props.invoice.InvoiceNumber }}</td>
-        </tr>
-
-        <tr>
-          <td>Invoice Date</td>
-          <td>{{ props.invoice.InvoiceDate }}</td>
-        </tr>
-
-        <tr>
-          <td>Customer</td>
-          <td>{{ props.invoice.CustomerName }}</td>
-        </tr>
-
-        <tr>
-          <td>GSTIN</td>
-          <td>{{ props.invoice.CustomerGstin }}</td>
-        </tr>
-
-        <tr>
-          <td>Contact Name</td>
-          <td>{{ props.invoice.CustomerContactName }}</td>
-        </tr>
-
-        <tr>
-          <td>Phone</td>
-          <td>{{ props.invoice.CustomerPhone }}</td>
-        </tr>
-
-        <tr>
-          <td>Email</td>
-          <td>{{ props.invoice.CustomerEmail }}</td>
-        </tr>
-
-        <tr>
-          <td>Website</td>
-          <td>{{ props.invoice.CustomerWebsite }}</td>
-        </tr>
-      </table>
-    </div>
-
-    <!-- billing address -->
-    <div class="col-md-3">
-      <table class="table">
-        <tr>
-          <td>Billing Address</td>
-          <td>{{ props.invoice.BillingAddress.AddressText }}</td>
-        </tr>
-
-        <tr>
-          <td>City</td>
-          <td>{{ props.invoice.BillingAddress.City }}</td>
-        </tr>
-
-        <tr>
-          <td>State</td>
-          <td>{{ props.invoice.BillingAddress.State }}</td>
-        </tr>
-
-        <tr>
-          <td>Postal Code</td>
-          <td>{{ props.invoice.BillingAddress.PostalCode }}</td>
-        </tr>
-
-        <tr>
-          <td>Country</td>
-          <td>{{ props.invoice.BillingAddress.Country }}</td>
-        </tr>
-      </table>
-    </div>
-
-    <!-- shipping address -->
-    <div class="col-md-3">
-      <table class="table">
-        <tr>
-          <td>Shipping Address</td>
-          <td>{{ props.invoice.ShippingAddress.AddressText }}</td>
-        </tr>
-
-        <tr>
-          <td>City</td>
-          <td>{{ props.invoice.ShippingAddress.City }}</td>
-        </tr>
-
-        <tr>
-          <td>State</td>
-          <td>{{ props.invoice.ShippingAddress.State }}</td>
-        </tr>
-
-        <tr>
-          <td>Postal Code</td>
-          <td>{{ props.invoice.ShippingAddress.PostalCode }}</td>
-        </tr>
-
-        <tr>
-          <td>Country</td>
-          <td>{{ props.invoice.ShippingAddress.Country }}</td>
-        </tr>
-      </table>
+  <div>
+    <div class="row">
+      <div class="col"></div>
     </div>
   </div>
 </template>
diff --git a/src/components/invoice_items_table.vue b/src/components/invoice_items_table.vue
index ad1bf94..8b6c71d 100644
--- a/src/components/invoice_items_table.vue
+++ b/src/components/invoice_items_table.vue
@@ -27,20 +27,19 @@ const handleDelete = async (id) => {
     </div>
   </div>
 
-  <table v-else :class="`invoice-items-table table table-striped table-hover ${props.preview ? 'table-light' : ''}`">
+  <table v-else :class="`invoice-items-table table table-striped table-hover`">
     <thead>
       <tr>
         <th scope="col">#</th>
         <th scope="col">Item Name</th>
-        <th v-if="!props.preview" scope="col">Brand</th>
+        <th scope="col">Brand</th>
         <th scope="col">HSN</th>
         <th scope="col">Unit Price</th>
-        <th v-if="props.preview" scope="col">Taxable Value</th>
         <th scope="col">GST</th>
         <th scope="col">Quantity</th>
         <th scope="col">Amount</th>
 
-        <th v-if="!props.preview" scope="col" class="table-action-column">
+        <th scope="col" class="table-action-column">
           <div class="wrapper">
             <button class="btn btn-dark" v-on:click="emit('refresh')">
               <i class="bi bi-arrow-clockwise"></i>
@@ -56,14 +55,12 @@ const handleDelete = async (id) => {
         <td class="item-name-cell multi-row">
           <span>{{ item.Name }}</span>
           <span class="text-muted">
-            <span v-if="props.preview">{{ item.BrandName }}</span>
             {{ item.Description }}
           </span>
         </td>
-        <td v-if="!props.preview">{{ item.BrandName }}</td>
+        <td>{{ item.BrandName }}</td>
         <td>{{ item.HSN }}</td>
         <td>{{ item.UnitPrice }}</td>
-        <td v-if="props.preview">{{ item.AmountWithoutGST }}</td>
         <td>
           {{ item.GSTValue }} <span class="sup text-muted">{{ item.GSTPercentage }}%</span>
         </td>
@@ -72,7 +69,7 @@ const handleDelete = async (id) => {
         </td>
         <td>{{ item.TotalAmount }}</td>
 
-        <td v-if="!props.preview" class="table-action-column">
+        <td class="table-action-column">
           <div class="wrapper">
             <button class="btn" data-bs-toggle="dropdown" aria-expanded="false">
               <i class="bi bi-caret-down-fill"></i>
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index 46f4f0c..ade83b7 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -16,7 +16,7 @@ watch(
 <template>
   <div id="sidebar" class="d-flex flex-column flex-shrink-0 bg-dark border-secondary border-end">
     <RouterLink class="d-flex justify-content-center align-items-center p-3 link-dark text-decoration-none navbar-brand text-white" to="/">
-      <img src="https://vidhukant.com/images/vidhukant.webp" alt="profile photo" width="32" height="32" class="rounded-circle">
+      <!--img src="" alt="profile photo" width="32" height="32" class="rounded-circle"-->
     </RouterLink>
 
     <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
@@ -88,7 +88,7 @@ watch(
 
     <div class="dropdown border-top border-secondary">
       <a href="#" class="d-flex align-items-center justify-content-center p-3 link-light text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false">
-        <img src="https://vidhukant.com/images/vidhukant.webp" alt="profile photo" width="24" height="24" class="rounded-circle">
+        <!--img src="" alt="profile photo" width="24" height="24" class="rounded-circle"-->
       </a>
       <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser3">
         <li><a class="text-white dropdown-item" href="#">Placeholder</a></li>