3 files changed, 47 insertions, 23 deletions
diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index 214cb18..2c0223b 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -54,7 +54,7 @@
 
 .SummaryDisplayTR td {
   color: $foreground2;
-  font-size: 1.7rem;
+  font-size: $fontSize3 - 0.3;
 }
 
 .SummaryDisplay {
@@ -82,7 +82,7 @@
 }
 
 .SummaryDisplay td {
-  font-size: 1.25rem;
+  font-size: $fontSize2 - 0.25;
   padding: 0.2rem 0;
 }
 
diff --git a/src/components/Display/ItemsDisplay.tsx b/src/components/Display/ItemsDisplay.tsx
index 78c5094..79eed40 100644
--- a/src/components/Display/ItemsDisplay.tsx
+++ b/src/components/Display/ItemsDisplay.tsx
@@ -10,7 +10,7 @@ import React from "react";
 import { Item } from "./../../interfaces";
 import "./Display.scss";
 import DisplayItem from "./DisplayItem";
-// import {SummaryDisplayTR} from "./SummaryDisplay";
+import {SummaryDisplayTR} from "./SummaryDisplay";
 
 interface Props {
   items: Item[]
@@ -19,9 +19,6 @@ interface Props {
 
 const ItemsDisplay: React.FC<Props> = (props) => {
   const items = props.items;
-  // TODO: remove mutability
-  let itemNumber = 0;
-
   return (
     <table className={"ItemsDisplay"}>
       <tbody>
@@ -38,19 +35,17 @@ const ItemsDisplay: React.FC<Props> = (props) => {
         </tr>
 
         {items.map( 
-          (item) => {
-            itemNumber++
+          (item, index) => {
             return (
-              <DisplayItem key={itemNumber} itemNumber={itemNumber} item={item} defGSTValue={props.defGSTValue}/>
+              <DisplayItem key={index + 1} itemNumber={index + 1} item={item} defGSTValue={props.defGSTValue}/>
             );
           }
         )}
 
+        <SummaryDisplayTR items={props.items}/>
       </tbody>
     </table>
   );
-  // this goes right before </tbody>
-        //<SummaryDisplayTR items={props.items}/>
 }
 
 export default ItemsDisplay;
diff --git a/src/components/Display/SummaryDisplay.tsx b/src/components/Display/SummaryDisplay.tsx
index 37ba077..ae779bf 100644
--- a/src/components/Display/SummaryDisplay.tsx
+++ b/src/components/Display/SummaryDisplay.tsx
@@ -7,30 +7,27 @@
 */
 
 import React, {Dispatch, SetStateAction} from "react";
-import { Item } from "./../../interfaces"
+import { Item, InvoiceSummary } from "./../../interfaces"
 import "./Display.scss";
 
-interface props {
+interface Props {
   items: Item[]
   setShowSubmitMenu: Dispatch<SetStateAction<boolean>>
 }
 
-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
+interface PropsTR {
+  items: Item[]
 }
 
-const getFullSummary = (items: Item[]): FullSummary => {
+const getSummary = (items: Item[]): InvoiceSummary => {
   var rawPrice: number = 0;
   var totalDiscount: number = 0;
   var totalGST: number = 0;
+  var totalQTY: number = 0;
 
   for (let i in items) {
     const item = items[i];
+    totalQTY += item.Quantity;
     rawPrice += item.TotalValue;
     totalDiscount += item.DiscountValue;
     totalGST += item.TotalGSTValue;
@@ -43,6 +40,7 @@ const getFullSummary = (items: Item[]): FullSummary => {
   ).toFixed(2)); // rounded off value in 0.00 format
 
   return {
+    TotalQuantity:           totalQTY,
     TotalRawPrice:           rawPrice,
     TotalDiscount:           totalDiscount,
     TotalGST:                totalGST,
@@ -52,8 +50,39 @@ const getFullSummary = (items: Item[]): FullSummary => {
   }
 }
 
-const SummaryDisplay: React.FC<props> = (props) => {
-  const summary: FullSummary = getFullSummary(props.items);
+export const SummaryDisplayTR: React.FC<PropsTR> = (props) => {
+  const summary: InvoiceSummary = getSummary(props.items);
+
+  return (
+    <tr className={"SummaryDisplayTR"}>
+      <td>Total</td>
+
+      <td className={"disabledBorder"}></td>
+      <td className={"disabledBorder"}></td>
+      <td className={"disabledBorder"}></td>
+
+      <td className={summary.TotalQuantity < 1 ? "disabledBorder" : ""}>
+        {summary.TotalQuantity}
+      </td>
+      <td className={summary.TotalRawPrice < 1 ? "disabledBorder" : ""}>
+        {summary.TotalRawPrice}
+      </td>
+      <td className={summary.TotalDiscount < 1 ? "disabledBorder" : ""}>
+        {summary.TotalDiscount}
+      </td>
+      <td className={summary.TotalGST < 1 ? "disabledBorder" : ""}>
+        {summary.TotalGST}
+      </td>
+      <td className={summary.TotalPriceAfterGST < 1 ? "disabledBorder" : ""}>
+        {summary.TotalPriceAfterGST}
+      </td>
+
+    </tr>
+  );
+}
+
+const SummaryDisplay: React.FC<Props> = (props) => {
+  const summary: InvoiceSummary = getSummary(props.items);
   return (
     <div className={"SummaryDisplay"}>
       <h1>Summary</h1>