Merge branch 'development'

controllers/recipeData.js

@@ -126,10 +126,8 @@ module.exports = {
                 }
 
                 merchant.save()
-                    .then((updatedMerchant)=>{
-                        return res.json({});
-                    })
                     .catch((err)=>{
+                        console.log(err);
                         return res.json("ERROR: UNABLE TO SAVE DATA");
                     })
 

controllers/transactionData.js

@@ -113,15 +113,15 @@ module.exports = {
                 return Transaction.deleteOne({_id: req.params.id});
             })
             .then((response)=>{
-                res.json({});
+                res.json();
 
                 for(let i = 0; i < transaction.recipes.length; i++){
                     const recipe = transaction.recipes[i].recipe;
                     for(let j = 0; j < recipe.ingredients.length; j++){
-                        const ingredient = recipe.ingredients[i].ingredient;
+                        const ingredient = recipe.ingredients[j].ingredient;
                         for(let k = 0; k < merchant.inventory.length; k++){
-                            if(ingredient.toString() == merchant.inventory[i].ingredient.toString()){
-                                merchant.inventory[i].quantity += recipe.ingredients[i].quantity * transaction.recipes[i].quantity;
+                            if(ingredient.toString() === merchant.inventory[k].ingredient.toString()){
+                                merchant.inventory[k].quantity += recipe.ingredients[j].quantity * transaction.recipes[i].quantity;
                                 break;
                             }
                         }
@@ -132,15 +132,7 @@ module.exports = {
             })
             .catch((err)=>{
                 return res.json("ERROR: UNABLE TO DELETE THE TRANSACTION");
-            })
-
-        // Transaction.deleteOne({_id: req.params.id})
-        //     .then((response)=>{
-        //         return res.json({});
-        //     })
-        //     .catch((err)=>{
-        //         return res.json("ERROR: UNABLE TO DELETE TRANSACTION");
-        //     });
+            });
     },
 
     getTransactionsByDate: function(req, res){

views/dashboardPage/dashboard.css

@@ -49,139 +49,108 @@ Multi-strand use classes
             padding: 0;
         }
 
-.itemDisplay{
+#sidebarCloser{
+    width: 30px;
+    background: rgb(0, 27, 45);
+    color: white;
+    margin-right: auto;
+    border: none;
+    position: fixed;
+    top: 15px;
+    left: 15px;
+}
+
+.buttonBox{
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
+    margin-top: 50px;
+}
+
+    .buttonBox > *{
+        margin-right: 10px;
+    }
+
+.choosable{
+    display: flex;
+    justify-content: space-around;
     align-items: center;
-    padding: 20px;
-    width: 100%;
-    background: rgb(240, 252, 255);
+    background: rgb(0, 27, 45);
+    color: white;
     border-radius: 5px;
-    border: 1px solid gray;
+    margin: 2px;
+    padding: 5px;
+    text-align: center;
     cursor: pointer;
+    width: 99%;
     box-sizing: border-box;
+    border: none;
+    font-size: 16px;
 }
 
-    .itemDisplay:hover{
-        background: rgb(0, 27, 45);
-        color: white;
+    .choosable.tall{
+        padding: 15px;
     }
 
-    .itemDisplay > *:first-of-type{
-        font-size: 20px;
-        font-weight: bold;
+    .choosable:hover{
+        background: rgb(201, 201, 201);
+        color: black;
     }
 
-.smallItemDisplay{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    margin: 5px 0;
-    width: 100%;
-    background: rgb(240, 252, 255);
-    border-radius: 5px;
-    border: 1px solid gray;
-    box-sizing: border-box;
-}
+    .choosable.active{
+        background: rgb(179, 191, 209);
+        color: white;
+    }
 
 .searchBar{
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-bottom: 3px;
-    width: 80%;
-    padding: 10px 25px;
-    box-sizing: border-box;
-    background: rgb(0, 27,45);
-    border-radius: 5px;
+    margin-bottom: 10px;
 }
 
-    .searchAndIcon{
-        display: flex;
-        width: 25%;
+    .searchButton{
+        padding: 6px;
+        background: rgb(0, 27, 45);
+        cursor: pointer;
+        color: white;
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px;
     }
 
-        .searchAndIcon svg{
-            background: rgb(201, 201, 201);
-            border-bottom-left-radius: 5px;
-            border-top-left-radius: 5px;
-            color: gray;
-            padding: 5px 0 5px 5px;
-            width: 30px;
-            z-index: 10;
-        }
-
-        .searchAndIcon input{
+        .searchButton:hover{
             background: rgb(201, 201, 201);
-            border: none;
-            height: 30px;
-            border-bottom-right-radius: 5px;
-            border-top-right-radius: 5px;
-            font-size: 20px;
-            padding: 5px 0 5px 10px;
-            max-width: 200px;
+            color: black;
         }
 
-    .clearButton{
-        background: none;
-        border: none;
-        color: rgb(255, 99, 107);
-        cursor: pointer;
-    }
-
-        .clearButton:hover{
-            background: rgb(0, 27, 45);
+        .searchButton:active{
+            background: rgb(179, 191, 209);
+            color: white;
         }
 
-    .searchBar select{
-        background: rgb(201, 201, 201);
+    .searchInput{
+        border: 4px solid rgb(0, 27, 45);
         font-size: 20px;
-        border-radius: 5px;
-        border: none;
-        height: 30px;
-        padding: 5px 0;
-        box-sizing: content-box;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
-        background-repeat: no-repeat;
-        background-position-x: 100%;
-        background-position-y: 50%;
-        cursor: pointer;
-    }
-
-    .button2Link{
-        background: none;
-        border: none;
-        color: blue;
-        text-decoration: underline;
-        font-size: 15px;
-        margin-top: auto;
-        cursor: pointer;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        padding: 1px 0 1px 4px;
     }
 
-#sidebarCloser{
-    width: 30px;
-    background: rgb(0, 27, 45);
-    color: white;
-    margin-right: auto;
-    border: none;
-    position: fixed;
-    top: 15px;
-    left: 15px;
-}
-
-.buttonBox{
+.dateRange{
     display: flex;
-    justify-content: space-around;
-    margin-top: 50px;
+    flex-direction: column;
+    align-items: center;
 }
 
-    .buttonBox > *{
-        margin-right: 10px;
+    .dateRangeInput{
+        display: flex;
+        justify-content: space-between;
     }
 
+        .dateRangeInput p{
+            margin: 0 5px;
+            font-size: 20px;
+            font-weight: bold;
+        }
+
 /* 
 Home Strand 
 */
@@ -362,8 +331,16 @@ Ingredients Strand
         width: 80%;
     }
 
+    .categoryDiv{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
     .categoryDiv > div:first-of-type{
         display: flex;
+        cursor: pointer;
+        width: 100%;
     }
 
     .categoryDiv > div:first-of-type p{
@@ -389,29 +366,7 @@ Ingredients Strand
 
         .ingredientsDiv{
             flex-direction: column;
-        }
-
-    .ingredient{
-        display: flex;
-        width: 50%;
-        padding: 15px;
-        margin: auto;
-        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;
+            width: 50%;
         }
 
         .ingredientSpacer{
@@ -428,18 +383,6 @@ Recipe Book Strand
     align-items: center;
 }
 
-    #recipeBookStrand .searchBar{
-        width: 50%;
-    }
-
-        #recipeSearch{
-            width: 50%;
-        }
-
-        #recipeSelect{
-            width: 25%;
-        }
-
     #recipeList{
         display: flex;
         flex-direction: column;
@@ -503,8 +446,6 @@ Analytics Strand
             transition: 0.2s;
         }
 
-    
-
 .analContent{
     display: flex;
     justify-content: space-around;
@@ -521,27 +462,6 @@ Analytics Strand
         overflow-y: auto;
     }
 
-        .itemButton{
-            background: rgb(0, 27, 45);
-            color: white;
-            border-radius: 5px;
-            padding: 5px;
-            margin: 2px;
-            width: 90%;
-            text-align: center;
-            cursor: pointer;
-        }
-
-            .itemButton:hover{
-                background: rgb(201, 201, 201);
-                color: black;
-            }
-
-        .analItemActive{
-            background: rgb(179, 191, 209);
-            cursor: default;
-        }
-
     .analData{
         display: flex;
         flex-direction: column;
@@ -599,25 +519,6 @@ Orders Strand
         overflow-y: auto;
     }
 
-    .filterForm{
-        padding: 5px;
-        margin: 0;
-        align-items: center;
-        max-height: 150px;
-    }
-
-        .filterForm > div{
-            display: flex;
-            justify-content: space-around;
-            width: 100%;
-        }
-
-        .filterForm input[type=submit]{
-            max-height: 30px;
-            padding: 0;
-            font-size: 15px;
-        }
-
 /*
 Transactions Strand
 */
@@ -632,65 +533,6 @@ Transactions Strand
         margin-top: 50px;
     }
 
-    #transactionFilter{
-        padding: 5px;
-        margin: 0;
-        align-items: center;
-        max-height: 150px;
-    }
-
-        #transactionFilter > div{
-            display: flex;
-            justify-content: space-around;
-            width: 100%;
-        }
-
-            .dropdown{
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                position: relative;
-                margin: 0;
-            }
-
-                .dropdown button{
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    height: 25px;
-                    width: 25px;
-                    border-radius: 5px;
-                    border: 1px solid black;
-                    background: none;
-                    cursor: pointer;
-                }
-
-                    .dropdownHead{
-                        display: flex;
-                    }
-
-                    .dropdown button:hover{
-                        background: rgb(0, 27, 45);
-                        color: white;
-                    }
-
-                .dropdownContents{
-                    text-align: left;
-                    position: absolute;
-                    top: 25px;
-                    background: rgb(240, 252, 255);
-                    z-index: 1;
-                    padding: 2px;
-                    border: 1px solid black;
-                    border-radius: 5px;
-                    padding: 5px;
-                    white-space: nowrap;
-                }
-
-                    .dropDownContents label{
-                        margin: 0;
-                    }
-
 @media screen and (max-width: 1000px){
     body{
         flex-direction: column;
@@ -718,26 +560,6 @@ Transactions Strand
             display: none;
         }
 
-        .itemDisplay{
-            color: black;
-            padding: 5px;
-            margin-top: 2px;
-            margin-bottom: 2px;
-        }
-
-            .itemDisplay:hover{
-                background: rgb(240, 252, 255);
-                color: black;
-            }
-
-        .smallItemDisplay{
-            color: black;
-        }
-
-    .filterForm{
-        display: none;
-    }
-
     /*
     Home
     */
@@ -768,10 +590,6 @@ Transactions Strand
         color: black;
     }
 
-        #ingredientSearch{
-            border-radius: 5px;
-        }
-
         .categoryDiv > div:first-of-type p{
             padding: 5px 0 5px 5px;
         }
@@ -802,10 +620,6 @@ Transactions Strand
         padding: 0;
     }
 
