Merge branch 'development'

controllers/transactionData.js

@@ -27,8 +27,8 @@ module.exports = {
 
         let objectifiedRecipes = [];
         let query = {};
-        if(req.body.length === 0){
-            query = {$exists: false};
+        if(req.body.recipes.length === 0){
+            query = {$ne: false};
         }else{
             for(let i = 0; i < req.body.recipes.length; i++){
                 objectifiedRecipes.push(new ObjectId(req.body.recipes[i]));

routes.js

@@ -55,7 +55,6 @@ module.exports = function(app){
     app.post("/transactions/create/spreadsheet", upload.single("transactions"), transactionData.createFromSpreadsheet);
     app.get("/transactions/download/spreadsheet", transactionData.spreadsheetTemplate);
     app.delete("/transaction/:id", transactionData.remove);
-    // app.get("/transactions/:from/:to", transactionData.getTransactionsByDate);
     app.get("/populatesometransactions", transactionData.populate);
 
     //Other

views/dashboardPage/dashboard.css

@@ -22,6 +22,18 @@ body{
     padding-bottom: 25px;
 }
 
+.mobileMenuSelector{
+    display: none;
+    position: fixed;
+    left: 13px;
+    top: -2px;
+    font-size: 40px;
+}
+
+    .mobileMenuSelector:active{
+        color: rgb(255, 99, 107);
+    }
+
 /* 
 Multi-strand use classes 
 */
@@ -591,113 +603,461 @@ Modal
                 margin-top: 15px;
             }
 
-@media screen and (max-width: 1000px){
-    body{
-        flex-direction: column;
-        background: rgb(0, 27, 45);
-        color: white;
-    }
+@media screen and (orientation: portrait){
+    @media screen and (max-width: 1400px){
+        body{
+            background:rgb(0, 27, 45);
+        }
 
-        .contentBlock{
-            padding: 0;
+        .button{
+            padding: 3px 0;
+        }
+
+        .mobileMenuSelector{
+            color:rgb(240, 252, 255);
+            z-index: 10;
+        }
+
+        .strandTitle{
+            color: white;
+            position: fixed;
+            top: 15px;
+            left: 0;
+            right: 0;
+            margin: 0;
+            text-align: center;
+            font-size: 20px;
+        }
+
+        .searchInput{
+            border-radius: 10px;
+        }
+
+        .choosable{
+            background:rgb(201, 201, 201);
+            color: black;
+        }
+
+        /* HOME */
+        #inventoryCheckCard{
+            display: none;
+        }
+
+        #graphCard{
+            display: none;
+        }
+
+        .card{
+            background: white;
         }
 
-            .banner{
+        /* INGREDIENT INVENTORY */
+        #categoryList{
+            width: 95%;
+        }
+
+            .categoryDiv{
+                margin: 5px;
+            }
+
+                .categoryDiv > div:first-of-type p{
+                    padding: 10px;
+                    margin-right: 15px;
+                }
+
+                .categoryDiv > div:first-of-type button{
+                    padding: 10px;
+                    height: initial;
+                    width: initial;
+                    display: flex;
+                }
+
+                .ingredientsDiv{
+                    width: 90%;
+                }
+
+        /* RECIPE BOOK */
+        #recipeList{
+            width: 90%;
+        }
+
+        /* ANALYTICS */
+        #analyticsStrand .strandHead{
+            height: 23vh;
+            flex-direction: column;
+        }
+
+            #analyticsStrand .strandTitle{
+                position: static;
+            }
+
+            .switch{
+                margin-top: 0;
+            }
+
+            .analDateRange{
                 display: none;
             }
 
-            .strandHead{
-                padding: 0;
+        .analContent{
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 0;
+            height: 70vh;
+        }
+
+            .itemsList{
+                width: 90%;
+                height: 47%;
+                margin-bottom: 10px;
+            }
+
+            .analData{
+                height: 47%;
             }
 
-                .strandTitle{
-                    margin-top: 35px;
+                .dataRow{
+                    flex-direction: column;
                 }
 
-        .mobileHide{
+            #itemUseGraph{
+                display: none;
+            }
+
+            #analDailyAverages{
+                display: none;
+            }
+
+            #recipeSalesGraph{
+                display: none;
+            }
+
+        /* ORDERS */
+        #ordersStrand .strandHead{
+            justify-content: center;
+        }
+
+        #newOrderBtn{
             display: none;
         }
 
-    /*
-    Home
-    */
-    .card{
-        margin: 5px 10px;
-        background: white;
-        color: black;
-    }
+        #orderList{
+            width: 90%;
+        }
 
-    #inventoryCheckCard{
-        display: none;
-    }
+        #orderList > div p:nth-child(2){
+            display: none;
+        }
 
-    #popularIngredientsCard{
-        padding-bottom: 10px;
-    }
+        /* TRANSACTIONS */
+        #transactionsStrand .strandHead{
+            justify-content: center;
+        }
 
-    .flexRow{
-        flex-direction: column;
-        margin: 0;
-    }
+        .transactionsList{
+            width: 90%;
+        }
 
-    /*
-    Ingredients
-    */
-    #categoryList{
-        width: 95%;
-        color: black;
+        @media screen and (min-width: 601px){
+            .strandTitle{
+                font-size: 40px;
+            }
+
+            .mobileMenuSelector{
+                left: 40px;
+                top: 20px;
+            }
+
+            /* HOME */
+            #graphCard{
+                display: flex;
+            }
+
+            /* RECIPE BOOK */
+            #recipeList{
+                width: 75%;
+            }
+
+            /* ORDERS */
+            #ordersStrand .strandHead{
+                margin-top: 25px;
+            }
+
+            /* TRANSACTIONS */
+            #transactionsStrand .strandHead{
+                margin-top: 25px;
+            }
+        }
     }
