Merge branch 'DEV' of https://mygit.myhr.co.th/angular/myAppraisal into DEV

# Conflicts:
#	src/app/components/dashboard/dashboard.module.ts

src/app/components/company-components/company-registration/branch-business-unit/branch-business-unit.component.html

@@ -34,7 +34,7 @@
     </nav>
     <div class="pt-50px">
         <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
-            <app-department-register></app-department-register>
+            <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>

src/app/components/company-components/company-registration/branch-business-unit/branch-business-unit.component.ts

@@ -6,13 +6,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   styleUrls: ['./branch-business-unit.component.scss']
 })
 export class BranchBusinessUnitComponent {
-  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ']
+  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ' ,'ทะเบียนฝ่าย']
   @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
-  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
-
-  // ฟังก์ชันในการเปลี่ยนแท็บ
-  changeTab(tab: { id: string, text: string }) {
-    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', tab.text])
-    this.activeTab = tab.id;
-  }
 }
+

src/app/components/competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component.ts

@@ -68,15 +68,7 @@ export class EditGruopCompetenciesComponent {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    console.log('เพิ่มผู้ใช้งาน');
-  }
-
-  deleteUser() {
-    console.log('ลบผู้ใช้งาน');
-  }
 
-  editUser() {
-    console.log('แก้ไขผู้ใช้งาน');
   }
   
   currentModal = "";

src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.ts

