Add grand total to the order details sidebar

views/dashboardPage/components/components.css

@@ -414,6 +414,8 @@
         flex-direction: column;
         align-items: center;
         width: 100%;
+        margin-bottom: 25px;
+        overflow: auto;
     }
 
 /* New Ingredient */
@@ -445,6 +447,7 @@
 
     #orderIngredients{
         width: 90%;
+        overflow: auto;
     }
 
         .orderIngredient{
@@ -457,4 +460,15 @@
             border-radius: 5px;
             padding: 10px;
             margin: 5px 0;
+        }
+
+    #orderTotalPrice{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+        #orderTotalPrice{
+            font-size: 25px;
+            font-weight: bold;
         }

views/dashboardPage/components/components.js

@@ -312,8 +312,11 @@ let orderDetailsComp = {
         }
 
         let template = document.querySelector("#orderIngredient").content.children[0];
+        let grandTotal = 0;
         for(let i = 0; i < order.ingredients.length; i++){
             let ingredient = template.cloneNode(true);
+            let price = (order.ingredients[i].quantity * order.ingredients[i].price) / 100;
+            grandTotal += price;
 
             for(let j = 0; j < merchant.inventory.length; j++){
                 if(order.ingredients[i].ingredient === merchant.inventory[j].ingredient._id){
@@ -323,10 +326,12 @@ let orderDetailsComp = {
             }
 
             ingredient.children[1].innerText = `$${(order.ingredients[i].price / 100).toFixed(2)}`;
-            ingredient.children[2].innerText = ((order.ingredients[i].quantity * order.ingredients[i].price) / 100).toFixed(2);
+            ingredient.children[2].innerText = price.toFixed(2);
 
             ingredientList.appendChild(ingredient);
         }
+
+        document.querySelector("#orderTotalPrice p").innerText = `$${grandTotal.toFixed(2)}`;
     }
 }
 

views/dashboardPage/components/orderDetails.ejs

@@ -14,6 +14,13 @@
 
     <div id="orderIngredients"></div>
 
+    <div class="lineBorder"></div>
+
+    <div id="orderTotalPrice">
+        <h3>Grand Total</h3>
+        <p></p>
+    </div>
+
     <template id="orderIngredient">
         <div class="orderIngredient">
             <p></p>