+}
+
+@media screen and (orientation: landscape){
+    @media screen and (max-width: 1200px){
+        body{
+            background: rgb(0, 27, 45);
+        }
+
+        .contentBlock{
+            padding: 0;
+        }
 
-        .categoryDiv > div:first-of-type p{
-            padding: 5px 0 5px 5px;
+        .button{
+            padding: 3px 0;
         }
 
-        .categoryDiv div:first-of-type button{
-            height: 50px;
-            width: 50px;
+        .mobileMenuSelector{
+            display: flex;
+            color: rgb(240, 252, 255);
+            z-index: 10;
         }
 
-        .ingredient{
+        .strandHead{
             color: white;
-            width: 75%;
-            border: 2px solid rgb(201, 201, 201);
-            padding: 5px;
-            margin-top: 5px;
-            margin-bottom: 5px;
-            box-shadow: 1px 1px gray;
+            position: fixed;
+            top: 5px;
+            left: 25px;
+            right: 0;
+            margin: 0;
+            text-align: center;
+            font-size: 20px;
         }
 
-        .ingredient > *{
-            width: 50%;
+            .strandTitle{
+                margin: 0;
+            }
+
+        .searchInput{
+            border-radius: 10px;
         }
 
-    /*
-    Recipe Book
-    */
-    .searchBar{
-        padding: 0;
-    }
+        .choosable{
+            background: rgb(201, 201, 201);
+            color: black;
+        }
 
-    #recipeSearch{
-        border-radius: 5px;
-        width: 100%;
-    }
+        /* HOME */
+        #homeStrand{
+            flex-direction: row;
+            padding: 0;
+            align-items: flex-end;
+        }
 
-    #recipeList{
-        width: 95%;
-    }
+            #graphCard{
+                display: none;
+            }
 
-    /*
-    Orders
-    */
-    #orderList{
-        width: 95%;
-    }
+            #inventoryCheckCard{
+                display: none;
+            }
 
-    /*
-    Transactions
-    */
-    .transactionsList{
-        width: 100%;
+            .flexRow{
+                height: 80%;
+            }
+
+                .flexRow:nth-child(3){
+                    flex-grow: 2;
+                }
+
+                .card{
+                    background: white;
+                }
+
+                #popularIngredientsCard{
+                    max-height: 100%;
+                    padding-bottom: 5px;
+                }
+
+        /* INGREDIENTS */
+        #ingredientsStrand{
+            padding-bottom: 10px;
+            justify-content: flex-end;
+        }
+
+        #categoryList{
+            height: 70%;
+        }
+
+            .categoryDiv{
+                margin: 3px;
+            }
+
+                .categoryDiv > div:first-of-type p{
+                    padding: 5px 10px;
+                }
+
+                .categoryDiv > div:first-of-type button{
+                    padding: 0;
+                    height: initial;
+                    width: initial;
+                    display: flex;
+                    align-items: center;
+                }
+            
+            .ingredientsDiv{
+                width: 90%;
+            }
+
+        /* RECIPE BOOK */
+        #recipeBookStrand{
+            padding-bottom: 10px;
+            justify-content: flex-end;
+        }
+
+            #recipeList{
+                height: 70%;
+            }
+
+        /* ANALYTICS */
+        #analyticsStrand{
+            padding-bottom: 10px;
+            justify-content: space-between;
+        }
+
+            #analyticsStrand .strandHead{
+                position: static;
+                height: unset;
+                flex-wrap: wrap;
+            }
+
+                #analyticsStrand .strandTitle{
+                    width: 100%;
+                    margin-top: -13px;
+                    margin-left: 10px;
+                }
+
+                .switch{
+                    margin-top: -15px;
+                    font-size: 15px;
+                }
+
+                #analyticsStrand .dateRange{
+                    margin-top: -55px;
+                }
+
+                .analDateRange{
+                    display: none;
+                }
+
+            .analContent{
+                padding: 0;
+                height: 70%;
+            }
+
+                .itemsList{
+                    width: 23%;
+                }
+
+                .analData{
+                    width: 73%
+                }
+
+                .dataRow{
+                    display: none;
+                }
+
+                .modebar-container{
+                    display: none;
+                }
+
+            #analRecipeContent{
+                height: 70%;
+            }
+
+            #newOrderBtn{
+                display: none;
+            }
+
+        /* ORDERS */
+        #ordersStrand{
+            justify-content: flex-end;
+        }
+
+            #ordersStrand .buttonBox{
+                margin: 0;
+            }
+
+            #orderList{
+                height: 70%;
+            }
+
+        /* TRANSACTIONS */
+        #transactionsStrand{
+            justify-content: flex-end;
+        }
+
+            #transactionsStrand .buttonBox{
+                margin: 0;
+            }
+
+            #transactionsList{
+                height: 70%;
+            }
+
+        @media screen and (min-width: 1000px){
+            .mobileMenuSelector{
+                top: 20px;
+                left: 40px;
+            }
+
+            .strandTitle{
+                margin: 15px;
+            }
+
+            /* HOME */
+            #homeStrand{
+                flex-direction: column;
+                justify-content: flex-end;
+            }
+
+                #graphCard{
+                    display: flex;
+                }
+
+                .flexRow{
+                    max-height: 40vh;
+                }
+
+                .flexRow:nth-child(2){
+                    flex-grow: 2;
+                }
+
+                .flexRow:nth-child(3){
+                    flex-grow: 1;
+                }
+
+            /* INGREDIENTS */
+            #categoryList{
+                height: 80%;
+            }
+
+            /* RECIPE BOOK */
+            #recipeList{
+                height: 80%;
+            }
+
+            /* ANALYTICS */
+            #analyticsStrand .strandTitle{
+                margin-top: 8px;
+                margin-left: 30px;
+            }
+
+            .analDateRange{
+                display: block;
+            }
+
+            #analRecipeContent, .analContent{
+                height: 80%;
+            }
+
+            /* ORDERS */
+            #orderList{
+                height: 80%;
+            }
+
+            /* TRANSACTIONS */
+            #transactionsList{
+                height: 80%;
+            }
+        }
     }
 }

views/dashboardPage/dashboard.ejs

@@ -12,85 +12,10 @@
         <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     </head>
     <body>
