Add buttons for navigation between inventory and data

views/dataPage/data.ejs

@@ -18,6 +18,11 @@
 
         <div id="homeStrand" class="strand">
             <h2 id="month"></h2>
+
+            <div class="buttonBox">
+                <a class="button" href="/inventory">Display Inventory</a>
+            </div>
+            
             <div class="tables">
                 <!-- Ingredients used -->
                 <div id="ingredientsData" class="dataTable">

views/inventoryPage/inventory.css

@@ -23,20 +23,10 @@
         text-transform: capitalize;
     }
 
-    .options{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+    #filter{
+        max-height: 32px;
     }
 
-        .options > *{
-            margin: 10px;
-        }
-
-        #filter{
-            max-height: 32px;
-        }
-
 /* Recipes Strand */
 #recipesStrand{
     flex-direction: column;

views/inventoryPage/inventory.ejs

@@ -17,7 +17,7 @@
         <strand-selector></strand-selector>
 
         <div id="inventoryStrand" class="strand">
-            <div class="options">
+            <div class="buttonBox">
                 <button class="button" onclick="addIngredientObj.display()">Add Ingredient</button>
 
                 <button class="button" onclick="enterPurchaseObj.display()">Enter Purchases</button>
@@ -25,6 +25,8 @@
                 <% if(merchant.pos === "none"){ %>
                     <button class="button" onclick="enterTransactionsObj.display()">Enter Transactions</button>
                 <% } %>
+
+                <a class="button" href="/data">Analyze data</a>
             </div>
 
             <input id="filter" onkeyup="inventoryObj.filter()" type="text" placeholder="FILTER INGREDIENTS">

views/shared/shared.css

@@ -57,8 +57,19 @@ form{
         margin: 10px;
     }
 
+.buttonBox{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+    .buttonBox > *{
+        margin: 10px;
+    }
+
 .button{
     background: none;
+    font-family:'Saira',sans-serif;
     border: 5px solid rgb(255, 99, 107);
     text-decoration: none;
     border-radius: 10px;