subline/views/dashboardPage/ejs/strands/analytics.ejs

<div id="analyticsStrand" class="strand">
    <div class="strandHead">
        <h1 class="strandTitle">ANALYTICS</h1>

        <div id="analTabs">
            <div id="topAnalTabs">
                <button id="analIngredientsTab" class="analTabButton active">INGREDIENTS</button><!--
                --><button id="analRecipesTab" class="analTabButton">RECIPES</button>
            </div>
            <div id="bottomAnalTabs">
                <button id="analIndividualTab" class="analTabButton active">INDIVIDUAL</button><!--
                --><button id="analCategoriesTab" class="analTabButton">CATEGORIES</button>
            </div>
        </div>

        <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">SUBMIT</button>
        </div>
    </div>

    <div id="analIndividualIngredient" class="analContent">
        <div id="analIngredientList" class="itemsList">
            <input id="analIngredientSearch" type="text" placeholder="SEARCH">
        </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="analCategoryIngredient" class="analContent" style="display:none;">
        <div id="analCategoriesList" class="itemsList">
            <input type="text" placeholder="SEARCH">
        </div>

        <div id="analCategoriesGraph"></div>
    </div>

    <div id="analIndividualRecipe" class="analContent" style="display:none;">
        <ul id="analRecipeList" class="itemsList">
            <input type="text" placeholder="SEARCH">
        </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 id="analCategoryRecipe" class="analContent" style="display:none">
        <ul id="analCatRecipeList" class="itemsList">
            <input type="text" placeholder="SEARCH">
        </ul>

        <div id="analCatRecipeGraph"></div>
    </div>
</div>