From 300a4eb39ccea56da416d83400cddc97118e1649 Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
Date: Wed, 12 Oct 2022 21:04:39 +0530
Subject: showing total (sum) values in InvoiceItemTable

---
 src/classes/item.js                         |  17 ++++
 src/components/pickers/item-picker.js       |  10 +--
 src/components/tables/invoice-item-table.js | 116 ++++++++++++++++++----------
 src/components/tables/scss/table.scss       |   8 ++
 src/views/invoice/new.js                    |  13 +++-
 5 files changed, 113 insertions(+), 51 deletions(-)

(limited to 'src')

diff --git a/src/classes/item.js b/src/classes/item.js
index 0486262..639a63f 100644
--- a/src/classes/item.js
+++ b/src/classes/item.js
@@ -64,3 +64,20 @@ export const editItem = (item, ok, fail) => {
     .then(res => ok())
     .catch(err => fail())
 }
+
+export const getDiscountValue = (item) => item.DiscountPercentage > 0
+  ? ((item.UnitPrice * item.Quantity)/100) * item.DiscountPercentage : 0.00;
+
+export const getGSTValue = (item) => item.GSTPercentage > 0
+  ? (((item.UnitPrice * item.Quantity) - getDiscountValue(item))/100) * item.GSTPercentage : 0.00;
+
+export const getAmount = (item) =>
+  (item.UnitPrice * item.Quantity) - getDiscountValue(item) + getGSTValue(item)
+
+export const calcSum = (items) => items.reduce((prev, current, id, arr) => ({
+  GST: prev.GST + getGSTValue(current),
+  Discount: prev.Discount + getDiscountValue(current),
+  UnitPrice: prev.UnitPrice + current.UnitPrice,
+  Amount: prev.Amount + getAmount(current),
+  Quantity: prev.Quantity + current.Quantity
+}), {GST: 0, Discount: 0, UnitPrice: 0, Amount: 0, Quantity: 0});
diff --git a/src/components/pickers/item-picker.js b/src/components/pickers/item-picker.js
index 339319f..d756427 100644
--- a/src/components/pickers/item-picker.js
+++ b/src/components/pickers/item-picker.js
@@ -37,10 +37,10 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => {
   }
 
   const handleInput = e => {
-    const { name, value } = e.target;
+    const { name, value, type } = e.target;
     setItem(prevItem => ({
       ...prevItem,
-      [name]: value
+      [name]: type === "number" ? parseFloat(value) : value
     }));
   }
 
