<div class="card card-rounded">
    <div class="card-content">
        <div class="card-body">
            <div class="row">
                <div class="col d-flex align-items-center"><h4 class="text-primary">Approval KPI</h4></div>
                <div class="col text-right" id="message_kpi"></div>
            </div>
            <hr class="mb-2">
            <div class="nav-tabs-boxed">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a href="#" id="btn_tabs_apv_pengajuan" onclick="load_tab_sub_content('apv_pengajuan')" class="sub_tab nav-link px-2 text-dark">
                            Pengajuan
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" id="btn_tabs_apv_approved" onclick="load_tab_sub_content('apv_approved')" class="sub_tab nav-link px-2 text-dark">
                            Approved
                        </a>
                    </li>
                </ul>
            </div>
            <div class="row mt-2">
            <div class="modal-body" id="loading_tab_sub_content" style="display: none;"><div class="text-center"><div class="custom-lds-ring"><div></div><div></div><div></div></div></div></div>
                <div id="tab_content_approval" class="col-md-12"></div>
            </div>
        </div>
    </div>
</div>