<!--begin::Chart Widget 41-->
<div class="card card-flush h-md-100">
    <!--begin::Header-->
    <div class="card-header pt-5 mb-6">
        <!--begin::Title-->
        <h3 class="card-title align-items-start flex-column">
            <!--begin::Statistics-->
            <div class="d-flex align-items-center mb-2">
                <!--begin::Currency-->
                <span class="fs-3 fw-semibold text-gray-400 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">3,274.94</span>
                <!--end::Value-->
                <!--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.2%
                </span>
                <!--end::Label-->
            </div>
            <!--end::Statistics-->
            <!--begin::Description-->
            <span class="fs-6 fw-semibold text-gray-400">Avg. Agent Earnings</span>
            <!--end::Description-->
        </h3>
        <!--end::Title-->
        <!--begin::Toolbar-->
        <div class="card-toolbar">
            <!--begin::Menu-->
            <button class="btn btn-icon btn-color-gray-400 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 text-gray-400 me-n1"><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-dark 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::Body-->
    <div class="card-body py-0 px-0">
        <!--begin::Nav-->
        <ul class="nav d-flex justify-content-between mb-3 mx-9">
                            <!--begin::Item-->
                <li class="nav-item mb-3">
                    <!--begin::Link-->
                    <a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px active" data-bs-toggle="tab" id="kt_charts_widget_41_tab_1"
                        href="#kt_charts_widget_41_tab_content_1">
                        1d
                    </a>
                    <!--end::Link-->
                </li>
                <!--end::Item-->
                            <!--begin::Item-->
                <li class="nav-item mb-3">
                    <!--begin::Link-->
                    <a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px " data-bs-toggle="tab" id="kt_charts_widget_41_tab_2"
                        href="#kt_charts_widget_41_tab_content_2">
                        5d
                    </a>
                    <!--end::Link-->
                </li>
                <!--end::Item-->
                            <!--begin::Item-->
                <li class="nav-item mb-3">
                    <!--begin::Link-->
                    <a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px " data-bs-toggle="tab" id="kt_charts_widget_41_tab_3"
                        href="#kt_charts_widget_41_tab_content_3">
                        1m
                    </a>
                    <!--end::Link-->
                </li>
                <!--end::Item-->
                            <!--begin::Item-->
                <li class="nav-item mb-3">
                    <!--begin::Link-->
                    <a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px " data-bs-toggle="tab" id="kt_charts_widget_41_tab_4"
                        href="#kt_charts_widget_41_tab_content_4">
                        6m
                    </a>
                    <!--end::Link-->
                </li>
                <!--end::Item-->
                            <!--begin::Item-->
                <li class="nav-item mb-3">
                    <!--begin::Link-->
                    <a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px " data-bs-toggle="tab" id="kt_charts_widget_41_tab_5"
                        href="#kt_charts_widget_41_tab_content_5">
                        1y
                    </a>
                    <!--end::Link-->
                </li>
                <!--end::Item-->
        </ul>
        <!--end::Nav-->
        <!--begin::Tab Content-->
        <div class="tab-content mt-n6">
                <!--begin::Tap pane-->
                <div class="tab-pane fade active show" id="kt_charts_widget_41_tab_content_1">
                    <!--begin::Chart-->
                    <div id="kt_charts_widget_41_chart_1" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
                    <!--end::Chart-->
                </div>
                <!--end::Tap pane-->
                <!--begin::Tap pane-->
                <div class="tab-pane fade " id="kt_charts_widget_41_tab_content_2">
                    <!--begin::Chart-->
                    <div id="kt_charts_widget_41_chart_2" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
                    <!--end::Chart-->
                </div>
                <!--end::Tap pane-->
                <!--begin::Tap pane-->
                <div class="tab-pane fade " id="kt_charts_widget_41_tab_content_3">
                    <!--begin::Chart-->
                    <div id="kt_charts_widget_41_chart_3" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
                    <!--end::Chart-->
                </div>
                <!--end::Tap pane-->
                <!--begin::Tap pane-->
                <div class="tab-pane fade " id="kt_charts_widget_41_tab_content_4">
                    <!--begin::Chart-->
                    <div id="kt_charts_widget_41_chart_4" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
                    <!--end::Chart-->
                </div>
                <!--end::Tap pane-->
                <!--begin::Tap pane-->
                <div class="tab-pane fade " id="kt_charts_widget_41_tab_content_5">
                    <!--begin::Chart-->
                    <div id="kt_charts_widget_41_chart_5" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
                    <!--end::Chart-->
                </div>
                <!--end::Tap pane-->
        </div>
        <!--end::Tab Content-->
    </div>
    <!--end::Body-->
</div>
<!--end::Chart Widget 41-->