name-registration.component.html

<!-- <app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
    <div>
        <p class="text-xxl font-bold py-2 px-4 text-primary ltr:ml-5" style="margin-bottom: 15px;">ข้อมูลลักษณะงาน</p>
    </div>
    <div class="body-content">
        <ul class="nav-tabs">
            <li class="nav-item" *ngFor="let item of [{id:'tab1',text:'กลุ่มพนักงาน'},
            {id:'tab2',text:'ตำเเหน่ง'},
            {id:'tab3',text:'ลักษณะงาน'},
            {id:'tab4',text:'ประเภทพนักงาน'},
            {id:'tab5',text:'ระดับพนักงาน (PL)'}]" (click)="changeTab(item)">
                <a [class.active]="activeTab === item.id" class="nav-link">{{item.text}}</a>
            </li>
        </ul>
        <div class="tab-content">
            <div *ngIf="activeTab === 'tab1'" class="tab-pane">
                <div class="mt-5">
                    <app-employee-group-unit [pathTitle]="pathTitle"
                        (sendPathTitle)="pathTitle=$event"></app-employee-group-unit>
                </div>
            </div>
            <div *ngIf="activeTab === 'tab2'" class="tab-pane">
                <div class="mt-5">
                    <app-position-unit [pathTitle]="pathTitle" (sendPathTitle)="pathTitle=$event"></app-position-unit>
                </div>
            </div>
            <div *ngIf="activeTab === 'tab3'" class="tab-pane">
                <div class="mt-5">
                </div>
            </div>
            <div *ngIf="activeTab === 'tab4'" class="tab-pane">
                <div class="mt-5">
                    <app-employee-categories [pathTitle]="pathTitle"
                        (sendPathTitle)="pathTitle=$event"></app-employee-categories>
                </div>
            </div>
            <div *ngIf="activeTab === 'tab5'" class="tab-pane">
                <div class="mt-5">
                    <app-employee-level [pathTitle]="pathTitle" (sendPathTitle)="pathTitle=$event"></app-employee-level>
                </div>
            </div>
        </div>
    </div>
</div> -->

<!-- <app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
    <div>
        <p class="text-xxl font-bold py-2 px-4 text-primary ltr:ml-5" style="margin-bottom: 15px;">ข้อมูลลักษณะงาน</p>
    </div>
    <div class="body-content">
        <ul class="nav-tabs">
            <li class="nav-item" *ngFor="let item of [{id:'tab1',text:'กลุ่มพนักงาน'},
            {id:'tab2',text:'ตำเเหน่ง'},
            {id:'tab3',text:'ลักษณะงาน'},
            {id:'tab4',text:'ประเภทพนักงาน'},
            {id:'tab5',text:'ระดับพนักงาน (PL)'}]" (click)="changeTab(item)">
                <a [class.active]="activeTab === item.id" class="nav-link">{{item.text}}</a>
            </li>
        </ul>
        <div class="tab-content">
            <div *ngIf="activeTab === 'tab1'" class="tab-pane">
                <div class="mt-5">
                    <app-employee-group-unit [pathTitle]="pathTitle"
                        (sendPathTitle)="pathTitle=$event"></app-employee-group-unit>
                </div>
            </div>
            <div *ngIf="activeTab === 'tab2'" class="tab-pane">
                <div class="mt-5">
                    <app-position-unit [pathTitle]="pathTitle" (sendPathTitle)="pathTitle=$event"></app-position-unit>
                </div>
            </div>
            <div *ngIf="activeTab === 'tab3'" class="tab-pane">
                <div class="mt-5">
                </div>
            </div>
            <div *ngIf="activeTab === 'tab4'" class="tab-pane">
                <div class="mt-5">
                    <app-employee-categories [pathTitle]="pathTitle"
                        (sendPathTitle)="pathTitle=$event"></app-employee-categories>
                </div>
            </div>
            <div *ngIf="activeTab === 'tab5'" class="tab-pane">
                <div class="mt-5">
                    <app-employee-level [pathTitle]="pathTitle" (sendPathTitle)="pathTitle=$event"></app-employee-level>
                </div>
            </div>
        </div>
    </div>
</div> -->

<app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
    <div class="text-xxl font-bold py-2 px-4 text-primary">
        ทะเบียนกำหนดชื่อ
    </div>
    <div class="page">
        <div class="border-b border-gray-200 dark:border-white/10">
            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
                <a class="ml-8 text-xxl font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary active"
                    href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
                    aria-controls="underline-1" (click)="pathTitle = ['การประเมินสมรรถนะ','ทะเบียนกำหนดชื่อ','ประเภทสมรรถนะ']">
                    ประเภทสมรรถนะ
                </a>
                <a class="text-xxl font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                    href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
                    aria-controls="underline-2" (click)="pathTitle = ['การประเมินสมรรถนะ','ทะเบียนกำหนดชื่อ','หัวข้อสมรรถนะ']">
                    หัวข้อสมรรถนะ
                </a>
            </nav>
        </div>
        <div class="mt-3 px-3rem">
            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
                
            </div>
            <div id="underline-2" class="hidden" role="tabpanel" aria-labelledby="underline-item-2">
                
            </div>
        </div>
    </div>
</div>