branch-business-unit.component.html

<div class="text-xxl font-bold pt-2rem pb-1rem text-primary">
    รายละเอียดสาขาและหน่วยธุรกิจ
</div>
<div class="page">
    <div class="border-b border-gray-200 dark:border-white/10">
        <nav class="flex space-x-2 rtl:space-x-reverse">
            <a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 active"
                href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1" aria-controls="card-type-1">
                ทะเบียนฝ่าย
            </a>
            <a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
                href="javascript:void(0);" id="card-type-item-2" data-hs-tab="#card-type-2" aria-controls="card-type-2">
                ทะเบียนแผนก
            </a>
            <a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
                href="javascript:void(0);" id="card-type-item-3" data-hs-tab="#card-type-3" aria-controls="card-type-3">
                ทะเบียนส่วน
            </a>
            <a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
                href="javascript:void(0);" id="card-type-item-4" data-hs-tab="#card-type-4" aria-controls="card-type-4">
                ส่วนย่อย1
            </a>
            <a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
                href="javascript:void(0);" id="card-type-item-5" data-hs-tab="#card-type-5" aria-controls="card-type-5">
                ส่วนย่อย2
            </a>
            <a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
                href="javascript:void(0);" id="card-type-item-6" data-hs-tab="#card-type-6" aria-controls="card-type-6">
                ส่วนย่อย3
            </a>
            <a class="w-28 justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-sm font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
                href="javascript:void(0);" id="card-type-item-7" data-hs-tab="#card-type-7" aria-controls="card-type-7">
                ส่วนย่อย4
            </a>
        </nav>
    </div>

    <div class="">
        <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
            <app-department-register></app-department-register>
        </div>
        <div id="card-type-2" class="hidden" role="tabpanel" aria-labelledby="card-type-item-2">
            <app-department-list></app-department-list>
        </div>
        <div id="card-type-3" class="hidden" role="tabpanel" aria-labelledby="card-type-item-3">
            <app-section-registration></app-section-registration>
        </div>
        <div id="card-type-4" class="hidden" role="tabpanel" aria-labelledby="card-type-item-4">
            <app-sub-department-one></app-sub-department-one>
        </div>
        <div id="card-type-5" class="hidden" role="tabpanel" aria-labelledby="card-type-item-5">
            <app-sub-department-two></app-sub-department-two>
        </div>
        <div id="card-type-6" class="hidden" role="tabpanel" aria-labelledby="card-type-item-6">
            <app-sub-department-three></app-sub-department-three>
        </div>
        <div id="card-type-7" class="hidden" role="tabpanel" aria-labelledby="card-type-item-7">
            <app-sub-department-four></app-sub-department-four>
        </div>
    </div>
</div>