color coded ItemsDisplay

6 files changed, 32 insertions, 16 deletions

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index 698f095..a47616f 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -45,7 +45,7 @@ const BillingPage = () => {
   return (
     <div>
       <AddNewItemForm savedItems={sampleData} addItem={getItems} defGSTValue={defGSTValue}/>
-      <ItemsDisplay items={items}/>
+      <ItemsDisplay items={items} defGSTValue={defGSTValue}/>
     </div>
   );
 }
diff --git a/src/components/Display/Display.css b/src/components/Display/Display.css
index 1045956..74aa31e 100644
--- a/src/components/Display/Display.css
+++ b/src/components/Display/Display.css
@@ -30,8 +30,14 @@ $defShadow: 0px 0px 4px #232627;
   border-bottom: 1px solid lightblue;
   font-size: 1.5rem; }
 
+.ItemsDisplay .disabledBorder {
+  border-bottom: 1px solid gray; }
+
+.ItemsDisplay .warningBorder {
+  border-bottom: 1px solid red; }
+
 .ItemsDisplay .leftAlign {
   text-align: left; }
 
-.ItemsDisplay .altBorder {
-  border-bottom: 1px solid gray; }
+.SummaryDisplayTR {
+  color: #FF79C6; }
diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index 8863842..ec6cc65 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -23,11 +23,20 @@
   font-size: 1.5rem;
 }
 
+.ItemsDisplay .disabledBorder {
+  border-bottom: 1px solid $tableDisabledBorderColor;
+}
+
+.ItemsDisplay .warningBorder {
+  border-bottom: 1px solid $warningBorderColor;
+}
+
 .ItemsDisplay .leftAlign {
   text-align: left;
 }
 
-.ItemsDisplay .altBorder {
-  border-bottom: 1px solid $tableAltBorderColor;
+.SummaryDisplayTR {
+  color: $altFG;
 }
 
+
diff --git a/src/components/Display/DisplayItem.js b/src/components/Display/DisplayItem.js
index 768be2f..849bfc5 100644
--- a/src/components/Display/DisplayItem.js
+++ b/src/components/Display/DisplayItem.js
@@ -9,11 +9,11 @@ const DisplayItem = (props) => {
     <tr>
       <td>{itemNumber}</td>
       <td className={"leftAlign"}>{item.Model}</td>
-      <td className={"leftAlign"}>{item.Description}</td>
+      <td className={item.Description === "" ? "leftAlign disabledBorder" : "leftAlign"}>{item.Description}</td>
       <td>{item.Quantity}</td>
+      <td className={item.Discount === 0 ? "disabledBorder" : ""}>{item.Discount}</td>
+      <td className={item.GST === props.defGSTValue ? "" : "warningBorder"}>{item.GST}</td>
       <td>{item.Price}</td>
-      <td>{item.Discount}</td>
-      <td>{item.GST}</td>
     </tr>
   );
 }
diff --git a/src/components/Display/ItemsDisplay.js b/src/components/Display/ItemsDisplay.js
index 0545ef0..599dd8e 100644
--- a/src/components/Display/ItemsDisplay.js
+++ b/src/components/Display/ItemsDisplay.js
@@ -7,6 +7,7 @@ const ItemsDisplay = (props) => {
   const items = props.items;
   let itemNumber = 0;
 
+  // TODO: Add HSN Support
 
   return (
     <table className={"ItemsDisplay"}>
@@ -15,16 +16,16 @@ const ItemsDisplay = (props) => {
         <th className={"leftAlign"}>Item</th>
         <th className={"leftAlign"}>Description</th>
         <th>Quantity(NOS)</th>
-        <th>Price</th>
         <th>Discount(%)</th>
         <th>GST(%)</th>
+        <th>Price</th>
       </tr>
 
       {items.map( 
         (item) => {
           itemNumber++
           return (
-            <DisplayItem itemNumber={itemNumber} item={item}/>
+            <DisplayItem itemNumber={itemNumber} item={item} defGSTValue={props.defGSTValue}/>
           );
         }
       )}
diff --git a/src/components/Display/SummaryDisplay.js b/src/components/Display/SummaryDisplay.js
index 8acddc9..ebc382c 100644
--- a/src/components/Display/SummaryDisplay.js
+++ b/src/components/Display/SummaryDisplay.js
@@ -4,6 +4,7 @@ import "./Display.css";
 const getSummary = (items) => {
   let totalRawPrice = 0;
   let totalQuantity = 0;
+
   for (let i = 0; i < items.length; i++) {
     totalRawPrice += items[i].Price;
     totalQuantity += items[i].Quantity
@@ -19,17 +20,16 @@ const getSummary = (items) => {
 
 const SummaryDisplayTR = (props) => {
   const summary = getSummary(props.items);
-  console.log(summary)
 
   return (
-    <tr>
+    <tr className={"SummaryDisplayTR"}>
       <td>Total</td>
-      <td className={"altBorder"}></td>
-      <td className={"altBorder"}></td>
+      <td className={"disabledBorder"}></td>
+      <td className={"disabledBorder"}></td>
       <td>{summary.TotalQuantity}</td>
+      <td className={"disabledBorder"}></td>
+      <td className={"disabledBorder"}></td>
       <td>{summary.TotalRawPrice}</td>
-      <td className={"altBorder"}></td>
-      <td className={"altBorder"}></td>
     </tr>
   );
 }