6 files changed, 50 insertions, 16 deletions
diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index a7e4ef0..3f60f44 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -31,11 +31,14 @@ const BillingPage = () => {
   };
 
   return (
-    <div>
+    <>
       <AddNewItemForm savedItems={savedItems} addItem={getItems} defGSTValue={defGSTValue}/>
       <ItemsDisplay items={items} defGSTValue={defGSTValue}/>
-      <SummaryDisplay items={items}/>
-    </div>
+      <div className={"BillingPageFlex"}>
+        <div>placeholder for extras menu</div>
+        <SummaryDisplay items={items}/>
+      </div>
+    </>
   );
 }
 
diff --git a/src/components/Display/Display.css b/src/components/Display/Display.css
index bbec236..528e837 100644
--- a/src/components/Display/Display.css
+++ b/src/components/Display/Display.css
@@ -42,3 +42,6 @@ $defShadow: 0px 0px 4px #232627;
 .SummaryDisplayTR td {
   color: #FF79C6;
   font-size: 1.7rem; }
+
+.SummaryDisplay {
+  border: 1px solid pink; }
diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index 34a30f4..7fa37a3 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -40,4 +40,6 @@
   font-size: 1.7rem;
 }
 
-
+.SummaryDisplay {
+  border: 1px solid pink;
+}
diff --git a/src/components/Display/SummaryDisplay.js b/src/components/Display/SummaryDisplay.js
index aabd111..97c24b5 100644
--- a/src/components/Display/SummaryDisplay.js
+++ b/src/components/Display/SummaryDisplay.js
@@ -20,14 +20,16 @@ const getBasicSummary = (items) => {
 
 const getFullSummary = (items) => {
   let totalRawPrice = 0;
-  let totalDiscountPrice = 0; // to be subtracted from totalRawPrice
+  let totalDiscount = 0; // to be subtracted from totalRawPrice
+  let totalTax = 0;
 
   for (let i = 0; i < items.length; i++) {
     const itemTotalPrice = items[i].TotalPrice;
     const itemDiscount = items[i].Discount;
 
     totalRawPrice += itemTotalPrice;
-    totalDiscountPrice += (itemDiscount / 100) * itemTotalPrice;
+    totalDiscount += (itemDiscount / 100) * itemTotalPrice;
+    totalTax += (items[i].GST / 100) * itemTotalPrice;
   }
 
   // TODO: add support for calculating gst from TotalPriceAfterDiscount
@@ -35,7 +37,10 @@ const getFullSummary = (items) => {
   return (
     {
       "TotalRawPrice":           totalRawPrice,
-      "TotalPriceAfterDiscount": totalRawPrice - totalDiscountPrice
+      "TotalDiscountPrice":      totalDiscount,
+      "TotalPriceAfterDiscount": totalRawPrice - totalDiscount,
+      "TotalTaxAmount":          totalTax,
+      "TotalPrice":              (totalRawPrice - totalDiscount) + totalTax,
     }
   );
 }
@@ -61,10 +66,12 @@ const SummaryDisplay = (props) => {
   const summary = getFullSummary(props.items);
 
   return (
-    <>
-      <p>Total: {summary.TotalRawPrice}</p>
-      <p>Total after discount: {summary.TotalPriceAfterDiscount}</p>
-    </>
+    <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>
+    </div>
   );
 }
 
diff --git a/src/styles/global.css b/src/styles/global.css
index 7d21117..5e011b3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -22,12 +22,19 @@ body {
 
 .root-content {
   width: 95%;
-  margin: auto; }
+  margin: auto;
+  margin-bottom: 3rem; }
+
+.BillingPageFlex {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 70vh; }
+
+.BillingPageFlex div {
+  width: 45%;
+  border: 1px solid pink; }
 
 @media only screen and (max-device-width: 480px) {
   .root-content {
     width: 95%; } }
-
-.BillingPage .ItemsList {
-  background-color: red;
-  min-height: 7rem; }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index d9ee9bb..51e1798 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -13,6 +13,18 @@ body {
 .root-content {
   width: 95%;
   margin: auto;
+  margin-bottom: 3rem;
+}
+
+.BillingPageFlex {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 70vh;
+}
+.BillingPageFlex div {
+  width: 45%;
+  border: 1px solid pink;
 }
 
 @media only screen and (max-device-width: 480px) {