Add recipe revenue to most used recipes.

Change most used recipes to a table.
Update some style.

views/dashboardPage/css/strands/home.css

@@ -32,7 +32,7 @@
 .mostUsed{
     display: flex;
     flex-direction: column;
-    justify-content:start;
+    justify-content: start;
 }
 
     .scrollTable{
@@ -57,9 +57,13 @@
 
     .mostUsed .choosable td{
         padding: 5px 0;
+        max-width: 150px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
-    #mostUsedBody{
+    #mostUsedBody, #mostUsedRecipeBody{
         max-height: 75%;
         overflow-y: auto;
     }

views/dashboardPage/ejs/strands/home.ejs

@@ -7,7 +7,18 @@
         <div class="card mostUsed">
             <h3>MOST SOLD RECIPES (30 DAYS)</h3>
 
-            <div id="mostUsedRecipesList"></div>
+            <div class="scrollTable">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>RECIPE</th>
+                            <th>SOLD</th>
+                            <th>REVENUE</th>
+                        </tr>
+                    </thead>
+                    <tbody id="mostUsedRecipeBody"></tbody>
+                </table>
+            </div>
         </div>
 
         <div class="card mostUsed">

views/dashboardPage/js/strands/home.js

@@ -17,14 +17,14 @@ let home = {
         let recipes = merchant.getRecipesSold(from, new Date());
         recipes.sort((a, b) => (a.quantity > b.quantity) ? -1 : 1);
         let displayCount = (recipes.length < 10) ? recipes.length : 10;
-        let container = document.getElementById("mostUsedRecipesList");
+        let container = document.getElementById("mostUsedRecipeBody");
 
         while(container.children.length > 0){
             container.removeChild(container.firstChild);
         }
 
         for(let i = 0; i < displayCount; i++){
-            let item = document.createElement("button");
+            let item = document.createElement("tr");
             item.classList.add("choosable");
             item.onclick = ()=>{
                 controller.openStrand("recipeBook");
@@ -32,12 +32,16 @@ let home = {
             };
             container.appendChild(item);
 
-            let leftText = document.createElement("p");
+            let leftText = document.createElement("td");
             leftText.innerText = recipes[i].recipe.name;
             item.appendChild(leftText);
 
-            let rightText = document.createElement("p");
-            rightText.innerText = recipes[i].quantity;
+            let centerText = document.createElement("td");
+            centerText.innerText = recipes[i].quantity;
+            item.appendChild(centerText);
+
+            let rightText = document.createElement("td");
+            rightText.innerText = `$${(recipes[i].quantity * recipes[i].recipe.price).toFixed(2)}`;
             item.appendChild(rightText);
         }
     },