nhance/app/Views/DashBoard.php

<!-- Bootstrap CSS -->
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"> -->

<!-- jQuery -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->

<!-- Bootstrap JS -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script> -->

<!-- Bootstrap JS (ensure this is included) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<!-- Remove one of these -->


<style>
    .carousel-control-next {
        right: -18px;
    }
    .carousel-control-prev {
        left: -24px;
    }

    .status-option {
        padding: 0.5rem !important;
        background-color: darkgrey;
    }

    .emp-count-view-click {
        cursor: pointer;
    }

    .emp-status .col-6 {
        padding-bottom: 0.3rem;
    }

    .emp-status label {
        font-weight: bold;
    }

    .client-branch-label {
        padding: 0.2rem;
        border-radius: 0.2rem;
        display: inline-block;
    }

    .scroll-container {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
    }

    .scroll-item {
        flex: 0 0 auto;
        width: 30%; /* Adjust based on the number of items you want to show */
        box-sizing: border-box;
        padding: 0 10px;
    }

    @media (min-width: 1200px) {
        .col-xl-3 {
            max-width: 30% !important;
        }
    }

    .center_text {
        text-align: center;
    }

    .card-body {
        padding: 1rem;
    }

    .number_css {
        font-family: Roboto, sans-serif;
        color: #343a40;
        text-align: center;
    }

    .label_bottom_reduce {
        margin-bottom: .0rem;
    }

    .search-input {
        margin-bottom: 1rem;
        padding: 0.5rem;
        border-radius: 0.25rem;
        border: 1px solid #ced4da;
        width: 100%;
    }

    .carousel-inner {
        position: relative;
        overflow: hidden;
    }

    .carousel-item {
        height: auto; /* Adjust if needed */
        margin-left: 57px;
    }

    .card {
        margin: 0 auto; /* Center card in carousel item */
    }

    .carousel-control-prev, .carousel-control-next {
        width: 5%;
        height: 100%;
    }

    /* .carousel-control-prev-icon, .carousel-control-next-icon {
        background-color: rgba(0,0,0,0.5); 
    } */

    .carousel-control-prev-icon {
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D"http://www.w3.org/2000/svg" fill%3D"%23000000" viewBox%3D"0 0 8 8"%3E%3Cpath d%3D"M2.5 0L4 1.5 1.5 4 4 6.5 2.5 8 0 4 2.5 0z"/%3E%3C/svg%3E');
    }

    .carousel-control-next-icon {
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D"http://www.w3.org/2000/svg" fill%3D"%23000000" viewBox%3D"0 0 8 8"%3E%3Cpath d%3D"M5.5 8L4 6.5 6.5 4 4 1.5 5.5 0l4 4-4 4z"/%3E%3C/svg%3E');
    }

    .show-item {
        display: inline-block !important;
    }

    .hide-item {
        display: none !important;
    }

    .content-page {
        background-color: #e8eff5;
    }

    html {
        background-color: #e8eff5;
    }
</style>


<style>

body {
.multiselect-native-select {
    position: relative;
    /* bottom: 32px; */
    select {
        border: 0 !important;
        clip: rect(0 0 0 0) !important;
        height: 1px !important;
        margin: -1px -1px -1px -3px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
        left: 50%;
        top: 30px;
    }
}

.multiselect-container{
    width: 100% !important;
}

.multiselect-selected-text{
    float: left !important;
}

}

.navtab-bg .nav-link {
    margin: 0 5px 10px!important;
}

</style>


<div class="row" id="client_add" style="margin-top: -32px;">
    <div class="col-12">
        <!-- <div class="card"> -->
            <div class="card-body">
                <div class="row" style="padding-bottom: 10px;">
                    <div class="col-6" style="align-self: center;">
                    </div>
                    <div class="col-6" style="text-align: right;">
                    </div>
                </div>
                
                <br>

                <ul class="nav nav-pills navtab-bg">
                    <li class="nav-item">
                        <a href="#pending-actions-dash-tab" data-toggle="tab" aria-expanded="false"
                            class="nav-link px-3 py-2 active" id="pending_actions_tab">
                            <span class="mr-1"><i class="mdi mdi-contacts"></i></span>
                            <span class="d-none d-sm-inline-block">Pending Actions</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#enrollment-dash-tab" data-toggle="tab" aria-expanded="true" class="nav-link px-3 py-2" id="enrollemnt_tab">
                            <span class="mr-1"><i class="fa fa-file"></i></span>
                            <span class="d-none d-sm-inline-block">Enrolment</span>
                        </a>
                    </li>
<!-- 
                    <?php if(get_role_id() == 1 || get_role_id() == 5) { ?>

                        <li class="nav-item">
                            <a href="#bds-dash-tab" data-toggle="tab" aria-expanded="true" class="nav-link px-3 py-2" id="bds_tab">
                                <span class="mr-1"><i class="fa fa-file"></i></span>
                                <span class="d-none d-sm-inline-block">BDS</span>
                            </a>
                        </li>

                    <?php } ?> -->

                </ul>
                <div class="tab-content">
                    <?php include('endorsement_dash.php'); ?>
                    <!-- <?php include('bds_dash.php'); ?> -->
                    <?php include('enrollment_dash.php'); ?>
                </div>
            </div>
        <!-- </div> -->
    </div>
</div>