Ported SummaryDisplay to tsx

4 files changed, 125 insertions, 139 deletions

diff --git a/src/components/Display/SummaryDisplay.tsx b/src/components/Display/SummaryDisplay.tsx
new file mode 100644
index 0000000..9488836
--- /dev/null
+++ b/src/components/Display/SummaryDisplay.tsx
@@ -0,0 +1,116 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+import React from "react";
+import { Item } from "./../../interfaces"
+import "./Display.scss";
+
+interface props {
+  items: Item[]
+}
+
+interface FullSummary {
+  TotalRawPrice: number // total price without gst/discount
+  TotalDiscount: number // total amount of discount
+  TotalGST: number // total gst to be paid
+  TotalPriceAfterDiscount: number
+  TotalPriceAfterGST: number
+  TotalRoundedOff: number
+}
+
+const getFullSummary = (items: Item[]): FullSummary => {
+  var rawPrice: number = 0;
+  var totalDiscount: number = 0;
+  var totalGST: number = 0;
+
+  for (let i in items) {
+    const item = items[i];
+    rawPrice += item.TotalValue;
+    totalDiscount += item.DiscountValue;
+    totalGST += item.TotalGSTValue;
+  }
+
+  const totalPriceAfterDiscount: number = rawPrice - totalDiscount;
+  const totalPriceAfterGST: number = totalPriceAfterDiscount + totalGST;
+  const totalRoundedOff: number = parseFloat(Math.abs(
+    (totalPriceAfterGST) - Math.round(totalPriceAfterGST)
+  ).toFixed(2)); // rounded off value in 0.00 format
+
+  return {
+    TotalRawPrice:           rawPrice,
+    TotalDiscount:           totalDiscount,
+    TotalGST:                totalGST,
+    TotalPriceAfterDiscount: totalPriceAfterDiscount,
+    TotalPriceAfterGST:      totalPriceAfterGST,
+    TotalRoundedOff:         totalRoundedOff
+  }
+}
+
+// export const SummaryDisplayTR: React.FC<props> = (props) => {
+//   const summary = getBasicSummary(props.items);
+// 
+//   return (
+//     <tr className={"SummaryDisplayTR"}>
+//       <td>Total</td>
+//       <td className={"disabledBorder"}></td>
+//       <td className={"disabledBorder"}></td>
+//       <td>{summary.TotalQuantity}</td>
+//       <td className={"disabledBorder"}></td>
+//       <td className={"disabledBorder"}></td>
+//       <td className={"disabledBorder"}></td>
+//       <td className={"disabledBorder"}></td>
+//       <td className={"disabledBorder"}></td>
+//       <td>{summary.TotalRawPrice}</td>
+//     </tr>
+//   );
+// }
+
+const SummaryDisplay: React.FC<props> = (props) => {
+  const summary: FullSummary = getFullSummary(props.items);
+  return (
+    <div className={"SummaryDisplay"}>
+      <h1>Summary</h1>
+      <table>
+        <tbody>
+          <tr>
+            <td>Base Total</td>
+            <td>{summary.TotalRawPrice}</td>
+          </tr>
+
+          {summary.TotalDiscount !== 0.00 &&
+            <tr>
+              <td>After Discount</td>
+              <td>{summary.TotalPriceAfterDiscount}</td>
+              <td>(-{summary.TotalDiscount})</td>
+            </tr>
+          } 
+
+          <tr>
+            <td>After Tax</td>
+            <td>{summary.TotalRawPrice + summary.TotalGST}</td>
+            <td>(+{summary.TotalGST})</td>
+          </tr>
+
+          {summary.TotalRoundedOff !== 0.00 &&
+            <tr> 
+              <td>Rounded Off</td> 
+              <td>{summary.TotalRoundedOff}</td> 
+            </tr>
+          }
+
+          <tr className={"grandTotal"}>
+            <td>Grand Total</td> 
+            <td>{summary.TotalRawPrice + (summary.TotalGST - summary.TotalDiscount)}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default SummaryDisplay;
diff --git a/src/components/Display/SummaryDisplay.txt b/src/components/Display/SummaryDisplay.txt
deleted file mode 100644
index e06eac5..0000000
--- a/src/components/Display/SummaryDisplay.txt
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
- * OpenBills - Self hosted browser app to generate and keep track of simple invoices
- * Version - 0
- * Licensed under the MIT license - https://opensource.org/licenses/MIT
- *
- * Copyright (c) 2021 Vidhu Kant Sharma
-*/
-
-import React from "react";
-import "./Display.scss";
-
-interface props {
-}
-
-const getBasicSummary = (items) => {
-  let totalRawPrice = 0;
-  let totalQuantity = 0;
-
-  items.some((i) => {
-      totalRawPrice += i.TotalPrice;
-      totalQuantity += i.Quantity;
-      return null;
-    }
-  )
-
-  return (
-    {
-      "TotalRawPrice": totalRawPrice,
-      "TotalQuantity": totalQuantity
-    }
-  );
-}
-
-// TODO: remove mutability from this function
-const getFullSummary = (items) => {
-  let totalRawPrice = 0;
-  let totalDiscount = 0; // to be subtracted from totalRawPrice
-  let totalTax = 0;
-
-  items.some((i) => {
-    const itemTotalPrice = i.TotalPrice;
-    const itemDiscount = (i.Discount / 100) * itemTotalPrice;
-
-    totalRawPrice += itemTotalPrice;
-    totalDiscount += itemDiscount;
-    totalTax += i.igst === "" 
-      ? ((i.sgst + i.cgst) / 100) * (itemTotalPrice - itemDiscount)
-      : (i.igst / 100) * (itemTotalPrice - itemDiscount);
-    return null;
-  })
-
-
-
-  const totalPriceAfterTax = (totalRawPrice - totalDiscount) + totalTax;
-  const totalRoundedOff = Math.abs(totalPriceAfterTax - Math.round(totalPriceAfterTax));
-  return (
-    {
-      "TotalRawPrice":           parseFloat(totalRawPrice.toFixed(2)),
-      "TotalDiscountPrice":      parseFloat(totalDiscount.toFixed(2)),
-      "TotalPriceAfterDiscount": parseFloat((totalRawPrice - totalDiscount).toFixed(2)),
-      "TotalTaxAmount":          parseFloat(totalTax.toFixed(2)),
-      "TotalPriceAfterTax":      parseFloat(totalPriceAfterTax.toFixed(2)),
-      "RoundedOff":              parseFloat(totalRoundedOff.toFixed(2)),
-      "TotalPrice":              Math.round(totalPriceAfterTax)
-    }
-  );
-}
-
-export const SummaryDisplayTR: React.FC<props> = (props) => {
-  const summary = getBasicSummary(props.items);
-
-  return (
-    <tr className={"SummaryDisplayTR"}>
-      <td>Total</td>
-      <td className={"disabledBorder"}></td>
-      <td className={"disabledBorder"}></td>
-      <td>{summary.TotalQuantity}</td>
-      <td className={"disabledBorder"}></td>
-      <td className={"disabledBorder"}></td>
-      <td className={"disabledBorder"}></td>
-      <td className={"disabledBorder"}></td>
-      <td className={"disabledBorder"}></td>
-      <td>{summary.TotalRawPrice}</td>
-    </tr>
-  );
-}
-
-const SummaryDisplay = (props) => {
-  const summary = getFullSummary(props.items);
-
-  return (
-    <div className={"SummaryDisplay"}>
-      <h1>Summary</h1>
-      <table>
-        <tbody>
-          <tr>
-            <td>Base Total</td>
-            <td>{summary.TotalRawPrice}</td>
-          </tr>
-
-          {summary.TotalDiscountPrice !== 0.00 &&
-            <tr>
-              <td>After Discount</td>
-              <td>{summary.TotalPriceAfterDiscount}</td>
-              <td>(-{summary.TotalDiscountPrice})</td>
-            </tr>
-          }
-
-          <tr>
-            <td>After Tax</td>
-            <td>{summary.TotalPriceAfterTax}</td>
-            <td>(+{summary.TotalTaxAmount})</td>
-          </tr>
-
-          {summary.RoundedOff !== 0.00 &&
-            <tr>
-              <td>Rounded Off</td>
-              <td>{summary.RoundedOff}</td>
-            </tr>
-          }
-
-          <tr className={"grandTotal"}>
-            <td>Grand Total</td> 
-            <td>{summary.TotalPrice}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-export default SummaryDisplay;
diff --git a/src/components/Form/Items/AddNewItemForm.tsx b/src/components/Form/Items/AddNewItemForm.tsx
index e51ecfc..48ca4b2 100644
--- a/src/components/Form/Items/AddNewItemForm.tsx
+++ b/src/components/Form/Items/AddNewItemForm.tsx
@@ -38,7 +38,6 @@ const AddNewItemForm: React.FC<props> = (props) => {
 
   // set description and price if match found in DB
   const applyItemInfo = (i: any) => {
-    console.log(i)
     setItemDescValue(i.Description);
     setItemPriceValue(i.UnitPrice);
     setItemHSNValue(i.HSN);
@@ -68,14 +67,18 @@ const AddNewItemForm: React.FC<props> = (props) => {
         (event) => {
           event.preventDefault();
 
-          const discountValue: number = (itemDiscountPercentage / 100) * itemPriceValue;
-          const totalGSTValue: number = (itemGSTPercentage / 100) * (itemQTYValue);
+          const totalValue: number = itemPriceValue * itemQTYValue;
+
+          // the values below are being rounded to two decimal places
+          const discountValue: number = parseFloat(((itemDiscountPercentage / 100) * itemPriceValue).toFixed(2))
+          const totalGSTValue: number = parseFloat(((itemGSTPercentage / 100) * totalValue).toFixed(2))
+
           const newInvoiceItem: Item = {
             Model:         itemNameValue,
             Description:   itemDescValue,
             Quantity:      itemQTYValue,
             UnitPrice:     itemPriceValue,
-            TotalValue:    itemPriceValue * itemQTYValue,
+            TotalValue:    totalValue,
             Discount:      itemDiscountPercentage,
             DiscountValue: discountValue,
             HSN:           itemHSNValue,
diff --git a/src/components/Pages/BillingPage.tsx b/src/components/Pages/BillingPage.tsx
index ebc0f5a..9697a24 100644
--- a/src/components/Pages/BillingPage.tsx
+++ b/src/components/Pages/BillingPage.tsx
@@ -20,7 +20,7 @@ import DocumentInfoForm from "./../Form/Document/DocumentInfoForm";
 import MetaInfoForm from "./../Form/Document/MetaInfoForm";
 
 import ItemsDisplay from "./../Display/ItemsDisplay";
-// import SummaryDisplay from "./../Display/SummaryDisplay"; 
+import SummaryDisplay from "./../Display/SummaryDisplay"; 
 
 const BillingPage: React.FC = () => {
   const [savedItems, getSavedItems] = useState<Item[]>([]);
@@ -87,11 +87,10 @@ const BillingPage: React.FC = () => {
 
       <div className={"BillingPageFlex"}>
         <MetaInfoForm/>
+        <SummaryDisplay items={items}/>
       </div>
     </>
   );
-  // this goes after metainfoform
-        // <SummaryDisplay items={items}/>
 }
 
 export default BillingPage;