@@ -65,7 +65,7 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => {
                 <option key="placeholder" value={""} disabled>Select an Item</option>
                 {items.map(i =>
                   <option key={i.Id} value={i.Id} disabled={invoiceItems.some(j => j.Id === i.Id)}>
-                    {i.Name}{i.Brand.Id === null ? "" : " - " + i.Brand.Name}
+                    {i.Name}{i.Brand.Id === undefined ? "" : " - " + i.Brand.Name}
                   </option>
                 )}
               </select>
@@ -76,8 +76,8 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => {
                   type="number"
                   value={item.Quantity}
                   name="Quantity"
-                  min={item.MinQuantity}
-                  max={item.MaxQuantity}
+                  min={item.MinQuantity > 0 ? item.MinQuantity : 1}
+                  max={item.MaxQuantity > 0 ? item.MaxQuantity : null}
                   onChange={handleInput} />
             </label>
             <label className={"narrow"}>
diff --git a/src/components/tables/invoice-item-table.js b/src/components/tables/invoice-item-table.js
index 6b0a1a5..12ee52e 100644
--- a/src/components/tables/invoice-item-table.js
+++ b/src/components/tables/invoice-item-table.js
@@ -16,11 +16,11 @@
  */
 
 import './scss/table.scss';
-import { deleteItem } from './../../classes/item';
+import { deleteItem, getDiscountValue, getGSTValue, getAmount } from './../../classes/item';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons'
 
-const ItemTable = ({items, setItems}) => {
+const ItemTable = ({items, setItems, isInterstate, sum}) => {
   const handleEdit = (i) => {
     alert("coming soon; please delete and add item again");
   }
@@ -29,15 +29,7 @@ const ItemTable = ({items, setItems}) => {
     setItems(items.filter(i => i.Id !== item.Id));
   }
 
-  /* TODO: all the math should be done here
-   * i.e CGST, IGST, total price (i.e price x quantity)
-   * discount/gst value (i.e number instead of percentage)
-   *
-   * the total cost and the like may be handled by
-   * parent component since they are needed
-   * by other things (probably)
-   *
-   * all the values will be calculated on runtime.
+  /* all the values will be calculated on runtime.
    * the database will only store the unit price
    * and gst/discount *percentages* and everything else
    * will be calculated on runtime. i.e the
@@ -45,40 +37,80 @@ const ItemTable = ({items, setItems}) => {
    * those same values shown to the user while creating the invoice
    */
   return (
-    <table>
-      <thead>
-        <tr>
-          <th>S. No</th>
-          <th>Name</th>
-          <th>Description</th>
-          <th>Brand Name</th>
-          <th>UOM</th>
-          <th>HSN</th>
-          <th>Unit Price</th>
-          <th>GST %</th>
-          {/* TODO: CGST, IGST, etc */}
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        {items && items.map((i, id=id+1) => (
-          <tr key={id}>
-            <td>{id+1}</td>
-            <td className={i.Name === "" ? "empty" : ""}>{i.Name}</td>
-            <td className={i.Description === "" ? "empty" : ""}>{i.Description}</td>
-            <td className={i.Brand.Name === "" ? "empty" : ""}>{i.Brand.Name}</td>
-            <td className={i.UnitOfMeasure === "" ? "empty" : ""}>{i.UnitOfMeasure}</td>
-            <td className={i.HSN === "" ? "empty" : ""}>{i.HSN}</td>
-            <td className={i.UnitPrice === 0.0 ? "empty" : ""}>{i.UnitPrice}</td>
-            <td className={i.GSTPercentage === 0.0 ? "empty" : ""}>{i.GSTPercentage}</td>
+    <>
+      <table>
+        <thead>
+          <tr>
+            <th>S. No</th>
+            <th>Name</th>
+            <th>Description</th>
+            <th>Brand Name</th>
+            <th>Quantity</th>
+            <th>UOM</th>
+            <th>Unit Price</th>
+            <th>Discount (%)</th>
+            {isInterstate
+              ? <th>IGST (%)</th>
+              : <>
+                <th>SGST (%)</th>
+                <th>CGST (%)</th>
+              </>
+            }
+            <th>HSN</th>
+            <th>Amount</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {items && items.map((i, id) => (
+            <tr key={id}>
+              <td>{id+1}</td>
+              <td className={i.Name === "" ? "empty" : ""}>{i.Name}</td>
+              <td className={i.Description === "" ? "empty" : ""}>{i.Description}</td>
+              <td className={i.Brand.Name === "" ? "empty" : ""}>{i.Brand.Name}</td>
+              <td>{i.Quantity}</td>
+              <td className={i.UnitOfMeasure === "" ? "empty" : ""}>{i.UnitOfMeasure}</td>
+              <td className={i.UnitPrice > 0 ? "" : "empty"}>{i.UnitPrice}</td>
+              <td className={i.DiscountPercentage > 0 ? "" : "empty"}>{getDiscountValue(i)} ({i.DiscountPercentage}%)</td>
+              {isInterstate
+                ? <td className={i.GSTPercentage > 0 ? "" : "empty"}>{getGSTValue(i)} ({i.GSTPercentage}%)</td>
+                : <>
+                  <td className={i.GSTPercentage > 0 ? "" : "empty"}>{getGSTValue(i) / 2} ({i.GSTPercentage / 2}%)</td>
+                  <td className={i.GSTPercentage > 0 ? "" : "empty"}>{getGSTValue(i) / 2} ({i.GSTPercentage / 2}%)</td>
+                </>
+              }
+              <td className={i.HSN === "" ? "empty" : ""}>{i.HSN}</td>
+              <td>{getAmount(i)}</td>
+              <td className={"buttons"}>
+                <FontAwesomeIcon icon={faPencil} onClick={() => handleEdit(i)}/>
+                <FontAwesomeIcon icon={faTrashCan} onClick={() => handleDelete(i)}/>
+              </td>
+            </tr>
+          ))}
+          <tr className={"total"}>
+            <td>Total</td>
+            <td className={"empty"}></td>
+            <td className={"empty"}></td>
+            <td className={"empty"}></td>
+            <td className={sum.Quantity > 0 ? "" : "empty"}>{sum.Quantity}</td>
+            <td className={"empty"}></td>
+            <td className={sum.UnitPrice > 0 ? "" : "empty"}>{sum.UnitPrice}</td>
+            <td className={sum.Discount > 0 ? "" : "empty"}>{sum.Discount}</td>
+            {isInterstate
+              ? <td className={sum.GST > 0 ? "" : "empty"}>{sum.GST}</td>
+              : <>
+                <td className={sum.GST > 0 ? "" : "empty"}>{sum.GST / 2}</td>
+                <td className={sum.GST > 0 ? "" : "empty"}>{sum.GST / 2}</td>
+              </>
+            }
+            <td className={"empty"}></td>
+            <td className={sum.Amount > 0 ? "" : "empty"}>{sum.Amount}</td>
             <td className={"buttons"}>
-              <FontAwesomeIcon icon={faPencil} onClick={() => handleEdit(i)}/>
-              <FontAwesomeIcon icon={faTrashCan} onClick={() => handleDelete(i)}/>
             </td>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </tbody>
+      </table>
+    </>
   );
 }
 
diff --git a/src/components/tables/scss/table.scss b/src/components/tables/scss/table.scss
index 13e247a..0bb5a48 100644
--- a/src/components/tables/scss/table.scss
+++ b/src/components/tables/scss/table.scss
@@ -53,3 +53,11 @@ table {
       white-space: pre-line;
     }
 }
+
+table .total {
+    font-size: 1.2em;
+    color: $primaryAccentColor;
+    td:not(.empty) {
+        border-color: $secondaryAccentColor;
+    }
+}
diff --git a/src/views/invoice/new.js b/src/views/invoice/new.js
index 70bc545..1d162ad 100644
--- a/src/views/invoice/new.js
+++ b/src/views/invoice/new.js
@@ -20,6 +20,7 @@ import ItemPicker from '../../components/pickers/item-picker';
 import ItemTable from '../../components/tables/invoice-item-table';
 
 import { InvoiceClient } from '../../classes/client';
+import { calcSum } from '../../classes/item';
 
 import { useState, useEffect } from 'react';
 
@@ -27,10 +28,12 @@ const NewInvoicePage = () => {
   const [client, setClient] = useState(new InvoiceClient());
   const [shippingAddressId, setShippingAddressId] = useState(-1);
   const [items, setItems] = useState([]);
+  const [isInterstate, setIsInterstate] = useState(false);
+  const [sum, setSum] = useState({});
 
-  useEffect(() => {
-    setShippingAddressId(-1);
-  }, [client]);
+  useEffect(() => setShippingAddressId(-1), [client]);
+
+  useEffect(() => setSum(calcSum(items)), [items]);
 
   return (
     <>
@@ -44,7 +47,9 @@ const NewInvoicePage = () => {
         addInvoiceItem={(item) => setItems(prev => [...prev, item])} />
       <ItemTable
         items={items}
-        setItems={setItems} />
+        setItems={setItems}
+        isInterstate={isInterstate}
+        sum={sum} />
     </>
   );
 }
-- 
cgit v1.2.3