@@ -33,7 +33,6 @@ export class EditGroupIndicators implements OnInit {
   // ฟังก์ชันในการบันทึกข้อมูลที่แก้ไข
   saveData(event: any, id: any): void {
     const updatedText = event.target.innerText;  // ข้อความที่พิมพ์เข้าไป
-    console.log('บันทึกข้อมูล:', id, updatedText);
 
     // เก็บข้อมูลใน localStorage
     localStorage.setItem(`item-${id}`, updatedText);
@@ -93,16 +92,9 @@ export class EditGroupIndicators implements OnInit {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    console.log('เพิ่มผู้ใช้งาน');
-  }
     
-  deleteUser() {
-    console.log('ลบผู้ใช้งาน');
   }
 
-  editUser() {
-    console.log('แก้ไขผู้ใช้งาน');
-  }
 
   currentModal = "";
 

src/app/components/competency-assessment/course-registration/development-course/development-course.component.ts

@@ -65,15 +65,7 @@ export class DevelopmentCourseComponent {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    console.log('เพิ่มผู้ใช้งาน');
-  }
-
-  deleteUser() {
-    console.log('ลบผู้ใช้งาน');
-  }
    
-  editUser() {
-    console.log('แก้ไขผู้ใช้งาน');
   }
   
   currentModal = "";

src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.html

@@ -573,7 +573,7 @@
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
-                        data-hs-overlay="#set-idp-development-plan-alert-add-modal" (click)="addUser();showSuccess()">
+                        data-hs-overlay="#set-idp-development-plan-alert-add-modal" (click)="showSuccess()">
                         บันทึกข้อมูล
                     </a>
                 </div>
@@ -609,7 +609,7 @@
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
-                        data-hs-overlay="#set-idp-development-plan-alert-edit-modal" (click)="addUser();showSuccessEdit()">
+                        data-hs-overlay="#set-idp-development-plan-alert-edit-modal" (click)="showSuccessEdit()">
                         บันทึกข้อมูล
                     </a>
                 </div>
@@ -645,7 +645,7 @@
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
                         data-hs-overlay="#set-idp-development-plan-alert-delete-modal"
-                        (click)="addUser();showSuccessDelete()">
+                        (click)="showSuccessDelete()">
                         ลบข้อมูล
                     </a>
                 </div>

src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.ts

@@ -63,19 +63,6 @@ export class SetIdpDevelopmentPlanComponent {
     this.isChecked = !this.isChecked; // สลับสถานะ
   }
   
-  // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
-  addUser() {
-    console.log('เพิ่มผู้ใช้งาน');
-  }
-
-  deleteUser() {
-    console.log('ลบผู้ใช้งาน');
-  }
-
-  editUser() {
-    console.log('แก้ไขผู้ใช้งาน');
-  }
-  
   currentModal = "";
   
   constructor(private toastr: ToastrService) { }

src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts

@@ -65,16 +65,9 @@ export class CompetencyTopic {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    console.log('เพิ่มผู้ใช้งาน');
-  }
     
-  deleteUser() {
-    console.log('ลบผู้ใช้งาน');
   }
 
-  editUser() {
-    console.log('แก้ไขผู้ใช้งาน');
-  }
   
   currentModal = "";
   

src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts

@@ -63,18 +63,7 @@ export class TypeRegistration {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    // ฟังก์ชันสำหรับการเพิ่มผู้ใช้งาน
-    console.log('เพิ่มผู้ใช้งาน');
-  }
-
-  deleteUser() {
-    // ฟังก์ชันสำหรับการลบผู้ใช้งาน
-    console.log('ลบผู้ใช้งาน');
-  }
 
-  editUser() {
-    // ฟังก์ชันสำหรับการแก้ไขผู้ใช้งาน
-    console.log('แก้ไขผู้ใช้งาน');
   }
   currentModal = ""
   constructor(private toastr: ToastrService) { }

src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.ts

@@ -63,19 +63,9 @@ export class CompetencyConfigurationComponent {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    // ฟังก์ชันสำหรับการเพิ่มผู้ใช้งาน
-    console.log('เพิ่มผู้ใช้งาน');
-  }
     
-  deleteUser() {
-    // ฟังก์ชันสำหรับการลบผู้ใช้งาน
-    console.log('ลบผู้ใช้งาน');
   }
 
-  editUser() {
-    // ฟังก์ชันสำหรับการแก้ไขผู้ใช้งาน
-    console.log('แก้ไขผู้ใช้งาน');
-  }
   currentModal = ""
   constructor(private toastr: ToastrService) { }
   showSuccess() {

src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.ts

@@ -63,19 +63,9 @@ export class AssessmentToolComponent {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    // ฟังก์ชันสำหรับการเพิ่มผู้ใช้งาน
-    console.log('เพิ่มผู้ใช้งาน');
-  }
     
-  deleteUser() {
-    // ฟังก์ชันสำหรับการลบผู้ใช้งาน
-    console.log('ลบผู้ใช้งาน');
   }
 
-  editUser() {
-    // ฟังก์ชันสำหรับการแก้ไขผู้ใช้งาน
-    console.log('แก้ไขผู้ใช้งาน');
-  }
   currentModal = ""
   constructor(private toastr: ToastrService) { }
   showSuccess() {

src/app/components/dashboard/dashboard-routing.module.ts

@@ -26,6 +26,13 @@ import { EvaluationCycleComponent } from '../competency-assessment/evaluation-cy
 import { SettingCompetencyComponent } from '../competency-assessment/setting-competency/setting-competency.component';
 import { SetIdpDevelopmentPlanComponent } from '../competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component';
 import { IdpDevelopmentPlanComponent } from '../competency-assessment/idp-development-plan/idp-development-plan.component';
+import { JobCompetencyComponent } from '../job-detail-components/job-competency/job-competency.component';
+import { JobQualificationsComponent } from '../job-detail-components/job-qualifications/job-qualifications.component';
+import { JobDetailComponent } from '../job-detail-components/job-detail/job-detail.component';
+import { CommandStructureComponent } from '../job-detail-components/command-structure/command-structure.component';
+import { AssessmentManagementComponent } from '../performance-management-evaluation/assessment-management/assessment-management.component';
+import { JobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/job-position-indicators.component';
+
 
 
 const routes: Routes = [
@@ -58,6 +65,12 @@ const routes: Routes = [
       { path: "evaluation-cycle-manager",title: 'การจัดการรอบการประเมิน', component: EvaluationCycleManagerComponent  },
       { path: "setting-competency",title: 'การตั้งค่า', component: SettingCompetencyComponent },
       { path: "idp-development-plan",title: 'เเผนพัฒนา IDP', component: IdpDevelopmentPlanComponent },
+      { path: "job-competency",title: 'ความรู้ ทักษะ ความสามารถในตำเเหน่งงาน', component: JobCompetencyComponent },
+      { path: "job-qualifications",title: 'คุณสมบัติที่จำเป็นต่อการปฏิบัติหน้าที่', component: JobQualificationsComponent },
+      { path: "job-detail",title: 'รายละเอียดของงาน', component: JobDetailComponent },
+      { path: "command-structure",title: 'โครงสร้างสายการบังคับบัญชา', component: CommandStructureComponent },
+      { path: "assessment-management",title: 'การจัดการการประเมิณ', component: AssessmentManagementComponent },
+      { path: "job-position-indicators",title: 'ตัวชี้วัดของตำแหน่งงาน', component: JobPositionIndicatorsComponent },
     ]
   }
 ];

src/app/components/dashboard/dashboard.module.ts

@@ -72,6 +72,18 @@ import { CompetencyConfigurationComponent } from '../competency-assessment/setti
 import { IdpDevelopmentPlanComponent } from '../competency-assessment/idp-development-plan/idp-development-plan.component';
 import { SetIdpDevelopmentPlanComponent } from '../competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component';
 import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
+import { JobCompetencyComponent } from '../job-detail-components/job-competency/job-competency.component';
+import { SubJobCompetencyComponent } from '../job-detail-components/job-competency/sub-job-competency/sub-job-competency.component';
+import { JobQualificationsComponent } from '../job-detail-components/job-qualifications/job-qualifications.component';
+import { SubJobQualificationsComponent } from '../job-detail-components/job-qualifications/sub-job-qualifications/sub-job-qualifications.component';
+import { JobDetailComponent } from '../job-detail-components/job-detail/job-detail.component';
+import { WorkDetailComponent } from '../job-detail-components/job-detail/work-detail/work-detail.component';
+import { SubCommandStructureComponent } from '../job-detail-components/command-structure/sub-command-structure/sub-command-structure.component';
+import { CommandStructureComponent } from '../job-detail-components/command-structure/command-structure.component';
+import { AssessmentManagementComponent } from '../performance-management-evaluation/assessment-management/assessment-management.component';
+import { AssigningApproversComponent } from '../performance-management-evaluation/assessment-management/assigning-approvers/assigning-approvers.component';
+import { SubJobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component';
+import { JobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/job-position-indicators.component';
 
 @NgModule({
   declarations: [
@@ -126,6 +138,18 @@ import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
     CompetencyConfigurationComponent,
     IdpDevelopmentPlanComponent,
     SetIdpDevelopmentPlanComponent,
+    JobCompetencyComponent,
+    SubJobCompetencyComponent,
+    JobQualificationsComponent,
+    SubJobQualificationsComponent,
+    JobDetailComponent,
+    WorkDetailComponent,
+    CommandStructureComponent,
+    SubCommandStructureComponent,
+    AssessmentManagementComponent,
+    AssigningApproversComponent,
+    JobPositionIndicatorsComponent,
+    SubJobPositionIndicatorsComponent,
   ],
   imports: [
     CommonModule,

src/app/components/job-detail-components/command-structure/command-structure.component.html

+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
+        โครงสร้างสายการบังคับบัญชา
+    </div>
+    <div class="page pt-0.75rem">
+        <div class="border-b border-gray-200 dark:border-white/10 px-2rem">
+            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
+                <a class="font-size-16px font-weight-500  hs-tab-active:font-weight-700 hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  hover:text-secondary active"
+                    href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
+                    aria-controls="underline-1"
+                    (click)="pathTitle = ['การจัดการรายละเอียดงาน','โครงสร้างสายการบังคับบัญชา']">
+                    โครงสร้างสายการบังคับบัญชา
+                </a>
+            </nav>
+        </div>
+        <div class="mt-3 px-2rem">
+            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
+                <app-sub-command-structure></app-sub-command-structure>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/job-detail-components/command-structure/command-structure.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-command-structure',
+  templateUrl: './command-structure.component.html',
+  styleUrls: ['./command-structure.component.scss']
+})
+export class CommandStructureComponent {
+  pathTitle = ['การจัดการรายละเอียดงาน', 'โครงสร้างสายการบังคับบัญชา']
+}

src/app/components/job-detail-components/command-structure/sub-command-structure/sub-command-structure.component.html

+<div class="text-lg font-sm pt-2rem pb-1rem text-primary">
+    <!-- รายละเอียดสาขาและหน่วยธุรกิจ -->
+</div>
+<div class="page">
+
+    <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
+        <div class="w-full min-height-50px mb-10px justify-between items-center">
+            <div class="flex justify-between">
+                <div class="flex pr-2">
+                    <!-- Content ของ div แรก -->
+                    <div class="px-1">
+                        <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
+                            <i class="ri-add-line"></i>
+                            นำเข้าข้อมูล
+                        </button>
+
+                        <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
+                            href="javascript:void(0);">
+                            ดาวโหลดตัวอย่างไฟล์
+                        </a>
+                    </div>
+                </div>
+                <div class="flex justify-end">
+                    <div class="px-1">
+                        <div class="relative shadow-md">
+                            <input type="text" id="hs-leading-icon" name="hs-leading-icon"
+                                class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
+                                placeholder="Search by No. or Name" [(ngModel)]="search"
+                                (ngModelChange)="searchChange()">
+
+                            <div
+                                class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
+                                <i class="ri-search-line text-gray"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="px-1">
+                        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
+                            data-hs-overlay="#sub-command-structure-alert-delete-modal">
+                            <i class="ri-delete-bin-6-line"></i>
+                            Delete
+                        </button>
+                    </div>
+                    <div class="px-1">
+                        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                            <i class="ti ti-book fs-l"></i>
+                            Help
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="page px-rem">
+            <div class="overflow-auto table-bordered rounded-t-md">
+                <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
+                    <div class="overflow-auto shadow-md">
+                        <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
+                            <thead>
+                                <tr>
+                                    <ng-container
+                                        *ngFor="let item of ['ลำดับ','รหัสงาน','ชื่อลักษณะงาน (ไทย)','ชื่อลักษณะงาน (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
+                                            [class.!text-center]="f||l">
+                                            <span class="!text-sm">{{ item }}</span>
+                                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
+                                                <i class="ti ti-dots-vertical fs-l"></i>
+                                            </div>
+                                        </th>
+                                    </ng-container>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr *ngFor="let item of[
+                                ['01','001', 'Department Manager 1','Department Manager 1'],
+                                ['02','002', 'Department Manager 2','Department Manager 2'],
+                                ['03','003', 'Department 1-HRD','Department 1-HRD'],
+                                ['04','004', 'Department Manager 3','Department Manager 3'],
+                                ['05','005', 'Department Manager 4','Department Manager 4']];let i = index">
+                                    <td class="flex justify-center">
+                                        {{item[0]}}
+                                    </td>
+                                    <td>{{item[1]}}</td>
+                                    <td>{{item[2]}}</td>
+                                    <td>{{item[3]}}</td>
+                                    <td class="flex justify-center">
+                                        <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
+                                            data-hs-overlay="#sub-command-structure-modal-edit"></i>
+                                        <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
+                                            data-hs-overlay="#sub-command-structure-alert-delete-modal"></i>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
+                <ul class="ti-pagination">
+                    <li>
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"
+                            (click)="currentPage = (currentPage-1 || 1)">
+                            <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
+                        </a>
+                    </li>
+                    <li *ngFor="let item of page;let f = first;let l = last">
+                        <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
+                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
+                                    class="ri-more-line"></i>
+                            </a>
+                        </ng-container>
+                        <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
+                            <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
+                                (click)="currentPage=item">{{item}}
+                            </a>
+                        </ng-container>
+                        <ng-container
+                            *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
+                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
+                                    class="ri-more-line"></i>
+                            </a>
+                        </ng-container>
+                    </li>
+                    <li>
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"
+                            (click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
+                            <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+
+
+        <div id="sub-command-structure-modal-add" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+                <div class="max-h-full overflow-hidden ti-modal-content">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            เพิ่มข้อมูลรายละเอียดของงาน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#sub-command-structure-modal-add">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-center">
+                        <div class="flex justify-end" style="padding-right: 1rem;">
+                            <div class="px-1">
+                                <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
+                                    <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
+                                        xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA"
+                                        stroke-width="3.84" transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
+                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
+                                        </g>
+                                        <g id="SVGRepo_iconCarrier">
+                                            <path d="M15 49A24 24 0 0 1 32 8"></path>
+                                            <path d="M49 15a24 24 0 0 1-17 41"></path>
+                                            <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
+                                            <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
+                                        </g>
+                                    </svg>
+                                    Clear
+                                </button>
+                            </div>
+                            <div class="px-1">
+                                <button href="javascript:void(0);"
+                                    class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                                    <i class="ti ti-book fs-l"></i>
+                                    Help
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body mt-1">
+                        <label for="input-label" class="ti-form-label">รหัสงาน*</label>
+                        <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="001">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (ไทย)*</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (อังกฤษ)</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
+                        <label class="ti-form-label mt-2rem">ชื่อตำแหน่งผู้บังคับบัญชาโดยตรง</label>
+                        <div class="relative flex rounded-md">
+                            <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
+                                name="hs-leading-button-add-on-with-icon-and-button"
+                                class="ti-form-input w-full rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
+                                style="padding-right: 3.5rem;">
+                            <div
+                                class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
+                                <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
+                                    data-hs-overlay="#sub-department-four-bu6-table-modal">
+                                    <i class="ri-search-line cursor-pointer text-gray"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <label class="ti-form-label mt-2rem">ชื่อตำแหน่งผู้ปฏิบัติงาน</label>
+                        <div class="relative flex rounded-md">
+                            <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
+                                name="hs-leading-button-add-on-with-icon-and-button"
+                                class="ti-form-input w-full rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
+                                style="padding-right: 3.5rem;">
+                            <div
+                                class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
+                                <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
+                                    data-hs-overlay="#sub-department-four-bu6-table-modal">
+                                    <i class="ri-search-line cursor-pointer text-gray"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <label for="detail_eng" class="ti-form-label mt-2rem">
+                            ชื่อตำแหน่งและจำนวนผู้ใต้ยังคับบัญชาโดยตรง
+                        </label>
+                        <div class="icon-container">
+                            <i class="ri-group-fill cursor-pointer"></i>
+                            <i class="ri-mail-fill cursor-pointer"></i>
+                        </div>
+                        <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="3" cols="50">
+1.
+2.
+3.
+                        </textarea>
+                        <div class="flex justify-end mt-3rem mb-1rem space-x-4">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#sub-command-structure-alert-add-modal">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#sub-command-structure-alert-add-modal">
+                                บันทึกข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="sub-command-structure-modal-edit" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+                <div class="max-h-full overflow-hidden ti-modal-content">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            แก้ไขข้อมูลรายละเอียดของงาน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#sub-command-structure-modal-edit">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-center">
+                        <div class="flex justify-end" style="padding-right: 1rem;">
+                            <div class="px-1">
+                                <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
+                                    <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
+                                        xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA"
+                                        stroke-width="3.84" transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
+                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
+                                        </g>
+                                        <g id="SVGRepo_iconCarrier">
+                                            <path d="M15 49A24 24 0 0 1 32 8"></path>
+                                            <path d="M49 15a24 24 0 0 1-17 41"></path>
+                                            <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
+                                            <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
+                                        </g>
+                                    </svg>
+                                    Clear
+                                </button>
+                            </div>
+                            <div class="px-1">
+                                <button href="javascript:void(0);"
+                                    class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                                    <i class="ti ti-book fs-l"></i>
+                                    Help
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body mt-1">
+                        <label for="input-label" class="ti-form-label">รหัสงาน*</label>
+                        <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="001">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (ไทย)*</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (อังกฤษ)</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
+                        <label class="ti-form-label mt-2rem">ชื่อตำแหน่งผู้บังคับบัญชาโดยตรง</label>
+                        <div class="relative flex rounded-md">
+                            <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
+                                name="hs-leading-button-add-on-with-icon-and-button"
+                                class="ti-form-input w-full rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
+                                style="padding-right: 3.5rem;">
+                            <div
+                                class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
+                                <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
+                                    data-hs-overlay="#sub-department-four-bu6-table-modal">
+                                    <i class="ri-search-line cursor-pointer text-gray"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <label class="ti-form-label mt-2rem">ชื่อตำแหน่งผู้ปฏิบัติงาน</label>
+                        <div class="relative flex rounded-md">
+                            <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
+                                name="hs-leading-button-add-on-with-icon-and-button"
+                                class="ti-form-input w-full rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
+                                style="padding-right: 3.5rem;">
+                            <div
+                                class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
+                                <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
+                                    data-hs-overlay="#sub-department-four-bu6-table-modal">
+                                    <i class="ri-search-line cursor-pointer text-gray"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <label for="detail_eng" class="ti-form-label mt-2rem">
+                            ชื่อตำแหน่งและจำนวนผู้ใต้ยังคับบัญชาโดยตรง
+                        </label>
+                        <div class="icon-container">
+                            <i class="ri-group-fill cursor-pointer"></i>
+                            <i class="ri-mail-fill cursor-pointer"></i>
+                        </div>
+                        <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="3" cols="50">
+1.
+2.
+3.
+                        </textarea>
+                        <div class="flex justify-end mt-3rem mb-1rem space-x-4">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#sub-command-structure-modal-edit">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#sub-command-structure-alert-add-modal">
+                                บันทึกข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="sub-command-structure-alert-add-modal" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
+                <div class="max-h-full overflow-hidden ti-modal-content w-full">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            แจ้งเตือน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#sub-command-structure-alert-add-modal">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body ">
+                        <p class="mt-1 text-gray-800 dark:text-white/70">
+                            ยืนยันการบันทึกข้อมูลหรือไม่
+                        </p>
+
+                        <div class="flex justify-end mt-2rem mb-1rem">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#sub-command-structure-modal-edit">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#sub-command-structure-alert-add-modal" (click)="addBu1();showSuccessAdd()">
+                                บันทึกข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="sub-command-structure-alert-delete-modal" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
+                <div class="max-h-full overflow-hidden ti-modal-content w-full">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            แจ้งเตือน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#sub-command-structure-alert-delete-modal">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body ">
+                        <p class="mt-1 text-gray-800 dark:text-white/70">
+                            ยืนยันการลบข้อมูลหรือไม่!
+                        </p>
+
+                        <div class="flex justify-end mt-2rem mb-1rem">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#sub-command-structure-alert-delete-modal">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#sub-command-structure-alert-delete-modal"
+                                (click)="addBu1();showSuccessDelete()">
+                                ลบข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
\ No newline at end of file

src/app/components/job-detail-components/command-structure/sub-command-structure/sub-command-structure.component.scss

+.button-clear {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 41vw;
+}
+.button-help {
+  position: absolute;
+  top: 0px;
+  z-index: 1;
+  right: 0vw;
+  margin: 4.2rem;
+  margin-right: 10px; /* เพิ่มใหม่ 12/16*/
+}
+
+table.ti-custom-table th {
+  height: 60px;
+}
+
+table.ti-custom-table thead {
+  height: 50px;
+}
+table.ti-custom-table thead th span {
+  font-size: 12px;
+  font-weight: bold;
+}
+a.custom-link {
+  padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
+}
+/* สไตล์ของแถบเมนู */
+.nav-tabs {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  margin-bottom: 10px;
+  height: 20%;
+}
+
+.nav-item {
+  list-style: none;
+  margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+}
+
+.nav-link {
+  text-decoration: none;
+  padding: 10px 20px;
+  display: inline-block;
+  font-size: large;
+  border-width: 2px 2px 0px 2px;
+  border-style: solid;
+  border-color: #ccc;
+  border-radius: 5px 5px 0px 0px;
+}
+
+.nav-link:hover {
+  background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+}
+
+.nav-link.active {
+  color: #ffffff; /* สีตัวอักษรในสถานะ active */
+  font-size: large;
+  border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
+  background-color: rgb(var(--color-primary));
+  border-width: 2px 2px 0px 2px;
+  border-style: solid;
+  border-color: rgb(var(--color-primary));
+  border-radius: 5px 5px 0px 0px;
+}
+
+.tab-content {
+  margin-top: 20px;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+.nav-item-text {
+  list-style: none;
+  margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+}
+.nav-link-text {
+  text-decoration: none;
+  display: inline-block;
+  font-size: large;
+  color: #569bf5;
+  border-bottom: 2px solid #569bf5;
+  line-height: 0.8;
+}
+.ti-pagination .page-link.active {
+  background-color: #569bf5;
+  color: white;
+  border-radius: 50%;
+  padding: 8px 12px;
+}
+.box-body{
+  padding: 0rem;
+}
+.page{
+  min-height: 0vh;
+}
+
+.ti-modal {
+  overflow: hidden;
+}
+.header-title-type {
+  width: 100%;
+  min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
+  // margin-top: 50px;
+  // margin-bottom: 16px;
+  justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
+  align-items: center; /* จัดกลางแนวตั้ง */
+  padding-top: 50px;
+  padding-bottom: 1rem;
+}
+// .icon-container {
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   width: 20px; /* ปรับขนาดตามต้องการ */
+//   height: 20px; /* ปรับขนาดตามต้องการ */
+//   border: 2px solid #2196F3; /* กรอบสีน้ำเงิน */
+//   border-radius: 5px; /* มุมโค้งมนเล็กน้อย */
+//   background-color: #E3F2FD; /* พื้นหลังสีฟ้าอ่อน */
+//   margin-bottom: 10px; /* เว้นระยะห่างจาก textarea */
+// }
+
+// .icon-container i {
+//   font-size: 10px; /* ขนาดไอคอน */
+//   color: #2196F3; /* สีไอคอน */
+// }
+
+.icon-container {
+  display: flex;
+  gap: 1px; /* ระยะห่างระหว่างไอคอน */
+}
+
+.icon-container i {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px; /* ขนาดกรอบ */
+  height: 20px;
+  border: 2px solid #2196F3; /* สีกรอบ */
+  border-radius: 4px; /* มุมโค้งมน */
+  background-color: #E3F2FD; /* พื้นหลังสีฟ้าอ่อน */
+  color: #2196F3; /* สีไอคอน */
+  font-size: 10px; /* ขนาดไอคอน */
+}
+

src/app/components/job-detail-components/command-structure/sub-command-structure/sub-command-structure.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { JobModel, MyJobModel } from 'src/app/shared/model/job.model';
+
+
+@Component({
+  selector: 'app-sub-command-structure',
+  templateUrl: './sub-command-structure.component.html',
+  styleUrls: ['./sub-command-structure.component.scss']
+})
+export class SubCommandStructureComponent {
+  currentPage = 1
+    page = Array.from({ length: 1 }, (_, i) => i + 1);
+    jobList: JobModel[] = []
+    job: JobModel = new MyJobModel({})
+    search = ""
+    constructor(
+      private toastr: ToastrService
+    ) { }
+    ngOnInit(): void {
+    }
+    
+    searchChange() {
+      this.currentPage = 1
+      this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
+    }
+    jobListFilter() {
+      return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) ||
+        x.tdesc.toLowerCase().includes(this.search) ||
+        x.edesc.toLowerCase().includes(this.search))
+    }
+    selectJob(job: JobModel) {
+      // this.showSuccess()
+      this.job = new MyJobModel(job)
+    }
+  
+    showSuccessAdd() {
+      this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+  
+    showSuccessEdit() {
+      this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+  
+    showSuccessDelete() {
+      this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+    addBu1() {
+      // this.bu1Service.post(this.bu1).subscribe((response:any) => {
+      //   if (response.success) {
+      //     this.getBu1List()
+      //   }
+      // })
+    }
+    deleteJob(job: JobModel) {
+      // this.bu1Service.delete(new MyBu1Model(bu1)).subscribe((response:any) => {
+      //   if (response.success) {
+      //     this.getBu1List()
+      //   }
+      // })
+    }
+  
+  }
+  
\ No newline at end of file

src/app/components/job-detail-components/job-competency/job-competency.component.html

+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
+        ความรู้ ทักษะ ความสามารถในตำเเหน่งงาน ( Job Compotency)
+    </div>
+    <div class="page pt-0.75rem">
+        <div class="border-b border-gray-200 dark:border-white/10 px-2rem">
+            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
+                <a class="font-size-16px font-weight-500  hs-tab-active:font-weight-700 hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  hover:text-secondary active"
+                    href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
+                    aria-controls="underline-1"
+                    (click)="pathTitle = ['การจัดการรายละเอียดงาน', 'ลักษณะงาน']">
+                    ความรู้ ทักษะ ความสามารถในตำเเหน่งงาน ( Job Compotency)
+                </a>
+            </nav>
+        </div>
+        <div class="mt-3 px-2rem">
+            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
+                <app-sub-job-competency></app-sub-job-competency>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/job-detail-components/job-competency/job-competency.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-job-competency',
+  templateUrl: './job-competency.component.html',
+  styleUrls: ['./job-competency.component.scss']
+})
+export class JobCompetencyComponent {
+  pathTitle = ['การจัดการลายละเอียดงาน', 'ลักษณะงาน']
+}

src/app/components/job-detail-components/job-competency/sub-job-competency/sub-job-competency.component.html

+<div class="header-title-type">
+         <div class="flex justify-end">
+             <div class="px-1">
+                 <div class="relative shadow-md">
+                     <input type="text" id="hs-leading-icon" name="hs-leading-icon"
+                         class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;">
+                     <div
+                         class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
+                         <i class="ri-search-line text-gray"></i>
+                     </div>
+                 </div>
+             </div>
+             <div class="px-1">
+                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
+                 data-hs-overlay="#sub-job-competency-component-alert-delete-modal">
+                     <i class="ri-delete-bin-6-line"></i>
+                     Delete
+                 </button>
+             </div>
+             <div class="px-1">
+                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
+                     <i class="ti ti-book fs-l"></i>
+                     Help
+                 </button>
+             </div>
+         </div>
+ </div>
+ 
+ <div class="page px-rem">
+    <div class="flex justify-between mb-5">
+        <div class="flex pr-2">
+            <!-- Content ของ div แรก -->
+            <div class="flex pr-2">
+                <!-- Content ของ div แรก -->
+                <div class="px-1">
+                    <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
+                        <i class="ri-add-line"></i>
+                        นำเข้าข้อมูล
+                    </button>
+
+                    <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
+                        href="javascript:void(0);">
+                        ดาวโหลดตัวอย่างไฟล์
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+     <div class="overflow-auto table-bordered rounded-t-md">
+         <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1"  >
+             <div class="overflow-auto shadow-md">
+                 <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover" >
+                     <thead>
+                         <tr>
+                             <ng-container
+                             *ngFor="let item of ['ลำดับ','รหัสงาน','ชื่อลักษณะงาน (ไทย)*','ชื่อลักษณะงาน (อังกฤษ)*','การจัดการ']; let f = first; let l = last; let i = index">
+                                 <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
+                                     [class.!text-center]="f||l">
+                                     <span class="text-sm">{{ item }}</span>
+                                     <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
+                                         <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50" 
+                                             height="16" fill="currentColor" viewBox="0 0 16 16">
+                                             <path
+                                                 d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
+                                             </path>
+                                         </svg>
+                                     </div>
+                                 </th>
+                             </ng-container>
+                         </tr>
+                     </thead>
+                     <tbody>
+                         <tr *ngFor="let item of[
+                         ['01', '001','Department Manager 1', 'Department Manager 1'],
+                         ['02', '002','Department Manager 2', 'Department Manager 2'],
+                         ['03', '003','Department 1-HRD', 'Department 1-HRD'],
+                         ['04', '004','Department Manager 3', 'Department Manager 3'],
+                         ['05', '005','Department Manager 4', 'Department Manager 4']];let i = index">
+                             <td class="text-center" style="font-size: 12px; padding-left: 1.5rem;">{{item[0]}}</td>
+                             <td style="font-size: 12px; padding-left: 1.5rem; width: 150px;">{{item[1]}}</td>
+                             <td style="font-size: 12px; padding-left: 1.5rem; width: 400px;">{{item[2]}}</td>
+                             <td style="font-size: 12px; padding-left: 1.5rem; width: 400px;">{{item[3]}}</td>
+                             <td class="flex justify-center">
+                                 <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#sub-job-competency-component-modal-edit"></i>
+                                 <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#sub-job-competency-component-alert-delete-modal"></i>
+                             </td>
+                         </tr>
+                     </tbody>
+                 </table>
+             </div>
+         </div>
+     </div>
+     <div class="body-content" style="margin-top: 20px;">
+         <ul class="nav-tabs">
+             <div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
+                 <div class="box-body">
+                     <nav class="pagination-style-3 overflow-auto">
+                     <ul class="ti-pagination">
+                         <li>
+                             <a aria-label="anchor" class="page-link" href="javascript:void(0);">
+                                 <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
+                             </a>
+                         </li>
+                         <li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
+                         <li><a class="page-link" href="javascript:void(0);">2</a></li>
+                         <li><a class="page-link" href="javascript:void(0);">3</a></li>
+                         <li><a class="page-link" href="javascript:void(0);">4</a></li>
+                         <li><a class="page-link" href="javascript:void(0);">5</a></li>
+                         <li><a class="page-link" href="javascript:void(0);">...</a></li>
+                         <li><a class="page-link" href="javascript:void(0);">31</a></li>
+                         <li>
+                             <a aria-label="anchor" class="page-link" href="javascript:void(0);">
+                                 <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
+                             </a>
+                         </li>
+                     </ul>
+                     </nav>
+                 </div>
+             </div>
+         </ul>
+         <ul class="nav-tabs">
+             <p>Show 1 to 10 of 50 items</p>
+         </ul>
+     </div>
+ </div>
+ 
+ <div id="sub-job-competency-component-modal-edit" class="hs-overlay hidden ti-modal">
+     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+         <div class="max-h-full overflow-hidden ti-modal-content">
+             <div class="ti-modal-header">
+                 <h3 class="text-xxl font-bold text-primary">
+                     เเก้ไขข้อมูลคุณสมบัติที่จำเป็นต่อการปฏิบัติหน้าที่
+                 </h3>
+                 <div class="flex justify-end">
+                     <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                         data-hs-overlay="#sub-job-competency-component-modal-edit">
+                         <span class="sr-only">Close</span>
+                         <i class="ti ti-circle-x fs-xxl"></i>
+                     </button>
+                 </div>
+             </div>
+             <div class="ti-modal-center">
+                 <div class="flex justify-end" style="padding-right: 1rem;">
+                     <div class="px-1">
+                         <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
+                             <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
+                                 xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
+                                 transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
+                                 <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                 <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                                 <g id="SVGRepo_iconCarrier">
+                                     <path d="M15 49A24 24 0 0 1 32 8"></path>
+                                     <path d="M49 15a24 24 0 0 1-17 41"></path>
+                                     <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
+                                     <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
+                                 </g>
+                             </svg>
+                             Clear
+                         </button>
+                     </div>
+                     <div class="px-1">
+                         <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                             <i class="ti ti-book fs-l"></i>
+                             Help
+                         </button>
+                     </div>
+                 </div>
+             </div>
+             <div class="ti-modal-body" style="padding-top: 0px;">
+                 <label for="input-label" class="ti-form-label mt-1rem">รหัสงาน</label>
+                 <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="001">
+                 <label for="detail_th" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (ไทย)*</label>
+                 <input type="text" id="detail_th" class="ti-form-input w-2/3 bg-input-readonly" readonly value="Department Manager1">
+                 <label for="detail_eng" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (อังกฤษ)</label>
+                 <input type="text" id="detail_eng" class="ti-form-input w-2/3 bg-input-readonly" readonly value="Department Manager1">
+                 <label for="detail_eng" class="ti-form-label mt-2rem">ความรู้ ทักษะ ความสามารถในตำเเหน่งงาน ( Job Competency)</label>
+                    <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="5" cols="50">1.
+2.
+3.
+4.
+5.</textarea>
+                 <div class="flex justify-end mt-2rem mb-1rem">
+                     <button type="button"
+                         class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                         data-hs-overlay="#sub-job-competency-component-modal-edit">
+                         ย้อนกลับ
+                     </button>
+                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                         data-hs-overlay="#sub-job-competency-component-alert-edit-modal">
+                         บันทึกข้อมูล
+                     </a>
+                 </div>
+             </div>
+         </div>
+         
+     </div>
+ </div>
+ 
+ <div id="sub-job-competency-component-alert-edit-modal" class="hs-overlay hidden ti-modal">
+     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
+         <div class="max-h-full overflow-hidden ti-modal-content-alert w-full">
+             <div class="ti-modal-header">
+                 <h3 class="text-xxl font-bold text-primary">
+                     แจ้งเตือน
+                 </h3>
+                 <div class="flex justify-end">
+                     <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                         data-hs-overlay="#sub-job-competency-component-alert-edit-modal">
+                         <span class="sr-only">Close</span>
+                         <i class="ti ti-circle-x fs-xxl"></i>
+                     </button>
+                 </div>
+             </div>
+             <div class="ti-modal-body ">
+                 <p class="mt-1 text-gray-800 dark:text-white/70">
+                     ยืนยันการเเก้ไขข้อมูลหรือไม่
+                 </p>
+ 
+                 <div class="flex justify-end mt-2rem mb-1rem">
+                     <button type="button"
+                         class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                         data-hs-overlay="#sub-job-competency-component-modal-edit">
+                         ย้อนกลับ
+                     </button>
+                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                         data-hs-overlay="#sub-job-competency-component-alert-edit-modal" (click)="editBu1();showSuccessEdit()">
+                         บันทึกข้อมูล
+                     </a>
+                 </div>
+             </div>
+         </div>
+     </div>
+ </div>
+ <div id="sub-job-competency-component-alert-delete-modal" class="hs-overlay hidden ti-modal">
+     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
+         <div class="max-h-full overflow-hidden ti-modal-content-alert w-full">
+             <div class="ti-modal-header">
+                 <h3 class="text-xxl font-bold text-primary">
+                     แจ้งเตือน
+                 </h3>
+                 <div class="flex justify-end">
+                     <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                         data-hs-overlay="#sub-job-competency-component-alert-delete-modal">
+                         <span class="sr-only">Close</span>
+                         <i class="ti ti-circle-x fs-xxl"></i>
+                     </button>
+                 </div>
+             </div>
+             <div class="ti-modal-body ">
+                 <p class="mt-1 text-gray-800 dark:text-white/70">
+                     ยืนยันการลบข้อมูลหรือไม่!
+                 </p>
+ 
+                 <div class="flex justify-end mt-2rem mb-1rem">
+                     <button type="button"
+                         class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                         data-hs-overlay="#sub-job-competency-component-alert-delete-modal">
+                         ย้อนกลับ
+                     </button>
+                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                         data-hs-overlay="#sub-job-competency-component-alert-delete-modal" (click)="editBu1();showSuccessDelete()">
+                         ลบข้อมูล
+                     </a>
+                 </div>
+             </div>
+         </div>
+     </div>
+ </div>
\ No newline at end of file

src/app/components/job-detail-components/job-competency/sub-job-competency/sub-job-competency.component.scss

+.button-clear {
+    position: absolute;
+    top: 96px;
+    z-index: 1;
+    right: 41vw;
+  }
+  .button-help {
+    position: absolute;
+    top: 0px;
+    z-index: 1;
+    right: 0vw;
+    margin: 4.2rem;
+    margin-right: 10px; /* เพิ่มใหม่ 12/16*/
+  }
+  
+  table.ti-custom-table thead {
+    height: 60px;
+  }
+  table.ti-custom-table thead th span {
+    font-size: 12px;
+    font-weight: bold;
+  }
+  .ti-custom-table td{
+    padding-left: 0.9rem;
+    padding-right: 1rem;
+  }
+  
+  .ti-custom-table thead th:first-child {
+    width: 125px; /* ปรับความกว้างตามที่ต้องการ */
+    text-align: left; /* จัดตำแหน่งข้อความถ้าต้องการ */
+  }
+  .ti-custom-table thead th:last-child {
+    width: 150px; /* ปรับความกว้างตามที่ต้องการ */
+  }
+  a.custom-link {
+    padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
+  }
+  /* สไตล์ของแถบเมนู */
+  .nav-tabs {
+    display: flex;
+    width: 100%;
+    cursor: pointer;
+    margin-bottom: 10px;
+    height: 20%;
+  }
+  
+  .nav-item {
+    list-style: none;
+    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+  }
+  
+  .nav-link {
+    text-decoration: none;
+    padding: 10px 20px;
+    display: inline-block;
+    font-size: large;
+    border-width: 2px 2px 0px 2px;
+    border-style: solid;
+    border-color: #ccc;
+    border-radius: 5px 5px 0px 0px;
+  }
+  
+  .nav-link:hover {
+    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+  }
+  
+  .nav-link.active {
+    color: #ffffff; /* สีตัวอักษรในสถานะ active */
+    font-size: large;
+    border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
+    background-color: rgb(var(--color-primary));
+    border-width: 2px 2px 0px 2px;
+    border-style: solid;
+    border-color: rgb(var(--color-primary));
+    border-radius: 5px 5px 0px 0px;
+  }
+  
+  .tab-content {
+    margin-top: 20px;
+  }
+  
+  .tab-pane.active {
+    display: block;
+  }
+  
+  .nav-item-text {
+    list-style: none;
+    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+  }
+  .nav-link-text {
+    text-decoration: none;
+    display: inline-block;
+    font-size: large;
+    color: #569bf5;
+    border-bottom: 2px solid #569bf5;
+    line-height: 0.8;
+  }
+  .ti-pagination .page-link.active {
+    background-color: #569bf5;
+    color: white;
+    border-radius: 50%;
+    padding: 8px 12px;
+  }
+  .box-body{
+    padding: 0rem;
+  }
+  .page{
+    min-height: 0vh;
+  }
+
+  
+  .ti-modal-content-alert{
+    width: 35%;  /* ความกว้างที่คุณต้องการ */
+    position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
+    top: 50%;  /* ให้อยู่กลางในแนวตั้ง */
+    left: 50%;  /* ให้อยู่กลางในแนวนอน */
+    transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
+    background-color: #ffffff;
+  }
+
+  .header-title-type {
+    width: 100%;
+    min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
+    justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
+    align-items: center; /* จัดกลางแนวตั้ง */
+    padding-top: 50px;
+    padding-bottom: 1rem;
+  }
+  
+  
+  
\ No newline at end of file

src/app/components/job-detail-components/job-competency/sub-job-competency/sub-job-competency.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { JobModel, MyJobModel } from 'src/app/shared/model/job.model';
+
+
+@Component({
+  selector: 'app-sub-job-competency',
+  templateUrl: './sub-job-competency.component.html',
+  styleUrls: ['./sub-job-competency.component.scss']
+})
+export class SubJobCompetencyComponent {
+  currentPage = 1
+    page = Array.from({ length: 1 }, (_, i) => i + 1);
+    jobList: JobModel[] = []
+    job: JobModel = new MyJobModel({})
+    search = ""
+    constructor(
+      private toastr: ToastrService
+    ) { }
+    ngOnInit(): void {
+    }
+    
+    searchChange() {
+      this.currentPage = 1
+      this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
+    }
+    jobListFilter() {
+      return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) ||
+        x.tdesc.toLowerCase().includes(this.search) ||
+        x.edesc.toLowerCase().includes(this.search))
+    }
+    selectJob(job: JobModel) {
+      // this.showSuccess()
+      this.job = new MyJobModel(job)
+    }
+  
+    showSuccessAdd() {
+      this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+  
+    showSuccessEdit() {
+      this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+  
+    showSuccessDelete() {
+      this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+    addBu1() {
+      // this.bu1Service.post(this.bu1).subscribe((response:any) => {
+      //   if (response.success) {
+      //     this.getBu1List()
+      //   }
+      // })
+    }
+    editBu1() {
+      // this.bu1Service.post(this.bu1).subscribe((response:any) => {
+      //   if (response.success) {
+      //     this.getBu1List()
+      //   }
+      // })
+    }
+    deleteJob(job: JobModel) {
+      // this.bu1Service.delete(new MyBu1Model(bu1)).subscribe((response:any) => {
+      //   if (response.success) {
+      //     this.getBu1List()
+      //   }
+      // })
+    }
+  
+  }
+  

src/app/components/job-detail-components/job-detail/job-detail.component.html

+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
+        รายละเอียดของงาน
+    </div>
+    <div class="page pt-0.75rem">
+        <div class="border-b border-gray-200 dark:border-white/10 px-2rem">
+            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
+                <a class="font-size-16px font-weight-500  hs-tab-active:font-weight-700 hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  hover:text-secondary active"
+                    href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
+                    aria-controls="underline-1"
+                    (click)="pathTitle = ['การจัดการรายละเอียดงาน','รายละเอียดของงาน']">
+                    รายละเอียดของงาน
+                </a>
+            </nav>
+        </div>
+        <div class="mt-3 px-2rem">
+            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
+                <app-work-detail></app-work-detail>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/job-detail-components/job-detail/job-detail.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-job-detail',
+  templateUrl: './job-detail.component.html',
+  styleUrls: ['./job-detail.component.scss']
+})
+export class JobDetailComponent {
+  pathTitle = ['การจัดการรายละเอียดงาน', 'รายละเอียดของงาน']
+}

src/app/components/job-detail-components/job-detail/work-detail/work-detail.component.html

+<div class="text-lg font-sm pt-2rem pb-1rem text-primary">
+    <!-- รายละเอียดสาขาและหน่วยธุรกิจ -->
+</div>
+<div class="page">
+
+    <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
+        <div class="w-full min-height-50px mb-10px justify-between items-center">
+            <div class="flex justify-between">
+                <div class="flex pr-2">
+                    <!-- Content ของ div แรก -->
+                    <div class="px-1">
+                        <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
+                            <i class="ri-add-line"></i>
+                            นำเข้าข้อมูล
+                        </button>
+
+                        <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
+                            href="javascript:void(0);">
+                            ดาวโหลดตัวอย่างไฟล์
+                        </a>
+                    </div>
+                </div>
+                <div class="flex justify-end">
+                    <div class="px-1">
+                        <div class="relative shadow-md">
+                            <input type="text" id="hs-leading-icon" name="hs-leading-icon"
+                                class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
+                                placeholder="Search by No. or Name" [(ngModel)]="search"
+                                (ngModelChange)="searchChange()">
+
+                            <div
+                                class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
+                                <i class="ri-search-line text-gray"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="px-1">
+                        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
+                        data-hs-overlay="#work-detail-alert-delete-modal">
+                            <i class="ri-delete-bin-6-line"></i>
+                            Delete
+                        </button>
+                    </div>
+                    <div class="px-1">
+                        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                            <i class="ti ti-book fs-l"></i>
+                            Help
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="page px-rem">
+            <div class="overflow-auto table-bordered rounded-t-md">
+                <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
+                    <div class="overflow-auto shadow-md">
+                        <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
+                            <thead>
+                                <tr>
+                                    <ng-container
+                                        *ngFor="let item of ['ลำดับ','รหัสงาน','ชื่อลักษณะงาน (ไทย)','ชื่อลักษณะงาน (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
+                                            [class.!text-center]="f||l">
+                                            <span class="!text-sm">{{ item }}</span>
+                                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
+                                                <i class="ti ti-dots-vertical fs-l"></i>
+                                            </div>
+                                        </th>
+                                    </ng-container>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr *ngFor="let item of[
+                                ['01','001', 'Department Manager 1','Department Manager 1'],
+                                ['02','002', 'Department Manager 2','Department Manager 2'],
+                                ['03','003', 'Department 1-HRD','Department 1-HRD'],
+                                ['04','004', 'Department Manager 3','Department Manager 3'],
+                                ['05','005', 'Department Manager 4','Department Manager 4']];let i = index">
+                                    <td class="flex justify-center">
+                                        {{item[0]}}
+                                    </td>
+                                    <td>{{item[1]}}</td>
+                                    <td>{{item[2]}}</td>
+                                    <td>{{item[3]}}</td>
+                                    <td class="flex justify-center">
+                                        <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
+                                            data-hs-overlay="#work-detail-modal-edit"></i>
+                                        <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
+                                            data-hs-overlay="#work-detail-alert-delete-modal"></i>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
+                <ul class="ti-pagination">
+                    <li>
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"
+                            (click)="currentPage = (currentPage-1 || 1)">
+                            <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
+                        </a>
+                    </li>
+                    <li *ngFor="let item of page;let f = first;let l = last">
+                        <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
+                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
+                                    class="ri-more-line"></i>
+                            </a>
+                        </ng-container>
+                        <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
+                            <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
+                                (click)="currentPage=item">{{item}}
+                            </a>
+                        </ng-container>
+                        <ng-container
+                            *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
+                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
+                                    class="ri-more-line"></i>
+                            </a>
+                        </ng-container>
+                    </li>
+                    <li>
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"
+                            (click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
+                            <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+
+
+        <div id="work-detail-modal-add" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+                <div class="max-h-full overflow-hidden ti-modal-content">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            เพิ่มข้อมูลรายละเอียดของงาน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#work-detail-modal-add">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-center">
+                        <div class="flex justify-end" style="padding-right: 1rem;">
+                            <div class="px-1">
+                                <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
+                                    <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
+                                        xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA"
+                                        stroke-width="3.84" transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
+                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
+                                        </g>
+                                        <g id="SVGRepo_iconCarrier">
+                                            <path d="M15 49A24 24 0 0 1 32 8"></path>
+                                            <path d="M49 15a24 24 0 0 1-17 41"></path>
+                                            <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
+                                            <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
+                                        </g>
+                                    </svg>
+                                    Clear
+                                </button>
+                            </div>
+                            <div class="px-1">
+                                <button href="javascript:void(0);"
+                                    class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                                    <i class="ti ti-book fs-l"></i>
+                                    Help
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body ">
+                        <label for="input-label" class="ti-form-label mt-2rem">ฝ่าย</label>
+                        <input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="job.jobid">
+                        <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
+                        <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="job.tdesc">
+                        <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
+                        <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="job.edesc">
+                        <div class="flex justify-end mt-2rem mb-1rem">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#work-detail-modal-add">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#work-detail-alert-add-modal">
+                                บันทึกข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="work-detail-modal-edit" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+                <div class="max-h-full overflow-hidden ti-modal-content">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            แก้ไขข้อมูลรายละเอียดของงาน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#work-detail-modal-edit">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-center">
+                        <div class="flex justify-end" style="padding-right: 1rem;">
+                            <div class="px-1">
+                                <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
+                                    <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
+                                        xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA"
+                                        stroke-width="3.84" transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
+                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
+                                        </g>
+                                        <g id="SVGRepo_iconCarrier">
+                                            <path d="M15 49A24 24 0 0 1 32 8"></path>
+                                            <path d="M49 15a24 24 0 0 1-17 41"></path>
+                                            <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
+                                            <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
+                                        </g>
+                                    </svg>
+                                    Clear
+                                </button>
+                            </div>
+                            <div class="px-1">
+                                <button href="javascript:void(0);"
+                                    class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                                    <i class="ti ti-book fs-l"></i>
+                                    Help
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body mt-1">
+                        <label for="input-label" class="ti-form-label">รหัสงาน*</label>
+                        <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly
+                            value="001">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (ไทย)*</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly
+                            value="Department Manager 1">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (อังกฤษ)</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly
+                            value="Department Manager 1">
+                        <div class="flex space-x-4 justify-center">
+                            <!-- label และ textarea แรก -->
+                            <div class="flex flex-col w-full">
+                                <label for="input-label" class="ti-form-label mt-2rem">ABC</label>
+                                <textarea id="input-label" class="ti-form-input w-80" rows="4" cols="50"></textarea>
+                            </div>
+
+                            <!-- label และ input ที่สอง -->
+                            <div class="flex flex-col w-1/2">
+                                <label for="input-label" class="ti-form-label mt-2rem">เปอร์เซ็นต์ %</label>
+                                <input type="text" id="input-label" class="ti-form-input w-auto" value="10.0">
+                            </div>
+                        </div>
+                        <div class="flex space-x-4 justify-center">
+                            <!-- label และ textarea แรก -->
+                            <div class="flex flex-col w-full">
+                                <label for="input-label" class="ti-form-label mt-2rem">งานที่รับผิดชอบ
+                                    (งานปฏิบัติ)</label>
+                                <textarea id="input-label" class="ti-form-input w-80" rows="4" cols="50"></textarea>
+                            </div>
+
+                            <!-- label และ input ที่สอง -->
+                            <div class="flex flex-col w-1/2">
+                                <label for="input-label" class="ti-form-label mt-2rem">เปอร์เซ็นต์ %</label>
+                                <input type="text" id="input-label" class="ti-form-input w-auto" value="10.0">
+                            </div>
+                        </div>
+                        <div class="flex space-x-4 justify-center">
+                            <!-- label และ textarea แรก -->
+                            <div class="flex flex-col w-full">
+                                <label for="input-label" class="ti-form-label mt-2rem">งานที่ได้รับมอบหมายพิเศษ</label>
+                                <textarea id="input-label" class="ti-form-input w-80" rows="4" cols="50"></textarea>
+                            </div>
+
+                            <!-- label และ input ที่สอง -->
+                            <div class="flex flex-col w-1/2">
+                                <label for="input-label" class="ti-form-label mt-2rem">เปอร์เซ็นต์ %</label>
+                                <input type="text" id="input-label" class="ti-form-input w-auto" value="10.0">
+                            </div>
+                        </div>
+                        <div class="flex space-x-4 justify-center">
+                            <!-- label และ textarea แรก -->
+                            <div class="flex flex-col w-full">
+                                <label for="input-label"
+                                    class="ti-form-label mt-2rem">งานที่ทุกตำแหน่งต้องปฏิบัติ</label>
+                                <textarea id="input-label" class="ti-form-input w-80" rows="4" cols="50"></textarea>
+                            </div>
+
+                            <!-- label และ input ที่สอง -->
+                            <div class="flex flex-col w-1/2">
+                                <label for="input-label" class="ti-form-label mt-2rem">เปอร์เซ็นต์ %</label>
+                                <input type="text" id="input-label" class="ti-form-input w-auto" value="10.0">
+                            </div>
+                        </div>
+                        <div class="flex space-x-4 justify-center">
+                            <!-- label และ textarea แรก -->
+                            <div class="flex flex-col w-full">
+                                <label for="input-label" class="ti-form-label mt-2rem">S.อื่นๆ</label>
+                                <textarea id="input-label" class="ti-form-input w-80" rows="4" cols="50"></textarea>
+                            </div>
+
+                            <!-- label และ input ที่สอง -->
+                            <div class="flex flex-col w-1/2">
+                                <label for="input-label" class="ti-form-label mt-2rem">เปอร์เซ็นต์ %</label>
+                                <input type="text" id="input-label" class="ti-form-input w-auto" value="10.0">
+                            </div>
+                        </div>
+                        <div class="flex justify-end mt-3rem mb-1rem space-x-4">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#work-detail-modal-edit">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#work-detail-alert-add-modal">
+                                บันทึกข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="work-detail-alert-add-modal" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
+                <div class="max-h-full overflow-hidden ti-modal-content w-full">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            แจ้งเตือน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#work-detail-alert-add-modal">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body ">
+                        <p class="mt-1 text-gray-800 dark:text-white/70">
+                            ยืนยันการบันทึกข้อมูลหรือไม่
+                        </p>
+
+                        <div class="flex justify-end mt-2rem mb-1rem">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#work-detail-modal-edit">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#work-detail-alert-add-modal" (click)="addBu1();showSuccessAdd()">
+                                บันทึกข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="work-detail-alert-delete-modal" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
+                <div class="max-h-full overflow-hidden ti-modal-content w-full">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            แจ้งเตือน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#work-detail-alert-delete-modal">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body ">
+                        <p class="mt-1 text-gray-800 dark:text-white/70">
+                            ยืนยันการลบข้อมูลหรือไม่!
+                        </p>
+
+                        <div class="flex justify-end mt-2rem mb-1rem">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#work-detail-alert-delete-modal">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#work-detail-alert-delete-modal"
+                                (click)="addBu1();showSuccessDelete()">
+                                ลบข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
\ No newline at end of file

src/app/components/job-detail-components/job-detail/work-detail/work-detail.component.scss

+.ti-modal-content-new {
+    top: 50%;  /* ให้อยู่กลางในแนวตั้ง */
+    left: 50%;  /* ให้อยู่กลางในแนวนอน */
+    position: relative;  /* ทำให้สามารถจัดตำแหน่งได้ */
+    transform: translate(-50%, -50%);  /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
+    background-color: white;
+    overflow: hidden;  /* ป้องกันการเลื่อนในโมดอล */
+}
+  
+.ti-modal-body-new {
+    height: 50vh;
+    display: flex;
+    justify-content: center; /* จัดแนวนอนให้ตรงกลาง */
+    align-items: center; /* จัดแนวตั้งให้ตรงกลาง */
+    padding: 1rem;
+  
+}
\ No newline at end of file

src/app/components/job-detail-components/job-detail/work-detail/work-detail.component.ts

+import { Component } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { JobModel, MyJobModel } from 'src/app/shared/model/job.model';
+
+@Component({
+  selector: 'app-work-detail',
+  templateUrl: './work-detail.component.html',
+  styleUrls: ['./work-detail.component.scss']
+})
+export class WorkDetailComponent {
+  currentPage = 1
+  page = Array.from({ length: 1 }, (_, i) => i + 1);
+  jobList: JobModel[] = []
+  job: JobModel = new MyJobModel({})
+  search = ""
+  constructor(
+    private toastr: ToastrService
+  ) { }
+  ngOnInit(): void {
+  }
+  
+  searchChange() {
+    this.currentPage = 1
+    this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
+  }
+  jobListFilter() {
+    return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) ||
+      x.tdesc.toLowerCase().includes(this.search) ||
+      x.edesc.toLowerCase().includes(this.search))
+  }
+  selectJob(job: JobModel) {
+    // this.showSuccess()
+    this.job = new MyJobModel(job)
+  }
+
+  showSuccessAdd() {
+    this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
+
+  showSuccessEdit() {
+    this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
+
+  showSuccessDelete() {
+    this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
+  addBu1() {
+    // this.bu1Service.post(this.bu1).subscribe((response:any) => {
+    //   if (response.success) {
+    //     this.getBu1List()
+    //   }
+    // })
+  }
+  deleteJob(job: JobModel) {
+    // this.bu1Service.delete(new MyBu1Model(bu1)).subscribe((response:any) => {
+    //   if (response.success) {
+    //     this.getBu1List()
+    //   }
+    // })
+  }
+
+}

src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.html

+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
+        ตัวชี้วัดของตำแหน่งงาน
+    </div>
+    <div class="page pt-0.75rem">
+        <div class="border-b border-gray-200 dark:border-white/10 px-2rem">
+            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
+                <a class="font-size-16px font-weight-500  hs-tab-active:font-weight-700 hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  hover:text-secondary active"
+                    href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
+                    aria-controls="underline-1"
+                    (click)="pathTitle = ['การจัดการรายละเอียดงาน','ตัวชี้วัดของตำแหน่งงานd']">
+                    ตัวชี้วัดของตำแหน่งงาน
+                </a>
+            </nav>
+        </div>
+        <div class="mt-3 px-2rem">
+            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
+                <app-sub-job-position-indicators></app-sub-job-position-indicators>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-job-position-Indicators',
+  templateUrl: './job-position-Indicators.component.html',
+  styleUrls: ['./job-position-Indicators.component.scss']
+})
+export class JobPositionIndicatorsComponent {
+  pathTitle = ['การจัดการรายละเอียดงาน', 'ตัวชี้วัดของตำแหน่งงาน']
+}

src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.html

+<div class="text-lg font-sm pt-2rem pb-1rem text-primary">
+    <!-- รายละเอียดสาขาและหน่วยธุรกิจ -->
+</div>
+<div class="page">
+
+    <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
+        <div class="w-full min-height-50px mb-10px justify-between items-center">
+            <div class="flex justify-between">
+                <div class="flex pr-2">
+                    <!-- Content ของ div แรก -->
+                    <div class="px-1">
+                        <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
+                            <i class="ri-add-line"></i>
+                            นำเข้าข้อมูล
+                        </button>
+
+                        <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
+                            href="javascript:void(0);">
+                            ดาวโหลดตัวอย่างไฟล์
+                        </a>
+                    </div>
+                </div>
+                <div class="flex justify-end">
+                    <div class="px-1">
+                        <div class="relative shadow-md">
+                            <input type="text" id="hs-leading-icon" name="hs-leading-icon"
+                                class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
+                                placeholder="Search by No. or Name" [(ngModel)]="search"
+                                (ngModelChange)="searchChange()">
+
+                            <div
+                                class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
+                                <i class="ri-search-line text-gray"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="px-1">
+                        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
+                            data-hs-overlay="#sub-job-position-indicators-alert-delete-modal">
+                            <i class="ri-delete-bin-6-line"></i>
+                            Delete
+                        </button>
+                    </div>
+                    <div class="px-1">
+                        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                            <i class="ti ti-book fs-l"></i>
+                            Help
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="page px-rem">
+            <div class="overflow-auto table-bordered rounded-t-md">
+                <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
+                    <div class="overflow-auto shadow-md">
+                        <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
+                            <thead>
+                                <tr>
+                                    <ng-container
+                                        *ngFor="let item of ['ลำดับ','รหัสงาน','ชื่อลักษณะงาน (ไทย)','ชื่อลักษณะงาน (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
+                                            [class.!text-center]="f||l">
+                                            <span class="!text-sm">{{ item }}</span>
+                                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
+                                                <i class="ti ti-dots-vertical fs-l"></i>
+                                            </div>
+                                        </th>
+                                    </ng-container>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr *ngFor="let item of[
+                                ['01','001', 'Department Manager 1','Department Manager 1'],
+                                ['02','002', 'Department Manager 2','Department Manager 2'],
+                                ['03','003', 'Department 1-HRD','Department 1-HRD'],
+                                ['04','004', 'Department Manager 3','Department Manager 3'],
+                                ['05','005', 'Department Manager 4','Department Manager 4']];let i = index">
+                                    <td class="flex justify-center">
+                                        {{item[0]}}
+                                    </td>
+                                    <td>{{item[1]}}</td>
+                                    <td>{{item[2]}}</td>
+                                    <td>{{item[3]}}</td>
+                                    <td class="flex justify-center">
+                                        <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
+                                            data-hs-overlay="#sub-job-position-indicators-modal-edit"></i>
+                                        <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
+                                            data-hs-overlay="#sub-job-position-indicators-alert-delete-modal"></i>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
+                <ul class="ti-pagination">
+                    <li>
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"
+                            (click)="currentPage = (currentPage-1 || 1)">
+                            <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
+                        </a>
+                    </li>
+                    <li *ngFor="let item of page;let f = first;let l = last">
+                        <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
+                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
+                                    class="ri-more-line"></i>
+                            </a>
+                        </ng-container>
+                        <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
+                            <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
+                                (click)="currentPage=item">{{item}}
+                            </a>
+                        </ng-container>
+                        <ng-container
+                            *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
+                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
+                                    class="ri-more-line"></i>
+                            </a>
+                        </ng-container>
+                    </li>
+                    <li>
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"
+                            (click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
+                            <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+
+
+        <div id="sub-job-position-indicators-modal-add" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+                <div class="max-h-full overflow-hidden ti-modal-content">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            เพิ่มข้อมูลรายละเอียดของงาน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#sub-job-position-indicators-modal-add">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-center">
+                        <div class="flex justify-end" style="padding-right: 1rem;">
+                            <div class="px-1">
+                                <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
+                                    <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
+                                        xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA"
+                                        stroke-width="3.84" transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
+                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
+                                        </g>
+                                        <g id="SVGRepo_iconCarrier">
+                                            <path d="M15 49A24 24 0 0 1 32 8"></path>
+                                            <path d="M49 15a24 24 0 0 1-17 41"></path>
+                                            <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
+                                            <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
+                                        </g>
+                                    </svg>
+                                    Clear
+                                </button>
+                            </div>
+                            <div class="px-1">
+                                <button href="javascript:void(0);"
+                                    class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                                    <i class="ti ti-book fs-l"></i>
+                                    Help
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body mt-1">
+                        <label for="input-label" class="ti-form-label">รหัสงาน</label>
+                        <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="001">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (ไทย)*</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (อังกฤษ)</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
+                        <label for="detail_eng" class="ti-form-label mt-2rem">ตัวชี้วัดของตำแหน่งงาน (Key Performance Indicators: KPIs)</label>
+                        <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="5" cols="50">
+1.
+2.
+3.
+4.
+5.
+                        </textarea>
+                        <div class="flex justify-end mt-3rem mb-1rem space-x-4">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#sub-job-position-indicators-alert-add-modal">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#sub-job-position-indicators-alert-add-modal">
+                                บันทึกข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="sub-job-position-indicators-modal-edit" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+                <div class="max-h-full overflow-hidden ti-modal-content">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            แก้ไขข้อมูลรายละเอียดของงาน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#sub-job-position-indicators-modal-edit">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-center">
+                        <div class="flex justify-end" style="padding-right: 1rem;">
+                            <div class="px-1">
+                                <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
+                                    <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
+                                        xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA"
+                                        stroke-width="3.84" transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
+                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
+                                        </g>
+                                        <g id="SVGRepo_iconCarrier">
+                                            <path d="M15 49A24 24 0 0 1 32 8"></path>
+                                            <path d="M49 15a24 24 0 0 1-17 41"></path>
+                                            <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
+                                            <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
+                                        </g>
+                                    </svg>
+                                    Clear
+                                </button>
+                            </div>
+                            <div class="px-1">
+                                <button href="javascript:void(0);"
+                                    class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                                    <i class="ti ti-book fs-l"></i>
+                                    Help
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body mt-1">
+                        <label for="input-label" class="ti-form-label">รหัสงาน</label>
+                        <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="001">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (ไทย)*</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (อังกฤษ)</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
+                        <label for="detail_eng" class="ti-form-label mt-2rem">ตัวชี้วัดของตำแหน่งงาน (Key Performance Indicators: KPIs)</label>
+                        <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="5" cols="50">
+1.
+2.
+3.
+4.
+5.
+                        </textarea>
+                        <div class="flex justify-end mt-3rem mb-1rem space-x-4">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#sub-job-position-indicators-modal-edit">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#sub-job-position-indicators-alert-add-modal">
+                                บันทึกข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="sub-job-position-indicators-alert-add-modal" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
+                <div class="max-h-full overflow-hidden ti-modal-content w-full">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            แจ้งเตือน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#sub-job-position-indicators-alert-add-modal">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body ">
+                        <p class="mt-1 text-gray-800 dark:text-white/70">
+                            ยืนยันการบันทึกข้อมูลหรือไม่
+                        </p>
+
+                        <div class="flex justify-end mt-2rem mb-1rem">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#sub-job-position-indicators-modal-edit">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#sub-job-position-indicators-alert-add-modal" (click)="addBu1();showSuccessAdd()">
+                                บันทึกข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="sub-job-position-indicators-alert-delete-modal" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
+                <div class="max-h-full overflow-hidden ti-modal-content w-full">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            แจ้งเตือน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#sub-job-position-indicators-alert-delete-modal">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body ">
+                        <p class="mt-1 text-gray-800 dark:text-white/70">
+                            ยืนยันการลบข้อมูลหรือไม่!
+                        </p>
+
+                        <div class="flex justify-end mt-2rem mb-1rem">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#sub-job-position-indicators-alert-delete-modal">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#sub-job-position-indicators-alert-delete-modal"
+                                (click)="addBu1();showSuccessDelete()">
+                                ลบข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
\ No newline at end of file

src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.scss

+.button-clear {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 41vw;
+}
+.button-help {
+  position: absolute;
+  top: 0px;
+  z-index: 1;
+  right: 0vw;
+  margin: 4.2rem;
+  margin-right: 10px; /* เพิ่มใหม่ 12/16*/
+}
+
+table.ti-custom-table th {
+  height: 60px;
+}
+
+table.ti-custom-table thead {
+  height: 50px;
+}
+table.ti-custom-table thead th span {
+  font-size: 12px;
+  font-weight: bold;
+}
+a.custom-link {
+  padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
+}
+/* สไตล์ของแถบเมนู */
+.nav-tabs {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  margin-bottom: 10px;
+  height: 20%;
+}
+
+.nav-item {
+  list-style: none;
+  margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+}
+
+.nav-link {
+  text-decoration: none;
+  padding: 10px 20px;
+  display: inline-block;
+  font-size: large;
+  border-width: 2px 2px 0px 2px;
+  border-style: solid;
+  border-color: #ccc;
+  border-radius: 5px 5px 0px 0px;
+}
+
+.nav-link:hover {
+  background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+}
+
+.nav-link.active {
+  color: #ffffff; /* สีตัวอักษรในสถานะ active */
+  font-size: large;
+  border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
+  background-color: rgb(var(--color-primary));
+  border-width: 2px 2px 0px 2px;
+  border-style: solid;
+  border-color: rgb(var(--color-primary));
+  border-radius: 5px 5px 0px 0px;
+}
+
+.tab-content {
+  margin-top: 20px;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+.nav-item-text {
+  list-style: none;
+  margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+}
+.nav-link-text {
+  text-decoration: none;
+  display: inline-block;
+  font-size: large;
+  color: #569bf5;
+  border-bottom: 2px solid #569bf5;
+  line-height: 0.8;
+}
+.ti-pagination .page-link.active {
+  background-color: #569bf5;
+  color: white;
+  border-radius: 50%;
+  padding: 8px 12px;
+}
+.box-body{
+  padding: 0rem;
+}
+.page{
+  min-height: 0vh;
+}
+
+.ti-modal {
+  overflow: hidden;
+}
+.header-title-type {
+  width: 100%;
+  min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
+  // margin-top: 50px;
+  // margin-bottom: 16px;
+  justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
+  align-items: center; /* จัดกลางแนวตั้ง */
+  padding-top: 50px;
+  padding-bottom: 1rem;
+}
+// .icon-container {
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   width: 20px; /* ปรับขนาดตามต้องการ */
+//   height: 20px; /* ปรับขนาดตามต้องการ */
+//   border: 2px solid #2196F3; /* กรอบสีน้ำเงิน */
+//   border-radius: 5px; /* มุมโค้งมนเล็กน้อย */
+//   background-color: #E3F2FD; /* พื้นหลังสีฟ้าอ่อน */
+//   margin-bottom: 10px; /* เว้นระยะห่างจาก textarea */
+// }
+
+// .icon-container i {
+//   font-size: 10px; /* ขนาดไอคอน */
+//   color: #2196F3; /* สีไอคอน */
+// }
+
+.icon-container {
+  display: flex;
+  gap: 1px; /* ระยะห่างระหว่างไอคอน */
+}
+
+.icon-container i {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px; /* ขนาดกรอบ */
+  height: 20px;
+  border: 2px solid #2196F3; /* สีกรอบ */
+  border-radius: 4px; /* มุมโค้งมน */
+  background-color: #E3F2FD; /* พื้นหลังสีฟ้าอ่อน */
+  color: #2196F3; /* สีไอคอน */
+  font-size: 10px; /* ขนาดไอคอน */
+}
+

src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { JobModel, MyJobModel } from 'src/app/shared/model/job.model';
+
+
+@Component({
+  selector: 'app-sub-job-position-indicators',
+  templateUrl: './sub-job-position-indicators.component.html',
+  styleUrls: ['./sub-job-position-indicators.component.scss']
+})
+export class SubJobPositionIndicatorsComponent {
+  currentPage = 1
+    page = Array.from({ length: 1 }, (_, i) => i + 1);
+    jobList: JobModel[] = []
+    job: JobModel = new MyJobModel({})
+    search = ""
+    constructor(
+      private toastr: ToastrService
+    ) { }
+    ngOnInit(): void {
+    }
+    
+    searchChange() {
+      this.currentPage = 1
+      this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
+    }
+    jobListFilter() {
+      return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) ||
+        x.tdesc.toLowerCase().includes(this.search) ||
+        x.edesc.toLowerCase().includes(this.search))
+    }
+    selectJob(job: JobModel) {
+      // this.showSuccess()
+      this.job = new MyJobModel(job)
+    }
+  
+    showSuccessAdd() {
+      this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+  
+    showSuccessEdit() {
+      this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+  
+    showSuccessDelete() {
+      this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+    addBu1() {
+      // this.bu1Service.post(this.bu1).subscribe((response:any) => {
+      //   if (response.success) {
+      //     this.getBu1List()
+      //   }
+      // })
+    }
+    deleteJob(job: JobModel) {
+      // this.bu1Service.delete(new MyBu1Model(bu1)).subscribe((response:any) => {
+      //   if (response.success) {
+      //     this.getBu1List()
+      //   }
+      // })
+    }
+  
+  }
+  
\ No newline at end of file

src/app/components/job-detail-components/job-qualifications/job-qualifications.component.html

+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
+        คุณสมบัติที่จำเป็นต่อการปฏิบัติหน้าที่
+    </div>
+    <div class="page pt-0.75rem">
+        <div class="border-b border-gray-200 dark:border-white/10 px-2rem">
+            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
+                <a class="font-size-16px font-weight-500  hs-tab-active:font-weight-700 hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  hover:text-secondary active"
+                    href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
+                    aria-controls="underline-1"
+                    (click)="pathTitle = ['การจัดการรายละเอียดงาน', 'ลักษณะงาน']">
+                    คุณสมบัติที่จำเป็นต่อการปฏิบัติหน้าที่
+                </a>
+            </nav>
+        </div>
+        <div class="mt-3 px-2rem">
+            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
+                <app-sub-job-qualifications></app-sub-job-qualifications>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/job-detail-components/job-qualifications/job-qualifications.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-job-qualifications',
+  templateUrl: './job-qualifications.component.html',
+  styleUrls: ['./job-qualifications.component.scss']
+})
+export class JobQualificationsComponent {
+  pathTitle = ['การจัดการลายละเอียดงาน', 'ลักษณะงาน']
+}

src/app/components/job-detail-components/job-qualifications/sub-job-qualifications/sub-job-qualifications.component.html

+<div class="header-title-type">
+    <div class="flex justify-end">
+        <div class="px-1">
+            <div class="relative shadow-md">
+                <input type="text" id="hs-leading-icon" name="hs-leading-icon"
+                    class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;">
+                <div
+                    class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
+                    <i class="ri-search-line text-gray"></i>
+                </div>
+            </div>
+        </div>
+        <div class="px-1">
+            <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
+            data-hs-overlay="#sub-job-qualifications-component-alert-delete-modal">
+                <i class="ri-delete-bin-6-line"></i>
+                Delete
+            </button>
+        </div>
+        <div class="px-1">
+            <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
+                <i class="ti ti-book fs-l"></i>
+                Help
+            </button>
+        </div>
+    </div>
+</div>
+
+<div class="page px-rem">
+<div class="flex justify-between mb-5">
+   <div class="flex pr-2">
+       <!-- Content ของ div แรก -->
+          <div class="flex pr-2">
+                    <!-- Content ของ div แรก -->
+                    <div class="px-1">
+                        <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
+                            <i class="ri-add-line"></i>
+                            นำเข้าข้อมูล
+                        </button>
+
+                        <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
+                            href="javascript:void(0);">
+                            ดาวโหลดตัวอย่างไฟล์
+                        </a>
+                    </div>
+                </div>
+   </div>
+</div>
+<div class="overflow-auto table-bordered rounded-t-md">
+    <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1"  >
+        <div class="overflow-auto shadow-md">
+            <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover" >
+                <thead>
+                    <tr>
+                        <ng-container
+                        *ngFor="let item of ['ลำดับ','รหัสงาน','ชื่อลักษณะงาน (ไทย)*','ชื่อลักษณะงาน (อังกฤษ)*','การจัดการ']; let f = first; let l = last; let i = index">
+                            <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
+                                [class.!text-center]="f||l">
+                                <span class="text-sm">{{ item }}</span>
+                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
+                                    <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50" 
+                                        height="16" fill="currentColor" viewBox="0 0 16 16">
+                                        <path
+                                            d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
+                                        </path>
+                                    </svg>
+                                </div>
+                            </th>
+                        </ng-container>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let item of[
+                    ['01', '001','Department Manager 1', 'Department Manager 1'],
+                    ['02', '002','Department Manager 2', 'Department Manager 2'],
+                    ['03', '003','Department 1-HRD', 'Department 1-HRD'],
+                    ['04', '004','Department Manager 3', 'Department Manager 3'],
+                    ['05', '005','Department Manager 4', 'Department Manager 4']];let i = index">
+                        <td class="text-center" style="font-size: 12px; padding-left: 1.5rem;">{{item[0]}}</td>
+                        <td style="font-size: 12px; padding-left: 1.5rem; width: 150px;">{{item[1]}}</td>
+                        <td style="font-size: 12px; padding-left: 1.5rem; width: 400px;">{{item[2]}}</td>
+                        <td style="font-size: 12px; padding-left: 1.5rem; width: 400px;">{{item[3]}}</td>
+                        <td class="flex justify-center">
+                            <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#sub-job-qualifications-component-modal-edit"></i>
+                            <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#sub-job-qualifications-component-alert-delete-modal"></i>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+<div class="body-content" style="margin-top: 20px;">
+    <ul class="nav-tabs">
+        <div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
+            <div class="box-body">
+                <nav class="pagination-style-3 overflow-auto">
+                <ul class="ti-pagination">
+                    <li>
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);">
+                            <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
+                        </a>
+                    </li>
+                    <li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
+                    <li><a class="page-link" href="javascript:void(0);">2</a></li>
+                    <li><a class="page-link" href="javascript:void(0);">3</a></li>
+                    <li><a class="page-link" href="javascript:void(0);">4</a></li>
+                    <li><a class="page-link" href="javascript:void(0);">5</a></li>
+                    <li><a class="page-link" href="javascript:void(0);">...</a></li>
+                    <li><a class="page-link" href="javascript:void(0);">31</a></li>
+                    <li>
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);">
+                            <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
+                        </a>
+                    </li>
+                </ul>
+                </nav>
+            </div>
+        </div>
+    </ul>
+    <ul class="nav-tabs">
+        <p>Show 1 to 10 of 50 items</p>
+    </ul>
+</div>
+</div>
+
+<div id="sub-job-qualifications-component-modal-edit" class="hs-overlay hidden ti-modal">
+<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+    <div class="max-h-full overflow-hidden ti-modal-content">
+        <div class="ti-modal-header">
+            <h3 class="text-xxl font-bold text-primary">
+                เเก้ไขข้อมูลคุณสมบัติที่จำเป็นต่อการปฏิบัติหน้าที่
+            </h3>
+            <div class="flex justify-end">
+                <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                    data-hs-overlay="#sub-job-qualifications-component-modal-edit">
+                    <span class="sr-only">Close</span>
+                    <i class="ti ti-circle-x fs-xxl"></i>
+                </button>
+            </div>
+        </div>
+        <div class="ti-modal-center">
+            <div class="flex justify-end" style="padding-right: 1rem;">
+                <div class="px-1">
+                    <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
+                        <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
+                            xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
+                            transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
+                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                            <g id="SVGRepo_iconCarrier">
+                                <path d="M15 49A24 24 0 0 1 32 8"></path>
+                                <path d="M49 15a24 24 0 0 1-17 41"></path>
+                                <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
+                                <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
+                            </g>
+                        </svg>
+                        Clear
+                    </button>
+                </div>
+                <div class="px-1">
+                    <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                        <i class="ti ti-book fs-l"></i>
+                        Help
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="ti-modal-body" style="padding-top: 0px;">
+            <label for="input-label" class="ti-form-label mt-1rem">รหัสงาน</label>
+            <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="001">
+            <label for="detail_th" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (ไทย)*</label>
+            <input type="text" id="detail_th" class="ti-form-input w-2/3 bg-input-readonly" readonly value="Department Manager1">
+            <label for="detail_eng" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (อังกฤษ)</label>
+            <input type="text" id="detail_eng" class="ti-form-input w-2/3 bg-input-readonly" readonly value="Department Manager1">
+            <label for="detail_eng" class="ti-form-label mt-2rem">การศึกษา/ประสบการณ์ (Education/Experience)</label>
+               <textarea type="text" id="detail_eng" class="ti-form-input font-bold w-2/3" rows="4" cols="50"></textarea>
+            <label for="detail_eng" class="ti-form-label mt-2rem">ใบประกาศนียบัตร (Certificate)/ใบประกอบวิชาชีพ (Licensed Professional)</label>
+               <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="4" cols="50"></textarea>
+            <label for="detail_eng" class="ti-form-label mt-2rem">การฝึกอบรมที่จำเป็นต่อการปฏิบัติงาน (Especially Training Course)</label>
+               <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="4" cols="50"></textarea>
+            <label for="detail_eng" class="ti-form-label mt-2rem">ความสามรถอื่นๆ (Qther Abillities)</label>
+               <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="5" cols="50"></textarea>
+            <div class="flex justify-end mt-2rem mb-1rem">
+                <button type="button"
+                    class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                    data-hs-overlay="#sub-job-qualifications-component-modal-edit">
+                    ย้อนกลับ
+                </button>
+                <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                    data-hs-overlay="#sub-job-qualifications-component-alert-edit-modal">
+                    บันทึกข้อมูล
+                </a>
+            </div>
+        </div>
+    </div>
+    
+</div>
+</div>
+
+<div id="sub-job-qualifications-component-alert-edit-modal" class="hs-overlay hidden ti-modal">
+<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
+    <div class="max-h-full overflow-hidden ti-modal-content-alert w-full">
+        <div class="ti-modal-header">
+            <h3 class="text-xxl font-bold text-primary">
+                แจ้งเตือน
+            </h3>
+            <div class="flex justify-end">
+                <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                    data-hs-overlay="#sub-job-qualifications-component-alert-edit-modal">
+                    <span class="sr-only">Close</span>
+                    <i class="ti ti-circle-x fs-xxl"></i>
+                </button>
+            </div>
+        </div>
+        <div class="ti-modal-body ">
+            <p class="mt-1 text-gray-800 dark:text-white/70">
+                ยืนยันการเเก้ไขข้อมูลหรือไม่
+            </p>
+
+            <div class="flex justify-end mt-2rem mb-1rem">
+                <button type="button"
+                    class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                    data-hs-overlay="#sub-job-qualifications-component-modal-edit">
+                    ย้อนกลับ
+                </button>
+                <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                    data-hs-overlay="#sub-job-qualifications-component-alert-edit-modal" (click)="editBu1();showSuccessEdit()">
+                    บันทึกข้อมูล
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+<div id="sub-job-qualifications-component-alert-delete-modal" class="hs-overlay hidden ti-modal">
+<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
+    <div class="max-h-full overflow-hidden ti-modal-content-alert w-full">
+        <div class="ti-modal-header">
+            <h3 class="text-xxl font-bold text-primary">
+                แจ้งเตือน
+            </h3>
+            <div class="flex justify-end">
+                <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                    data-hs-overlay="#sub-job-qualifications-component-alert-delete-modal">
+                    <span class="sr-only">Close</span>
+                    <i class="ti ti-circle-x fs-xxl"></i>
+                </button>
+            </div>
+        </div>
+        <div class="ti-modal-body ">
+            <p class="mt-1 text-gray-800 dark:text-white/70">
+                ยืนยันการลบข้อมูลหรือไม่!
+            </p>
+
+            <div class="flex justify-end mt-2rem mb-1rem">
+                <button type="button"
+                    class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                    data-hs-overlay="#sub-job-qualifications-component-alert-delete-modal">
+                    ย้อนกลับ
+                </button>
+                <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                    data-hs-overlay="#sub-job-qualifications-component-alert-delete-modal" (click)="editBu1();showSuccessDelete()">
+                    ลบข้อมูล
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
\ No newline at end of file

src/app/components/job-detail-components/job-qualifications/sub-job-qualifications/sub-job-qualifications.component.scss

+.button-clear {
+    position: absolute;
+    top: 96px;
+    z-index: 1;
+    right: 41vw;
+  }
+  .button-help {
+    position: absolute;
+    top: 0px;
+    z-index: 1;
+    right: 0vw;
+    margin: 4.2rem;
+    margin-right: 10px; /* เพิ่มใหม่ 12/16*/
+  }
+  
+  table.ti-custom-table thead {
+    height: 60px;
+  }
+  table.ti-custom-table thead th span {
+    font-size: 12px;
+    font-weight: bold;
+  }
+  .ti-custom-table td{
+    padding-left: 0.9rem;
+    padding-right: 1rem;
+  }
+  
+  .ti-custom-table thead th:first-child {
+    width: 125px; /* ปรับความกว้างตามที่ต้องการ */
+    text-align: left; /* จัดตำแหน่งข้อความถ้าต้องการ */
+  }
+  .ti-custom-table thead th:last-child {
+    width: 150px; /* ปรับความกว้างตามที่ต้องการ */
+  }
+  a.custom-link {
+    padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
+  }
+  /* สไตล์ของแถบเมนู */
+  .nav-tabs {
+    display: flex;
+    width: 100%;
+    cursor: pointer;
+    margin-bottom: 10px;
+    height: 20%;
+  }
+  
+  .nav-item {
+    list-style: none;
+    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+  }
+  
+  .nav-link {
+    text-decoration: none;
+    padding: 10px 20px;
+    display: inline-block;
+    font-size: large;
+    border-width: 2px 2px 0px 2px;
+    border-style: solid;
+    border-color: #ccc;
+    border-radius: 5px 5px 0px 0px;
+  }
+  
+  .nav-link:hover {
+    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+  }
+  
+  .nav-link.active {
+    color: #ffffff; /* สีตัวอักษรในสถานะ active */
+    font-size: large;
+    border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
+    background-color: rgb(var(--color-primary));
+    border-width: 2px 2px 0px 2px;
+    border-style: solid;
+    border-color: rgb(var(--color-primary));
+    border-radius: 5px 5px 0px 0px;
+  }
+  
+  .tab-content {
+    margin-top: 20px;
+  }
+  
+  .tab-pane.active {
+    display: block;
+  }
+  
+  .nav-item-text {
+    list-style: none;
+    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+  }
+  .nav-link-text {
+    text-decoration: none;
+    display: inline-block;
+    font-size: large;
+    color: #569bf5;
+    border-bottom: 2px solid #569bf5;
+    line-height: 0.8;
+  }
+  .ti-pagination .page-link.active {
+    background-color: #569bf5;
+    color: white;
+    border-radius: 50%;
+    padding: 8px 12px;
+  }
+  .box-body{
+    padding: 0rem;
+  }
+  .page{
+    min-height: 0vh;
+  }
+
+  
+  .ti-modal-content-alert{
+    width: 35%;  /* ความกว้างที่คุณต้องการ */
+    position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
+    top: 50%;  /* ให้อยู่กลางในแนวตั้ง */
+    left: 50%;  /* ให้อยู่กลางในแนวนอน */
+    transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
+    background-color: #ffffff;
+  }
+
+  .header-title-type {
+    width: 100%;
+    min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
+    justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
+    align-items: center; /* จัดกลางแนวตั้ง */
+    padding-top: 50px;
+    padding-bottom: 1rem;
+  }
+  
+  
+  
\ No newline at end of file

src/app/components/job-detail-components/job-qualifications/sub-job-qualifications/sub-job-qualifications.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { JobModel, MyJobModel } from 'src/app/shared/model/job.model';
+
+
+@Component({
+  selector: 'app-sub-job-qualifications',
+  templateUrl: './sub-job-qualifications.component.html',
+  styleUrls: ['./sub-job-qualifications.component.scss']
+})
+export class SubJobQualificationsComponent {
+  currentPage = 1
+    page = Array.from({ length: 1 }, (_, i) => i + 1);
+    jobList: JobModel[] = []
+    job: JobModel = new MyJobModel({})
+    search = ""
+    constructor(
+      private toastr: ToastrService
+    ) { }
+    ngOnInit(): void {
+    }
+    
+    searchChange() {
+      this.currentPage = 1
+      this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
+    }
+    jobListFilter() {
+      return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) ||
+        x.tdesc.toLowerCase().includes(this.search) ||
+        x.edesc.toLowerCase().includes(this.search))
+    }
+    selectJob(job: JobModel) {
+      // this.showSuccess()
+      this.job = new MyJobModel(job)
+    }
+  
+    showSuccessAdd() {
+      this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+  
+    showSuccessEdit() {
+      this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+  
+    showSuccessDelete() {
+      this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+    addBu1() {
+      // this.bu1Service.post(this.bu1).subscribe((response:any) => {
+      //   if (response.success) {
+      //     this.getBu1List()
+      //   }
+      // })
+    }
+    editBu1() {
+      // this.bu1Service.post(this.bu1).subscribe((response:any) => {
+      //   if (response.success) {
+      //     this.getBu1List()
+      //   }
+      // })
+    }
+    deleteJob(job: JobModel) {
+      // this.bu1Service.delete(new MyBu1Model(bu1)).subscribe((response:any) => {
+      //   if (response.success) {
+      //     this.getBu1List()
+      //   }
+      // })
+    }
+  
+  }
+  

src/app/components/performance-management-evaluation/assessment-management/assessment-management.component.html

+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
+        การจัดการประเมิณ
+    </div>
+    <div class="page pt-0.75rem">
+        <div class="border-b border-gray-200 dark:border-white/10 px-2rem">
+            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
+                
+                <a class="text-base font-medium hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 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)="activeTab='underline-1';pathTitle = ['การประเมินจัดการประสิทธิภาพ','การจัดการประเมิณ','จัดกลุ่มการประเมิน']">
+                    จัดกลุ่มการประเมิน
+                </a>
+              
+                <a class="text-base font-medium hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 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)="activeTab='underline-2';pathTitle = ['การประเมินจัดการประสิทธิภาพ','การจัดการประเมิณ','กำหนดผู้อนุมัติ']">
+                    กำหนดผู้อนุมัติ
+                </a>
+            </nav>
+        </div>
+        <div class="mt-3 px-2rem">
+            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1"
+                *ngIf="activeTab === 'underline-1'">
+                -----
+            </div>
+            <div id="underline-2" role="tabpanel" aria-labelledby="underline-item-2"
+                *ngIf="activeTab === 'underline-2'">
+                <app-assigning-approvers [pathTitle]="pathTitle"
+                    (sendPathTitle)="pathTitle=$event"></app-assigning-approvers>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/performance-management-evaluation/assessment-management/assessment-management.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-assessment-management',
+  templateUrl: './assessment-management.component.html',
+  styleUrls: ['./assessment-management.component.scss']
+})
+export class AssessmentManagementComponent {
+  pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'การจัดการประเมิณ','จัดกลุ่มการประเมิณ']
+  activeTab: string = 'underline-1';
+}

