shoc-backend/SeaHavenIndustries/Components/Pages/UserHome.razor

@page "/UserHome"
<Header pagename="Home" icon='<i class="material-icons-round opacity-10">home</i>'></Header>
<AuthorizeView Roles="User">
    <Authorized>
        <div class="row">
            <div class="col-md-6 col-lg-6 position-relative mt-3 mx-3" style="background-image:url('./assets/img/bg.png'); background-size: auto; background-position: center;height: 141px; width:576px; border-radius: 10px;">
                <div class="row px-2 py-3">
                    <div class="col-9 text-white">
                        <span class="d-block mb-2 fw-bold">
                            Welcome Back,
                            <img src="./assets/img/waving-hand-svgrepo-com.png" alt="Waving Hand" style="height: 24px; margin-left: 5px;" />
                        </span>
                        <span class="d-block fw-bold text-info">John Doe,</span>
                        <span class="d-block text-sm">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</span>
                    </div>
                    <div class="col-3">
                        <img src="./assets/img/doll.png" alt="Doll" class="img-fluid h-100" />
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-lg-3 px-2 py-3">
                <div class="card z-index-2">
                    <div class="row row px-3 py-3">
                        <div class="col-7">
                            <span class="d-block fw-bold text-xs">In Progress Orders</span>
                            <span class="d-block fw-bolder pt-3" style="font-size: 22px;">25</span>
                        </div>
                        <div class="col-5">
                            <img class="img-fluid pt-3" src="./assets/img/Progress-Chart-Sparkline.png" width="72" />
                        </div>
                    </div>
                    <div class="d-flex px-2 py-2">
                        <img src="./assets/img/arrow-icon.png" />
                        <p class="mb-0 text-sm"> <span class="text-white"> +39.4%</span> than last week </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-lg-3 pt-3">
                <div class="card z-index-2">
                    <div class="row row px-3 py-3">
                        <div class="col-7">
                            <span class="d-block fw-bold text-xs">Completed Orders</span>
                            <span class="d-block fw-bolder pt-3" style="font-size: 22px;">31</span>
                        </div>
                        <div class="col-5">
                            <img class="img-fluid pt-3" src="./assets/img/Complete-Chart-Sparkline.png" width="72" />
                        </div>
                    </div>
                    <div class="d-flex px-2 py-2">
                        <img src="./assets/img/arrow-icon.png" />
                        <p class="mb-0 text-sm"> <span class="text-white"> +39.4%</span> than last week </p>
                    </div>
                </div>
            </div>
        </div>

        
    </Authorized>
</AuthorizeView>

@code {
    @inject IJSRuntime JSRuntime

    private ElementReference chartCanvas;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // await JSRuntime.InvokeVoidAsync("initScripts");
            // await JSRuntime.InvokeVoidAsync("ConsumptionGraph");
            // await JSRuntime.InvokeVoidAsync("CircleGraph");
            // await JSRuntime.InvokeVoidAsync("CircleGraph2");
            // await JSRuntime.InvokeVoidAsync("PerformanceChartHome");
        }
    }
}