-        <div id="menu" class="menu">
-            <div id="max" class="menuHead">
-                <a href="/">
-                    <img class="menuLogo" src="/shared/images/logo.png" alt="The Subline">
-                    <p>THE SUBLINE</p>
-                </a>
-        
-                <button class="menuShifter" onclick="controller.changeMenu()">&#8801;</button>
-            </div>
-        
-            <div id="min" class="menuHead menuHeadMin">
-                <a href="/">
-                    <img class="menuLogoMin" src="/shared/images/logo.png" alt="The Subline">
-                </a>
-        
-                <button id="menuShifter2" onclick="controller.changeMenu()">&#8801;</button>
-            </div>
-        
-            <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>
-                </svg>
-                <p>DASHBOARD</p>
-            </button>
-        
-            <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>
-                    <line x1="10" y1="12" x2="14" y2="12"></line>
-                </svg>
-                <p>INGREDIENTS</p>
-            </button>
-        
-            <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>
-                </svg>
-                <p>RECIPE BOOK</p>
-            </button>
-
-            <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>
-                </svg>
-                <p>ANALYTICS</p>
-            </button>
-        
-            <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>
-                    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
-                </svg>
-                <p>ORDERS</p>
-            </button>
-
-            <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>
-                </svg>
-                <p>TRANSACTIONS</p>
-            </button>
-        
-            <a class="menuButton" href="/logout">
-                <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
-                    <polyline points="16 17 21 12 16 7"></polyline>
-                    <line x1="21" y1="12" x2="9" y2="12"></line>
-                </svg>
-                <p>LOGOUT</p>
-            </a>
-        </div>
+        <% include ./ejs/menu.ejs %>
 
         <div id="mobileMenuSelector" class="mobileMenuSelector" onclick="controller.openMenu()">&#8801;</div>
+
         <button id="sidebarCloser" style="display: none;" 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="18" y1="6" x2="6" y2="18"></line>
@@ -99,338 +24,30 @@
         </button>
 
         <div class="contentBlock">
-            <div id="bannerContainer">
-                <template id="banner">
-                    <div class="banner">
-                        <div>
-                            <svg style="display:none;" width="50" height="50" 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>
-
-                            <svg style="display:none;" width="50" height="50" 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="12" y1="8" x2="12" y2="12"></line>
-                                <line x1="12" y1="16" x2="12.01" y2="16"></line>
-                            </svg>
-
-                            <svg style="display:none;" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-                                <polyline points="22 4 12 14.01 9 11.01"></polyline>
-                            </svg>
-                        </div>
-                        <p></p>
-                        <button>
-                            <svg width="18" height="18" viewBox="0 0 24 24" fill="rgb(200, 0, 0)" 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>
-                    </div>
-                </template>
-            </div>
+            <%include ./ejs/banner.ejs %>
             
