Minor styling + fixed the calculation of discount and taxes and added new calculations

8 files changed, 101 insertions, 17 deletions

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index 3f60f44..1f42bf0 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -4,6 +4,7 @@ import axios from "axios";
 import AddNewItemForm from "./Form/AddNewItemForm";
 import ItemsDisplay from "./Display/ItemsDisplay";
 import SummaryDisplay from "./Display/SummaryDisplay";
+import MetaInfoForm from "./Form/MetaInfoForm";
 
 const BillingPage = () => {
   const [savedItems, getSavedItems] = useState([])
@@ -35,7 +36,7 @@ const BillingPage = () => {
       <AddNewItemForm savedItems={savedItems} addItem={getItems} defGSTValue={defGSTValue}/>
       <ItemsDisplay items={items} defGSTValue={defGSTValue}/>
       <div className={"BillingPageFlex"}>
-        <div>placeholder for extras menu</div>
+        <MetaInfoForm/>
         <SummaryDisplay items={items}/>
       </div>
     </>
diff --git a/src/components/Display/Display.css b/src/components/Display/Display.css
index 528e837..21a9815 100644
--- a/src/components/Display/Display.css
+++ b/src/components/Display/Display.css
@@ -44,4 +44,18 @@ $defShadow: 0px 0px 4px #232627;
   font-size: 1.7rem; }
 
 .SummaryDisplay {
-  border: 1px solid pink; }
+  width: 30%;
+  padding: 0.5rem 2rem; }
+
+.SummaryDisplay h1 {
+  font-size: 3rem;
+  margin: 0.5rem -1.5rem;
+  border-bottom: 1px dotted lightblue; }
+
+.SummaryDisplay table {
+  width: 100%;
+  margin: auto; }
+
+.SummaryDisplay td {
+  font-size: 1.25rem;
+  padding: 0.2rem 0; }
diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index 7fa37a3..3c49b7e 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -41,5 +41,22 @@
 }
 
 .SummaryDisplay {
-  border: 1px solid pink;
+  width: 30%;
+  padding: 0.5rem 2rem;
+}
+
+.SummaryDisplay h1 {
+  font-size: 3rem;
+  margin: 0.5rem -1.5rem;
+  border-bottom: 1px dotted $labelUnderlineColor;
+}
+
+.SummaryDisplay table {
+  width: 100%;
+  margin: auto;
+}
+
+.SummaryDisplay td {
+  font-size: 1.25rem;
+  padding: 0.2rem 0;
 }
diff --git a/src/components/Display/Form.css b/src/components/Display/Form.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/Display/Form.css
diff --git a/src/components/Display/SummaryDisplay.js b/src/components/Display/SummaryDisplay.js
index 97c24b5..d823713 100644
--- a/src/components/Display/SummaryDisplay.js
+++ b/src/components/Display/SummaryDisplay.js
@@ -25,22 +25,24 @@ const getFullSummary = (items) => {
 
   for (let i = 0; i < items.length; i++) {
     const itemTotalPrice = items[i].TotalPrice;
-    const itemDiscount = items[i].Discount;
+    const itemDiscount = (items[i].Discount / 100) * itemTotalPrice;
 
     totalRawPrice += itemTotalPrice;
-    totalDiscount += (itemDiscount / 100) * itemTotalPrice;
-    totalTax += (items[i].GST / 100) * itemTotalPrice;
+    totalDiscount += itemDiscount;
+    totalTax += (items[i].GST / 100) * (itemTotalPrice - itemDiscount);
   }
 
-  // TODO: add support for calculating gst from TotalPriceAfterDiscount
-
+  const totalPriceAfterTax = (totalRawPrice - totalDiscount) + totalTax;
+  const totalRoundedOff = Math.abs(totalPriceAfterTax - Math.round(totalPriceAfterTax));
   return (
     {
-      "TotalRawPrice":           totalRawPrice,
-      "TotalDiscountPrice":      totalDiscount,
-      "TotalPriceAfterDiscount": totalRawPrice - totalDiscount,
-      "TotalTaxAmount":          totalTax,
-      "TotalPrice":              (totalRawPrice - totalDiscount) + totalTax,
+      "TotalRawPrice":           totalRawPrice.toFixed(2),
+      "TotalDiscountPrice":      totalDiscount.toFixed(2),
+      "TotalPriceAfterDiscount": (totalRawPrice - totalDiscount).toFixed(2),
+      "TotalTaxAmount":          totalTax.toFixed(2),
+      "TotalPriceAfterTax":      totalPriceAfterTax.toFixed(2),
+      "RoundedOff":              totalRoundedOff.toFixed(2),
+      "TotalPrice":              Math.round(totalPriceAfterTax)
     }
   );
 }
@@ -67,10 +69,39 @@ const SummaryDisplay = (props) => {
 
   return (
     <div className={"SummaryDisplay"}>
-      <p>Total raw: {summary.TotalRawPrice}</p>
-      <p>Total after discount: {summary.TotalRawPrice} - {summary.TotalDiscountPrice} = {summary.TotalPriceAfterDiscount}</p>
-      <p>Total tax: {summary.TotalTaxAmount}</p>
-      <p>Total: {summary.TotalPriceAfterDiscount} + {summary.TotalTaxAmount} = {summary.TotalPrice}</p>
+      <h1>Summary</h1>
+      <table>
+        <tr>
+          <td>Base Total</td>
+          <td>{summary.TotalRawPrice}</td>
+        </tr>
+
+        {true &&// summary.TotalDiscountPrice !== 0 &&
+          <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>
+
+        {true && //summary.RoundedOff !== 0 &&
+          <tr>
+            <td>Rounded Off</td>
+            <td>{summary.RoundedOff}</td>
+          </tr>
+        }
+
+        <tr>
+          <td>Grand Total</td> 
+          <td>{summary.TotalPrice}</td>
+        </tr>
+      </table>
     </div>
   );
 }
diff --git a/src/components/Form/Form.css b/src/components/Form/Form.css
index 102e4bb..af1baa6 100644
--- a/src/components/Form/Form.css
+++ b/src/components/Form/Form.css
@@ -82,6 +82,9 @@ input[type=number] {
   padding: 0.8rem 0;
   border-bottom: 1px dotted lightblue; }
 
+.MetaInfoForm {
+  width: 60%; }
+
 @media only screen and (max-device-width: 480px) {
   .formContainer {
     padding: 0.5rem;
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index df1cdde..9d4a688 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -84,6 +84,10 @@ input[type=number] {
   border-bottom: 1px dotted $labelUnderlineColor;
 }
 
+.MetaInfoForm {
+  width: 60%;
+}
+
 @media only screen and (max-device-width: 480px) {
   .formContainer {
     padding: 0.5rem;
diff --git a/src/components/Form/MetaInfoForm.js b/src/components/Form/MetaInfoForm.js
new file mode 100644
index 0000000..da7f26a
--- /dev/null
+++ b/src/components/Form/MetaInfoForm.js
@@ -0,0 +1,14 @@
+import React /*, { useState }*/ from "react";
+import "./Form.css";
+
+const MetaInfoForm = () => {
+  return (
+    <div className={"MetaInfoForm"}>
+      <h1>This section of the app is missing</h1>
+      <p>Please look at this waifu instead.</p>
+      <img height="300" width="230" src="https://i.redd.it/te8tbxl1r9v61.jpg" alt="Shit where is the waifu"></img>
+    </div>
+  )
+}
+
+export default MetaInfoForm;