การจัดการข้อมูลองค์กร>ข้อมูลลักษณะงาน>ประเภทพนักงาน

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

@@ -32,6 +32,7 @@ import { SectionRegistrationComponent } from '../company-registration/branch-bus
 import { JobDescriptionComponent } from '../job-description/job-description.component';
 import { PositionUnitComponent } from '../job-description/position/position-unit.component';
 import { EmployeeGroupUnit } from '../job-description/employee-group-unit/employee-group-unit.component';
+import { EmployeeCategories } from '../job-description/employee-categories/employee-categories.component';
 @NgModule({
   declarations: [
     SalesComponent,
@@ -60,6 +61,7 @@ import { EmployeeGroupUnit } from '../job-description/employee-group-unit/employ
     JobDescriptionComponent,
     PositionUnitComponent,
     EmployeeGroupUnit,
+    EmployeeCategories,
   ],
   imports: [
     CommonModule,

src/app/components/job-description/employee-categories/employee-categories.component.scss

+/* สไตล์ของแถบเมนู */
+.nav-tabs {
+    display: flex;
+    width: 100%;
+    cursor: pointer;
+    margin-bottom: 10px;
+  }
+  
+  .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;
+  }
\ No newline at end of file

src/app/components/job-description/employee-categories/employee-categories.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-employee-categories',
+  templateUrl: './employee-categories.component.html',
+  styleUrls: ['./employee-categories.component.scss']
+})
+export class EmployeeCategories {
+  @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/job-description/employee-group-unit/employee-group-unit.component.html

@@ -11,7 +11,7 @@
         <button type="button" class="button-blue-light"><i class="ri-add-line"></i>Add</button>
     </div>
     <div class="px-1">
-        <button type="button" class="button-red-light"><i class="ri-delete-bin-5-line"></i>Delete</button>
+        <button type="button" class="button-red-light"><i class="ri-delete-bin-6-line"></i> Delete</button>
     </div>
     
     <div class="px-1">

src/app/components/job-description/employee-group-unit/employee-group-unit.component.ts

@@ -6,13 +6,13 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   styleUrls: ['./employee-group-unit.component.scss']
 })
 export class EmployeeGroupUnit {
-  @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.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text])
     this.activeTab = tab.id;
   }
 }

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

@@ -28,6 +28,16 @@
                         (sendPathTitle)="pathTitle=$event"></app-position-unit>
                 </div>
             </div>
+            <div *ngIf="activeTab === 'tab3'" class="tab-pane">
+                <div class="mt-5">
+                </div>
+            </div>
+            <div *ngIf="activeTab === 'tab4'" class="tab-pane">
+                <div class="mt-5">
+                    <app-employee-categories [pathTitle]="pathTitle"
+                        (sendPathTitle)="pathTitle=$event"></app-employee-categories>
+                </div>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file

src/styles.scss

@@ -546,3 +546,7 @@ ngx-dropzone {
   display: flex;
   justify-content: center;
 }
+.body-table-left{
+  display: flex;
+  margin-left: 20px;
+}