-            <div id="homeStrand" class="strand">
-                <div class="strandHead">
-                    <h1 class="strandTitle">DASHBOARD</h1>
-                </div>
-
-                <div class="flexRow">
-                    <div id="revenueCard" class="card">
-                        <p>Total Revenue (month)</p>
-
-                        <p id="revenue"></p>
-
-                        <div id="revenueChange">
-                            <img alt="revenue">
-
-                            <p></p>
-                        </div>
-                    </div>
-
-                    <div id="graphCard" class="card"></div>
-                </div>
-
-                <div class="flexRow">
-                    <div id="inventoryCheckCard" class="card">
-                        <p>Inventory Check</p>
-
-                        <ul></ul>
-
-                        <button id="inventoryCheck" class="button">Update</button>
-                    </div>
-
-                    <div id=popularIngredientsCard class="card"></div>
-                </div>
-
-                <template id="ingredientCheck">
-                    <li class="ingredientCheck flexRow">
-                        <p></p>
-
-                        <div class="numberInput">
-                            <button>-</button>
-                            <input type="number" min="0" step="0.01">
-                            <button>+</button>
-                        </div>
-                        
-                        <p></p>
-                    </li>
-                </template>
-            </div>
-
-            <div id="ingredientsStrand" class="strand">
-                <div class="strandHead">
-                    <h1 class="strandTitle">INGREDIENT INVENTORY</h1>
-
-                    <button class="button mobileHide" onclick="controller.openSidebar('newIngredient')">NEW</button>
-                </div>
-
-                <div class="searchBar">
-                    <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>
-
-                <template id="categoryDiv">
-                    <div class="categoryDiv">
-                        <div>
-                            <p></p>
-
-                            <button>
-                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <polyline points="6 9 12 15 18 9"></polyline>
-                                </svg>
-                            </button>
-                        </div>
-
-                        <div class="ingredientsDiv"></div>
-                    </div>
-                </template>
-
-                <template id="ingredient">
-                    <div class="ingredient choosable tall">
-                        <p></p>
-
-                        <hr class="ingredientSpacer mobileHide">
-
-                        <p></p>
-                    </div>
-                </template>
-            </div>
-
-            <div id="recipeBookStrand" class="strand">
-                <div class="strandHead">
-                    <h1 class="strandTitle">RECIPE BOOK</h1>
-
-                    <% if(merchant.pos === "none"){ %>
-                        <button class="button mobileHide" onclick="controller.openSidebar('addRecipe')">NEW</button>
-                    <% }else{ %>
-                        <button id="posUpdateRecipe" class="button mobileHide">UPDATE</button>
-                    <% } %>
-                </div>
-
-                <div class="searchBar">
-                    <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="choosable tall">
-                        <p></p>
-                        <p></p>
-                    </div>
-                </template>
-            </div>
-
-            <div id="analyticsStrand" class="strand">
-                <div class="strandHead">
-                    <h1 class="strandTitle">ANALYTICS</h1>
-
-                    <label class="switch">
-                        <input id="analSlider" type="checkbox">
-                        <span class="slider"><p>INGREDIENTS</p><p>RECIPES</p></span>
-                    </label>
-
-                    <div class="dateRange">
-                        <h3>Date Range:</h3>
-                        <div class="dateRangeInput">
-                            <input id="analStartDate" type="date">
-                            <p> - </p>
-                            <input id="analEndDate" type="date">
-                        </div>
-
-                        <button id="analDateBtn" class="button-small">SUBMIT</button>
-                    </div>
-                </div>
-
-                <div id="analIngredientContent" class="analContent">
-                    <div id="analIngredientList" class="itemsList"></div>
-
-                    <div class="analData">
-                        <div id="itemUseGraph" class="card analCard"></div>
-
-                        <div class="dataRow">
-                            <div class="card analCard">
-                                <p>MINIMUM DAILY USE</p>
-
-                                <h1 id="analMinUse"></h1>
-                            </div>
-
-                            <div class="card analCard">
-                                <p>AVERAGE DAILY USE</p>
-
-                                <h1 id="analAvgUse"></h1>
-                            </div>
-
-                            <div class="card analCard">
-                                <p>MAXIMUM DAILY USE</p>
-
-                                <h1 id="analMaxUse"></h1>
-                            </div>
-                        </div>
-
-                        <div class="dataRow">
-                            <div class="card analCard">
-                                <p>Sunday Average</p>
-
-                                <h1 id="analDayOne"></h1>
-                            </div>
-
-                            <div class="card analCard">
-                                <p>Monday Average</p>
-
-                                <h1 id="analDayTwo"></h1>
-                            </div>
-
-                            <div class="card analCard">
-                                <p>Tuesday Average</p>
-
-                                <h1 id="analDayThree"></h1>
-                            </div>
-
-                            <div class="card analCard">
-                                <p>Wednesday Average</p>
-
-                                <h1 id="analDayFour"></h1>
-                            </div>
-
-                            <div class="card analCard">
-                                <p>Thursday Average</p>
-
-                                <h1 id="analDayFive"></h1>
-                            </div>
-
-                            <div class="card analCard">
-                                <p>Friday Average</p>
-
-                                <h1 id="analDaySix"></h1>
-                            </div>
-
-                            <div class="card analCard">
-                                <p>Saturday Average</p>
-
-                                <h1 id="analDaySeven"></h1>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div id="analRecipeContent">
-                    <ul id="analRecipeList" class="itemsList"></ul>
-
-                    <div class="analData">
-                        <div id="recipeSalesGraph" class="card analCard"></div>
-
-                        <div class="dataRow">
-                            <div class="card analCard">
-                                <p>Average Daily Sales</p>
-
-                                <h1 id="recipeAvgUse"></h1>
-                            </div>
-
-                            <div class="card analCard">
-                                <p>Average Daily Revenue</p>
-
-                                <h1 id="recipeAvgRevenue"></h1>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div id="ordersStrand" class="strand">
-                <div class="strandHead">
-                    <h1 class="strandTitle">ORDERS</h1>
-
-                    <div class="buttonBox">
-                        <button id="orderFilterBtn" class="button mobileHide">FILTER</button>
-
-                        <button id="newOrderBtn" class="button mobileHide">NEW</button>
-
-                        <button id="orderCalcBtn" class="button mobileHide">CALCULATOR</button>
-                    </div>
-                </div>
-
-                <div id="orderList"></div>
-
-                <template id="order">
-                    <div class="choosable tall">
-                        <p></p>
-                        <p></p>
-                        <p></p>
-                        <p></p>
-                    </div>
-                </template>
-            </div>
-
-            <div id="transactionsStrand" class="strand transactions">
-                <div class="strandHead">
-                    <h1 class="strandTitle">TRANSACTIONS</h1>
-
-                    <div class="buttonBox">
-                        <button id="filterTransactionsButton" class="button">FILTER</button>
-
-                        <button id="newTransactionButton" class="button mobileHide">NEW</button>
-                    </div>
-                </div>
-
-                <div id="transactionsList" class="transactionsList"></div>
-
-                <template id="transaction">
-                    <div class="choosable tall">
-                        <p></p>
-                        <p></p>
-                        <p></p>
-                    </div>
-                </template>
-            </div>
+            <% include ./ejs/strands/home.ejs %>
+            <% include ./ejs/strands/ingredients.ejs %>
+            <% include ./ejs/strands/recipeBook.ejs %>
+            <% include ./ejs/strands/analytics.ejs %>
+            <% include ./ejs/strands/orders.ejs %>
+            <% include ./ejs/strands/transactions.ejs %>
         </div>
 
         <div id="sidebarDiv" class="sidebarHide">
-            <% include ./sidebars/newIngredient %>
-            <% include ./sidebars/ingredientDetails %>
-            <% include ./sidebars/editIngredient %>
-            <% include ./sidebars/recipeDetails %>
-            <% include ./sidebars/newRecipe %>
-            <% include ./sidebars/orderDetails %>
-            <% include ./sidebars/newOrder %>
-            <% include ./sidebars/orderCalculator %>
-            <% include ./sidebars/transactionDetails %>
-            <% include ./sidebars/newTransaction %>
-            <% include ./sidebars/editRecipe %>
-            <% include ./sidebars/orderFilter %>
-            <% include ./sidebars/transactionFilter %>
+            <% include ./ejs/sidebars/newIngredient %>
+            <% include ./ejs/sidebars/ingredientDetails %>
+            <% include ./ejs/sidebars/editIngredient %>
+            <% include ./ejs/sidebars/recipeDetails %>
+            <% include ./ejs/sidebars/newRecipe %>
+            <% include ./ejs/sidebars/orderDetails %>
+            <% include ./ejs/sidebars/newOrder %>
+            <% include ./ejs/sidebars/orderCalculator %>
+            <% include ./ejs/sidebars/transactionDetails %>
+            <% include ./ejs/sidebars/newTransaction %>
+            <% include ./ejs/sidebars/editRecipe %>
+            <% include ./ejs/sidebars/orderFilter %>
+            <% include ./ejs/sidebars/transactionFilter %>
         </div>
 
         <% include ../shared/loader %>

views/dashboardPage/ejs/banner.ejs

@@ -0,0 +1,32 @@
+<div id="bannerContainer">
+    <template id="banner">
+        <div class="banner">
+            <div>
+                <svg style="display:none;" width="50" height="50" 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>
+
+                <svg style="display:none;" width="50" height="50" 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="12" y1="8" x2="12" y2="12"></line>
+                    <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                </svg>
+
+                <svg style="display:none;" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                </svg>
+            </div>
+            <p></p>
+            <button>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="rgb(200, 0, 0)" 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>
+        </div>
+    </template>
+</div>

