Add all ingredients inside there categories. Created the start of the styling.

views/dashboardPage/dashboard.css

@@ -13,7 +13,18 @@ body{
     width: 100%;
     height: 100vh;
     box-sizing: border-box;
-    padding: 25px;
+    padding: 50px;
+}
+
+.strand{
+    flex-direction: column;
+    max-height: 100%;
+    width: 100%;
+}
+
+.strand > h1{
+    text-align: left;
+    margin: 15px;
 }
 
 /* Cards */
@@ -40,14 +51,6 @@ body{
 /* Home Strand */
 #homeStrand{
     display: flex;
-    flex-direction: column;
-    max-height: 100%;
-    width: 100%;
-}
-
-#homeStrand h1{
-    text-align: left;
-    margin: 15px;
 }
 
 .flexRow{
@@ -152,6 +155,61 @@ body{
 /* Ingredients Strand */
 #ingredientsStrand{
     display: none;
+    box-sizing: border-box;
+    padding-right: 100px;
+}
+
+#ingredientsStrand > h1{
+    margin-bottom: 100px;
+}
+
+.categoryDiv div:first-of-type{
+    display: flex;
+    margin-left: 15px;
+    width: 100%;
+}
+
+.categoryDiv div:first-of-type p{
+    display: flex;
+    align-items: center;
+    padding: 20px 0 20px 100px;
+    background: rgb(240, 252, 255);
+    border: 1px solid gray;
+    border-radius: 5px;
+    margin-right: 25px;
+    flex-grow: 1;
+}
+
+.categoryDiv div:first-of-type button{
+    padding: 10px;
+    background: rgb(240, 252, 255);
+    border: 1px solid black;
+    border-radius: 5px;
+    width: 75px;
+    height: 75px;
+}
+
+.ingredient{
+    display: flex;
+    width: 40%;
+    padding: 15px;
+    margin-left: 150px;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.ingredient:hover{
+    background: rgb(0, 27, 45);
+    color: white;
+}
+
+.ingredient > *{
+    width: 33%;
+    margin-right: 15px;
+}
+
+.ingredient > p:last-of-type{
+    text-align: right;
 }
 
 /* Recipe Book Strand */

views/dashboardPage/dashboard.ejs

@@ -55,7 +55,7 @@
             </div>
 
             <div id="ingredientsStrand" class="strand">
-                <h1>Ingredient strand</h1>
+                <h1>Ingredient Inventory</h1>
             </div>
 
             <div id="recipeBookStrand" class="strand">
@@ -71,6 +71,7 @@
         <script>let transactions = <%- JSON.stringify(transactions) %>;</script>
         <script src="../shared/graphs.js"></script>
         <script src="/dashboardPage/home.js"></script>
+        <script src="/dashboardPage/ingredients.js"></script>
         <script src="/dashboardPage/controller.js"></script>
     </body>
 </html>

views/dashboardPage/ingredients.js

@@ -0,0 +1,84 @@
+window.ingredientsStrandObj = {
+    isPopulated: false,
+
+    display: function(){
+        if(!this.isPopulated){
+            let categories = this.categorizeIngredients();
+
+            let ingredientsStrand = document.querySelector("#ingredientsStrand");
+            for(let category of categories){
+                let categoryDiv = document.createElement("div");
+                categoryDiv.classList = "categoryDiv"
+                ingredientsStrand.appendChild(categoryDiv);
+
+                let headerDiv = document.createElement("div");
+                categoryDiv.appendChild(headerDiv);
+                
+                let headerTitle = document.createElement("p");
+                headerTitle.innerText = category.name;
+                headerDiv.appendChild(headerTitle);
+
+                let headerButton = document.createElement("button");
+                headerButton.innerText = "^";
+                headerDiv.appendChild(headerButton);
+
+                for(let ingredient of category.ingredients){
+                    let ingredientDiv = document.createElement("div");
+                    ingredientDiv.classList = "ingredient";
+                    categoryDiv.appendChild(ingredientDiv);
+
+                    let ingredientName = document.createElement("p");
+                    ingredientName.innerText = ingredient.name;
+                    ingredientDiv.appendChild(ingredientName);
+
+                    let spacer = document.createElement("p");
+                    spacer.innerText = "-".repeat(25);
+                    ingredientDiv.appendChild(spacer);
+
+                    let ingredientData = document.createElement("p");
+                    ingredientData.innerText = `${ingredient.quantity} ${ingredient.unit}`;
+                    ingredientDiv.appendChild(ingredientData);
+                }
+            }
+
+            this.isPopulated = true;
+        }
+    },
+
+    categorizeIngredients: function(){
+        let ingredientsByCategory = [];
+
+        for(let item of merchant.inventory){
+            let categoryExists = false;
+            for(let category of ingredientsByCategory){
+                if(item.ingredient.category === category.name){
+                    category.ingredients.push({
+                        id: item.ingredient._id,
+                        name: item.ingredient.name,
+                        quantity: item.quantity,
+                        unit: item.ingredient.unit
+                    });
+
+                    categoryExists = true;
+                    break;
+                }
+            }
+
+            if(!categoryExists){
+                ingredientsByCategory.push({
+                    name: item.ingredient.category,
+                    ingredients: [{
+                        id: item.ingredient._id,
+                        name: item.ingredient.name,
+                        quantity: item.quantity,
+                        unit: item.ingredient.unit
+                    }]
+                });
+            }
+        }
+
+        console.log(ingredientsByCategory);
+
+        return ingredientsByCategory;
+    }
+}