tab ตั้งค่าผู้ใช้งาน เเละ tab อื่นๆ

src/app/components/account-settings/account-settings.component.html

+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <div class="head-title">
+        ตั้งค่าชื่อผู้ใช้งาน
+    </div>
+    <div class="body-content">
+        <ul class="nav-tabs">
+            <li class="nav-item" *ngFor="let item of [{id:'tab1',text:'สร้างชื่อผู้ใช้งาน'},
+            {id:'tab2',text:'กำหนดรหัสผ่าน'},
+            {id:'tab3',text:'จัดการผู้ใช้งาน (PL)'}]" (click)="changeTab(item)">
+                <a [class.active]="activeTab === item.id" class="nav-link">{{item.text}}</a>
+            </li>
+        </ul>
+        <div class="tab-content">
+            <div *ngIf="activeTab === 'tab1'" class="tab-pane">
+                <div class="mt-5">
+                    <app-employee-group-unit [pathTitle]="pathTitle"
+                        (sendPathTitle)="pathTitle=$event"></app-employee-group-unit>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/account-settings/account-settings.component.scss

+/* สไตล์ของแถบเมนู */
+.nav-tabs {
+    display: flex;
+    border-bottom: 2px solid #ccc; /* เส้นใต้ */
+    border-top: 2px solid #ccc;
+    width: 100%;
+    cursor: pointer;
+    border-top: 2px solid #ccc;
+}
+
+.nav-item {
+    list-style: none;
+    margin-right: 40px; /* ช่องว่างระหว่างเมนู */
+
+}
+
+.nav-link {
+    text-decoration: none;
+    padding: 10px 20px;
+    display: inline-block;
+    font-size: medium;
+    text-align: left;
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+.nav-link:hover {
+    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+}
+
+.nav-link.active {
+    color: #569bf5; /* สีตัวอักษรในสถานะ active */
+    font-size: medium;
+    border-bottom: 3.5px solid #569bf5; /* เส้นใต้ */
+}
+
+.tab-content {
+    margin-top: 20px;
+}
+
+.tab-pane.active {
+    display: block;
+}

src/app/components/account-settings/account-settings.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-account-settings',
+  templateUrl: './account-settings.component.html',
+  styleUrls: ['./account-settings.component.scss']
+})
+export class AccountSettingsComponent {
+  pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', 'สร้างรหัสผู้ใช้งาน']
+  activeTab: string = 'tab1';
+
+  // ฟังก์ชันในการเปลี่ยนแท็บ
+  changeTab(tab: { id: string, text: string }) {
+    this.pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', tab.text]
+    this.activeTab = tab.id
+  }
+}

src/app/components/account-settings/user-settings/user-settings.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/account-settings/user-settings/user-settings.component.ts

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

@@ -14,6 +14,7 @@ import { StocksComponent } from './stocks/stocks.component';
 import { CourseComponent } from './course/course.component';
 import { CompanyRegistrationComponent } from '../company-registration/company-registration.component';
 import { JobDescriptionComponent } from '../job-description/job-description.component';
+import { AccountSettingsComponent } from '../account-settings/account-settings.component';
 const routes: Routes = [
   {
     path: "",
@@ -34,6 +35,7 @@ const routes: Routes = [
       // myComponent
       { path: "company-registration", component: CompanyRegistrationComponent },
       { path: "job-description", component: JobDescriptionComponent },
+      { path: "account-settings", component: AccountSettingsComponent },
     ]
   }
 ];

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

@@ -33,6 +33,8 @@ import { JobDescriptionComponent } from '../job-description/job-description.comp
 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';
+import { AccountSettingsComponent } from '../account-settings/account-settings.component';
+import { UserSettingsComponent } from '../account-settings/user-settings/user-settings.component';
 @NgModule({
   declarations: [
     SalesComponent,
@@ -62,6 +64,8 @@ import { EmployeeCategories } from '../job-description/employee-categories/emplo
     PositionUnitComponent,
     EmployeeGroupUnit,
     EmployeeCategories,
+    AccountSettingsComponent,
+    UserSettingsComponent,
   ],
   imports: [
     CommonModule,

src/app/shared/services/navservice.ts

@@ -101,6 +101,13 @@ export class NavService implements OnDestroy {
       active: false,
       path: '/job-description'
     },
+    {
+      title: 'ตั้งค่าชื่อผู้ใช้',
+      type: 'link',
+      selected: false,
+      active: false,
+      path: '/account-settings'
+    },