-    .searchAndIcon{
-        width: 100%;
-    }
-
     #recipeSearch{
         border-radius: 5px;
         width: 100%;

views/dashboardPage/dashboard.ejs

@@ -30,7 +30,7 @@
                 <button id="menuShifter2" onclick="controller.changeMenu()">&#8801;</button>
             </div>
         
-            <button class="menuButton active" id="homeBtn" onclick="controller.openStrand('home')">
+            <button class="menuButton active" id="homeBtn">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                     <polyline points="9 22 9 12 15 12 15 22"></polyline>
@@ -38,7 +38,7 @@
                 <p>DASHBOARD</p>
             </button>
         
-            <button class="menuButton" id="ingredientsBtn" onclick="controller.openStrand('ingredients')">
+            <button class="menuButton" id="ingredientsBtn">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <polyline points="21 8 21 21 3 21 3 8"></polyline>
                     <rect x="1" y="3" width="22" height="5"></rect>
@@ -47,7 +47,7 @@
                 <p>INGREDIENTS</p>
             </button>
         
-            <button class="menuButton" id="recipeBookBtn" onclick="controller.openStrand('recipeBook')">
+            <button class="menuButton" id="recipeBookBtn">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                     <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
@@ -55,7 +55,7 @@
                 <p>RECIPE BOOK</p>
             </button>
 
-            <button class="menuButton" id="analyticsBtn" onclick="controller.openStrand('analytics')">
+            <button class="menuButton" id="analyticsBtn">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
                     <polyline points="17 6 23 6 23 12"></polyline>
@@ -63,7 +63,7 @@
                 <p>ANALYTICS</p>
             </button>
         
-            <button class="menuButton" id="ordersBtn" onclick="controller.openStrand('orders')">
+            <button class="menuButton" id="ordersBtn">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <circle cx="9" cy="21" r="1"></circle>
                     <circle cx="20" cy="21" r="1"></circle>
@@ -72,7 +72,7 @@
                 <p>ORDERS</p>
             </button>
 
-            <button class="menuButton" id="transactionsBtn" onclick="controller.openStrand('transactions')">
+            <button class="menuButton" id="transactionsBtn">
                 <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
                     <line x1="1" y1="10" x2="23" y2="10"></line>
@@ -157,28 +157,11 @@
                 </div>
 
                 <div class="searchBar">
-                    <div class="searchAndIcon">
-                        <svg class="mobileHide" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="11" cy="11" r="8"></circle>
-                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-                        </svg>
-                        <input id="ingredientSearch" type="text" placeholder="FILTER">
-                    </div>
-
-                    <button id="ingredientClearButton" class="clearButton" style="display: none;">
-                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="12" cy="12" r="10"></circle>
-                            <line x1="15" y1="9" x2="9" y2="15"></line>
-                            <line x1="9" y1="9" x2="15" y2="15"></line>
-                        </svg>
-                    </button>
-
-                    <select id="ingredientSelect" class="mobileHide">Sort By:
-                        <option value="" selected disabled>Sort By:</option>
-                        <option value="_name">Ingredient</option>
-                        <option value="category">Category</option>
-                        <option value="unit">Unit of Measurement</option>
-                    </select>
+                    <svg class="searchButton" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                    <input id="ingredientSearch" class="searchInput" type="text" placeholder="SEARCH">
                 </div>
 
                 <div id="categoryList"></div>
@@ -200,7 +183,7 @@
                 </template>
 
                 <template id="ingredient">
-                    <div class="ingredient">
+                    <div class="ingredient choosable tall">
                         <p></p>
 
                         <hr class="ingredientSpacer mobileHide">
@@ -222,27 +205,17 @@
                 </div>
 
                 <div class="searchBar">
-                    <div class="searchAndIcon">
-                        <svg class="mobileHide" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="11" cy="11" r="8"></circle>
-                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-                        </svg>
-                        <input id="recipeSearch" type="text" placeholder="FILTER">
-                    </div>
-
-                    <button id="recipeClearButton" class="clearButton" style="display: none;">
-                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="12" cy="12" r="10"></circle>
-                            <line x1="15" y1="9" x2="9" y2="15"></line>
-                            <line x1="9" y1="9" x2="15" y2="15"></line>
-                        </svg>
-                    </button>
+                    <svg class="searchButton" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                    <input id="recipeSearch" class="searchInput" type="text" placeholder="SEARCH">
                 </div>
 
                 <div id="recipeList"></div>
 
                 <template id="recipe">
-                    <div class="itemDisplay">
+                    <div class="choosable tall">
                         <p></p>
                         <p></p>
                     </div>
@@ -394,53 +367,17 @@
                 <div class="strandHead">
                     <h1 class="strandTitle">TRANSACTIONS</h1>
 
-                    <button class="button mobileHide" onclick="controller.openSidebar('newTransaction')">NEW</button>
-                </div>
-
-                <form id="transFormSubmit" class="filterForm">
-                    <h2>Search</h2>
-                    <div>
-                        <div class="dropdown">
-                            <div class="dropdownHead">
-                                <p>DATES</p>
-                                <button id="dateFilterBtn">
-                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                        <polyline points="6 9 12 15 18 9"></polyline>
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="dropdownContents" id="dateDropdown">
-                                <label>From:
-                                    <input id="transFilDate1"type="date">
-                                </label>
-                                
-                                <label>To:
-                                    <input id="transFilDate2" type="date">
-                                </label>
-                            </div>
-                            
-                        </div>
-                        <div class="dropdown">
-                            <div class="dropdownHead">
-                                <p>RECIPES</p>
-                                <button id="recipeFilterBtn">
-                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                        <polyline points="6 9 12 15 18 9"></polyline>
-                                    </svg>
-                                </button>
-                            </div>
+                    <div class="buttonBox">
+                        <button id="filterTransactionsButton" class="button">FILTER</button>
 
