@extends('layout.index')
@section('content')
    <div class="d-flex flex-column flex-column-fluid">

        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 ">

            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container  container-xxl d-flex flex-stack ">

                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
                    @exceptThisAuth('web')
                        <!--begin::Title-->
                        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                            Overall Tracking
                        </h1>
                    @else
                        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                            MKS HOSPITAL
                        </h1>
                    @endexceptThisAuth

                    <!--end::Breadcrumb-->
                </div>


                <!--end::Page title-->
                <!--begin::Actions-->

                <!--end::Actions-->
            </div>
            <!--end::Toolbar container-->
        </div>
        <!--end::Toolbar-->

        <!--begin::Content-->
        <div id="kt_app_content" class="app-content  flex-column-fluid ">


            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container  container-xxl ">
                @exceptThisAuth('web')
                    <!--begin::Row-->
                    <div class="row gy-5 gx-xl-10">
                        <!--begin::Col-->
                        <div class="col-sm-6 col-xl-3 mb-xl-10">
                            <div class="card h-lg-100">
                                <!--begin::Body-->
                                <div class="card-body d-flex justify-content-between align-items-start flex-column">
                                    <div class="m-0">
                                        <i class="fa fa-user fa-2x text-gray-600">
                                            <span class="path1"></span><span class="path2"></span></i>
                                    </div>
                                    <!--end::Icon-->
                                    <div class="d-flex flex-column my-7">
                                        <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">{{ $patients ?? '0' }}</span>
                                        <div class="m-0">
                                            <span class="fw-semibold fs-6 text-gray-500">
                                                Patients </span>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!--end::Col-->

                        <!--begin::Col-->
                        <div class="col-sm-6 col-xl-3 mb-xl-10">
                            <div class="card h-lg-100">
                                <!--begin::Body-->
                                <div class="card-body d-flex justify-content-between align-items-start flex-column">
                                    <!--begin::Icon-->
                                    <div class="m-0">
                                        <span class="fa fa-user"">
                                            <span class="path1"></span><span class="path2"></span><span
                                                class="path3"></span><span class="path4"></span></i>

                                    </div>
                                    <!--end::Icon-->
                                    <div class="d-flex flex-column my-7">
                                        <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">{{ $admins ?? '0' }}</span>
                                        <div class="m-0">
                                            <span class="fw-semibold fs-6 text-gray-500">
                                                Admins </span>

                                        </div>
                                    </div>
                                </div>
                                <!--end::Body-->
                            </div>
                        </div>
                        <!--end::Col-->

                        <!--begin::Col-->
                        <div class="col-sm-6 col-xl-3 mb-xl-10">

                            <!--begin::Card widget 2-->
                            <div class="card h-lg-100">
                                <div class="card-body d-flex justify-content-between align-items-start flex-column">
                                    <!--begin::Icon-->
                                    <div class="m-0">
                                        <i class="fa-solid fa-user-doctor fa-2x text-gray-600">
                                            <span class="path1"></span><span class="path2"></span></i>

                                    </div>
                                    <!--end::Icon-->
                                    <div class="d-flex flex-column my-7">
                                        <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">{{ $doctors ?? '0' }}</span>
                                        <div class="m-0">
                                            <span class="fw-semibold fs-6 text-gray-500">
                                                Doctors </span>
                                        </div>
                                    </div>
                                </div>
                                <!--end::Body-->
                            </div>
                        </div>
                        <!--end::Col-->

                        <!--begin::Col-->
                        <div class="col-sm-6 col-xl-3 mb-xl-10">

                            <!--begin::Card widget 2-->
                            <div class="card h-lg-100">
                                <!--begin::Body-->
                                <div class="card-body d-flex justify-content-between align-items-start flex-column">
                                    <!--begin::Icon-->
                                    <div class="m-0">
                                        <i class="fa fa-map fa-2x text-gray-600">
                                            <span class="path1"></span><span class="path2"></span><span
                                                class="path3"></span></i>

                                    </div>
                                    <!--end::Icon-->

                                    <!--begin::Section-->
                                    <div class="d-flex flex-column my-7">
                                        <!--begin::Number-->
                                        <span
                                            class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">{{ $receptionist ?? '0' }}</span>
                                        <div class="m-0">
                                            <span class="fw-semibold fs-6 text-gray-500">
                                                Receptionist</span>

                                        </div>
                                        <!--end::Follower-->
                                    </div>
                                </div>
                                <!--end::Body-->
                            </div>
                            <!--end::Card widget 2-->


                        </div>

                    </div>
                @endexceptThisAuth
                <!--end::Row-->

                {{-- <!--begin::Row-->
                <div class="row g-5 g-xl-10 mb-5 mb-xl-10">
                    <!--begin::Col-->
                    <div class="col-xl-4">

                        <!--begin::Chart widget 19-->
                        <div class="card card-flush h-100 mb-5 mb-xl-10">
                            <!--begin::Header-->
                            <div class="card-header pt-7">
                                <!--begin::Title-->
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-900">Leading
                                        Companies</span>

                                    <span class="text-gray-500 pt-2 fw-semibold fs-6">8k social
                                        visitors</span>
                                </h3>
                                <!--end::Title-->

                                <!--begin::Toolbar-->
                                <div class="card-toolbar">
                                    <!--begin::Nav-->
                                    <ul class="nav" id="kt_chart_widget_19_tabs">
                                        <li class="nav-item">
                                            <a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light active fw-bold px-4 me-1"
                                                data-bs-toggle="tab" id="kt_chart_widget_19_tab_1"
                                                href="#kt_chart_widget_19_tab_content_1">2024</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light fw-bold px-4"
                                                data-bs-toggle="tab" id="kt_chart_widget_19_tab_2"
                                                href="#kt_chart_widget_19_tab_content_2">Month</a>
                                        </li>
                                    </ul>
                                </div>
                                <!--end::Toolbar-->
                            </div>
                            <!--end::Header-->

                            <!--begin::Body-->
                            <div class="card-body pt-0">
                                <!--begin::Tab Content (ishlamayabdi)-->
                                <div class="tab-content">
                                    <!--begin::Tap pane-->
                                    <div class="tab-pane fade show active" id="kt_chart_widget_19_tab_content_1">
                                        <!--begin::Chart container-->
                                        <div id="kt_charts_widget_19_chart_1" class="w-100 h-400px mb-13 mt-n4"></div>
                                        <!--end::Chart container-->

                                        <!--begin::Items-->
                                        <div class="m-0">

                                            <!--begin::Item-->
                                            <div class="d-flex flex-stack">
                                                <!--begin::Section-->
                                                <div class="d-flex align-items-center me-5">
                                                    <!--begin::Flag-->
                                                    <img src="../assets/media/svg/brand-logos/atica.svg"
                                                        class="me-4 w-30px" style="border-radius: 4px" alt="" />
                                                    <!--end::Flag-->

                                                    <!--begin::Content-->
                                                    <div class="me-5">
                                                        <!--begin::Title-->
                                                        <a href="#"
                                                            class="text-gray-800 fw-bold text-hover-primary fs-6">Abstergo
                                                            Ltd.</a>
                                                        <!--end::Title-->

                                                        <!--begin::Desc-->
                                                        <span
                                                            class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Community</span>
                                                        <!--end::Desc-->
                                                    </div>
                                                    <!--end::Content-->
                                                </div>
                                                <!--end::Section-->

                                                <!--begin::Wrapper-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Number-->
                                                    <span class="text-gray-800 fw-bold fs-4 me-3">579</span>
                                                    <!--end::Number-->

                                                    <!--begin::Info-->
                                                    <div class="m-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-success fs-base">
                                                            <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            2.6%
                                                        </span>
                                                        <!--end::Label-->

                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                            <!--end::Item-->

                                            <!--begin::Separator-->
                                            <div class="separator separator-dashed my-4"></div>
                                            <!--end::Separator-->


                                            <!--begin::Item-->
                                            <div class="d-flex flex-stack">
                                                <!--begin::Section-->
                                                <div class="d-flex align-items-center me-5">
                                                    <!--begin::Flag-->
                                                    <img src="../assets/media/svg/brand-logos/telegram-2.svg"
                                                        class="me-4 w-30px" style="border-radius: 4px" alt="" />
                                                    <!--end::Flag-->

                                                    <!--begin::Content-->
                                                    <div class="me-5">
                                                        <!--begin::Title-->
                                                        <a href="#"
                                                            class="text-gray-800 fw-bold text-hover-primary fs-6">Binford
                                                            Ltd.</a>
                                                        <!--end::Title-->

                                                        <!--begin::Desc-->
                                                        <span
                                                            class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Social
                                                            Media</span>
                                                        <!--end::Desc-->
                                                    </div>
                                                    <!--end::Content-->
                                                </div>
                                                <!--end::Section-->

                                                <!--begin::Wrapper-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Number-->
                                                    <span class="text-gray-800 fw-bold fs-4 me-3">2,588</span>
                                                    <!--end::Number-->

                                                    <!--begin::Info-->
                                                    <div class="m-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-danger fs-base">
                                                            <i class="ki-duotone ki-arrow-down fs-5 text-danger ms-n1"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            0.4%
                                                        </span>
                                                        <!--end::Label-->

                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                            <!--end::Item-->

                                            <!--begin::Separator-->
                                            <div class="separator separator-dashed my-4"></div>
                                            <!--end::Separator-->


                                            <!--begin::Item-->
                                            <div class="d-flex flex-stack">
                                                <!--begin::Section-->
                                                <div class="d-flex align-items-center me-5">
                                                    <!--begin::Flag-->
                                                    <img src="../assets/media/svg/brand-logos/balloon.svg"
                                                        class="me-4 w-30px" style="border-radius: 4px" alt="" />
                                                    <!--end::Flag-->

                                                    <!--begin::Content-->
                                                    <div class="me-5">
                                                        <!--begin::Title-->
                                                        <a href="#"
                                                            class="text-gray-800 fw-bold text-hover-primary fs-6">Barone
                                                            LLC.</a>
                                                        <!--end::Title-->

                                                        <!--begin::Desc-->
                                                        <span
                                                            class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Messanger</span>
                                                        <!--end::Desc-->
                                                    </div>
                                                    <!--end::Content-->
                                                </div>
                                                <!--end::Section-->

                                                <!--begin::Wrapper-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Number-->
                                                    <span class="text-gray-800 fw-bold fs-4 me-3">794</span>
                                                    <!--end::Number-->

                                                    <!--begin::Info-->
                                                    <div class="m-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-success fs-base">
                                                            <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            0.2%
                                                        </span>
                                                        <!--end::Label-->

                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                            <!--end::Item-->

                                            <!--begin::Separator-->
                                            <div class="separator separator-dashed my-4"></div>
                                            <!--end::Separator-->


                                            <!--begin::Item-->
                                            <div class="d-flex flex-stack">
                                                <!--begin::Section-->
                                                <div class="d-flex align-items-center me-5">
                                                    <!--begin::Flag-->
                                                    <img src="../assets/media/svg/brand-logos/kickstarter.svg"
                                                        class="me-4 w-30px" style="border-radius: 4px" alt="" />
                                                    <!--end::Flag-->

                                                    <!--begin::Content-->
                                                    <div class="me-5">
                                                        <!--begin::Title-->
                                                        <a href="#"
                                                            class="text-gray-800 fw-bold text-hover-primary fs-6">Abstergo
                                                            Ltd.</a>
                                                        <!--end::Title-->

                                                        <!--begin::Desc-->
                                                        <span
                                                            class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Video
                                                            Channel</span>
                                                        <!--end::Desc-->
                                                    </div>
                                                    <!--end::Content-->
                                                </div>
                                                <!--end::Section-->

                                                <!--begin::Wrapper-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Number-->
                                                    <span class="text-gray-800 fw-bold fs-4 me-3">1,578</span>
                                                    <!--end::Number-->

                                                    <!--begin::Info-->
                                                    <div class="m-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-success fs-base">
                                                            <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            4.1%
                                                        </span>
                                                        <!--end::Label-->

                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                            <!--end::Item-->

                                            <!--begin::Separator-->
                                            <div class="separator separator-dashed my-4"></div>
                                            <!--end::Separator-->


                                            <!--begin::Item-->
                                            <div class="d-flex flex-stack">
                                                <!--begin::Section-->
                                                <div class="d-flex align-items-center me-5">
                                                    <!--begin::Flag-->
                                                    <img src="../assets/media/svg/brand-logos/vimeo.svg"
                                                        class="me-4 w-30px" style="border-radius: 4px" alt="" />
                                                    <!--end::Flag-->

                                                    <!--begin::Content-->
                                                    <div class="me-5">
                                                        <!--begin::Title-->
                                                        <a href="#"
                                                            class="text-gray-800 fw-bold text-hover-primary fs-6">Biffco
                                                            Enterprises</a>
                                                        <!--end::Title-->

                                                        <!--begin::Desc-->
                                                        <span
                                                            class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Social
                                                            Network</span>
                                                        <!--end::Desc-->
                                                    </div>
                                                    <!--end::Content-->
                                                </div>
                                                <!--end::Section-->

                                                <!--begin::Wrapper-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Number-->
                                                    <span class="text-gray-800 fw-bold fs-4 me-3">3,458</span>
                                                    <!--end::Number-->

                                                    <!--begin::Info-->
                                                    <div class="m-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-success fs-base">
                                                            <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            8.3%
                                                        </span>
                                                        <!--end::Label-->

                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                            <!--end::Item-->

                                            <!--begin::Separator-->
                                            <div class="separator separator-dashed my-4"></div>
                                            <!--end::Separator-->


                                            <!--begin::Item-->
                                            <div class="d-flex flex-stack">
                                                <!--begin::Section-->
                                                <div class="d-flex align-items-center me-5">
                                                    <!--begin::Flag-->
                                                    <img src="../assets/media/svg/brand-logos/plurk.svg"
                                                        class="me-4 w-30px" style="border-radius: 4px" alt="" />
                                                    <!--end::Flag-->

                                                    <!--begin::Content-->
                                                    <div class="me-5">
                                                        <!--begin::Title-->
                                                        <a href="#"
                                                            class="text-gray-800 fw-bold text-hover-primary fs-6">Big
                                                            Kahuna Burger</a>
                                                        <!--end::Title-->

                                                        <!--begin::Desc-->
                                                        <span
                                                            class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Social
                                                            Network</span>
                                                        <!--end::Desc-->
                                                    </div>
                                                    <!--end::Content-->
                                                </div>
                                                <!--end::Section-->

                                                <!--begin::Wrapper-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Number-->
                                                    <span class="text-gray-800 fw-bold fs-4 me-3">2,047</span>
                                                    <!--end::Number-->

                                                    <!--begin::Info-->
                                                    <div class="m-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-success fs-base">
                                                            <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            1.9%
                                                        </span>
                                                        <!--end::Label-->

                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                            <!--end::Item-->


                                        </div>
                                        <!--end::Items-->
                                    </div>
                                    <!--end::Tap pane-->
                                    <!--begin::Tap pane-->
                                    <div class="tab-pane fade " id="kt_chart_widget_19_tab_content_2">
                                        <!--begin::Chart container-->
                                        <div id="kt_charts_widget_19_chart_2" class="w-100 h-400px mb-13 mt-n4"></div>
                                        <!--end::Chart container-->

                                        <!--begin::Items-->
                                        <div class="m-0">

                                            <!--begin::Item-->
                                            <div class="d-flex flex-stack">
                                                <!--begin::Section-->
                                                <div class="d-flex align-items-center me-5">
                                                    <!--begin::Flag-->
                                                    <img src="../assets/media/svg/brand-logos/atica.svg"
                                                        class="me-4 w-30px" style="border-radius: 4px" alt="" />
                                                    <!--end::Flag-->

                                                    <!--begin::Content-->
                                                    <div class="me-5">
                                                        <!--begin::Title-->
                                                        <a href="#"
                                                            class="text-gray-800 fw-bold text-hover-primary fs-6">Abstergo
                                                            Ltd.</a>
                                                        <!--end::Title-->

                                                        <!--begin::Desc-->
                                                        <span
                                                            class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Community</span>
                                                        <!--end::Desc-->
                                                    </div>
                                                    <!--end::Content-->
                                                </div>
                                                <!--end::Section-->

                                                <!--begin::Wrapper-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Number-->
                                                    <span class="text-gray-800 fw-bold fs-4 me-3">579</span>
                                                    <!--end::Number-->

                                                    <!--begin::Info-->
                                                    <div class="m-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-success fs-base">
                                                            <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            2.6%
                                                        </span>
                                                        <!--end::Label-->

                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                            <!--end::Item-->

                                            <!--begin::Separator-->
                                            <div class="separator separator-dashed my-4"></div>
                                            <!--end::Separator-->


                                            <!--begin::Item-->
                                            <div class="d-flex flex-stack">
                                                <!--begin::Section-->
                                                <div class="d-flex align-items-center me-5">
                                                    <!--begin::Flag-->
                                                    <img src="../assets/media/svg/brand-logos/telegram-2.svg"
                                                        class="me-4 w-30px" style="border-radius: 4px" alt="" />
                                                    <!--end::Flag-->

                                                    <!--begin::Content-->
                                                    <div class="me-5">
                                                        <!--begin::Title-->
                                                        <a href="#"
                                                            class="text-gray-800 fw-bold text-hover-primary fs-6">Binford
                                                            Ltd.</a>
                                                        <!--end::Title-->

                                                        <!--begin::Desc-->
                                                        <span
                                                            class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Social
                                                            Media</span>
                                                        <!--end::Desc-->
                                                    </div>
                                                    <!--end::Content-->
                                                </div>
                                                <!--end::Section-->

                                                <!--begin::Wrapper-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Number-->
                                                    <span class="text-gray-800 fw-bold fs-4 me-3">2,588</span>
                                                    <!--end::Number-->

                                                    <!--begin::Info-->
                                                    <div class="m-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-danger fs-base">
                                                            <i class="ki-duotone ki-arrow-down fs-5 text-danger ms-n1"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            0.4%
                                                        </span>
                                                        <!--end::Label-->

                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                            <!--end::Item-->

                                            <!--begin::Separator-->
                                            <div class="separator separator-dashed my-4"></div>
                                            <!--end::Separator-->


                                            <!--begin::Item-->
                                            <div class="d-flex flex-stack">
                                                <!--begin::Section-->
                                                <div class="d-flex align-items-center me-5">
                                                    <!--begin::Flag-->
                                                    <img src="../assets/media/svg/brand-logos/balloon.svg"
                                                        class="me-4 w-30px" style="border-radius: 4px" alt="" />
                                                    <!--end::Flag-->

                                                    <!--begin::Content-->
                                                    <div class="me-5">
                                                        <!--begin::Title-->
                                                        <a href="#"
                                                            class="text-gray-800 fw-bold text-hover-primary fs-6">Barone
                                                            LLC.</a>
                                                        <!--end::Title-->

                                                        <!--begin::Desc-->
                                                        <span
                                                            class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Messanger</span>
                                                        <!--end::Desc-->
                                                    </div>
                                                    <!--end::Content-->
                                                </div>
                                                <!--end::Section-->

                                                <!--begin::Wrapper-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Number-->
                                                    <span class="text-gray-800 fw-bold fs-4 me-3">794</span>
                                                    <!--end::Number-->

                                                    <!--begin::Info-->
                                                    <div class="m-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-success fs-base">
                                                            <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            0.2%
                                                        </span>
                                                        <!--end::Label-->

                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                            <!--end::Item-->

                                            <!--begin::Separator-->
                                            <div class="separator separator-dashed my-4"></div>
                                            <!--end::Separator-->


                                            <!--begin::Item-->
                                            <div class="d-flex flex-stack">
                                                <!--begin::Section-->
                                                <div class="d-flex align-items-center me-5">
                                                    <!--begin::Flag-->
                                                    <img src="../assets/media/svg/brand-logos/kickstarter.svg"
                                                        class="me-4 w-30px" style="border-radius: 4px" alt="" />
                                                    <!--end::Flag-->

                                                    <!--begin::Content-->
                                                    <div class="me-5">
                                                        <!--begin::Title-->
                                                        <a href="#"
                                                            class="text-gray-800 fw-bold text-hover-primary fs-6">Abstergo
                                                            Ltd.</a>
                                                        <!--end::Title-->

                                                        <!--begin::Desc-->
                                                        <span
                                                            class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Video
                                                            Channel</span>
                                                        <!--end::Desc-->
                                                    </div>
                                                    <!--end::Content-->
                                                </div>
                                                <!--end::Section-->

                                                <!--begin::Wrapper-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Number-->
                                                    <span class="text-gray-800 fw-bold fs-4 me-3">1,578</span>
                                                    <!--end::Number-->

                                                    <!--begin::Info-->
                                                    <div class="m-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-success fs-base">
                                                            <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            4.1%
                                                        </span>
                                                        <!--end::Label-->

                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                            <!--end::Item-->

                                            <!--begin::Separator-->
                                            <div class="separator separator-dashed my-4"></div>
                                            <!--end::Separator-->


                                            <!--begin::Item-->
                                            <div class="d-flex flex-stack">
                                                <!--begin::Section-->
                                                <div class="d-flex align-items-center me-5">
                                                    <!--begin::Flag-->
                                                    <img src="../assets/media/svg/brand-logos/vimeo.svg"
                                                        class="me-4 w-30px" style="border-radius: 4px" alt="" />
                                                    <!--end::Flag-->

                                                    <!--begin::Content-->
                                                    <div class="me-5">
                                                        <!--begin::Title-->
                                                        <a href="#"
                                                            class="text-gray-800 fw-bold text-hover-primary fs-6">Biffco
                                                            Enterprises</a>
                                                        <!--end::Title-->

                                                        <!--begin::Desc-->
                                                        <span
                                                            class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Social
                                                            Network</span>
                                                        <!--end::Desc-->
                                                    </div>
                                                    <!--end::Content-->
                                                </div>
                                                <!--end::Section-->

                                                <!--begin::Wrapper-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Number-->
                                                    <span class="text-gray-800 fw-bold fs-4 me-3">3,458</span>
                                                    <!--end::Number-->

                                                    <!--begin::Info-->
                                                    <div class="m-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-success fs-base">
                                                            <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            8.3%
                                                        </span>
                                                        <!--end::Label-->

                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                            <!--end::Item-->

                                            <!--begin::Separator-->
                                            <div class="separator separator-dashed my-4"></div>
                                            <!--end::Separator-->


                                            <!--begin::Item-->
                                            <div class="d-flex flex-stack">
                                                <!--begin::Section-->
                                                <div class="d-flex align-items-center me-5">
                                                    <!--begin::Flag-->
                                                    <img src="../assets/media/svg/brand-logos/plurk.svg"
                                                        class="me-4 w-30px" style="border-radius: 4px" alt="" />
                                                    <!--end::Flag-->

                                                    <!--begin::Content-->
                                                    <div class="me-5">
                                                        <!--begin::Title-->
                                                        <a href="#"
                                                            class="text-gray-800 fw-bold text-hover-primary fs-6">Big
                                                            Kahuna Burger</a>
                                                        <!--end::Title-->

                                                        <!--begin::Desc-->
                                                        <span
                                                            class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Social
                                                            Network</span>
                                                        <!--end::Desc-->
                                                    </div>
                                                    <!--end::Content-->
                                                </div>
                                                <!--end::Section-->

                                                <!--begin::Wrapper-->
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Number-->
                                                    <span class="text-gray-800 fw-bold fs-4 me-3">2,047</span>
                                                    <!--end::Number-->

                                                    <!--begin::Info-->
                                                    <div class="m-0">
                                                        <!--begin::Label-->
                                                        <span class="badge badge-light-success fs-base">
                                                            <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1"><span
                                                                    class="path1"></span><span class="path2"></span></i>
                                                            1.9%
                                                        </span>
                                                        <!--end::Label-->

                                                    </div>
                                                    <!--end::Info-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                            <!--end::Item-->


                                        </div>
                                        <!--end::Items-->
                                    </div>
                                    <!--end::Tap pane-->

                                </div>
                                <!--end::Tab Content-->
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Chart widget 19-->
                    </div>
                    <!--end::Col-->

                    <!--begin::Col-->
                    <div class="col-xl-8 mb-xl-10">
                        <!--begin::Chart widget 38-->
                        <div class="card card-flush h-xl-50 mb-5 mb-xl-10">
                            <!--begin::Header-->
                            <div class="card-header pt-7">
                                <!--begin::Title-->
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-800">LOI Issued by
                                        Departments</span>
                                    <span class="text-gray-500 mt-1 fw-semibold fs-6">Counted in
                                        Millions</span>
                                </h3>
                                <!--end::Title-->

                                <!--begin::Toolbar-->
                                <div class="card-toolbar">
                                    <!--begin::Daterangepicker(defined in src/js/layout/app.js)-->
                                    <div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left"
                                        class="btn btn-sm btn-light d-flex align-items-center px-4">
                                        <!--begin::Display range-->
                                        <div class="text-gray-600 fw-bold">
                                            Loading date range...
                                        </div>
                                        <!--end::Display range-->

                                        <i class="fa fa-calendar fa-2x text-gray-500 lh-0 ms-2 me-0">
                                            <span class="path1"></span><span class="path2"></span><span
                                                class="path3"></span><span class="path4"></span><span
                                                class="path5"></span><span class="path6"></span></i>
                                    </div>
                                    <!--end::Daterangepicker-->
                                </div>
                                <!--end::Toolbar-->
                            </div>
                            <!--end::Header-->

                            <!--begin::Body-->
                            <div class="card-body d-flex align-items-end px-0 pt-3 pb-5">
                                <!--begin::Chart-->
                                <div id="kt_charts_widget_38_chart" class="h-325px w-100 min-h-auto ps-4 pe-6"></div>
                                <!--end::Chart-->
                            </div>
                            <!--end: Card Body-->
                        </div>
                        <!--end::Chart widget 38-->



                        <!--begin::Chart widget 20-->
                        <div class="card card-flush h-xl-50">
                            <!--begin::Header-->
                            <div class="card-header py-5">
                                <!--begin::Title-->
                                <h3 class="card-title fw-bold text-gray-800">Monthly Targets</h3>
                                <!--end::Title-->

                                <!--begin::Toolbar-->
                                <div class="card-toolbar">
                                    <!--begin::Daterangepicker(defined in src/js/layout/app.js)-->
                                    <div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left"
                                        class="btn btn-sm btn-light d-flex align-items-center px-4">
                                        <!--begin::Display range-->
                                        <div class="text-gray-600 fw-bold">
                                            Loading date range...
                                        </div>
                                        <!--end::Display range-->

                                        <i class="ki-duotone ki-calendar-8 text-gray-500 lh-0 fs-2 ms-2 me-0"><span
                                                class="path1"></span><span class="path2"></span><span
                                                class="path3"></span><span class="path4"></span><span
                                                class="path5"></span><span class="path6"></span></i>
                                    </div>
                                    <!--end::Daterangepicker-->
                                </div>
                                <!--end::Toolbar-->
                            </div>
                            <!--end::Header-->

                            <!--begin::Card body-->
                            <div class="card-body d-flex justify-content-between flex-column pb-0 px-0 pt-1">
                                <!--begin::Items-->
                                <div class="d-flex flex-wrap d-grid gap-5 px-9 mb-5">
                                    <!--begin::Item-->
                                    <div class="me-md-2">
                                        <!--begin::Statistics-->
                                        <div class="d-flex mb-2">
                                            <span class="fs-4 fw-semibold text-gray-500 me-1">$</span>
                                            <span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">12,706</span>
                                        </div>
                                        <!--end::Statistics-->

                                        <!--begin::Description-->
                                        <span class="fs-6 fw-semibold text-gray-500">Targets for
                                            April</span>
                                        <!--end::Description-->
                                    </div>
                                    <!--end::Item-->

                                    <!--begin::Item-->
                                    <div
                                        class="border-start-dashed border-end-dashed border-start border-end border-gray-300 px-5 ps-md-10 pe-md-7 me-md-5">
                                        <!--begin::Statistics-->
                                        <div class="d-flex mb-2">
                                            <span class="fs-4 fw-semibold text-gray-500 me-1">$</span>
                                            <span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">8,035</span>
                                        </div>
                                        <!--end::Statistics-->

                                        <!--begin::Description-->
                                        <span class="fs-6 fw-semibold text-gray-500">Actual for
                                            April</span>
                                        <!--end::Description-->
                                    </div>
                                    <!--end::Item-->

                                    <!--begin::Item-->
                                    <div class="m-0">
                                        <!--begin::Statistics-->
                                        <div class="d-flex align-items-center mb-2">
                                            <!--begin::Currency-->
                                            <span class="fs-4 fw-semibold text-gray-500 align-self-start me-1">$</span>
                                            <!--end::Currency-->

                                            <!--begin::Value-->
                                            <span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">4,684</span>
                                            <!--end::Value-->

                                            <!--begin::Label-->
                                            <span class="badge badge-light-success fs-base">
                                                <i class="ki-duotone ki-black-up fs-7 text-success ms-n1"></i>
                                                4.5%
                                            </span>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Statistics-->

                                        <!--begin::Description-->
                                        <span class="fs-6 fw-semibold text-gray-500">GAP</span>
                                        <!--end::Description-->
                                    </div>
                                    <!--end::Item-->
                                </div>
                                <!--end::Items-->

                                <!--begin::Chart-->
                                <div id="kt_charts_widget_20" class="min-h-auto ps-4 pe-6" data-kt-chart-info="Revenue"
                                    style="height: 300px"></div>
                                <!--end::Chart-->
                            </div>
                            <!--end::Card body-->
                        </div>
                        <!--end::Chart widget 20-->

                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->

                <!--begin::Row-->
                <div class="row g-5 g-xl-10 mb-5 mb-xl-10">
                    <!--begin::Col-->
                    <div class="col-xxl-4">

                        <!--begin::Engage widget 1-->
                        <div class="card h-md-100" dir="ltr">
                            <!--begin::Body-->
                            <div class="card-body d-flex flex-column flex-center">
                                <!--begin::Heading-->
                                <div class="mb-2">
                                    <!--begin::Title-->
                                    <h1 class="fw-semibold text-gray-800 text-center lh-lg">
                                        Try out our <br /> new
                                        <span class="fw-bolder"> Invoice Manager</span>
                                    </h1>
                                    <!--end::Title-->

                                    <!--begin::Illustration-->
                                    <div class="py-10 text-center">
                                        <img src="../assets/media/svg/illustrations/easy/2.svg"
                                            class="theme-light-show w-200px" alt="" />
                                        <img src="../assets/media/svg/illustrations/easy/2-dark.svg"
                                            class="theme-dark-show w-200px" alt="" />
                                    </div>
                                    <!--end::Illustration-->
                                </div>
                                <!--end::Heading-->

                                <!--begin::Links-->
                                <div class="text-center mb-1">
                                    <!--begin::Link-->
                                    <a class="btn btn-sm btn-primary me-2" data-bs-target="#kt_modal_new_address"
                                        data-bs-toggle="modal">
                                        Try Now </a>
                                    <!--end::Link-->

                                    <!--begin::Link-->
                                    <a class="btn btn-sm btn-light" href="../apps/user-management/users/view.html">
                                        Learn More </a>
                                    <!--end::Link-->
                                </div>
                                <!--end::Links-->
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Engage widget 1-->

                    </div>
                    <!--end::Col-->

                    <!--begin::Col-->
                    <div class="col-xxl-8">
                        <!--begin::Chart widget 23-->
                        <div class="card card-flush overflow-hidden h-md-100">
                            <!--begin::Header-->
                            <div class="card-header py-5">
                                <!--begin::Title-->
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-900">Some Chart with
                                        AmCharts</span>
                                    <span class="text-gray-500 mt-1 fw-semibold fs-6">83 countries in
                                        service</span>
                                </h3>
                                <!--end::Title-->

                                <!--begin::Toolbar-->
                                <div class="card-toolbar">
                                    <!--begin::Menu-->
                                    <button
                                        class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end"
                                        data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"
                                        data-kt-menu-overflow="true">

                                        <i class="ki-duotone ki-dots-square fs-1"><span class="path1"></span><span
                                                class="path2"></span><span class="path3"></span><span
                                                class="path4"></span></i>
                                    </button>

                                    <!--begin::Menu 2-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px"
                                        data-kt-menu="true">
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <div class="menu-content fs-6 text-gray-900 fw-bold px-3 py-4">
                                                Quick Actions</div>
                                        </div>
                                        <!--end::Menu item-->

                                        <!--begin::Menu separator-->
                                        <div class="separator mb-3 opacity-75"></div>
                                        <!--end::Menu separator-->

                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link px-3">
                                                New Ticket
                                            </a>
                                        </div>
                                        <!--end::Menu item-->

                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link px-3">
                                                New Customer
                                            </a>
                                        </div>
                                        <!--end::Menu item-->

                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3" data-kt-menu-trigger="hover"
                                            data-kt-menu-placement="right-start">
                                            <!--begin::Menu item-->
                                            <a href="#" class="menu-link px-3">
                                                <span class="menu-title">New Group</span>
                                                <span class="menu-arrow"></span>
                                            </a>
                                            <!--end::Menu item-->

                                            <!--begin::Menu sub-->
                                            <div class="menu-sub menu-sub-dropdown w-175px py-4">
                                                <!--begin::Menu item-->
                                                <div class="menu-item px-3">
                                                    <a href="#" class="menu-link px-3">
                                                        Admin Group
                                                    </a>
                                                </div>
                                                <!--end::Menu item-->

                                                <!--begin::Menu item-->
                                                <div class="menu-item px-3">
                                                    <a href="#" class="menu-link px-3">
                                                        Staff Group
                                                    </a>
                                                </div>
                                                <!--end::Menu item-->

                                                <!--begin::Menu item-->
                                                <div class="menu-item px-3">
                                                    <a href="#" class="menu-link px-3">
                                                        Member Group
                                                    </a>
                                                </div>
                                                <!--end::Menu item-->
                                            </div>
                                            <!--end::Menu sub-->
                                        </div>
                                        <!--end::Menu item-->

                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link px-3">
                                                New Contact
                                            </a>
                                        </div>
                                        <!--end::Menu item-->

                                        <!--begin::Menu separator-->
                                        <div class="separator mt-3 opacity-75"></div>
                                        <!--end::Menu separator-->

                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <div class="menu-content px-3 py-3">
                                                <a class="btn btn-primary  btn-sm px-4" href="#">
                                                    Generate Reports
                                                </a>
                                            </div>
                                        </div>
                                        <!--end::Menu item-->
                                    </div>
                                    <!--end::Menu 2-->

                                    <!--end::Menu-->
                                </div>
                                <!--end::Toolbar-->
                            </div>
                            <!--end::Header-->

                            <!--begin::Card body-->
                            <div class="card-body pt-4">
                                <!--begin::Chart-->
                                <div id="kt_charts_widget_23" class="h-400px w-100"></div>
                                <!--end::Chart-->
                            </div>
                            <!--end::Card body-->
                        </div>
                        <!--end::Chart widget 23-->

                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->

                <!--begin::Row-->
                <div class="row g-5 g-xl-10">
                    <!--begin::Col-->
                    <div class="col-xxl-4">
                        <!--begin::Chart widget 25-->
                        <div class="card card-flush h-md-100">
                            <!--begin::Header-->
                            <div class="card-header pt-7">
                                <!--begin::Title-->
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-900">Warephase
                                        stats</span>

                                    <span class="text-gray-500 pt-2 fw-semibold fs-6">8k social
                                        visitors</span>
                                </h3>
                                <!--end::Title-->

                                <!--begin::Toolbar-->
                                <div class="card-toolbar">
                                    <!--begin::Nav-->
                                    <ul class="nav" id="kt_chart_widget_19_tabs">
                                        <li class="nav-item">
                                            <a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light fw-bold px-4 me-1"
                                                data-bs-toggle="tab" id="kt_chart_widget_25_tab_1"
                                                href="#kt_chart_widget_25_tab_content_1">2024</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light active fw-bold px-4"
                                                data-bs-toggle="tab" id="kt_chart_widget_25_tab_2"
                                                href="#kt_chart_widget_25_tab_content_2">Month</a>
                                        </li>
                                    </ul>
                                </div>
                                <!--end::Toolbar-->
                            </div>
                            <!--end::Header-->

                            <!--begin::Body-->
                            <div class="card-body pt-0">
                                <!--begin::Tab Content (ishlamayabdi)-->
                                <div class="tab-content">
                                    <!--begin::Tap pane-->
                                    <div class="tab-pane fade" id="kt_chart_widget_25_tab_content_1">
                                        <!--begin::Chart-->
                                        <div id="kt_charts_widget_25_chart_1" class="w-100 h-400px">
                                        </div>
                                        <!--end::Chart-->
                                    </div>
                                    <!--end::Tap pane-->

                                    <!--begin::Tap pane-->
                                    <div class="tab-pane fade active show" id="kt_chart_widget_25_tab_content_2">
                                        <!--begin::Chart-->
                                        <div id="kt_charts_widget_25_chart_2" class="w-100 h-400px">
                                        </div>
                                        <!--end::Chart-->
                                    </div>
                                    <!--end::Tap pane-->

                                </div>
                                <!--end::Tab Content-->
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Chart widget 25-->
                    </div>
                    <!--end::Col-->

                    <!--begin::Col-->
                    <div class="col-xxl-8">

                        <!--begin::Chart widget 24-->
                        <div class="card card-flush overflow-hidden h-md-100">
                            <!--begin::Header-->
                            <div class="card-header py-5">
                                <!--begin::Title-->
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-900">Human
                                        Resources</span>
                                    <span class="text-gray-500 mt-1 fw-semibold fs-6">Reports by states
                                        and ganders</span>
                                </h3>
                                <!--end::Title-->

                                <!--begin::Toolbar-->
                                <div class="card-toolbar">
                                    <!--begin::Menu-->
                                    <button
                                        class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end"
                                        data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"
                                        data-kt-menu-overflow="true">

                                        <i class="ki-duotone ki-dots-square fs-1"><span class="path1"></span><span
                                                class="path2"></span><span class="path3"></span><span
                                                class="path4"></span></i>
                                    </button>

                                    <!--begin::Menu 2-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px"
                                        data-kt-menu="true">
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <div class="menu-content fs-6 text-gray-900 fw-bold px-3 py-4">
                                                Quick Actions</div>
                                        </div>
                                        <!--end::Menu item-->

                                        <!--begin::Menu separator-->
                                        <div class="separator mb-3 opacity-75"></div>
                                        <!--end::Menu separator-->

                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link px-3">
                                                New Ticket
                                            </a>
                                        </div>
                                        <!--end::Menu item-->

                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link px-3">
                                                New Customer
                                            </a>
                                        </div>
                                        <!--end::Menu item-->

                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3" data-kt-menu-trigger="hover"
                                            data-kt-menu-placement="right-start">
                                            <!--begin::Menu item-->
                                            <a href="#" class="menu-link px-3">
                                                <span class="menu-title">New Group</span>
                                                <span class="menu-arrow"></span>
                                            </a>
                                            <!--end::Menu item-->

                                            <!--begin::Menu sub-->
                                            <div class="menu-sub menu-sub-dropdown w-175px py-4">
                                                <!--begin::Menu item-->
                                                <div class="menu-item px-3">
                                                    <a href="#" class="menu-link px-3">
                                                        Admin Group
                                                    </a>
                                                </div>
                                                <!--end::Menu item-->

                                                <!--begin::Menu item-->
                                                <div class="menu-item px-3">
                                                    <a href="#" class="menu-link px-3">
                                                        Staff Group
                                                    </a>
                                                </div>
                                                <!--end::Menu item-->

                                                <!--begin::Menu item-->
                                                <div class="menu-item px-3">
                                                    <a href="#" class="menu-link px-3">
                                                        Member Group
                                                    </a>
                                                </div>
                                                <!--end::Menu item-->
                                            </div>
                                            <!--end::Menu sub-->
                                        </div>
                                        <!--end::Menu item-->

                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link px-3">
                                                New Contact
                                            </a>
                                        </div>
                                        <!--end::Menu item-->

                                        <!--begin::Menu separator-->
                                        <div class="separator mt-3 opacity-75"></div>
                                        <!--end::Menu separator-->

                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <div class="menu-content px-3 py-3">
                                                <a class="btn btn-primary  btn-sm px-4" href="#">
                                                    Generate Reports
                                                </a>
                                            </div>
                                        </div>
                                        <!--end::Menu item-->
                                    </div>
                                    <!--end::Menu 2-->

                                    <!--end::Menu-->
                                </div>
                                <!--end::Toolbar-->
                            </div>
                            <!--end::Header-->

                            <!--begin::Card body-->
                            <div class="card-body pt-0">
                                <!--begin::Chart-->
                                <div id="kt_charts_widget_24" class="min-h-auto" style="height: 400px">
                                </div>
                                <!--end::Chart-->
                            </div>
                            <!--end::Card body-->
                        </div>
                        <!--end::Chart widget 24-->

                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row--> --}}
            </div>
            <!--end::Content container-->

        </div>
        <!--end::Content-->

    </div>
@endsection