views/dashboardPage/ejs/menu.ejs

@@ -0,0 +1,77 @@
+<div id="menu" class="menu">
+    <div id="max" class="menuHead">
+        <a href="/">
+            <img class="menuLogo" src="/shared/images/logo.png" alt="The Subline">
+            <p>THE SUBLINE</p>
+        </a>
+
+        <button class="menuShifter" onclick="controller.changeMenu()">&#8801;</button>
+    </div>
+
+    <div id="min" class="menuHead menuHeadMin">
+        <a href="/">
+            <img class="menuLogoMin" src="/shared/images/logo.png" alt="The Subline">
+        </a>
+
+        <button id="menuShifter2" onclick="controller.changeMenu()">&#8801;</button>
+    </div>
+
+    <button class="menuButton active" id="homeBtn">
+        <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
+        </svg>
+        <p>DASHBOARD</p>
+    </button>
+
+    <button class="menuButton" id="ingredientsBtn">
+        <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="21 8 21 21 3 21 3 8"></polyline>
+            <rect x="1" y="3" width="22" height="5"></rect>
+            <line x1="10" y1="12" x2="14" y2="12"></line>
+        </svg>
+        <p>INGREDIENTS</p>
+    </button>
+
+    <button class="menuButton" id="recipeBookBtn">
+        <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
+        </svg>
+        <p>RECIPE BOOK</p>
+    </button>
+
+    <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>
+        </svg>
+        <p>ANALYTICS</p>
+    </button>
+
+    <button class="menuButton" id="ordersBtn">
+        <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
+            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+        </svg>
+        <p>ORDERS</p>
+    </button>
+
+    <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>
+        </svg>
+        <p>TRANSACTIONS</p>
+    </button>
+
+    <a class="menuButton" href="/logout">
+        <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+            <polyline points="16 17 21 12 16 7"></polyline>
+            <line x1="21" y1="12" x2="9" y2="12"></line>
+        </svg>
+        <p>LOGOUT</p>
+    </a>
+</div>

views/dashboardPage/sidebars/ingredientDetails.ejs → views/dashboardPage/ejs/sidebars/ingredientDetails.ejs

@@ -40,7 +40,7 @@
 
     <div class="lineBorder"></div>
 
-    <label>RECIPES:</label>
+    <label id="recipeListLabel">RECIPES:</label>
 
     <div id="ingredientRecipeList"></div>
 

views/dashboardPage/sidebars/orderFilter.ejs → views/dashboardPage/ejs/sidebars/orderFilter.ejs

@@ -11,7 +11,7 @@
     <h1>FILTER ORDERS</h1>
 
     <div class="dateRange">
-        <h3>Date Range:</h3>
+        <h3 id="filterOrderDateRange">Date Range:</h3>
         <div class="dateRangeInput">
             <input id="orderFilterDateFrom" type="date">
             <p> - </p>

views/dashboardPage/sidebars/transactionDetails.ejs → views/dashboardPage/ejs/sidebars/transactionDetails.ejs

@@ -21,7 +21,7 @@
 
     <div class="lineBorder"></div>
 
-    <h3>RECIPES</h3>
+    <h3 id="transactionRecipesLabel">RECIPES</h3>
     <div id="transactionRecipes" class="transactionRecipes"></div>
 
     <div class="lineBorder"></div>

views/dashboardPage/sidebars/transactionFilter.ejs → views/dashboardPage/ejs/sidebars/transactionFilter.ejs

@@ -11,7 +11,7 @@
     <h1>FILTER TRANSACTIONS</h1>
 
     <div class="dateRange">
-        <h3>Date Range:</h3>
+        <h3 id="transactionFilterDateLabel">Date Range:</h3>
         <div class="dateRangeInput">
             <input id="transFilterDateStart" type="date">
             <p> - </p>

views/dashboardPage/ejs/strands/analytics.ejs

@@ -0,0 +1,115 @@
+<div id="analyticsStrand" class="strand">
+    <div class="strandHead">
+        <h1 class="strandTitle">ANALYTICS</h1>
+
+        <label class="switch">
+            <input id="analSlider" type="checkbox">
+            <span class="slider"><p>INGREDIENTS</p><p>RECIPES</p></span>
+        </label>
+
+        <div class="dateRange">
+            <h3 class="analDateRange">Date Range:</h3>
+            <div class="dateRangeInput">
+                <input id="analStartDate" type="date">
+                <p> - </p>
+                <input id="analEndDate" type="date">
+            </div>
+
+            <button id="analDateBtn" class="button-small">SUBMIT</button>
+        </div>
+    </div>
+
+    <div id="analIngredientContent" class="analContent">
+        <div id="analIngredientList" class="itemsList"></div>
+
+        <div class="analData">
+            <div id="itemUseGraph" class="card analCard"></div>
+
+            <div class="dataRow">
+                <div class="card analCard">
+                    <p>MINIMUM DAILY USE</p>
+
+                    <h1 id="analMinUse"></h1>
+                </div>
+
+                <div class="card analCard">
+                    <p>AVERAGE DAILY USE</p>
+
+                    <h1 id="analAvgUse"></h1>
+                </div>
+
+                <div class="card analCard">
+                    <p>MAXIMUM DAILY USE</p>
+
+                    <h1 id="analMaxUse"></h1>
+                </div>
+            </div>
+
+            <div id="analDailyAverages" class="dataRow">
+                <div class="card analCard">
+                    <p>Sunday Average</p>
+
+                    <h1 id="analDayOne"></h1>
+                </div>
+
+                <div class="card analCard">
+                    <p>Monday Average</p>
+
+                    <h1 id="analDayTwo"></h1>
+                </div>
+
+                <div class="card analCard">
+                    <p>Tuesday Average</p>
+
+                    <h1 id="analDayThree"></h1>
+                </div>
+
+                <div class="card analCard">
+                    <p>Wednesday Average</p>
+
+                    <h1 id="analDayFour"></h1>
+                </div>
+
+                <div class="card analCard">
+                    <p>Thursday Average</p>
+
+                    <h1 id="analDayFive"></h1>
+                </div>
+
+                <div class="card analCard">
+                    <p>Friday Average</p>
+
+                    <h1 id="analDaySix"></h1>
+                </div>
+
+                <div class="card analCard">
+                    <p>Saturday Average</p>
+
+                    <h1 id="analDaySeven"></h1>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="analRecipeContent" class="analContent">
+        <ul id="analRecipeList" class="itemsList"></ul>
+
+        <div class="analData">
+            <div id="recipeSalesGraph" class="card analCard"></div>
+
+            <div class="dataRow">
+                <div class="card analCard">
+                    <p>Average Daily Sales</p>
+
+                    <h1 id="recipeAvgUse"></h1>
+                </div>
+
+                <div class="card analCard">
+                    <p>Average Daily Revenue</p>
+
+                    <h1 id="recipeAvgRevenue"></h1>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