src/app/components/performance-management-evaluation/assessment-management/assigning-approvers/assigning-approvers.component.html

+<div class="header-title-type">
+         <div class="flex justify-end">
+             <div class="px-1">
+                 <div class="relative shadow-md">
+                     <input type="text" id="hs-leading-icon" name="hs-leading-icon"
+                         class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;">
+                     <div
+                         class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
+                         <i class="ri-search-line text-gray"></i>
+                     </div>
+                 </div>
+             </div>
+             <div class="px-1">
+                 <button type="button" class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
+                     data-hs-overlay="#">
+                     <i class="ti ti-file-plus"></i>
+                     import
+                 </button>
+             </div>
+             <div class="px-1">
+                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
+                     <i class="ti ti-book fs-l"></i>
+                     Help
+                 </button>
+             </div>
+         </div>
+ </div>
+ 
+
+<div class="page px-rem">
+  <div class="overflow-auto table-bordered rounded-t-md">
+    <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
+        <div class="overflow-auto shadow-md">
+            <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
+                <thead>
+                    <tr>
+                        <ng-container
+                        *ngFor="let item of ['พนักงาน','ระดับ 1','ระดับ 2','ระดับ 3','ระดับ 4','ระดับ 5','Action']; let f = first; let l = last; let i = index">
+                            <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
+                                [class.!text-center]="f||l">
+                                <span class="text-sm">{{ item }}</span>
+                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && !l">
+                                  <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
+                                      height="13" fill="currentColor" viewBox="0 0 16 16">
+                                      <path
+                                          d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
+                                      </path>
+                                  </svg>
+                              </div>
+                              <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==2">
+                                  <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
+                                      height="13" fill="currentColor" viewBox="0 0 16 16">
+                                      <path
+                                          d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
+                                      </path>
+                                  </svg>
+                              </div>
+                            </th>
+                        </ng-container>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let item of[
+                    ['สามารถ', 'สามารถ','สามารถ','สามารถ','',''],
+                    ['สามารถ', 'สามารถ','สามารถ','สามารถ','',''],
+                    ['สามารถ', 'สามารถ','สามารถ','','',''],
+                    ['สามารถ', 'สามารถ','สามารถ','สามารถ','',''],
+                    ['สามารถ', 'สามารถ','สามารถ','','','สามารถ'],
+                    ['สามารถ', 'สามารถ','สามารถ','สามารถ','สามารถ','']];let i = index">
+                        <td style="font-size: 12px; width: 15%;">{{item[0]}}</td>
+                        <td style="font-size: 12px; width: 150px;">{{item[1]}}</td>
+                        <td style="font-size: 12px; width: 150px;">{{item[2]}}</td>
+                        <td style="font-size: 12px; width: 150px;">{{item[3]}}</td>
+                        <td style="font-size: 12px; width: 150px;">{{item[4]}}</td>
+                        <td style="font-size: 12px; width: 150px;">{{item[5]}}</td>
+                        <td class="flex justify-center">
+                            <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#assigning-approvers-modal-edit"></i>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+  </div>
+  <div class="body-content" style="margin-top: 20px;">
+      <ul class="nav-tabs">
+          <div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
+              <div class="box-body">
+                  <nav class="pagination-style-3 overflow-auto">
+                    <ul class="ti-pagination">
+                      <li>
+                          <a aria-label="anchor" class="page-link" href="javascript:void(0);">
+                              <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
+                          </a>
+                      </li>
+                      <li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
+                      <li><a class="page-link" href="javascript:void(0);">2</a></li>
+                      <li><a class="page-link" href="javascript:void(0);">3</a></li>
+                      <li><a class="page-link" href="javascript:void(0);">4</a></li>
+                      <li><a class="page-link" href="javascript:void(0);">5</a></li>
+                      <li><a class="page-link" href="javascript:void(0);">...</a></li>
+                      <li><a class="page-link" href="javascript:void(0);">31</a></li>
+                      <li>
+                          <a aria-label="anchor" class="page-link" href="javascript:void(0);">
+                              <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
+                          </a>
+                      </li>
+                    </ul>
+                  </nav>
+              </div>
+          </div>
+      </ul>
+      <ul class="nav-tabs mt-1">
+          <p>Show 1 to 10 of 50 items</p>
+      </ul>
+  </div>
+</div>
+
+
+
+<div id="assigning-approvers-modal-edit" class="hs-overlay hidden ti-modal">
+    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+        <div class="max-h-full overflow-hidden ti-modal-content">
+            <div class="ti-modal-header">
+                <h3 class="text-xxl font-bold text-primary">
+                    กำหนดผู้อนุมัติ
+                </h3>
+                <div class="flex justify-end">
+                    <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                        data-hs-overlay="#assigning-approvers-modal-edit">
+                        <span class="sr-only">Close</span>
+                        <i class="ti ti-circle-x fs-xxl"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="ti-modal-center">
+                <div class="flex justify-end" style="padding-right: 1rem;">
+                    <div class="px-1">
+                        <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
+                            <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
+                                xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
+                                transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
+                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                                <g id="SVGRepo_iconCarrier">
+                                    <path d="M15 49A24 24 0 0 1 32 8"></path>
+                                    <path d="M49 15a24 24 0 0 1-17 41"></path>
+                                    <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
+                                    <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
+                                </g>
+                            </svg>
+                            Clear
+                        </button>
+                    </div>
+                    <div class="px-1">
+                        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                            <i class="ti ti-book fs-l"></i>
+                            Help
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="ti-modal-body mt-1">
+                <label for="input-label" class="ti-form-label">ระดับพนักงาน</label>
+                    <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="พนักงานระดับ 01-02" >
+                    <label class="ti-form-label mt-2rem">ผู้อนุมัติอันดับที่ 1</label>
+                    <div class="flex">
+                        <div class="relative flex rounded-md w-2/3">
+                            <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 2.5rem;" value="">
+                            <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
+                                <button type="button" class="flex items-center text-gray-500 dark:text-white/70"  data-hs-overlay="#assigning-approvers-table-modal-edit">
+                                    <i class="ri-search-line cursor-pointer text-gray"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <label class="ti-form-label mt-2rem">ผู้อนุมัติอันดับที่ 2</label>
+                    <div class="flex">
+                        <div class="relative flex rounded-md w-2/3">
+                            <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 2.5rem;" value="">
+                            <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
+                                <button type="button" class="flex items-center text-gray-500 dark:text-white/70"  data-hs-overlay="#assigning-approvers-table-modal-edit">
+                                    <i class="ri-search-line cursor-pointer text-gray"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <label class="ti-form-label mt-2rem">ผู้อนุมัติอันดับที่ 3</label>
+                    <div class="flex">
+                        <div class="relative flex rounded-md w-2/3">
+                            <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 2.5rem;" value="">
+                            <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
+                                <button type="button" class="flex items-center text-gray-500 dark:text-white/70"  data-hs-overlay="#assigning-approvers-table-modal-edit">
+                                    <i class="ri-search-line cursor-pointer text-gray"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <label class="ti-form-label mt-2rem">ผู้อนุมัติอันดับที่ 4</label>
+                    <div class="flex">
+                        <div class="relative flex rounded-md w-2/3">
+                            <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 2.5rem;" value="">
+                            <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
+                                <button type="button" class="flex items-center text-gray-500 dark:text-white/70"  data-hs-overlay="#assigning-approvers-table-modal-edit">
+                                    <i class="ri-search-line cursor-pointer text-gray"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <label class="ti-form-label mt-2rem">ผู้อนุมัติอันดับที่ 5</label>
+                    <div class="flex">
+                        <div class="relative flex rounded-md w-2/3">
+                            <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 2.5rem;" value="">
+                            <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
+                                <button type="button" class="flex items-center text-gray-500 dark:text-white/70"  data-hs-overlay="#assigning-approvers-table-modal-edit">
+                                    <i class="ri-search-line cursor-pointer text-gray"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                <div class="flex justify-end mt-3rem mb-1rem space-x-4">
+                    <button type="button"
+                        class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                        data-hs-overlay="#assigning-approvers-modal-edit">
+                        ย้อนกลับ
+                    </button>
+                    <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                    data-hs-overlay="#assigning-approvers-alert-edit-modal">
+                        บันทึกข้อมูล
+                    </a>
+                </div>
+            </div>
+        </div>
+      </div>
+</div>
+
+<div id="assigning-approvers-table-modal-edit" class="hs-overlay hidden ti-modal">
+    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
+        <div class="max-h-full overflow-hidden ti-modal-content">
+            <div class="ti-modal-header">
+                <h3 class="text-xxl font-bold text-primary">
+                    รายชื่อพนักงาน
+                </h3>
+                <div class="flex justify-end">
+                    <button  type="button"
+                        class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                        data-hs-overlay="#assigning-approvers-modal-edit">
+                        <span class="sr-only">Close</span>
+                        <i class="ti ti-circle-x fs-xxl"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="ti-modal-body">
+                <div class="flex justify-end pb-1rem">
+                    <div class="px-1">
+                        <div class="relative shadow-md">
+                            <input type="text" id="hs-leading-icon" name="hs-leading-icon"
+                                class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
+                                placeholder="Search by No. or Name">
+                            <div
+                                class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
+                                <i class="ri-search-line text-gray"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="px-1">
+                        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                            <i class="ti ti-book fs-l"></i>
+                            Help
+                        </button>
+                    </div>
+                </div>
+                <div class="overflow-auto table-bordered" style="border-radius: 5px;">
+                    <div class="overflow-auto border">
+                        <table class="ti-custom-table ti-custom-table-head">
+                            <thead>
+                                <tr>
+                                    <ng-container
+                                    *ngFor="let item of ['รหัส','ชื่อ','นามสกุล','ตำเเหน่ง','หน่วยงาน','Action']; let f = first; let l = last; let i = index">
+                                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
+                                            [class.!text-center]="f||l">
+                                            <span class="text-sm">{{ item }}</span>
+                                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==1">
+                                            <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
+                                                height="13" fill="currentColor" viewBox="0 0 16 16">
+                                                <path
+                                                    d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
+                                                </path>
+                                            </svg>
+                                        </div>
+                                        <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==2">
+                                            <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
+                                                height="13" fill="currentColor" viewBox="0 0 16 16">
+                                                <path
+                                                    d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
+                                                </path>
+                                            </svg>
+                                        </div>
+                                        </th>
+                                    </ng-container>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr *ngFor="let item of[
+                                ['10001', 'สามารถ','พยัคร้าย','Human Resource Development Officer','BU5'],
+                                ['10002', 'สมหวัง','ฟันหลุด','Human Resource Development Officer','BU5'],
+                                ['10003', 'สามารถ','พยัคร้าย','Human Resource Development Officer','BU5'],
+                                ['10004', 'สมหวัง','ฟันหลุด','Human Resource Development Officer','BU5'],
+                                ['10005', 'สามารถ','พยัคร้าย','Human Resource Development Officer','BU5'],
+                                ['10006', 'สมจิต','ฟันหลอ','Human Resource Development Officer','BU5'],];let i = index">
+                                    <td class="flex justify-center" style="font-size: 12px;">{{item[0]}}</td>
+                                    <td style="font-size: 12px; width: 20%;">{{item[1]}}</td>
+                                    <td style="font-size: 12px; width: 20%;">{{item[2]}}</td>
+                                    <td style="font-size: 12px; width: 20%; word-break: break-word; white-space: normal;">
+                                        {{item[3]}}
+                                    </td>
+                                    <td style="font-size: 12px; width: 20%;">{{item[4]}}</td>
+                                    <td class="flex justify-center">
+                                        <div class="px-1">
+                                            <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
+                                                data-hs-overlay="#assigning-approvers-modal-edit">
+                                                <i class="ri-add-line"></i>
+                                                Select
+                                            </button>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="body-content" style="margin-top: 20px;">
+                    <ul class="nav-tabs">
+                        <div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center">
+                            <div class="box-body">
+                                <nav class="pagination-style-3 overflow-auto">
+                                  <ul class="ti-pagination">
+                                    <li>
+                                        <a aria-label="anchor" class="page-link" href="javascript:void(0);">
+                                            <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
+                                        </a>
+                                    </li>
+                                    <li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
+                                    <li><a class="page-link" href="javascript:void(0);">2</a></li>
+                                    <li><a class="page-link" href="javascript:void(0);">3</a></li>
+                                    <li><a class="page-link" href="javascript:void(0);">4</a></li>
+                                    <li><a class="page-link" href="javascript:void(0);">5</a></li>
+                                    <li><a class="page-link" href="javascript:void(0);">...</a></li>
+                                    <li><a class="page-link" href="javascript:void(0);">31</a></li>
+                                    <li>
+                                        <a aria-label="anchor" class="page-link" href="javascript:void(0);">
+                                            <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
+                                        </a>
+                                    </li>
+                                  </ul>
+                                </nav>
+                            </div>
+                        </div>
+                    </ul>
+                    <ul class="nav-tabs mt-1">
+                        <p>Show 1 to 10 of 50 items</p>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="assigning-approvers-alert-edit-modal" class="hs-overlay hidden ti-modal">
+  <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
+      <div class="max-h-full overflow-hidden ti-modal-content w-full">
+          <div class="ti-modal-header">
+              <h3 class="text-xxl font-bold text-primary">
+                  แจ้งเตือน
+              </h3>
+              <div class="flex justify-end">
+                  <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                      data-hs-overlay="#assigning-approvers-alert-edit-modal">
+                      <span class="sr-only">Close</span>
+                      <i class="ti ti-circle-x fs-xxl"></i>
+                  </button>
+              </div>
+          </div>
+          <div class="ti-modal-body ">
+              <p class="mt-1 text-gray-800 dark:text-white/70">
+                  ยืนยันการเเก้ไขข้อมูลหรือไม่
+              </p>
+
+              <div class="flex justify-end mt-2rem mb-1rem">
+                  <button type="button"
+                      class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                      data-hs-overlay="#assigning-approvers-modal-edit">
+                      ย้อนกลับ
+                  </button>
+                  <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                      data-hs-overlay="#assigning-approvers-alert-edit-modal" (click)="addUser();showSuccessEdit()">
+                      บันทึกข้อมูล
+                  </a>
+              </div>
+          </div>
+      </div>
+  </div>
+</div>
\ No newline at end of file

