Add display for adding of new transactions

views/dashboardPage/dashboard.ejs

@@ -271,6 +271,14 @@
             <div id="transactionsStrand" class="strand transactions">
                 <div class="strandHead">
                     <h1 class="strandTitle">Transactions</h1>
+
+                    <button class="button" onclick="newTransactionComp.display()">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="12" y1="5" x2="12" y2="19"></line>
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
+                        </svg>
+                        add
+                    </button>
                 </div>
 
                 <div id="transactionsList" class="transactionsList"></div>
@@ -302,6 +310,8 @@
             <% include ./sidebars/newOrder %>
 
             <% include ./sidebars/transactionDetails %>
+
+            <% include ./sidebars/newTransaction %>
         </div>
 
         <% include ../shared/loader %>

views/dashboardPage/sidebars/newTransaction.ejs

@@ -0,0 +1,23 @@
+<div id="newTransaction" class="newTransaction">
+    <div class="sidebarIconButtons">
+        <button class="iconButton" onclick="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>
+
+    <h2>CREATE NEW TRANSACTION</h2>
+
+    <div id="newTransactionRecipes" class="newTransactionRecipes"></div>
+
+    <button class="button" onclick="newTransactionComp.submit()">Create</button>
+
+    <template id="createTransaction">
+        <div class="createTransaction smallItemDisplay">
+            <p></p>
+            <input type="number" step="1">
+        </div>
+    </template>
+</div>

views/dashboardPage/sidebars/sidebars.css

@@ -591,4 +591,20 @@ Transaction Details
     .totals{
         font-size: 25px;
         font-weight: bold;
+    }
+
+/*
+New Transaction
+*/
+.newTransaction{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    .newTransactionRecipes{
+        width: 100%;
+        height: 90%;
+        overflow-y: auto;
     }

views/dashboardPage/sidebars/sidebars.js

@@ -884,8 +884,8 @@ let transactionDetailsComp = {
             let price = transaction.recipes[i].quantity * transaction.recipes[i].recipe.price;
 
             recipe.children[0].innerText = transaction.recipes[i].recipe.name;
-            recipe.children[1].innerText = `${transaction.recipes[i].quantity} x ${parseFloat(transaction.recipes[i].recipe.price / 100).toFixed(2)}`;
-            recipe.children[2].innerText = (price / 100).toFixed(2);
+            recipe.children[1].innerText = `${transaction.recipes[i].quantity} x $${parseFloat(transaction.recipes[i].recipe.price / 100).toFixed(2)}`;
+            recipe.children[2].innerText = `$${(price / 100).toFixed(2)}`;
             recipeList.appendChild(recipe);
 
             totalRecipes += transaction.recipes[i].quantity;
@@ -929,5 +929,29 @@ let transactionDetailsComp = {
             .finally(()=>{
                 loader.style.display = "none";
             });
+    },
+}
+
+let newTransactionComp = {
+    display: function(){
+        let recipeList = document.getElementById("newTransactionRecipes");
+        let template = document.getElementById("createTransaction").content.children[0];
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
+        }
+
+        for(let i = 0; i < merchant.recipes.length; i++){
+            let recipeDiv = template.cloneNode(true);
+            recipeList.appendChild(recipeDiv);
+
+            recipeDiv.children[0].innerText = merchant.recipes[i].name;
+        }
+
+        openSidebar(document.getElementById("newTransaction"));
+    },
+
+    submit: function(){
+        console.log("submitting");
     }
 }