views/dashboardPage/ejs/strands/home.ejs

@@ -0,0 +1,47 @@
+<div id="homeStrand" class="strand">
+    <div class="strandHead">
+        <h1 class="strandTitle">DASHBOARD</h1>
+    </div>
+
+    <div class="flexRow">
+        <div id="revenueCard" class="card">
+            <p>Total Revenue (month)</p>
+
+            <p id="revenue"></p>
+
+            <div id="revenueChange">
+                <img alt="revenue">
+
+                <p></p>
+            </div>
+        </div>
+
+        <div id="graphCard" class="card"></div>
+    </div>
+
+    <div class="flexRow">
+        <div id="inventoryCheckCard" class="card">
+            <p>Inventory Check</p>
+
+            <ul></ul>
+
+            <button id="inventoryCheck" class="button">Update</button>
+        </div>
+
+        <div id=popularIngredientsCard class="card"></div>
+    </div>
+
+    <template id="ingredientCheck">
+        <li class="ingredientCheck flexRow">
+            <p></p>
+
+            <div class="numberInput">
+                <button>-</button>
+                <input type="number" min="0" step="0.01">
+                <button>+</button>
+            </div>
+            
+            <p></p>
+        </li>
+    </template>
+</div>

views/dashboardPage/ejs/strands/ingredients.ejs

@@ -0,0 +1,43 @@
+<div id="ingredientsStrand" class="strand">
+    <div class="strandHead">
+        <h1 class="strandTitle">INGREDIENT INVENTORY</h1>
+
+        <button class="button mobileHide" onclick="controller.openSidebar('newIngredient')">NEW</button>
+    </div>
+
+    <div class="searchBar">
+        <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>
+
+    <template id="categoryDiv">
+        <div class="categoryDiv">
+            <div>
+                <p></p>
+
+                <button>
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="6 9 12 15 18 9"></polyline>
+                    </svg>
+                </button>
+            </div>
+
+            <div class="ingredientsDiv"></div>
+        </div>
+    </template>
+
+    <template id="ingredient">
+        <div class="ingredient choosable tall">
+            <p></p>
+
+            <hr class="ingredientSpacer mobileHide">
+
+            <p></p>
+        </div>
+    </template>
+</div>

views/dashboardPage/ejs/strands/orders.ejs

@@ -0,0 +1,24 @@
+<div id="ordersStrand" class="strand">
+    <div class="strandHead">
+        <h1 class="strandTitle">ORDERS</h1>
+
+        <div class="buttonBox">
+            <button id="orderFilterBtn" class="button">FILTER</button>
+
+            <button id="newOrderBtn" class="button">NEW</button>
+
+            <button id="orderCalcBtn" class="button">CALCULATOR</button>
+        </div>
+    </div>
+
+    <div id="orderList"></div>
+
+    <template id="order">
+        <div class="choosable tall">
+            <p></p>
+            <p></p>
+            <p></p>
+            <p></p>
+        </div>
+    </template>
+</div>

views/dashboardPage/ejs/strands/recipeBook.ejs

@@ -0,0 +1,28 @@
+<div id="recipeBookStrand" class="strand">
+    <div class="strandHead">
+        <h1 class="strandTitle">RECIPE BOOK</h1>
+
+        <% if(merchant.pos === "none"){ %>
+            <button class="button mobileHide" onclick="controller.openSidebar('addRecipe')">NEW</button>
+        <% }else{ %>
+            <button id="posUpdateRecipe" class="button mobileHide">UPDATE</button>
+        <% } %>
+    </div>
+
+    <div class="searchBar">
+        <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="choosable tall">
+            <p></p>
+            <p></p>
+        </div>
+    </template>
+</div>

views/dashboardPage/ejs/strands/transactions.ejs

@@ -0,0 +1,21 @@
+<div id="transactionsStrand" class="strand transactions">
+    <div class="strandHead">
+        <h1 class="strandTitle">TRANSACTIONS</h1>
+
+        <div class="buttonBox">
+            <button id="filterTransactionsButton" class="button">FILTER</button>
+
+            <button id="newTransactionButton" class="button mobileHide">NEW</button>
+        </div>
+    </div>
+
+    <div id="transactionsList" class="transactionsList"></div>
+
+    <template id="transaction">
+        <div class="choosable tall">
+            <p></p>
+            <p></p>
+            <p></p>
+        </div>
+    </template>
+</div>

views/dashboardPage/js/dashboard.js