-                            <div class="dropdownContents" id="recipeDropDown"></div>
-                        </div>
+                        <button id="newTransactionButton" class="button mobileHide">NEW</button>
                     </div>
-
-                    <input class="button" type="submit" value="SUBMIT">
-                </form>
+                </div>
 
                 <div id="transactionsList" class="transactionsList"></div>
 
                 <template id="transaction">
-                    <div class="itemDisplay">
+                    <div class="choosable tall">
                         <p></p>
                         <p></p>
                         <p></p>
@@ -461,6 +398,7 @@
             <% include ./sidebars/newTransaction %>
             <% include ./sidebars/editRecipe %>
             <% include ./sidebars/orderFilter %>
+            <% include ./sidebars/transactionFilter %>
         </div>
 
         <% include ../shared/loader %>

views/dashboardPage/js/Merchant.js

@@ -41,14 +41,6 @@ class MerchantIngredient{
         }
     }
 
-    set quantity(quantity){
-        if(quantity < 0){
-            return false;
-        }
-
-        this._quantity = quantity;
-    }
-
     updateQuantity(quantity){
         this._quantity += this.convertToBase(quantity);
     }
@@ -56,7 +48,7 @@ class MerchantIngredient{
     convertToBase(quantity){
         switch(this._ingredient.unit){
             case "g": return quantity;
-            case "kg": return quantity * 1000; 
+            case "kg": return quantity * 1000;
             case "oz":  return quantity * 28.3495; 
             case "lb":  return quantity * 453.5924;
             case "ml": return quantity / 1000; 
@@ -217,7 +209,7 @@ class Merchant{
     getIngredient(id){
         for(let i = 0; i < this._ingredients.length; i++){
             if(this._ingredients[i].ingredient.id === id){
-                return this._ingredients[i].ingredient;
+                return this._ingredients[i];
             }
         }
     }
@@ -229,7 +221,6 @@ class Merchant{
     addRecipe(recipe){
         this._recipes.push(recipe);
 
-        this._modules.transactions.isPopulated = false;
         this._modules.recipeBook.isPopulated = false;
     }
 
@@ -241,7 +232,6 @@ class Merchant{
 
         this._recipes.splice(index, 1);
 
-        this._modules.transactions.isPopulated = false;
         this._modules.recipeBook.isPopulated = false;
     }
 
@@ -279,7 +269,6 @@ class Merchant{
             }
         }
 
-        this._modules.transactions.isPopulated = false;
         this._modules.recipeBook.isPopulated = false;
     }
 
@@ -310,7 +299,7 @@ class Merchant{
         for(let i = 0; i < transaction.recipes.length; i++){
             const recipe = transaction.recipes[i];
             for(let j = 0; j < recipe.recipe.ingredients.length; j++){
-                const ingredient = recipe.recipe.ingredients[i];
+                const ingredient = recipe.recipe.ingredients[j];
                 if(ingredients[ingredient.ingredient.id]){
                     ingredients[ingredient.ingredient.id] += recipe.quantity * ingredient.quantity;
                 }else{
@@ -330,7 +319,6 @@ class Merchant{
 
         this._modules.home.isPopulated = false;
         this._modules.ingredients.isPopulated = false;
-        this._modules.transactions.isPopulated = false;
         this._modules.analytics.newData = true;
     }
 
@@ -346,7 +334,7 @@ class Merchant{
         for(let i = 0; i < transaction.recipes.length; i++){
             const recipe = transaction.recipes[i];
             for(let j = 0; j < recipe.recipe.ingredients.length; j++){
-                const ingredient = recipe.recipe.ingredients[i];
+                const ingredient = recipe.recipe.ingredients[j];
                 if(ingredients[ingredient.ingredient.id]){
                     ingredients[ingredient.ingredient.id] += ingredient.quantity * recipe.quantity;
                 }else{
@@ -359,14 +347,14 @@ class Merchant{
         for(let i = 0; i < keys.length; i++){
             for(let j = 0; j < this._ingredients.length; j++){
                 if(keys[i] === this._ingredients[j].ingredient.id){
-                    this._ingredients.quantity += ingredients[keys[i]];
+                    this._ingredients[j].updateQuantity(ingredients[keys[i]]);
+                    break;
                 }
             }
         }
 
         this._modules.home.isPopulated = false;
         this._modules.ingredients.isPopulated = false;
-        this._modules.transactions.isPopulated = false;
         this._modules.analytics.newData = true;
     }
 
@@ -392,6 +380,10 @@ class Merchant{
         this._modules.orders.isPopulated = false;
     }
 
+    setOrders(orders){
+        this._orders = orders
+    }
+
     removeOrder(order){
         const index = this._orders.indexOf(order);
         if(index === undefined){
@@ -403,7 +395,8 @@ class Merchant{
         for(let i = 0; i < order.ingredients.length; i++){
             for(let j = 0; j < this._ingredients.length; j++){
                 if(order.ingredients[i].ingredient === this._ingredients[j].ingredient){
-                    this._ingredients[j].quantity -= order.ingredients[i].quantity;
+                    this._ingredients[j].updateQuantity(-order.ingredients[i].quantity);
+                    break;
                 }
             }
         }

views/dashboardPage/js/Order.js

@@ -40,26 +40,34 @@ class OrderIngredient{
         }
     }
 
+    updateQuantity(quantity){
+        if(quantity < 0){
+            return false;
+        }
+
+        this._quantity += this.convertToBase(quantity);
+    }
+
     convertToBase(quantity){
         switch(this._ingredient.unit){
             case "g": return quantity;
-            case "kg": return quantity / 1000; 
-            case "oz":  return quantity / 28.3495; 
-            case "lb":  return quantity / 453.5924;
-            case "ml": return quantity *= 1000; 
+            case "kg": return quantity * 1000;
+            case "oz":  return quantity * 28.3495; 
+            case "lb":  return quantity * 453.5924;
+            case "ml": return quantity / 1000; 
             case "l": return quantity;
-            case "tsp": return quantity * 202.8842; 
-            case "tbsp": return quantity * 67.6278; 
-            case "ozfl": return quantity * 33.8141; 
-            case "cup": return quantity * 4.1667; 
-            case "pt": return quantity * 2.1134; 
-            case "qt": return quantity * 1.0567; 
-            case "gal": return quantity / 3.7854;
-            case "mm": return quantity * 1000; 
-            case "cm": return quantity * 100; 
+            case "tsp": return quantity / 202.8842; 
+            case "tbsp": return quantity / 67.6278; 
+            case "ozfl": return quantity / 33.8141; 
+            case "cup": return quantity / 4.1667; 
+            case "pt": return quantity / 2.1134; 
+            case "qt": return quantity / 1.0567; 
+            case "gal": return quantity * 3.7854;
+            case "mm": return quantity / 1000; 
+            case "cm": return quantity / 100; 
             case "m": return quantity;
-            case "in": return quantity * 39.3701; 
-            case "ft": return quantity * 3.2808;
+            case "in": return quantity / 39.3701; 
+            case "ft": return quantity / 3.2808;
             default: return quantity;
         }
     }
@@ -133,11 +141,17 @@ class Order{
         }
 
         for(let i = 0; i < ingredients.length; i++){
-            this._ingredients.push(new OrderIngredient(
-                ingredients[i].ingredient,
-                ingredients[i].quantity,
-                ingredients[i].pricePerUnit
-            ));
+            for(let j = 0; j < merchant.ingredients.length; j++){
+                if(merchant.ingredients[j].ingredient.id === ingredients[i].ingredient){
+                    this._ingredients.push(new OrderIngredient(
+                        merchant.ingredients[j].ingredient,
+                        ingredients[i].quantity,
+                        ingredients[i].pricePerUnit
+                    ));
+                    break;
+                }
+            }
+            
         }
 
         this._parent.modules.ingredients.isPopulated = false;

views/dashboardPage/js/analytics.js

@@ -40,16 +40,16 @@ let analytics = {
 
         for(let i = 0; i < merchant.ingredients.length; i++){
             let li = document.createElement("li");
-            li.classList.add("itemButton");
+            li.classList.add("choosable");
             li.item = merchant.ingredients[i];
             li.innerText = merchant.ingredients[i].ingredient.name;
             li.onclick = ()=>{
                 const itemsList = document.getElementById("itemsList");
                 for(let i = 0; i < itemsList.children.length; i++){
-                    itemsList.children[i].classList.remove("analItemActive");
+                    itemsList.children[i].classList.remove("active");
                 }
 
-                li.classList.add("analItemActive");
+                li.classList.add("active");
 
                 this.ingredient = merchant.ingredients[i];
                 this.ingredientDisplay();
@@ -71,15 +71,15 @@ let analytics = {
 
         for(let i = 0; i < merchant.recipes.length; i++){
             let li = document.createElement("li");
-            li.classList.add("itemButton");
+            li.classList.add("choosable");
             li.recipe = merchant.recipes[i];
             li.innerText = merchant.recipes[i].name;
             li.onclick = ()=>{
                 let recipeList = document.getElementById("analRecipeList");
                 for(let i = 0; i < recipeList.children.length; i++){
-                    recipeList.children[i].classList.remove("analItemActive");
+                    recipeList.children[i].classList.remove("active");
                 }
-                li.classList.add("analItemActive");
+                li.classList.add("active");
 
                 this.recipe = merchant.recipes[i];
                 this.recipeDisplay();

views/dashboardPage/js/dashboard.js

@@ -16,6 +16,7 @@ const orderDetails = require("./orderDetails.js");
 const orderFilter = require("./orderFilter.js");
 const recipeDetails = require("./recipeDetails.js");
 const transactionDetails = require("./transactionDetails.js");
+const transactionFilter = require("./transactionFilter.js");
 
 const Merchant = require("./Merchant.js");
 const Ingredient = require("./Ingredient.js");
@@ -75,11 +76,13 @@ controller = {
             case "orders":
                 activeButton = document.getElementById("ordersBtn");
                 document.getElementById("ordersStrand").style.display = "flex";
-                orders.display(Order, data);
+                orders.orders = data;
+                orders.display(Order);
                 break;
             case "transactions":
                 activeButton = document.getElementById("transactionsBtn");
                 document.getElementById("transactionsStrand").style.display = "flex";
+                transactions.transactions = data;
                 transactions.display(Transaction);
                 break;
         }
@@ -134,6 +137,9 @@ controller = {
             case "transactionDetails":
                 transactionDetails.display(data);
                 break;
+            case "transactionFilter":
+                transactionFilter.display();
+                break;
             case "newTransaction":
                 newTransaction.display(Transaction);
                 break;
@@ -149,7 +155,31 @@ controller = {
     closeSidebar: function(){
         let sidebar = document.getElementById("sidebarDiv");
         for(let i = 0; i < sidebar.children.length; i++){
-            sidebar.children[i].style.display = "none";
+            if(sidebar.children[i].style.display !== "none"){
+                sidebar.children[i].style.display = "none";
+                let choosables = [];
+
+                switch(sidebar.children[i].id){
+                    case "ingredientDetails": 
+                        choosables = document.querySelectorAll(".ingredient");
+                        break;
+                    case "transactionDetails":
+                        choosables = document.getElementById("transactionsList").children;
+                        break;
+                    case "recipeDetails":
+                        choosables = document.getElementById("recipeList").children;
+                        break;
+                    case "orderDetails":
+                        choosables = document.getElementById("orderList").children;
+                        break;
+                }
+
+                for(let i = 0; i < choosables.length; i++){
+                    choosables[i].classList.remove("active");
+                }
+            }
+
+            
         }
         sidebar.classList = "sidebarHide";
 
@@ -236,13 +266,25 @@ controller = {
             }
         }
 
-    return price;
-}
+        return price;
+    }
 }
 
 if(window.screen.availWidth > 1000 && window.screen.availWidth <= 1400){
     this.changeMenu();
     document.getElementById("menuShifter2").style.display = "none";
 }
+//Add click listeners for menu buttons
+document.getElementById("homeBtn").onclick = ()=>{controller.openStrand("home")};
+document.getElementById("ingredientsBtn").onclick = ()=>{controller.openStrand("ingredients")};
+document.getElementById("recipeBookBtn").onclick = ()=>{controller.openStrand("recipeBook")};
+document.getElementById("analyticsBtn").onclick = ()=>{controller.openStrand("analytics")};
+document.getElementById("ordersBtn").onclick = async ()=>{
+    if(merchant.orders.length === 0){
+        merchant.setOrders(await orders.getOrders(Order));
+    }
+    controller.openStrand("orders", merchant.orders);
+}
+document.getElementById("transactionsBtn").onclick = ()=>{controller.openStrand("transactions", merchant.getTransactions())};
 
 controller.openStrand("home");

views/dashboardPage/js/editRecipe.js

@@ -109,6 +109,7 @@ let editRecipe = {
                 }else{
                     merchant.updateRecipe(response);
                     controller.openStrand("recipeBook");
+                    banner.createNotification("RECIPE UPDATED");
                 }
             })
             .catch((err)=>{

views/dashboardPage/js/ingredientDetails.js

@@ -33,19 +33,23 @@ let ingredientDetails = {
         }
 
         //Show recipes that this ingredient is a part of
-        let ul = document.getElementById("ingredientRecipeList");
+        let recipeList = document.getElementById("ingredientRecipeList");
+        let template = document.getElementById("ingredientRecipe").content.children[0];
         let recipes = merchant.getRecipesForIngredient(ingredient.ingredient);
-        while(ul.children.length > 0){
-            ul.removeChild(ul.firstChild);
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
         }
+
         for(let i = 0; i < recipes.length; i++){
-            let li = document.createElement("li");
-            li.innerText = recipes[i].name;
-            li.onclick = ()=>{
+            let recipeDiv = template.cloneNode(true);
+            recipeDiv.children[0].innerText = recipes[i].name;
+            recipeDiv.onclick = ()=>{
                 controller.openStrand("recipeBook");
                 controller.openSidebar("recipeDetails", recipes[i]);
             }
-            ul.appendChild(li);
+            recipeDiv.classList.add("choosable");
+            recipeList.appendChild(recipeDiv);
         }
     },
 

views/dashboardPage/js/ingredients.js

@@ -1,5 +1,3 @@
-const { populate } = require("./orders");
-
 let ingredients = {
     isPopulated: false,
     ingredients: [],
@@ -7,22 +5,16 @@ let ingredients = {
     display: function(){
         if(!this.isPopulated){
             document.getElementById("ingredientSearch").oninput = ()=>{this.search()};
-            document.getElementById("ingredientClearButton").onclick = ()=>{this.clearSorting()};
-            document.getElementById("ingredientSelect").onchange = ()=>{this.sort()};
 
-            this.populateByProperty("category");
+            this.populateByProperty();
 
             this.isPopulated = true;
         }
     },
 
-    populateByProperty: function(property){
+    populateByProperty: function(){
         let categories;
-        if(property === "category"){
-            categories = merchant.categorizeIngredients();
-        }else if(property === "unit"){
-            categories = merchant.unitizeIngredients();
-        }
+        categories = merchant.categorizeIngredients();
         
         let ingredientStrand = document.getElementById("categoryList");
         let categoryTemplate = document.getElementById("categoryDiv").content.children[0];
@@ -37,7 +29,7 @@ let ingredients = {
             let categoryDiv = categoryTemplate.cloneNode(true);
             categoryDiv.children[0].children[0].innerText = categories[i].name.toUpperCase();
             
-            categoryDiv.children[0].children[1].onclick = ()=>{
+            categoryDiv.children[0].onclick = ()=>{
                 this.toggleCategory(categoryDiv.children[1], categoryDiv.children[0].children[1]);
             };
             categoryDiv.children[1].style.display = "none";
@@ -48,10 +40,12 @@ let ingredients = {
                 let ingredientDiv = ingredientTemplate.cloneNode(true);
 
                 ingredientDiv.children[0].innerText = ingredient.ingredient.name;
-                ingredientDiv.onclick = ()=>{controller.openSidebar("ingredientDetails", ingredient)};
+                ingredientDiv.onclick = ()=>{
+                    controller.openSidebar("ingredientDetails", ingredient);
+                    ingredientDiv.classList.add("active");
+                };
                 ingredientDiv._name = ingredient.ingredient.name.toLowerCase();
                 ingredientDiv._unit = ingredient.ingredient.unit.toLowerCase();
-
                 
                 if(ingredient.ingredient.specialUnit === "bottle"){
                     ingredientDiv.children[2].innerText = `${ingredient.quantity.toFixed(2)} BOTTLES`
@@ -89,11 +83,9 @@ let ingredients = {
 
     search: function(){
         let input = document.getElementById("ingredientSearch").value.toLowerCase();
-        document.getElementById("ingredientSelect").selectedIndex = 0;
 
         if(input === ""){
-            this.populateByProperty("category");
-            document.getElementById("ingredientClearButton").style.display = "none";
+            this.populateByProperty();
             return;
         }
 
@@ -104,40 +96,7 @@ let ingredients = {
             }
         }
 
-        document.getElementById("ingredientClearButton").style.display = "inline";
         this.displayIngredientsOnly(matchingIngredients);
-    },
-
-    sort: function(){
-        let sortType = document.getElementById("ingredientSelect").value;
-        
-        if(sortType === ""){
-            return;
-        }
-
-        document.getElementById("ingredientSearch").value = "";
-
-        if(sortType === "category"){
-            this.populateByProperty("category");
-            return;
-        }
-
-        if(sortType === "unit"){
-            this.populateByProperty("unit");
-            return;
-        }
-
-        document.getElementById("ingredientClearButton").style.display = "inline";
-        let sortedIngredients = this.ingredients.slice().sort((a, b)=> (a[sortType] > b[sortType]) ? 1 : -1);
-        this.displayIngredientsOnly(sortedIngredients);
-    },
-
-    clearSorting: function(button){
-        document.getElementById("ingredientSearch").value = "";
-        document.getElementById("ingredientSelect").selectedIndex = 0;
-        document.getElementById("ingredientClearButton").style.display = "none";
-
-        this.populateByProperty("category");
     }
 }
 

views/dashboardPage/js/newOrder.js

@@ -15,7 +15,7 @@ let newOrder = {
 
         for(let i = 0; i < merchant.ingredients.length; i++){
             let ingredient = document.createElement("button");
-            ingredient.classList = "newOrderIngredient";
+            ingredient.classList = "choosable";
             ingredient.innerText = merchant.ingredients[i].ingredient.name;
             ingredient.onclick = ()=>{this.addIngredient(merchant.ingredients[i], ingredient)};
             ingredientList.appendChild(ingredient);
@@ -108,34 +108,19 @@ let newOrder = {
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{
-                    let ingredients = [];
-                    for(let i = 0; i < response.ingredients.length; i++){
-                        for(let j = 0; j < merchant.ingredients.length; j++){
-                            if(merchant.ingredients[j].ingredient.id === response.ingredients[i].ingredient){
-                                ingredients.push({
-                                    ingredient: merchant.ingredients[j].ingredient,
-                                    quantity: response.ingredients[i].quantity,
-                                    pricePerUnit: response.ingredients[i].pricePerUnit
-                                });
-
-                                break;
-                            }
-                        }
-                    }
-
                     let order = new Order(
                         response._id,
                         response.name,
                         response.date,
                         response.taxes,
                         response.fees,
-                        ingredients,
+                        response.ingredients,
                         merchant
                     );
 
                     merchant.addOrder(order, true);
                     
-                    controller.openStrand("orders");
+                    controller.openStrand("orders", merchant.orders);
                     banner.createNotification("NEW ORDER CREATED");
                 }
             })

views/dashboardPage/js/newTransaction.js

@@ -81,7 +81,7 @@ let newTransaction = {
 
                         merchant.addTransaction(transaction);
 
-                        controller.openStrand("transactions");
+                        controller.openStrand("transactions", merchant.getTransactions());
                         banner.createNotification("TRANSACTION CREATED");
                     }
                 })

views/dashboardPage/js/orderDetails.js

@@ -19,8 +19,12 @@ let orderDetails = {
             
             ingredientDiv.children[0].innerText = order.ingredients[i].ingredient.name;
             ingredientDiv.children[2].innerText = `$${order.ingredients[i].cost().toFixed(2)}`;
+            ingredientDiv.onclick = ()=>{
+                controller.openStrand("ingredients");
+                controller.openSidebar("ingredientDetails", merchant.getIngredient(order.ingredients[i].ingredient.id));
+            }
             
-            const ingredientDisplay = ingredientDiv.children[1];
+            let ingredientDisplay = ingredientDiv.children[1];
             if(ingredient.specialUnit === "bottle"){
                 ingredientDisplay.innerText = `${order.ingredients[i].quantity.toFixed(2)} bottles x $${order.ingredients.pricePerUnit.toFixed(2)}`;
             }else{
@@ -51,7 +55,7 @@ let orderDetails = {
                 }else{
                     merchant.removeOrder(order);
 
-                    controller.openStrand("orders");
+                    controller.openStrand("orders", merchant.orders);
                     banner.createNotification("ORDER REMOVED");
                 }
             })

views/dashboardPage/js/orderFilter.js

@@ -42,7 +42,7 @@ let orderFilter = {
         }
 
         if(data.startDate >= data.endDate){
-            banner.createError("START DATE CACNNOT BE AFTER END DATE");
+            banner.createError("START DATE CANNOT BE AFTER END DATE");
             return;
         }
 
@@ -77,31 +77,17 @@ let orderFilter = {
             }else if(response.length === 0){
                 banner.createError("NO ORDERS MATCH YOUR SEARCH");
             }else{
-                let ingredients = [];
                 for(let i = 0; i < response.length; i++){
-                    for(let j = 0; j < response[i].ingredients.length; j++){
-                        for(let k = 0; k < merchant.ingredients.length; k++){
-                            if(merchant.ingredients[k].ingredient.id === response[i].ingredients[j].ingredient){
-                                ingredients.push({
-                                    ingredient: merchant.ingredients[k].ingredient,
-                                    quantity: response[i].ingredients[j].quantity,
-                                    pricePerUnit: response[i].ingredients[j].pricePerUnit
-                                });
-                                break;
-                            }
-                        }
-                    }
-
                     orders.push(new Order(
                         response[i]._id,
                         response[i].name,
                         response[i].date,
                         response[i].taxes,
                         response[i].fees,
-                        ingredients,
+                        response[i].ingredients,
                         merchant
                     ));
-                }    
+                }
             }
 
             controller.openStrand("orders", orders);

views/dashboardPage/js/orders.js

@@ -1,14 +1,7 @@
 let orders = {
     orders: [],
 
-    display: async function(Order, newOrders){
-        if(newOrders){
-            this.orders = newOrders;
-        }
-        if(this.orders.length === 0){
-            this.orders = await this.getOrders(Order);
-        }
-
+    display: function(){
         document.getElementById("orderFilterBtn").onclick = ()=>{controller.openSidebar("orderFilter")};
         document.getElementById("newOrderBtn").onclick = ()=>{controller.openSidebar("newOrder")};
 
@@ -26,7 +19,10 @@ let orders = {
             orderDiv.children[1].innerText = `${this.orders[i].ingredients.length} ingredients`;
             orderDiv.children[2].innerText = this.orders[i].date.toLocaleDateString("en-US");
             orderDiv.children[3].innerText = `$${this.orders[i].getTotalCost().toFixed(2)}`;
-            orderDiv.onclick = ()=>{controller.openSidebar("orderDetails", this.orders[i])};
+            orderDiv.onclick = ()=>{
+                controller.openSidebar("orderDetails", this.orders[i]);
+                orderDiv.classList.add("active");
+            }
             orderList.appendChild(orderDiv);
         }
     },
@@ -47,32 +43,23 @@ let orders = {
                 banner.createError(response);
             }else{
                 let orders = [];
-                for(let i = 0; i < response.length; i++){
-                    let ingredients = [];
-                    for(let j = 0; j < response[i].ingredients.length; j++){
-                        for(let k = 0; k < merchant.ingredients.length; k++){
-                            if(merchant.ingredients[k].ingredient.id === response[i].ingredients[j].ingredient){
-                                ingredients.push({
-                                    ingredient: merchant.ingredients[k].ingredient,
-                                    quantity: response[i].ingredients[j].quantity,
-                                    pricePerUnit: response[i].ingredients[j].pricePerUnit
-                                });
-                                break;
-                            }
-                        }
-                    }
 
+                for(let i = 0; i < response.length; i++){
                     orders.push(new Order(
                         response[i]._id,
                         response[i].name,
                         response[i].date,
                         response[i].taxes,
                         response[i].fees,
-                        ingredients,
+                        response[i].ingredients,
                         merchant
                     ));
                 }
 
+                if(merchant.orders.length === 0){
+                    merchant.setOrders(orders);
+                }
+
                 return orders;
             }
         })

views/dashboardPage/js/recipeBook.js

@@ -10,7 +10,6 @@ let recipeBook = {
                 document.getElementById("posUpdateRecipe").onclick = ()=>{this.posUpdate(Recipe)};
             }
             document.getElementById("recipeSearch").oninput = ()=>{this.search()};
-            document.getElementById("recipeClearButton").onclick = ()=>{this.clearSorting()};
 
             this.populateRecipes();
 
@@ -29,7 +28,10 @@ let recipeBook = {
 
         for(let i = 0; i < merchant.recipes.length; i++){
             let recipeDiv = template.cloneNode(true);
-            recipeDiv.onclick = ()=>{controller.openSidebar("recipeDetails", merchant.recipes[i])};
+            recipeDiv.onclick = ()=>{
+                controller.openSidebar("recipeDetails", merchant.recipes[i]);
+                recipeDiv.classList.add("active");
+            }
             recipeDiv._name = merchant.recipes[i].name;
             recipeList.appendChild(recipeDiv);
 
@@ -43,7 +45,6 @@ let recipeBook = {
     search: function(){
         let input = document.getElementById("recipeSearch").value.toLowerCase();
         let recipeList = document.getElementById("recipeList");
-        let clearButton = document.getElementById("recipeClearButton");
 
         let matchingRecipes = [];
         for(let i = 0; i < this.recipeDivList.length; i++){
@@ -58,17 +59,6 @@ let recipeBook = {
         for(let i = 0; i < matchingRecipes.length; i++){
             recipeList.appendChild(matchingRecipes[i]);
         }
-
-        if(input === ""){
-            clearButton.style.display = "none";
-        }else{
-            clearButton.style.display = "inline";
-        }
-    },
-
-    clearSorting: function(){
-        document.getElementById("recipeSearch").value = "";
-        this.search();
     },
 
     posUpdate: function(Recipe){

views/dashboardPage/js/recipeDetails.js

@@ -18,6 +18,10 @@ let recipeDetails = {
             let recipeDiv = template.cloneNode(true);
             recipeDiv.children[0].innerText = recipe.ingredients[i].ingredient.name;
             recipeDiv.children[1].innerText = `${recipe.ingredients[i].getQuantityDisplay()}`;
+            recipeDiv.onclick = ()=>{
+                controller.openStrand("ingredients");
+                controller.openSidebar("ingredientDetails", merchant.getIngredient(recipe.ingredients[i].ingredient.id));
+            }
             ingredientsDiv.appendChild(recipeDiv);
         }
 
@@ -48,27 +52,6 @@ let recipeDetails = {
             .finally(()=>{
                 loader.style.display = "none";
             });
-    },
-
-    displayAddIngredient: function(){
-        let template = document.getElementById("addRecIngredient").content.children[0].cloneNode(true);
-        template.name = "new";
-        document.getElementById("recipeIngredientList").appendChild(template);
-
-        let categories = merchant.categorizeIngredients();
-
-        for(let i = 0; i < categories.length; i++){
-            let optGroup = document.createElement("optgroup");
-            optGroup.label = categories[i].name;
-            template.children[0].appendChild(optGroup);
-
-            for(let j = 0; j < categories[i].ingredients.length; j++){
-                let option = document.createElement("option");
-                option.innerText = `${categories[i].ingredients[j].ingredient.name} (${categories[i].ingredients[j].ingredient.unit})`;
-                option.ingredient = categories[i].ingredients[j].ingredient;
-                optGroup.appendChild(option);
-            }
-        }
     }
 }
 

views/dashboardPage/js/transactionDetails.js

@@ -20,13 +20,17 @@ let transactionDetails = {
             recipe.children[0].innerText = transaction.recipes[i].recipe.name;
             recipe.children[1].innerText = `${transaction.recipes[i].quantity} x $${transaction.recipes[i].recipe.price.toFixed(2)}`;
             recipe.children[2].innerText = `$${price.toFixed(2)}`;
+            recipe.onclick = ()=>{
+                controller.openStrand("recipeBook");
+                controller.openSidebar("recipeDetails", transaction.recipes[i].recipe);
+            }
             recipeList.appendChild(recipe);
 
             totalRecipes += transaction.recipes[i].quantity;
             totalPrice += price;
         }
 
-        let months = ["January", "Fecbruary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+        let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
         let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
         let dateString = `${days[transaction.date.getDay()]}, ${months[transaction.date.getMonth()]} ${transaction.date.getDate()}, ${transaction.date.getFullYear()}`;
 
@@ -50,14 +54,13 @@ let transactionDetails = {
                 "Content-Type": "application/json;charset=utf-8"
             },
         })
-            .then(response => response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{
                     merchant.removeTransaction(this.transaction);
 
-                    controller.openStrand("transactions");
+                    controller.openStrand("transactions", merchant.getTransactions());
                     banner.createNotification("TRANSACTION REMOVED");
                 }
             })

views/dashboardPage/js/transactionFilter.js

@@ -0,0 +1,105 @@
+const Transaction = require("./Transaction");
+
+let transactionFilter = {
+    display: function(){
+        //Set default dates
+        let today = new Date();
+        let monthAgo = new Date(today);
+        monthAgo.setMonth(today.getMonth() - 1);
+
+        document.getElementById("transFilterDateStart").valueAsDate = monthAgo;
+        document.getElementById("transFilterDateEnd").valueAsDate = today;
+
+        //populate recipes
+        let recipeList = document.getElementById("transFilterRecipeList");
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
+        }
+
+        for(let i = 0; i < merchant.recipes.length; i++){
+            let recipe = document.createElement("div");
+            recipe.innerText = merchant.recipes[i].name;
+            recipe.recipe = merchant.recipes[i];
+            recipe.classList.add("choosable");
+            recipe.onclick = ()=>{this.toggleActive(recipe)};
+            recipeList.appendChild(recipe);
+        }
+
+        //Submit button
+        document.getElementById("transFilterSubmit").onclick = ()=>{this.submit()};
+    },
+
+    toggleActive: function(element){
+        if(element.classList.contains("active")){
+            element.classList.remove("active");
+        }else{
+            element.classList.add("active");
+        }
+    },
+
+    submit: function(){
+        let data = {
+            startDate: document.getElementById("transFilterDateStart").valueAsDate,
+            endDate: document.getElementById("transFilterDateEnd").valueAsDate,
+            recipes: []
+        }
+
+        if(data.startDate >= data.endDate){
+            banner.createError("START DATE CANNOT BE AFTER END DATE");
+            return;
+        }
+
+        let recipes = document.getElementById("transFilterRecipeList").children;
+        for(let i = 0; i < recipes.length; i++){
+            if(recipes[i].classList.contains("active")){
+                data.recipes.push(recipes[i].recipe.id);
+            }
+        }
+
+        if(data.recipes.length === 0){
+            for(let i = 0; i < merchant.recipes.length; i++){
+                data.recipes.push(merchant.recipes[i].id);
+            }
+        }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
+        fetch("/transaction", {
+            method: "post",
+            headers: {
+                "Content-Type": "application/json;charset=utf-8"
+            },
+            body: JSON.stringify(data)
+        })
+            .then(response => response.json())
+            .then((response)=>{
+                let transactions = [];
+                if(typeof(response) === "string"){
+                    banner.createError(response);
+                }else if(response.length === 0){
+                    banner.createError("NO TRANSACTIONS MATCH YOUR SEARCH");
+                }else{
+                    for(let i = 0; i < response.length; i++){
+                        transactions.push(new Transaction(
+                            response[i]._id,
+                            response[i].date,
+                            response[i].recipes,
+                            merchant
+                        ));
+                    }
+                }
+
+                controller.openStrand("transactions", transactions);
+            })
+            .catch((err)=>{
+                banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
+    }
+}
+
+module.exports = transactionFilter;

views/dashboardPage/js/transactions.js

@@ -1,168 +1,47 @@
 let transactions = {
-    isPopulated: false,
+    transactions: [],
 
     display: function(Transaction){
-        if(!this.isPopulated){
-            let transactionsList = document.getElementById("transactionsList");
-            let dateDropdown = document.getElementById("dateDropdown");
-            let recipeDropdown = document.getElementById("recipeDropDown");
-            let template = document.getElementById("transaction").content.children[0];
+        document.getElementById("filterTransactionsButton").onclick = ()=>{controller.openSidebar("transactionFilter")};
+        document.getElementById("newTransactionButton").onclick = ()=>{controller.openSidebar("newTransaction")};
 
-            let now = new Date();
-            let monthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
-            document.getElementById("transFilDate1").valueAsDate = monthAgo;
-            document.getElementById("transFilDate2").valueAsDate = now;
+        this.populateTransactions(this.transactions);
 
-            dateDropdown.style.display = "none";
-            recipeDropdown.style.display = "none";
-
-            document.getElementById("dateFilterBtn").onclick = ()=>{this.toggleDropdown(dateDropdown)};
-            document.getElementById("recipeFilterBtn").onclick = ()=>{this.toggleDropdown(recipeDropdown)};
-
-            while(recipeDropdown.children.length > 0){
-                recipeDropdown.removeChild(recipeDropdown.firstChild);
-            }
-
-            for(let i = 0; i < merchant.recipes.length; i++){
-                let checkbox = document.createElement("input");
-                checkbox.type = "checkbox";
-                checkbox.recipe = merchant.recipes[i];
-                recipeDropdown.appendChild(checkbox);
-
-                let label = document.createElement("label");
-                label.innerText = merchant.recipes[i].name;
-                label.for = checkbox;
-                recipeDropdown.appendChild(label);
-
-                let brk = document.createElement("br");
-                recipeDropdown.appendChild(brk);
-            }
-
-            while(transactionsList.children.length > 0){
-                transactionsList.removeChild(transactionsList.firstChild);
-            }
-
-            let i = 0
-            const transactions = merchant.getTransactions();
-            while(i < transactions.length && i < 100){
-                let transactionDiv = template.cloneNode(true);
-                let transaction = transactions[i];
-
-                transactionDiv.onclick = ()=>{controller.openSidebar("transactionDetails", transaction)};
-                transactionsList.appendChild(transactionDiv);
-
-                let totalRecipes = 0;
-                let totalPrice = 0;
-
-                for(let j = 0; j < transactions[i].recipes.length; j++){
-                    totalRecipes += transactions[i].recipes[j].quantity;
-                    totalPrice += transactions[i].recipes[j].recipe.price * transactions[i].recipes[j].quantity;
-                }
-
-                transactionDiv.children[0].innerText = `${transactions[i].date.toLocaleDateString()} ${transactions[i].date.toLocaleTimeString()}`;
-                transactionDiv.children[1].innerText = `${totalRecipes} recipes sold`;
-                transactionDiv.children[2].innerText = `$${totalPrice.toFixed(2)}`;
-
-                i++;
-            }
-
-            document.getElementById("transFormSubmit").onsubmit = ()=>{this.submitFilter(Transaction)};
-
-            this.isPopulated = true;
-        }
+        this.isPopulated = true;
     },
 
-    submitFilter: function(Transaction){
-        event.preventDefault();
+    populateTransactions: function(transactions){
+        let transactionsList = document.getElementById("transactionsList");
+        let template = document.getElementById("transaction").content.children[0];
 
-        let data = {
-            startDate: document.getElementById("transFilDate1").valueAsDate,
-            endDate: document.getElementById("transFilDate2").valueAsDate,
-            recipes: []
+        while(transactionsList.children.length > 0){
+            transactionsList.removeChild(transactionsList.firstChild);
         }
 
-        if(data.startDate >= data.endDate){
-            banner.createError("START DATE CANNOT BE AFTER END DATE");
-            return;
-        }
+        let i = 0;
+        while(i < transactions.length && i < 100){
+            let transactionDiv = template.cloneNode(true);
+            let transaction = transactions[i];
 
-        let recipeChoices = document.getElementById("recipeDropDown");
-        for(let i = 0; i < recipeChoices.children.length; i += 3){
-            if(recipeChoices.children[i].checked){
-                data.recipes.push(recipeChoices.children[i].recipe.id);
+            transactionDiv.onclick = ()=>{
+                controller.openSidebar("transactionDetails", transaction);
+                transactionDiv.classList.add("active");
             }
-        }
+            transactionsList.appendChild(transactionDiv);
 
-        if(data.recipes.length === 0){
-            for(let i = 0; i < merchant.recipes.length; i++){
-                data.recipes.push(merchant.recipes[i].id);
-            }
-        }
+            let totalRecipes = 0;
+            let totalPrice = 0;
 
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        fetch("/transaction", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(data)
-        })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    let transactionList = document.getElementById("transactionsList");
-                    let template = document.getElementById("transaction").content.children[0];
-
-                    while(transactionList.children.length > 0){
-                        transactionList.removeChild(transactionList.firstChild);
-                    }
-
-                    for(let i = 0; i < response.length; i++){
-                        let transactionDiv = template.cloneNode(true);
-                        let recipeCount = 0;
-                        let cost = 0;
-                        let transaction = new Transaction(
-                            response[i]._id,
-                            response[i].date,
-                            response[i].recipes,
-                            merchant
-                        );
-
-                        for(let j = 0; j < transaction.recipes.length; j++){
-                            recipeCount += transaction.recipes[j].quantity;
-                            cost += transaction.recipes[j].quantity * transaction.recipes[j].recipe.price;
-                        }
-
-                        transactionDiv.children[0].innerText = `${transaction.date.toLocaleDateString()} ${transaction.date.toLocaleTimeString()}`;
-                        transactionDiv.children[1].innerText = `${recipeCount} recipes sold`;
-                        transactionDiv.children[2].innerText = `$${(cost / 100).toFixed(2)}`;
-                        transactionDiv.onclick = ()=>{controller.openSidebar("transactionDetails", transaction)};
-                        transactionList.appendChild(transactionDiv);
-                    }
-                }
-            })
-            .catch((err)=>{
-                banner.createError("UNABLE TO DISPLAY THE TRANSACTIONS");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
+            for(let j = 0; j < transactions[i].recipes.length; j++){
+                totalRecipes += transactions[i].recipes[j].quantity;
+                totalPrice += transactions[i].recipes[j].recipe.price * transactions[i].recipes[j].quantity;
+            }
 
-    toggleDropdown: function(dropdown){
-        event.preventDefault();
-        let polyline = dropdown.parentElement.children[0].children[1].children[0].children[0];
+            transactionDiv.children[0].innerText = `${transactions[i].date.toLocaleDateString()} ${transactions[i].date.toLocaleTimeString()}`;
+            transactionDiv.children[1].innerText = `${totalRecipes} recipes sold`;
+            transactionDiv.children[2].innerText = `$${totalPrice.toFixed(2)}`;
 
-        if(dropdown.style.display === "none"){
-            dropdown.style.display = "block";
-            polyline.setAttribute("points", "18 15 12 9 6 15");
-        }else{
-            dropdown.style.display = "none";
-            polyline.setAttribute("points", "6 9 12 15 18 9");
+            i++;
         }
     }
 }

views/dashboardPage/sidebars/ingredientDetails.ejs

@@ -42,5 +42,11 @@
 
     <label>RECIPES:</label>
 
-    <ul id="ingredientRecipeList"></ul>
+    <div id="ingredientRecipeList"></div>
+
+    <template id="ingredientRecipe">
+        <div>
+            <p></p>
+        </div>
+    </template>
 </div>

views/dashboardPage/sidebars/newTransaction.ejs

@@ -8,7 +8,7 @@
         </button>
     </div>
 
-    <h2>CREATE NEW TRANSACTION</h2>
+    <h2>NEW TRANSACTION</h2>
 
     <input id="newTransactionDate" type="date">
 
@@ -17,9 +17,9 @@
     <button id="submitNewTransaction" class="button">Create</button>
 
     <template id="createTransaction">
-        <div class="createTransaction smallItemDisplay">
+        <div class="newTransactionRecipe">
             <p></p>
-            <input type="number" min="0" step="1">
+            <input type="number" min="0" step="1" value="0">
         </div>
     </template>
 </div>

views/dashboardPage/sidebars/orderDetails.ejs

@@ -47,7 +47,7 @@
     </div>
 
     <template id="orderIngredient">
-        <div class="orderIngredient">
+        <div class="choosable">
             <p></p>
             <p></p>
             <p></p>

views/dashboardPage/sidebars/recipeDetails.ejs

@@ -36,9 +36,9 @@
     </div>
 
     <template id="recipeIngredient">
-        <div class="recipeIngredient">
-            <p class="recipeIngredientElement"></p>
-            <p class="recipeIngredientElement"></p>
+        <div class="choosable">
+            <p></p>
+            <p></p>
         </div>
     </template>
 </div>

views/dashboardPage/sidebars/sidebars.css

@@ -215,14 +215,6 @@ Ingredient Details
     width: 100%;
 }
 
-    #ingredientDetails > p{
-        border-radius: 10px;
-        background: gray;
-        color: white;
-        padding: 0 3px;
-        font-size: 14px;
-    }
-
     #ingredientDetails label{
         display: flex;
         flex-direction: column;
@@ -238,63 +230,17 @@ Ingredient Details
         padding: 10px;
     }
 
-    .ingredientButtons{
-        display: flex;
-        justify-content: space-around;
-        padding: 10px;
-    }
-
-        .unitButton{
-            margin: 5px;
-            padding: 3px;
-            background: none;
-            border: 1px solid black;
-            font-size: 15px;
-            font-weight: bold;
-            cursor: pointer;
-            border-radius: 5px;
-        }
-
-            .unitButton:hover{
-                background: rgb(0, 27, 45);
-                color: white;
-            }
-
-            .unitActive{
-                background: rgb(255, 99, 107);
-            }
-
-        #defaultUnit{
-            padding: 5px;
-            font-size: 15px;
-        }
-
     #ingredientRecipeList{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         text-align: center;
         list-style: none;
         overflow: auto;
         max-height: 150px;
-        width: 100%;
-        margin-left: auto;
-    }
-
-    #ingredientRecipeList > li{
-        font-size: 15px;
-        padding: 10px;
-        border-radius: 5px;
-        font-weight: bold;
         width: 75%;
-        background: rgb(240, 252, 255);
-        border: 1px solid black;
-        cursor: pointer;
-        margin: 1px auto;
     }
 
-        #ingredientRecipeList > li:hover{
-            background: rgb(0, 27, 45);
-            color: white;
-        }
-
 /*
 EDIT INGREDIENT
 */
@@ -316,6 +262,26 @@ EDIT INGREDIENT
         justify-content: space-around;
     }
 
+        .unitButton{
+            margin: 5px;
+            padding: 3px;
+            background: none;
+            border: 1px solid black;
+            font-size: 15px;
+            font-weight: bold;
+            cursor: pointer;
+            border-radius: 5px;
+        }
+
+            .unitButton:hover{
+                background: rgb(0, 27, 45);
+                color: white;
+            }
+
+            .unitActive{
+                background: rgb(255, 99, 107);
+            }
+
 /* 
 Recipe Details 
 */
@@ -325,12 +291,6 @@ Recipe Details
     width: 100%;
 }
 
-    #recipeNameIn{
-        font-size: 32px;
-        width: 75%;
-        text-align: center;
-    }
-
     #recipeIngredientList{
         width: 100%;
     }
@@ -346,37 +306,6 @@ Recipe Details
             font-weight: bold;
         }
 
-    #recipeUpdate{
-        margin: 25px 0 0 0;
-    }
-
-    .recipeIngredient{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin: 25px;
-        text-align: center;
-    }
-
-        .recipeIngredient > *:first-of-type{
-            text-align: left;
-        }
-
-        .recipeIngredientElement{
-            width: 30%;
-        }
-
-    .addRecIngredient{
-        display: flex;
-        justify-content: center;
-        margin-right: 3px;
-    }
-
-        .addRecIngredient input{
-            max-width: 25%;
-            margin-left: 3px;
-        }
-
 /*
 Add Recipe
 */
@@ -451,6 +380,7 @@ Add Recipe
     #addRecipe button:last-of-type{
         margin-top: auto;
     }
+
 /*
 EDIT RECIPE
 */
@@ -517,23 +447,6 @@ EDIT RECIPE
         overflow-y: auto;
     }
 
-        .newOrderIngredient{
-            background: rgb(0, 27, 45);
-            color: white;
-            font-size: 17px;
-            font-weight: bold;
-            border: none;
-            border-radius: 5px;
-            padding: 5px;
-            margin: 1px 0;
-            cursor: pointer;
-        }
-
-            .newOrderIngredient:hover{
-                background: rgb(201, 201, 201);
-                color: black;
-            }
-
 #newOrder{
     display: flex;
     flex-direction: column;
@@ -618,7 +531,7 @@ EDIT RECIPE
     }
 
     #newIngredient .button{
-        margin: 15px 0 0 auto;
+        margin: 15px auto;
     }
 
 /* Order Details */
@@ -651,18 +564,6 @@ EDIT RECIPE
         font-weight: bold;
     }
 
-    .orderIngredient{
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-        box-sizing: border-box;
-        background: rgb(240, 252, 255);
-        border: 1px solid black;
-        border-radius: 5px;
-        padding: 10px;
-        margin: 5px 0;
-    }
-
 /*
 ORDER FILTER
 */
@@ -679,6 +580,12 @@ ORDER FILTER
         width: 100%;
     }
 
+    #orderFilterIngredients{
+        width: 100%;
+        max-height: 50%;
+        overflow-y: auto;
+    }
+
 /*
 TRANSACTION DETAILS
 */
@@ -699,7 +606,23 @@ TRANSACTION DETAILS
     }
 
 /*
-New Transaction
+TRANSACTION FILTER
+*/
+.transactionFilter{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    #transFilterRecipeList{
+        width: 100%;
+        max-height: 50%;
+        overflow-y: auto;
+    }
+
+/*
+NEW TRANSACTION
 */
 .newTransaction{
     display: flex;
@@ -708,12 +631,26 @@ New Transaction
     width: 100%;
 }
 
+    .newTransaction > h2{
+        text-align: center;
+    }
+
     .newTransactionRecipes{
         width: 100%;
         height: 90%;
         overflow-y: auto;
     }
 
+    .newTransactionRecipe{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background: rgb(201, 201, 201);
+        border-radius: 10px;
+        margin: 10px 0;
+        padding: 5px 0;
+    }
+
 @media screen and (max-width: 1400px){
     .sidebar{
         width: 30vw;

views/dashboardPage/sidebars/transactionDetails.ejs

@@ -32,7 +32,7 @@
     <p id="totalPrice" class="totals"></p>
 
     <template id="transactionRecipe">
-        <div class="transactionRecipe smallItemDisplay">
+        <div class="choosable">
             <p></p>
             <p></p>
             <p></p>

views/dashboardPage/sidebars/transactionFilter.ejs

@@ -0,0 +1,31 @@
+<div id="transactionFilter" class="transactionFilter">
+    <div class="sidebarIconButtons">
+        <button class="iconButton" onclick="controller.closeSidebar()">
+            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+                <polyline points="12 5 19 12 12 19"></polyline>
+            </svg>
+        </button>
+    </div>
+
+    <h1>FILTER TRANSACTIONS</h1>
+
+    <div class="dateRange">
+        <h3>Date Range:</h3>
+        <div class="dateRangeInput">
+            <input id="transFilterDateStart" type="date">
+            <p> - </p>
+            <input id="transFilterDateEnd" type="date">
+        </div>
+    </div>
+
+    <div class="lineBorder"></div>
+
+    <h3>Recipes</h3>
+
+    <div id="transFilterRecipeList"></div>
+
+    <div class="lineBorder"></div>
+
+    <button id="transFilterSubmit" class="button">SUBMIT</button>
+</div>

views/shared/shared.css

@@ -223,33 +223,6 @@ form{
     transition: width 1s linear;
 }
 
-.choosable{
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    background: rgb(0, 27, 45);
-    color: white;
-    border-radius: 5px;
-    margin: 2px;
-    padding: 5px;
-    text-align: center;
-    cursor: pointer;
-}
-
-    .choosable.tall{
-        padding: 15px;
-    }
-
-    .choosable:hover{
-        background: rgb(201, 201, 201);
-        color: black;
-    }
-
-    .choosable.active{
-        background: rgb(179, 191, 209);
-        color: white;
-    }
-
 /* Header partial */
 .header{
     display: flex;