src/app/components/performance-management-evaluation/assessment-management/assigning-approvers/assigning-approvers.component.scss

+.button-clear {
+    position: absolute;
+    top: 96px;
+    z-index: 1;
+    right: 41vw;
+  }
+  .button-help {
+    position: absolute;
+    top: 0px;
+    z-index: 1;
+    right: 0vw;
+    margin: 4.2rem;
+    margin-right: 10px; /* เพิ่มใหม่ 12/16*/
+  }
+  
+  table.ti-custom-table th {
+    height: 60px;
+  }
+  
+  table.ti-custom-table thead {
+    height: 50px;
+  }
+  table.ti-custom-table thead th span {
+    font-size: 12px;
+    font-weight: bold;
+  }
+  a.custom-link {
+    padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
+  }
+  /* สไตล์ของแถบเมนู */
+  .nav-tabs {
+    display: flex;
+    width: 100%;
+    cursor: pointer;
+    margin-bottom: 10px;
+    height: 20%;
+  }
+  
+  .nav-item {
+    list-style: none;
+    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+  }
+  
+  .nav-link {
+    text-decoration: none;
+    padding: 10px 20px;
+    display: inline-block;
+    font-size: large;
+    border-width: 2px 2px 0px 2px;
+    border-style: solid;
+    border-color: #ccc;
+    border-radius: 5px 5px 0px 0px;
+  }
+  
+  .nav-link:hover {
+    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+  }
+  
+  .nav-link.active {
+    color: #ffffff; /* สีตัวอักษรในสถานะ active */
+    font-size: large;
+    border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
+    background-color: rgb(var(--color-primary));
+    border-width: 2px 2px 0px 2px;
+    border-style: solid;
+    border-color: rgb(var(--color-primary));
+    border-radius: 5px 5px 0px 0px;
+  }
+  
+  .tab-content {
+    margin-top: 20px;
+  }
+  
+  .tab-pane.active {
+    display: block;
+  }
+  
+  .nav-item-text {
+    list-style: none;
+    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+  }
+  .nav-link-text {
+    text-decoration: none;
+    display: inline-block;
+    font-size: large;
+    color: #569bf5;
+    border-bottom: 2px solid #569bf5;
+    line-height: 0.8;
+  }
+  .ti-pagination .page-link.active {
+    background-color: #569bf5;
+    color: white;
+    border-radius: 50%;
+    padding: 8px 12px;
+  }
+  .box-body{
+    padding: 0rem;
+  }
+  .page{
+    min-height: 0vh;
+  }
+  
+  .ti-modal {
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .header-title-type {
+    width: 100%;
+    min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
+    // margin-top: 50px;
+    // margin-bottom: 16px;
+    justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
+    align-items: center; /* จัดกลางแนวตั้ง */
+    padding-top: 50px;
+    padding-bottom: 1rem;
+  }
\ No newline at end of file

src/app/components/performance-management-evaluation/assessment-management/assigning-approvers/assigning-approvers.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+    selector: 'app-assigning-approvers',
+    templateUrl: './assigning-approvers.component.html',
+    styleUrls: ['./assigning-approvers.component.scss']
+})
+export class AssigningApproversComponent {
+  @Input() pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'การจัดการประเมิณ', 'กำหนดผู้อนุมัติ'];
+  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
+  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
+  
+
+  // ฟังก์ชันในการเปลี่ยนแท็บ
+  changeTab(tab: { id: string, text: string }) {
+    this.sendPathTitle.emit(['การประเมินจัดการประสิทธิภาพ', 'การจัดการประเมิณ', tab.text]);
+    this.activeTab = tab.id;
+  }
+
+  // การจัดการการเปิดปิด modal
+  modalOptions: {
+    [nameModal: string]: {
+      isModalOpen: boolean;
+      modalSize: string;
+      backdropClose: boolean;
+    };
+  } = {
+    "add": {
+      isModalOpen: false,
+      modalSize: 'm',
+      backdropClose: true,
+    },
+    "edit": {
+      isModalOpen: false,
+      modalSize: 'm',
+      backdropClose: true,
+    }
+  };
+
+  openModal(name: string, size: string, closeOnBackdrop?: boolean) {
+    this.modalOptions[name].modalSize = size;
+    this.modalOptions[name].backdropClose = closeOnBackdrop || false;
+    this.modalOptions[name].isModalOpen = true;
+    this.currentModal = name;  // ตั้งค่าค่าของ currentModal เป็น 'add' หรือ 'edit'
+    document.body.style.overflow = 'hidden';
+  }
+
+  closeModal(name: string) {
+    this.modalOptions[name].isModalOpen = false;
+    if (!this.isAnyModalOpen()) {
+      document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
+    }
+  }
+
+  isAnyModalOpen(): boolean {
+    return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่
+  }
+
+  // ฟังก์ชัน toggle checkbox
+  isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
+  
+  toggleCheckbox() {
+    this.isChecked = !this.isChecked; // สลับสถานะ
+  }
+
+  // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
+  addUser() {
+    console.log('เพิ่มผู้ใช้งาน');
+  }
+
+  deleteUser() {
+    console.log('ลบผู้ใช้งาน');
+  }
+
+  editUser() {
+    console.log('แก้ไขผู้ใช้งาน');
+  }
+  
+  currentModal = "";
+  
+  constructor(private toastr: ToastrService) { }
+
+  showSuccess() {
+    this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
+
+  showSuccessEdit() {
+    this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
+
+  showSuccessDelete() {
+    this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
+}

src/app/shared/services/navservice.ts

@@ -104,6 +104,11 @@ export class NavService implements OnDestroy {
       active: false,
       children: [
         { path: '/job-detail-management', title: 'ข้อมูลทั่วไป', type: 'link' },
+        { path: '/command-structure', title: 'โครงสร้างสายการบังคับบัญชา', type: 'link' },
+        { path: '/job-detail', title: 'รายละเอียดของงาน', type: 'link' },
+        { path: '/job-qualifications', title: 'คุณสมบัติที่จำเป็นต่อการปฏิบัติหน้าที่', type: 'link' },
+        { path: '/job-competency', title: 'ความรู้ ทักษะ ความสามารถในตำเเหน่งงาน', type: 'link' },
+        { path: '/job-position-indicators', title: 'ตัวชี้วัดของตำแหน่งงาน', type: 'link' },
       ],
     },
 
@@ -125,6 +130,22 @@ export class NavService implements OnDestroy {
         { path: '/dashboard/projects', title: 'รายงาน', type: 'link' },
       ],
     },
+    {
+      title: 'การประเมินจัดการประสิทธิภาพ',
+      type: 'sub',
+      selected: false,
+      active: false,
+      path: '/assessment-management',
+      children: [
+        { path: '', title: 'ทะเบียนกำหนดชื่อ', type: 'link' },
+        { path: '', title: 'ทะเบียนเกรด', type: 'link' },
+        { path: '', title: 'ปัจจัยการประเมินผล', type: 'link' },
+        { path: '/assessment-management', title: 'การจัดการการประเมิน', type: 'link' },
+        { path: '', title: 'รอบการประเมิน', type: 'link' },
+        { path: '', title: 'การตั่งค่า', type: 'link' },
+        { path: '', title: 'รายงาน', type: 'link' },
+      ],
+    },