@@ -92,7 +92,7 @@ controller = {
         activeButton.classList = "menuButton active";
         activeButton.disabled = true;
 
-        if(window.screen.availWidth <= 1000){
+        if(screen.height > screen.width || screen.width < 1200){
             this.closeMenu();
         }
     },
@@ -150,7 +150,7 @@ controller = {
                 break;
         }
 
-        if(window.screen.availWidth <= 1000){
+        if(screen.height > screen.width || screen.width < 1200){
             document.querySelector(".contentBlock").style.display = "none";
             document.getElementById("mobileMenuSelector").style.display = "none";
             document.getElementById("sidebarCloser").style.display = "block";
@@ -186,7 +186,7 @@ controller = {
         }
         sidebar.classList = "sidebarHide";
 
-        if(window.screen.availWidth <= 1000){
+        if(screen.height > screen.width || screen.width < 1200){
             document.querySelector(".contentBlock").style.display = "flex";
             document.getElementById("mobileMenuSelector").style.display = "block";
             document.getElementById("sidebarCloser").style.display = "none";
@@ -272,8 +272,6 @@ controller = {
             container.removeChild(banner);
             clearTimeout(timer);
         });
-
-        
     },
 
     changeMenu: function(){
@@ -321,10 +319,6 @@ controller = {
     }
 }
 
-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")};

views/dashboardPage/js/sidebars/transactionFilter.js

@@ -58,12 +58,6 @@ let transactionFilter = {
             }
         }
 
-        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";
 

views/dashboardPage/js/strands/analytics.js

@@ -69,16 +69,29 @@ let analytics = {
     },
 
     getData: function(from, to, Transaction){
+        let data = {
+            from: from,
+            to: to,
+            recipes: []
+        }
+        
         let loader = document.getElementById("loaderContainer");
         loader.style.display = "flex";
 
-        return fetch(`/transactions/${from.toISOString()}/${to.toISOString()}`)
+        return 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"){
                     controller.createBanner(response, "error");
                 }else{
                     this.transactionsByDate = [];
+                    response.reverse();
 
                     let startOfDay = new Date(from.getTime());
                     startOfDay.setHours(0, 0, 0, 0);
@@ -156,7 +169,13 @@ let analytics = {
         const layout = {
             title: this.ingredient.name.toUpperCase(),
             xaxis: {title: "DATE"},
-            yaxis: {title: yaxis}
+            yaxis: {title: yaxis},
+            margin: {
+                l: 40,
+                r: 10,
+                b: 20,
+                t: 30
+            }
         }
 
         Plotly.newPlot("itemUseGraph", [trace], layout);
@@ -237,7 +256,13 @@ let analytics = {
         const layout = {
             title: this.recipe.name.toUpperCase(),
             xaxis: {title: "DATE"},
-            yaxis: {title: "QUANTITY"}
+            yaxis: {title: "QUANTITY"},
+            margin: {
+                l: 40,
+                r: 10,
+                b: 20,
+                t: 30
+            }
         }
 
         Plotly.newPlot("recipeSalesGraph", [trace], layout);

views/dashboardPage/js/strands/home.js

@@ -68,7 +68,7 @@ let home = {
             }
         }
 
-        const layout = {
+        let layout = {
             title: "REVENUE",
             xaxis: {
                 title: "DATE"
@@ -78,6 +78,13 @@ let home = {
             }
         }
 
+        if(screen.width < 1400){
+            layout.margin = {
+                l: 35,
+                r: 0
+            }
+        }
+
         Plotly.newPlot("graphCard", [trace], layout);
     },
 
@@ -180,7 +187,9 @@ let home = {
             }
 
             let layout = {
-                title: "MOST POPULAR INGREDIENTS",
+                title: {
+                    text: "MOST POPULAR INGREDIENTS"
+                },
                 xaxis: {
                     zeroline: false,
                     title: "QUANTITY"
@@ -189,6 +198,16 @@ let home = {
                     showticklabels: false
                 }
             }
+
+            if(screen.width < 1400){
+                layout.margin = {
+                    l: 10,
+                    r: 10,
+                    t: 80,
+                    b: 40
+                };
+            }
+
             
             Plotly.newPlot("popularIngredientsCard", [trace], layout);
         }else{

views/dashboardPage/sidebars.css

@@ -81,7 +81,6 @@
     }
 
         .menuButton svg{
-            stroke: white;
             margin-right: 25px;
         }
 
@@ -194,18 +193,6 @@
     margin: 25px;
 }
 
-.mobileMenuSelector{
-    display: none;
-    position: fixed;
-    left: 13px;
-    top: -2px;
-    font-size: 40px;
-}
-
-    .mobileMenuSelector:active{
-        color: rgb(255, 99, 107);
-    }
-
 /* 
 Ingredient Details 
 */
@@ -216,9 +203,6 @@ Ingredient Details
 }
 
     #ingredientDetails label{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
         font-size: 20px;
         text-align: center;
         margin: 0;
@@ -691,56 +675,221 @@ NEW TRANSACTION
         padding: 5px 0;
     }
 
-@media screen and (max-width: 1400px){
-    .sidebar{
-        width: 30vw;
-    }
-}
+@media screen and (orientation: portrait){
+    @media screen and (max-width: 1400px){
+        .sidebar{
+            width: 100vw;
+            color: white;
+        }
 
-@media screen and (max-width: 1000px){
-    .sidebar{
-        width: 100vw;
-    }
+        .sidebarIconButtons{
+            display: none;
+        }
+
+        /* MENU */
+        #menu{
+            display: none;
+            width: 100vw;
+            padding: 0;
+        }
+    
+            .menuShifter{
+                display: none;
+            }
+
+            .menuHead{
+                justify-content: right;
+                padding: 0;
+                margin-bottom: 25px;
+            }
+
+                .menuHead a{
+                    justify-content: center;
+                    margin: auto;
+                }
 
-    .sidebarIconButtons > .iconButton{
-        display: none;
+
+            .menuButton{
+                padding-left: 0;
+                justify-content: center;
+                background: rgb(201, 201, 201);
+                color: black;
+                width: 90%;
+                margin: 15px auto;
+                border-radius: 5px;
+                box-shadow: 0 0 5px white;
+            }
+
+        /* ORDER CALCULATOR */
+        .calculatorItem:nth-child(2n+1){
+            color: black;
+        }
     }
 
-    .menu{
-        display: none;
-        width: 100vw;
-        height: 100vh;
+    @media screen and (min-width: 601px){
+        .menuHead a p{
+            font-size: 40px;
+        }
     }
+}
+
+@media screen and (orientation: landscape){
+    @media screen and (max-width: 1200px){
+        .sidebar{
+            width: 100vw;
+            color: white;
+            padding: 3px 15px;
+        }
+
+        .sidebarIconButtons{
+            display: none;
+        }
 
-        .menuHead{
+        /* MENU */
+        #menu{
+            display: none;
+            width: 100vw;
+            height: 100vh;
             padding: 0;
-            margin-bottom: 15px;
+            flex-wrap: wrap;
+            flex-direction: row;
+            justify-content: space-around;
         }
 
-            .menuHead a{
+            .menuShifter{
+                display: none;
+            }
+
+            .menuHead{
+                justify-content: center;
+                padding: 0;
+                margin-bottom: 0;
+                height: 50px;
+            }
+
+                .menuHead a{
+                    width: initial;
+                    justify-content: center;
+                }
+
+                    .menuLogo{
+                        max-height: 50px;
+                        max-width: 50px;
+                    }
+
+                .menuButton{
+                    width: 40%;
+                    justify-content: center;
+                    background: rgb(201, 201, 201);
+                    color: black;
+                    margin: 15px;
+                    padding-left: 0;
+                    border-radius: 5px;
+                    box-shadow: 0 0 5px white;
+                    height: 10vh;
+                }
+            
+            /* ORDER CALCULATOR */
+            .calculatorItem:nth-child(2n+1){
+                color: black;
+            }
+
+            /* INGREDIENT DETAILS */
+            #ingredientDetails > *{
+                margin: 0;
+            }
+
+            #recipeListLabel, #ingredientRecipeList{
+                display: none;
+            }
+
+            /* FILTER ORDERS */
+            #orderFilter > *{
+                margin: 0;
+            }
+
+            #orderFilter h1{
+                padding: 0;
+            }
+
+            #filterOrderDateRange, #orderFilter .lineBorder{
+                display: none;
+            }
+
+            .dateRange{
+                padding-bottom: 3px;
+            }
+
+            #orderFilterSubmit{
+                margin-top: 3px;
+            }
+
+            /* ORDER DETAILS */
+            #orderIngredients{
+                display: none;
+            }
+
+            /* TRANSACTION DETAILS */
+            #transactionRecipesLabel, .transactionRecipes, #transactionDetails .lineBorder{
+                display: none;
+            }
+
+            /* FILTER TRANSACTIONS */
+            #transactionFilter > *{
+                margin: 0;
+            }
+
+            #transactionFilterDateLabel{
+                display: none;
+            }
+
+            #transactionFilter .dateRange{
+                margin-bottom: 5px;
+            }
+
+            #transFilterSubmit{
+                margin-top: 5px;
+            }
+
+        @media screen and (min-width: 1000px){
+            .menuLogo{
+                max-height: initial;
+                max-width: 300px;
+            }
+
+            .menuHead a p{
+                font-size: 35px;
+            }
+
+            #recipeListLabel, #ingredientRecipeList{
                 display: flex;
-                justify-content: right;
-                width: 70%;
             }
 
