subline/views/dashboardPage/ejs/strands/home.ejs

<div id="homeStrand" class="strand">
    <div class="strandHead">
        <h1 class="strandTitle">DASHBOARD</h1>
    </div>

    <div class="flexRow">
        <div class="card mostUsed">
            <h3>MOST SOLD RECIPES (30 DAYS)</h3>

            <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">
            <h3>MOST USED INGREDIENTS (30 DAYS)</h3>

            <div class="scrollTable">
                <table>
                    <thead>
                        <tr>
                            <th>INGREDIENT</th>
                            <th>UNIT COST</th>
                            <th>TOTAL COST</th>
                        </tr>
                    </thead>
                    <tbody id="mostUsedBody"></tbody>
                </table>
            </div>
        </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 class="inventoryCheckIngredient"></p>

            <div class="numberInput">
                <button>-</button>
                <input type="number" min="0" step="0.01">
                <button>+</button>
            </div>
            
            <p class="inventoryCheckUnit"></p>
        </li>
    </template>
</div>