shoc-backend/SeaHavenIndustries/Components/Pages/Setting/Roles.razor

<div class="row">
    <div class="col-12">
        <div class="card cardbg">
            <!-- Card header -->
            <div class="card-header pb-0 cardbg">
                <div class="d-lg-flex">
                    <div>
                        <h5 class="mb-0">Roles</h5>

                    </div>

                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-flush" id="products-list">
                        <thead class="thead-light">
                            <tr>
                                <th class="ps-2">Role</th>
                                <th class="ps-2">Description</th>
                                @* <th class="text-end">Action</th> *@
                            </tr>
                        </thead>
                        <tbody>
                            @if (roles != null)
                            {
                                foreach (var role in roles)
                                {
                                    <tr>
                                        <td>
                                            <p class="mb-0 my-auto">@role.RoleName</p>
                                        </td>
                                        @if (role.RoleName == "Admin")
                                        {
                                            <td class="text-sm">Full Access</td>
                                        }
                                        @if (role.RoleName == "Manager")
                                        {
                                            <td class="text-sm">Access to Work Orders Only</td>
                                        }
                                        @if (role.RoleName == "User")
                                        {
                                            <td class="text-sm">Access to Assigned Work Orders Only</td>
                                        }
                                        @if (role.RoleName == "Supervisor")
                                        {
                                            <td class="text-sm">Access to Team's Work Orders Only </td>
                                        }
                                        @* <td class="text-end text-sm">
                                <a href="javascript:;" class="mb-0 btn btn-sm btn-danger">
                                <i class="material-icons  position-relative text-lg">delete</i>
                                </a>
                                </td>*@
                                    </tr>
                                }
                            }
                            else
                            {
                                <tr>
                                    <td colspan="2">
                                        <div class="loading">Loading&#8230;</div>

                                    </td>
                                </tr>
                            }
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@using SeaHavenIndustries.Data.IRepository;
@inject ISettingsRepository _service;
@using Microsoft.JSInterop
@using SeaHavenIndustries.ViewModel
@using global::Data.SeaHavenIndustries
@inject IJSRuntime JSRuntime
@inject NavigationManager Navigation
@code {
    private int step = 0;
    private async Task Changestep(int val)
    {
        step = val;
    }
    private List<RolesViewModel> roles = new List<RolesViewModel>();
    protected override async Task OnInitializedAsync()
    {
        var result = await _service.GetRoles();
        if (result != null)
        {
            roles = result;
        }
    }
}