-        .menuShifter{
-            display: none;
-        }
+            /* ORDER FILTER */
+            #orderFilterIngredients{
+                max-height: 70%;
+            }
 
-    .mobileMenuSelector{
-        display: block;
-        z-index: 20;
-    }
+            #orderFilterSubmit{
+                margin-top: 15px;
+            }
 
-    #orderIngredients{
-        width: 100%;
-    }
-    
-        .orderIngredient{
-            color: black;
-        }
+            /* ORDER DETAILS */
+            #orderIngredients{
+                display: flex;
+                flex-direction: column;
+            }
+
+            /* TRANSACTION DETAILS */
+            #transactionRecipesLabel, .transactionRecipes, #transactionDetails .lineBorder{
+                display: flex;
+                flex-direction: column;
+            }
 
-    #ingredientRecipeList li{
-        color: black;
+            /* TRANSACTION FILTER */
+            #transFilterRecipeList{
+                max-height: 70%;
+            }
+        }
     }
 }

views/informationPages/information.css

@@ -56,4 +56,49 @@ HELP PAGE
         margin: 15px 0;
         text-align: left;
         font-size: 20px;
-    }
+    }
+
+@media screen and (max-width: 1400px){
+    @media (orientation: portrait){
+        .helpMenu{
+            position: static;
+            padding: 0;
+        }
+
+        .helpContent{
+            padding: 0;
+            width: 90%;
+        }
+
+        .helpContent h2, .helpContent h3, .helpContent h4{
+            text-align: center;
+        }
+
+        .helpContent p{
+            text-align: justify;
+        }
+
+        .content{
+            width: 90%;
+        }
+    }
+
+    @media (orientation: landscape){
+        body{
+            align-items: flex-end;
+        }
+
+            .helpMenu{
+                position: absolute;
+                margin: 0;
+                padding: 10px 25px;
+                width: 25%;
+            }
+
+            .helpContent{
+                margin: 0;
+                padding: 10px;
+                width: 65%;
+            }
+    }
+}

views/passwordResetPages/passwordReset.css

@@ -30,7 +30,8 @@ body{
 
 @media screen and (max-width: 600px){
     .form{
-        width: 350px;
+        max-width: 90vw;
+        padding: 0;
     }
 
         .email{

views/shared/shared.css

@@ -270,6 +270,10 @@ form{
             margin-left: 10px;
         }
 
+        .mobileHomeButton{
+            display: none;
+        }
+
     .headerEnd{
         display: flex;
         align-items: center;
@@ -360,17 +364,42 @@ Banner
         margin: 0 25px;
     }
 
-@media screen and (max-width: 600px){
+@media screen and (max-width: 1400px){
     .button{
         font-size: 15px;
     }
 
+    .header{
+        height: 30px;
+    }
+
+        .headerStart{
+            margin-left: 10px;
+        }
+
+        .headerEnd{
+            font-size: 8px;
+        }
+
+        .headerLogo{
+            white-space: nowrap;
+            font-size: 10px;
+        }
+
     .truncateLong{
         max-width: 100px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    .mobileHide{
+        display: none !important;
+    }
+
+    .headerStart{
+        width: 0;
+    }
 }
 
 label {

views/verifyPage/verify.css

@@ -28,4 +28,15 @@ body{
     .button{
         font-size: 25px;
         padding: 5px;
-    }
+    }
+
+@media all and (max-width: 1400px){
+    .title{
+        font-size: 25px;
+        padding: 5px;
+    }
+
+    .text{
+        padding: 5px;
+    }
+}