showing more useful information in invoice items table

3 files changed, 46 insertions, 12 deletions

diff --git a/src/App.vue b/src/App.vue
index c637566..478a2c7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@ import sidebar from './components/sidebar.vue'
   <navbar />
   -->
   <sidebar />
-  <main class="m-3">
+  <main>
     <RouterView />
   </main>
 </template>
@@ -17,9 +17,17 @@ import sidebar from './components/sidebar.vue'
 <style>
 main {
   width: 100%;
+  overflow-x: scroll;
+  padding: 1rem 1.5rem 0 1.5rem;
 }
 #app {
   display: flex;
   flex-direction: row;
+  overflow-y: hidden;
+  max-height: 100vh;
+}
+.sup {
+  vertical-align: super;
+  font-size: 0.9em;
 }
 </style>
diff --git a/src/components/invoice_items_table.vue b/src/components/invoice_items_table.vue
index 8d6ea6a..865ade2 100644
--- a/src/components/invoice_items_table.vue
+++ b/src/components/invoice_items_table.vue
@@ -11,11 +11,7 @@ const toast = useToast({
 
 const handleDelete = async (id) => {
   try {
-    const res = await axios.delete(`/invoice/item/${id}`)
-    if (res.status === 200) {
-      toast.success('Successfully deleted item')
-    }
-
+    await axios.delete(`/invoice/item/${id}`)
     emit("refresh")
   } catch (err) {
     toast.error('An unhandled exception occoured. Please check logs')
@@ -40,7 +36,9 @@ const handleDelete = async (id) => {
         <th scope="col">Brand</th>
         <th scope="col">HSN</th>
         <th scope="col">Unit Price</th>
-        <th scope="col">UOM</th>
+        <th scope="col">GST <span class="sup text-muted">%</span></th>
+        <th scope="col">Quantity <span class="sup text-muted">Unit</span></th>
+        <th scope="col">Amount</th>
 
         <th scope="col" class="table-action-column">
           <div class="wrapper">
@@ -60,7 +58,11 @@ const handleDelete = async (id) => {
         <td>{{ item.BrandName }}</td>
         <td>{{ item.HSN }}</td>
         <td>{{ item.UnitPrice }}</td>
-        <td>{{ item.UnitOfMeasure }}</td>
+        <td>
+          {{ item.GSTValue }} <span class="sup text-muted">{{ item.GSTPercentage }}%</span>
+        </td>
+        <td>{{ item.Quantity }} <span class="sup text-muted">{{ item.UnitOfMeasure }}</span></td>
+        <td>{{ item.TotalAmount }} <span class="sup text-muted">{{ item.AmountWithoutGST }} + {{ item.TotalGSTValue }}</span> </td>
 
         <td class="table-action-column">
           <div class="wrapper">
diff --git a/src/views/EditInvoice.vue b/src/views/EditInvoice.vue
index 958846e..adc172b 100644
--- a/src/views/EditInvoice.vue
+++ b/src/views/EditInvoice.vue
@@ -3,8 +3,10 @@ import { ref, onMounted, toRaw } from 'vue'
 import { useRoute } from "vue-router"
 import { useToast } from 'vue-toast-notification'
 import axios from 'axios'
+import currency from "currency.js"
 
 import Invoice from "./../classes/invoice"
+import InvoiceItem from "./../classes/invoice_item"
 
 import invoiceHeader from './../components/invoice_header.vue'
 import itemSelector from './../components/item_selector.vue'
@@ -18,11 +20,33 @@ const route = useRoute()
 
 const invoiceId = route.params.id
 const invoice = ref(new Invoice())
-const items = ref([])
+const items = ref<any[]>([])
 
 const invoiceIsLoading = ref(true)
 const itemsTableIsLoading = ref(true)
 
+const processItems = (items: InvoiceItem[]) => items.map((x: InvoiceItem) => {
+  const quantity = currency(x.Quantity)
+  const unitPrice = currency(x.UnitPrice)
+  const gstPercentage = currency(x.GSTPercentage)
+  const gstValue = unitPrice.multiply(gstPercentage).divide(100)
+  const totalGSTValue = gstValue.multiply(quantity)
+  const amountWithoutGST = unitPrice.multiply(quantity)
+
+  return({
+    ...x
+    , Quantity: quantity
+    , UnitPrice: unitPrice
+    , GSTValue: gstValue
+    , TotalGSTValue: totalGSTValue
+    , AmountWithoutGST: amountWithoutGST
+    , TotalAmount: amountWithoutGST.add(totalGSTValue)
+  })
+})
+          //{{ currency(item.UnitPrice).add(currency(item.UnitPrice).multiply(currency(item.GSTPercentage)).divide(100)).multiply(currency(item.Quantity)) }}
+          //  {{ currency(item.UnitPrice).multiply(currency(item.Quantity)) }}
+          //  {{ currency(item.UnitPrice).multiply(currency(item.GSTPercentage)).divide(100).multiply(item.Quantity) }}
+
 const getInvoice = async () => {
   invoiceIsLoading.value = true
   itemsTableIsLoading.value = true
@@ -30,7 +54,7 @@ const getInvoice = async () => {
   try {
     const r = await axios.get(`/invoice/${invoiceId}`)
     invoice.value = r.data.data
-    items.value = r.data.data.Items
+    items.value = processItems(r.data.data.Items)
   } catch (err) {
     toast.error('An unhandled exception occoured. Please check logs')
     console.error(err)
@@ -41,13 +65,13 @@ const getInvoice = async () => {
 }
 
 const refreshItems = async () => {
-  items.value = []
+  //items.value = []
   itemsTableIsLoading.value = true
 
   try {
     const res = await axios.get(`/invoice/${invoiceId}/item`)
     if (res.status === 200) {
-      items.value = res.data.data
+      items.value = processItems(res.data.data)
     }
   } catch (err) {
     toast.error('An unhandled exception occoured. Please check logs')