การจัดการข้อมูลองค์กร>ทะเบียนบริษัท>สาขาและหน่วยธุรกิจ>ส่วนย่อย1 เเละส่วนย่อย3

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

@@ -20,5 +20,20 @@
         <div *ngIf="activeTab === 'tab2'" class="tab-pane">
             <app-department-list></app-department-list>
         </div>
+        <div *ngIf="activeTab === 'tab3'" class="tab-pane">
+        
+        </div>
+        <div *ngIf="activeTab === 'tab4'" class="tab-pane">
+            <app-sub-department-one></app-sub-department-one>
+        </div>
+        <div *ngIf="activeTab === 'tab5'" class="tab-pane">
+        
+        </div>
+        <div *ngIf="activeTab === 'tab6'" class="tab-pane">
+            <app-sub-department-three></app-sub-department-three>
+        </div>
+        <div *ngIf="activeTab === 'tab7'" class="tab-pane">
+         
+        </div>
     </div>
 </div>
\ No newline at end of file

src/app/components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.scss

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

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

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-sub-department-one',
+  templateUrl: './sub-department-one.component.html',
+  styleUrls: ['./sub-department-one.component.scss']
+})
+export class SubDepartmentOneComponent {
+  @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/company-registration/branch-business-unit/sub-department-three/sub-department-three.component.scss

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

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

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-sub-department-three',
+  templateUrl: './sub-department-three.component.html',
+  styleUrls: ['./sub-department-three.component.scss']
+})
+export class SubDepartmentThreeComponent {
+  @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/dashboard/dashboard.module.ts

@@ -24,6 +24,8 @@ import { CompanyRegistrationComponent } from '../company-registration/company-re
 import { DepartmentRegisterComponent } from '../company-registration/branch-business-unit/department-register/department-register.component';
 import { BranchBusinessUnitComponent } from '../company-registration/branch-business-unit/branch-business-unit.component';
 import { DepartmentListComponent } from '../company-registration/branch-business-unit/department-list/department-list.component';
+import { SubDepartmentOneComponent} from '../company-registration/branch-business-unit/sub-department-one/sub-department-one.component';
+import { SubDepartmentThreeComponent} from '../company-registration/branch-business-unit/sub-department-three/sub-department-three.component';
 @NgModule({
   declarations: [
     SalesComponent,
@@ -44,6 +46,8 @@ import { DepartmentListComponent } from '../company-registration/branch-business
     BranchBusinessUnitComponent,
     DepartmentRegisterComponent,
     DepartmentListComponent,
+    SubDepartmentOneComponent,
+    SubDepartmentThreeComponent,
   ],
   imports: [
     CommonModule,