portal

src/app/app.routes.ts

@@ -15,9 +15,6 @@ import { DashboardViewerComponent } from './portal-manage/dashboard-viewer/dashb
 import { UnauthorizedComponent } from './core/components/unauthorized.component';
 
 export const App_Route: Route[] = [
-  { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
-  { path: '', component: ContentLayoutComponent, children: content},
-
   {
     path: 'auth/login',
     component: LoginComponent
@@ -42,12 +39,14 @@ export const App_Route: Route[] = [
       }
     ]
   },
-  { 
-    path: 'home', 
-    component: HomeComponent 
+  {
+    path: 'home',
+    component: HomeComponent,
+    canActivate: [authGuard]
   },
   {
     path: 'unauthorized',
     component: UnauthorizedComponent
   },
-]
\ No newline at end of file
+  { path: '', component: ContentLayoutComponent, children: content},
+]

src/app/core/guards/auth.guard.ts

@@ -11,5 +11,5 @@ export const authGuard: CanActivateFn = (route, state) => {
   }
 
   // Redirect to the login page
-  return router.parseUrl('/auth/login');
+  return router.parseUrl('/auth/simple-login');
 };

src/app/core/services/auth.service.ts

@@ -11,15 +11,21 @@ export class AuthService {
 
   // In a real app, you would check for a token in localStorage
   constructor() {
-    const token = localStorage.getItem('authToken');
-    if (token) {
+    this.checkAuthStatus();
+  }
+
+  private checkAuthStatus(): void {
+    const authToken = localStorage.getItem('authToken');
+    const jwtToken = localStorage.getItem('jwtToken');
+    
+    if (authToken || jwtToken) {
       this._isLoggedIn = true;
-      // You might decode the token to get roles
       this._userRoles = ['ADMIN', 'MYHR_PLUS_USER']; 
     }
   }
 
   get isLoggedIn(): boolean {
+    this.checkAuthStatus(); // Check every time
     return this._isLoggedIn;
   }
 
@@ -43,5 +49,6 @@ export class AuthService {
     this._isLoggedIn = false;
     this._userRoles = [];
     localStorage.removeItem('authToken');
+    localStorage.removeItem('jwtToken');
   }
 }

src/app/portal-manage/company-management/company-management.component.ts

-import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { TokenService } from '../../shared/services/token.service';
-import { CompanyService } from '../services/company.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-company-management',
-  templateUrl: './company-management.component.html',
-  styleUrls: ['./company-management.component.css']
+  template: `
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title">Company Management</h4>
+            </div>
+            <div class="card-body">
+              <p>ยินดีต้อนรับสู่ระบบจัดการบริษัท</p>
+              <p>ระบบจัดการข้อมูลบริษัทและพนักงาน</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      margin: 20px 0;
+    }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+  `]
 })
-export class InstallManagementComponent implements OnInit {
-  companyId = ""
-  constructor(private router: Router, private route: ActivatedRoute, private comService: CompanyService, private tokenService: TokenService) {
-
-  }
-
-  ngOnInit() {
-    this.companyId = this.route.snapshot.paramMap.get('companyId')!;
-    this.comService.getById(this.companyId).subscribe(result => {
-      this.tokenService.saveSelectCompany(result);
-      // this.router.navigate(["/company",""]);
-    })
-  }
+export class CompanyManagementComponent {
+  constructor() { }
 }

src/app/portal-manage/company-management/company-management.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { InstallManagementComponent } from './company-management.component';
 import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '../../shared/shared.module';
-
-export const companyRoutes: Routes = [
-
-    {
-      path: 'company/home/:companyId',
-      loadComponent: () =>
-        import('./home-installer/home-installer.component').then((m) => m.HomeInstallerComponent),
-    },
-    {
-      path: 'company/company-info',
-      loadComponent: () =>
-        import('./company-info/company-info.component').then((m) => m.CompanyInfoComponent),
-    },
-    {
-      path: 'company/company-location',
-      loadComponent: () =>
-        import('./company-location/company-location.component').then((m) => m.CompanyLocationComponent),
-    },
-    {
-      path: 'company/company-emp',
-      loadComponent: () =>
-        import('./company-emp/company-emp.component').then((m) => m.CompanyEmpComponent),
-    },
-    {
-      path: 'company/timestamp-log',
-      loadComponent: () =>
-        import('./timestamp-log/timestamp-log.component').then((m) => m.TimestampLogComponent),
-    },
-    {
-      path: 'company/timestamp-log/:company_employeeId',
-      loadComponent: () =>
-        import('./timestamp-log/timestamp-log.component').then((m) => m.TimestampLogComponent),
-    },
-    {
-      path: 'company/timestamp-face',
-      loadComponent: () =>
-        import('./enroll-face/enroll-face.component').then((m) => m.EnrollFaceComponent),
-    },
-    {
-      path: 'company/warning-timestamp-log',
-      loadComponent: () =>
-        import('./warning-timetamp/warning-timetamp.component').then((m) => m.WarningTimetampComponent),
-    },
 
+import { CompanyManagementComponent } from './company-management.component';
 
+export const routes: Routes = [
+  {
+    path: '',
+    component: CompanyManagementComponent
+  }
 ];
 
-
 @NgModule({
+  declarations: [
+    CompanyManagementComponent
+  ],
   imports: [
     CommonModule,
-    RouterModule.forChild(companyRoutes)
+    RouterModule.forChild(routes)
   ],
-  exports: [RouterModule],
-  declarations: [InstallManagementComponent]
+  exports: [
+    CompanyManagementComponent
+  ]
 })
 export class CompanyManagementModule {
-  static routes = companyRoutes;
+  static routes = routes;
 }

src/app/portal-manage/dashboard-management/dashboard-management.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+
+import { DashboardManagementComponent } from './dashboard-management.component';
+import { DatasetPickerComponent } from './dataset-picker.component';
+import { WidgetConfigComponent } from './widget-config/widget-config.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: DashboardManagementComponent
+  }
+];
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    DashboardManagementComponent,
+    DatasetPickerComponent,
+    WidgetConfigComponent
+  ],
+  exports: []
+})
+export class DashboardManagementModule {
+  static routes = routes;
+}

src/app/portal-manage/meeting-booking/meeting-booking.component.html

@@ -114,7 +114,7 @@
                   <mat-card>
                     <mat-card-header>
                       <mat-card-title>ช่วงเวลาที่ว่าง</mat-card-title>
-                      <mat-card-subtitle *ngIf="selectedRoom">ห้อง: {{ (rooms$ | async)?.find(r => r.id === selectedRoom)?.name }}</mat-card-subtitle>
+                      <mat-card-subtitle *ngIf="selectedRoom">ห้อง: {{ getRoomName(selectedRoom) }}</mat-card-subtitle>
                     </mat-card-header>
                     <mat-card-content>
                       <div *ngIf="isLoading" class="text-center">
@@ -154,7 +154,7 @@
                     </mat-card-header>
                     <mat-card-content>
                       <div class="table-responsive">
-                        <table mat-table [dataSource]="bookings$ | async" class="w-100">
+                        <table mat-table [dataSource]="(bookings$ | async) || []" class="w-100">
                           <ng-container matColumnDef="title">
                             <th mat-header-cell *matHeaderCellDef>หัวข้อ</th>
                             <td mat-cell *matCellDef="let booking">{{ booking.title }}</td>

src/app/portal-manage/meeting-booking/meeting-booking.component.ts

@@ -67,6 +67,8 @@ export class MeetingBookingComponent implements OnInit {
 
   displayedColumns: string[] = ['title', 'room', 'startTime', 'endTime', 'organizer', 'status', 'actions'];
 
+  separatorKeysCodes: number[] = [13, 188]; // ENTER and COMMA key codes
+
   constructor(
     private meetingBookingService: MeetingBookingService,
     private fb: FormBuilder,
@@ -220,4 +222,15 @@ export class MeetingBookingComponent implements OnInit {
       default: return 'ไม่ทราบสถานะ';
     }
   }
+
+  getRoomName(roomId: string): string {
+    let roomName = 'ไม่ระบุ';
+    this.rooms$.subscribe(rooms => {
+      const room = rooms.find(r => r.id === roomId);
+      if (room) {
+        roomName = room.name;
+      }
+    });
+    return roomName;
+  }
 }

src/app/portal-manage/menu-permission-management/menu-permission-management.component.html

@@ -41,7 +41,7 @@
                   <mat-card>
                     <mat-card-header>
                       <mat-card-title>สิทธิ์การเข้าถึงเมนู</mat-card-title>
-                      <mat-card-subtitle>กำหนดสิทธิ์สำหรับบทบาท: {{ roles.find(r => r.id === selectedRoleId)?.name }}</mat-card-subtitle>
+                      <mat-card-subtitle>กำหนดสิทธิ์สำหรับบทบาท: {{ getRoleName(selectedRoleId) }}</mat-card-subtitle>
                     </mat-card-header>
                     <mat-card-content>
                       <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="permission-tree">
@@ -118,7 +118,7 @@
                     <mat-label>เลือกผู้ใช้</mat-label>
                     <mat-select [(ngModel)]="selectedUserId">
                       <mat-option *ngFor="let user of users" [value]="user.id">
-                        {{ user.name }} ({{ roles.find(r => r.id === user.roleId)?.name }})
+                        {{ user.name }} ({{ getRoleName(user.roleId) }})
                       </mat-option>
                     </mat-select>
                   </mat-form-field>
@@ -143,7 +143,7 @@
                   <mat-card>
                     <mat-card-header>
                       <mat-card-title>สิทธิ์การเข้าถึงเมนู</mat-card-title>
-                      <mat-card-subtitle>กำหนดสิทธิ์สำหรับผู้ใช้: {{ users.find(u => u.id === selectedUserId)?.name }}</mat-card-subtitle>
+                      <mat-card-subtitle>กำหนดสิทธิ์สำหรับผู้ใช้: {{ getUserName(selectedUserId) }}</mat-card-subtitle>
                     </mat-card-header>
                     <mat-card-content>
                       <p class="text-info">

src/app/portal-manage/menu-permission-management/menu-permission-management.component.ts

@@ -55,8 +55,8 @@ interface MenuNode extends MenuHierarchy {
   styleUrls: ['./menu-permission-management.component.scss']
 })
 export class MenuPermissionManagementComponent implements OnInit {
-  treeControl = new NestedTreeControl<MenuNode>(node => node.children);
-  dataSource = new MatTreeNestedDataSource<MenuNode>();
+  treeControl = new NestedTreeControl<any>(node => node.children);
+  dataSource = new MatTreeNestedDataSource<any>();
 
   selectedRoleId: string = '';
   selectedUserId: string = '';
@@ -176,8 +176,8 @@ export class MenuPermissionManagementComponent implements OnInit {
         permissions: node.permissions
       });
 
-      if (node.children) {
-        permissions.push(...this.extractMenuPermissions(node.children));
+      if (node.children && Array.isArray(node.children)) {
+        permissions.push(...this.extractMenuPermissions(node.children as any[]));
       }
     });
 
@@ -187,4 +187,14 @@ export class MenuPermissionManagementComponent implements OnInit {
   resetPermissions(): void {
     this.loadMenuHierarchy();
   }
+
+  getRoleName(roleId: string): string {
+    const role = this.roles.find(r => r.id === roleId);
+    return role ? role.name : 'ไม่ระบุ';
+  }
+
+  getUserName(userId: string): string {
+    const user = this.users.find(u => u.id === userId);
+    return user ? user.name : 'ไม่ระบุ';
+  }
 }

src/app/portal-manage/myface/attendance/myface-attendance.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myface-attendance',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">ระบบลงเวลา</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบลงเวลาด้วยใบหน้าสำหรับ MyFace</p>
+        <div class="mt-4">
+          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
+            ลงเวลาด้วยใบหน้า
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MyfaceAttendanceComponent { }

src/app/portal-manage/myface/dashboard/myface-dashboard.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-myface-dashboard',
+  template: `
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title">myFace Dashboard</h4>
+            </div>
+            <div class="card-body">
+              <p>ยินดีต้อนรับสู่ระบบ myFace</p>
+              <p>ระบบจัดการใบหน้าและความปลอดภัย</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      margin: 20px 0;
+    }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+  `]
+})
+export class MyfaceDashboardComponent {
+  constructor() { }
+}

src/app/portal-manage/myface/face-management/myface-face-management.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myface-face-management',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">จัดการข้อมูลใบหน้า</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการข้อมูลใบหน้าสำหรับ MyFace</p>
+        <div class="mt-4">
+          <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded mr-2">
+            เพิ่มใบหน้า
+          </button>
+          <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded">
+            ลบใบหน้า
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MyfaceFaceManagementComponent { }

src/app/portal-manage/myface/face-recognition/myface-face-recognition.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myface-face-recognition',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">ระบบจดจำใบหน้า</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจดจำใบหน้าสำหรับ MyFace</p>
+        <div class="mt-4">
+          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
+            เริ่มจดจำใบหน้า
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MyfaceFaceRecognitionComponent { }

src/app/portal-manage/myface/myface.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-myface',
-  templateUrl: './myface.component.html',
-  styleUrls: ['./myface.component.css']
+  template: `
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title">myFace</h4>
+            </div>
+            <div class="card-body">
+              <router-outlet></router-outlet>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      margin: 20px 0;
+    }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+  `]
 })
-export class MyfaceComponent implements OnInit {
-
+export class MyfaceComponent {
   constructor() { }
-
-  ngOnInit() {
-  }
-
 }

src/app/portal-manage/myface/myface.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MyfaceComponent } from './myface.component';
 import { RouterModule, Routes } from '@angular/router';
 
-export const myface: Routes = [
+import { MyfaceComponent } from './myface.component';
+import { MyfaceDashboardComponent } from './dashboard/myface-dashboard.component';
+
+export const routes: Routes = [
   {
-    path: "myface", children:[
+    path: '',
+    component: MyfaceComponent,
+    children: [
       {
         path: 'dashboard',
-      loadComponent: () =>
-        import('./dashboard/dashboard.component').then((m) => m.DashboardComponent),
+        component: MyfaceDashboardComponent
       },
+      {
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full'
+      }
     ]
   }
-]
+];
 
 @NgModule({
+  declarations: [
+    MyfaceComponent,
+    MyfaceDashboardComponent
+  ],
   imports: [
     CommonModule,
-    RouterModule.forChild(myface),
+    RouterModule.forChild(routes)
   ],
-  declarations: [MyfaceComponent]
+  exports: [
+    MyfaceComponent
+  ]
 })
 export class MyfaceModule {
-  static routes = myface;
- }
+  static routes = routes;
+}

src/app/portal-manage/myface/myface.routes.ts

+import { Routes } from '@angular/router';
+import { MyfaceComponent } from './myface.component';
+import { MyfaceDashboardComponent } from './dashboard/myface-dashboard.component';
+
+export const MYFACE_ROUTES: Routes = [
+  {
+    path: '',
+    component: MyfaceComponent,
+    children: [
+      {
+        path: 'dashboard',
+        component: MyfaceDashboardComponent
+      },
+      {
+        path: 'face-recognition',
+        loadComponent: () => import('./face-recognition/myface-face-recognition.component').then(m => m.MyfaceFaceRecognitionComponent)
+      },
+      {
+        path: 'face-management',
+        loadComponent: () => import('./face-management/myface-face-management.component').then(m => m.MyfaceFaceManagementComponent)
+      },
+      {
+        path: 'attendance',
+        loadComponent: () => import('./attendance/myface-attendance.component').then(m => m.MyfaceAttendanceComponent)
+      },
+      {
+        path: 'attendance-report',
+        loadComponent: () => import('./reports/myface-attendance-report.component').then(m => m.MyfaceAttendanceReportComponent)
+      },
+      {
+        path: 'face-report',
+        loadComponent: () => import('./reports/myface-face-report.component').then(m => m.MyfaceFaceReportComponent)
+      },
+      {
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full'
+      }
+    ]
+  }
+];

src/app/portal-manage/myface/reports/myface-attendance-report.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myface-attendance-report',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">รายงานการลงเวลา</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>รายงานการลงเวลาด้วยใบหน้าสำหรับ MyFace</p>
+        <div class="mt-4">
+          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
+            ส่งออกรายงาน
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MyfaceAttendanceReportComponent { }

src/app/portal-manage/myface/reports/myface-face-report.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myface-face-report',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">รายงานการจดจำใบหน้า</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>รายงานการจดจำใบหน้าสำหรับ MyFace</p>
+        <div class="mt-4">
+          <button class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded">
+            ส่งออกรายงาน
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MyfaceFaceReportComponent { }

src/app/portal-manage/myhr-lite/dashboard/myhr-lite-dashboard.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-myhr-lite-dashboard',
+  template: `
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title">myHR-Lite Dashboard</h4>
+            </div>
+            <div class="card-body">
+              <p>ยินดีต้อนรับสู่ระบบ myHR-Lite</p>
+              <p>ระบบจัดการทรัพยากรบุคคลพื้นฐาน</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      margin: 20px 0;
+    }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+  `]
+})
+export class MyhrLiteDashboardComponent {
+  constructor() { }
+}

src/app/portal-manage/myhr-lite/employee/myhr-lite-employee.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myhr-lite-employee',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">จัดการพนักงาน</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการข้อมูลพนักงานสำหรับ MyHR-Lite</p>
+        <div class="mt-4">
+          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
+            เพิ่มพนักงาน
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MyhrLiteEmployeeComponent { }

src/app/portal-manage/myhr-lite/myhr-lite.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-myhr-lite',
-  templateUrl: './myhr-lite.component.html',
-  styleUrls: ['./myhr-lite.component.css']
+  template: `
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title">myHR-Lite</h4>
+            </div>
+            <div class="card-body">
+              <router-outlet></router-outlet>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      margin: 20px 0;
+    }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+  `]
 })
-export class MyhrLiteComponent implements OnInit {
-
+export class MyhrLiteComponent {
   constructor() { }
-
-  ngOnInit() {
-  }
-
 }

src/app/portal-manage/myhr-lite/myhr-lite.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MyhrLiteComponent } from './myhr-lite.component';
 import { RouterModule, Routes } from '@angular/router';
 
-export const myhrlite: Routes = [
+import { MyhrLiteComponent } from './myhr-lite.component';
+import { MyhrLiteDashboardComponent } from './dashboard/myhr-lite-dashboard.component';
+
+export const routes: Routes = [
   {
-    path: "myhr-lite", children:[
+    path: '',
+    component: MyhrLiteComponent,
+    children: [
       {
         path: 'dashboard',
-      loadComponent: () =>
-        import('./dashboard/dashboard.component').then((m) => m.DashboardComponent),
+        component: MyhrLiteDashboardComponent
       },
+      {
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full'
+      }
     ]
   }
-]
+];
 
 @NgModule({
+  declarations: [
+    MyhrLiteComponent,
+    MyhrLiteDashboardComponent
+  ],
   imports: [
     CommonModule,
-    RouterModule.forChild(myhrlite),
+    RouterModule.forChild(routes)
   ],
-  declarations: [MyhrLiteComponent],
-  exports: [RouterModule],
+  exports: [
+    MyhrLiteComponent
+  ]
 })
 export class MyhrLiteModule {
-  static routes = myhrlite;
- }
+  static routes = routes;
+}

src/app/portal-manage/myhr-lite/myhr-lite.routes.ts

+import { Routes } from '@angular/router';
+import { MyhrLiteComponent } from './myhr-lite.component';
+import { MyhrLiteDashboardComponent } from './dashboard/myhr-lite-dashboard.component';
+
+export const MYHR_LITE_ROUTES: Routes = [
+  {
+    path: '',
+    component: MyhrLiteComponent,
+    children: [
+      {
+        path: 'dashboard',
+        component: MyhrLiteDashboardComponent
+      },
+      {
+        path: 'employee',
+        loadComponent: () => import('./employee/myhr-lite-employee.component').then(m => m.MyhrLiteEmployeeComponent)
+      },
+      {
+        path: 'reports',
+        loadComponent: () => import('./reports/myhr-lite-reports.component').then(m => m.MyhrLiteReportsComponent)
+      },
+      {
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full'
+      }
+    ]
+  }
+];

src/app/portal-manage/myhr-lite/reports/myhr-lite-reports.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myhr-lite-reports',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">รายงาน</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบรายงานสำหรับ MyHR-Lite</p>
+        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div class="bg-blue-50 p-4 rounded-lg">
+            <h3 class="font-semibold text-blue-800">รายงานพนักงาน</h3>
+            <p class="text-sm text-blue-600">ข้อมูลพนักงานทั้งหมด</p>
+          </div>
+          <div class="bg-green-50 p-4 rounded-lg">
+            <h3 class="font-semibold text-green-800">รายงานการลา</h3>
+            <p class="text-sm text-green-600">สถิติการลาของพนักงาน</p>
+          </div>
+          <div class="bg-purple-50 p-4 rounded-lg">
+            <h3 class="font-semibold text-purple-800">รายงานเงินเดือน</h3>
+            <p class="text-sm text-purple-600">ข้อมูลเงินเดือนพนักงาน</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MyhrLiteReportsComponent { }

src/app/portal-manage/myhr-plus/attendance/myhr-plus-attendance.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myhr-plus-attendance',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">ระบบลงเวลา</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบลงเวลาสำหรับ MyHR-Plus</p></div></div>`,
+  styles: []
+})
+export class MyhrPlusAttendanceComponent { }

src/app/portal-manage/myhr-plus/department/myhr-plus-department.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myhr-plus-department',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการแผนก</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการแผนกสำหรับ MyHR-Plus</p></div></div>`,
+  styles: []
+})
+export class MyhrPlusDepartmentComponent { }

src/app/portal-manage/myhr-plus/employee/myhr-plus-employee.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myhr-plus-employee',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการข้อมูลพนักงาน</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการข้อมูลพนักงานสำหรับ MyHR-Plus</p></div></div>`,
+  styles: []
+})
+export class MyhrPlusEmployeeComponent { }

src/app/portal-manage/myhr-plus/leave/myhr-plus-leave.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myhr-plus-leave',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการการลา</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการการลาสำหรับ MyHR-Plus</p></div></div>`,
+  styles: []
+})
+export class MyhrPlusLeaveComponent { }

src/app/portal-manage/myhr-plus/myhr-plus.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MyhrPlusComponent } from './myhr-plus.component';
-import { RouterModule, Routes } from '@angular/router';
-
-const portalRoutes: Routes = [
-  {
-    path: 'category-list',
-    loadComponent: () =>
-      import('../my-portal/category-list/category-list.component').then((m) => m.CategorylistComponent),
-  },
-  {
-    path: 'view-list-excel',
-    loadComponent: () =>
-      import('../my-portal/category-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
-  },
-  {
-    path: 'view-list-doc',
-    loadComponent: () =>
-      import('../my-portal/category-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
-  },
-  {
-    path: 'view-list-course',
-    loadComponent: () =>
-      import('../my-portal/category-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
-  },
-  {
-    path: 'create-category',
-    loadComponent: () =>
-      import('../my-portal/create-category/create-category.component').then((m) => m.CreateCategoryComponent),
-  },
-  {
-    path: 'list-excel',
-    loadComponent: () =>
-      import('../my-portal/create-category/list-excel/list-excel.component').then((m) => m.ListExcelComponent),
-  },
-  {
-    path: 'list-doc',
-    loadComponent: () =>
-      import('../my-portal/create-category/list-doc/list-doc.component').then((m) => m.ListDocComponent),
-  },
-  {
-    path: 'list-course',
-    loadComponent: () =>
-      import('../my-portal/create-category/list-course/list-course.component').then((m) => m.ListCourseComponent),
-  },
-  {
-    path: 'category-list-approve',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/category-list-approve.component').then((m) => m.CategoryListApproveComponent),
-  },
-  {
-    path: 'approve-excel',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/approve-excel/approve-excel.component').then((m) => m.ApproveExcelComponent),
-  },
-  {
-    path: 'approve-doc',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/approve-doc/approve-doc.component').then((m) => m.ApproveDocComponent),
-  },
-  {
-    path: 'approve-course',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent),
-  },
-  {
-    path: 'approved-list',
-    loadComponent: () =>
-      import('../my-portal/approved-list/approved-list.component').then((m) => m.ApprovedListComponent),
-  },
-  {
-    path: 'view-list-excel/:type',
-    loadComponent: () =>
-      import('../my-portal/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
-  },
-  {
-    path: 'view-list-doc/:type',
-    loadComponent: () =>
-      import('../my-portal/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
-  },
-  {
-    path: 'view-list-course/:type',
-    loadComponent: () =>
-      import('../my-portal/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
-  },
-  {
-    path: 'excel-list',
-    loadComponent: () =>
-      import('../my-portal/excel-list/excel-list.component').then((m) => m.ExcelListComponent),
-  },
-  {
-    path: 'excel-report-toggle',
-    loadComponent: () =>
-      import('../my-portal/excel-report-toggle/excel-report-toggle.component').then((m) => m.ExcelReportToggleComponent),
-  },
-  {
-    path: 'datasource-table',
-    loadComponent: () =>
-      import('../my-portal/datasource-table/datasource-table.component').then((m) => m.DatasourceTableComponent),
-  },
-  {
-    path: 'excel-report',
-    loadComponent: () =>
-      import('../my-portal/excel-report/excel-report.component').then((m) => m.ExcelReportComponent),
-  }
-]
-
-export const myhrplus: Routes = [
-  {
-    path: "myhr-plus", children: [
-      {
-        path: 'dashboard',
-        loadComponent: () =>
-          import('./dashboard/dashboard.component').then((m) => m.DashboardComponent),
-      },
-      ...portalRoutes
-    ]
-  }
-]
-
+import { RouterModule } from '@angular/router';
 
+import { MYHR_PLUS_ROUTES } from './myhr-plus.routes';
+import { HrDashboardComponent } from './hr-dashboard.component';
 
 @NgModule({
+  declarations: [],
   imports: [
     CommonModule,
-    RouterModule.forChild(myhrplus),
+    RouterModule.forChild(MYHR_PLUS_ROUTES),
+    HrDashboardComponent
   ],
-  declarations: [MyhrPlusComponent]
+  exports: []
 })
 export class MyhrPlusModule {
-  static routes = myhrplus;
+  static routes = MYHR_PLUS_ROUTES;
 }

src/app/portal-manage/myhr-plus/myhr-plus.routes.ts

@@ -14,6 +14,34 @@ export const MYHR_PLUS_ROUTES: Routes = [
             component: HrDashboardComponent
         },
         {
+            path: 'employee-management',
+            loadComponent: () => import('./employee/myhr-plus-employee.component').then(m => m.MyhrPlusEmployeeComponent)
+        },
+        {
+            path: 'attendance',
+            loadComponent: () => import('./attendance/myhr-plus-attendance.component').then(m => m.MyhrPlusAttendanceComponent)
+        },
+        {
+            path: 'leave-management',
+            loadComponent: () => import('./leave/myhr-plus-leave.component').then(m => m.MyhrPlusLeaveComponent)
+        },
+        {
+            path: 'payroll',
+            loadComponent: () => import('./payroll/myhr-plus-payroll.component').then(m => m.MyhrPlusPayrollComponent)
+        },
+        {
+            path: 'department',
+            loadComponent: () => import('./department/myhr-plus-department.component').then(m => m.MyhrPlusDepartmentComponent)
+        },
+        {
+            path: 'position',
+            loadComponent: () => import('./position/myhr-plus-position.component').then(m => m.MyhrPlusPositionComponent)
+        },
+        {
+            path: 'org-chart',
+            loadComponent: () => import('./org-chart/myhr-plus-org-chart.component').then(m => m.MyhrPlusOrgChartComponent)
+        },
+        {
             path: '',
             redirectTo: 'dashboard',
             pathMatch: 'full'

src/app/portal-manage/myhr-plus/org-chart/myhr-plus-org-chart.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myhr-plus-org-chart',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">แผนภูมิองค์กร</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบแผนภูมิองค์กรสำหรับ MyHR-Plus</p></div></div>`,
+  styles: []
+})
+export class MyhrPlusOrgChartComponent { }

src/app/portal-manage/myhr-plus/payroll/myhr-plus-payroll.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myhr-plus-payroll',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">ระบบเงินเดือน</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบเงินเดือนสำหรับ MyHR-Plus</p></div></div>`,
+  styles: []
+})
+export class MyhrPlusPayrollComponent { }

src/app/portal-manage/myhr-plus/position/myhr-plus-position.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myhr-plus-position',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการตำแหน่ง</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการตำแหน่งสำหรับ MyHR-Plus</p></div></div>`,
+  styles: []
+})
+export class MyhrPlusPositionComponent { }

src/app/portal-manage/myjob/articles/myjob-articles.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-articles',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">จัดการบทความ</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการบทความสำหรับ MyJob</p>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MyjobArticlesComponent { }

src/app/portal-manage/myjob/career/myjob-career-cluster.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-career-cluster',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการกลุ่มอาชีพ</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการกลุ่มอาชีพสำหรับ MyJob</p></div></div>`,
+  styles: []
+})
+export class MyjobCareerClusterComponent { }

src/app/portal-manage/myjob/category/myjob-category-company.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-category-company',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการประเภทธุรกิจ</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการประเภทธุรกิจสำหรับ MyJob</p></div></div>`,
+  styles: []
+})
+export class MyjobCategoryCompanyComponent { }

src/app/portal-manage/myjob/company/myjob-company.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-company',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">จัดการบริษัท</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการบริษัทสำหรับ MyJob</p>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MyjobCompanyComponent { }

src/app/portal-manage/myjob/country/myjob-country.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-country',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการประเทศ</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการประเทศสำหรับ MyJob</p></div></div>`,
+  styles: []
+})
+export class MyjobCountryComponent { }

src/app/portal-manage/myjob/dashboard/myjob-dashboard.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-myjob-dashboard',
+  template: `
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title">myJob Dashboard</h4>
+            </div>
+            <div class="card-body">
+              <p>ยินดีต้อนรับสู่ระบบ myJob</p>
+              <p>ระบบจัดการงานและโครงการ</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      margin: 20px 0;
+    }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+  `]
+})
+export class MyjobDashboardComponent {
+  constructor() { }
+}

src/app/portal-manage/myjob/degree/myjob-degree.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-degree',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการระดับการศึกษา</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการระดับการศึกษาสำหรับ MyJob</p></div></div>`,
+  styles: []
+})
+export class MyjobDegreeComponent { }

src/app/portal-manage/myjob/department/myjob-department.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-department',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">จัดการแผนกบริษัท</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการแผนกบริษัทสำหรับ MyJob</p>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MyjobDepartmentComponent { }

src/app/portal-manage/myjob/faculty/myjob-faculty.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-faculty',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการคณะ</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการคณะสำหรับ MyJob</p></div></div>`,
+  styles: []
+})
+export class MyjobFacultyComponent { }

src/app/portal-manage/myjob/institution/myjob-institution.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-institution',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการสถาบันการศึกษา</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการสถาบันการศึกษาสำหรับ MyJob</p></div></div>`,
+  styles: []
+})
+export class MyjobInstitutionComponent { }

src/app/portal-manage/myjob/job-type/myjob-job-types.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-job-types',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการประเภทงาน</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการประเภทงานสำหรับ MyJob</p></div></div>`,
+  styles: []
+})
+export class MyjobJobTypesComponent { }

src/app/portal-manage/myjob/major/myjob-major.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-major',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการสาขาวิชา</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการสาขาวิชาสำหรับ MyJob</p></div></div>`,
+  styles: []
+})
+export class MyjobMajorComponent { }

src/app/portal-manage/myjob/member/myjob-member.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-member',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">จัดการผู้สมัครงาน</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการผู้สมัครงานสำหรับ MyJob</p>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MyjobMemberComponent { }

src/app/portal-manage/myjob/myjob.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-myjob',
-  templateUrl: './myjob.component.html',
-  styleUrls: ['./myjob.component.css']
+  template: `
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title">myJob</h4>
+            </div>
+            <div class="card-body">
+              <router-outlet></router-outlet>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      margin: 20px 0;
+    }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+  `]
 })
-export class MyjobComponent implements OnInit {
-
+export class MyjobComponent {
   constructor() { }
-
-  ngOnInit() {
-  }
-
 }

src/app/portal-manage/myjob/myjob.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MyjobComponent } from './myjob.component';
 import { RouterModule, Routes } from '@angular/router';
-import { QuillModule } from 'ngx-quill';
 
-const portalRoutes: Routes = [
-  {
-    path: 'category-list',
-    loadComponent: () =>
-      import('../my-portal/category-list/category-list.component').then((m) => m.CategorylistComponent),
-  },
-  {
-    path: 'view-list-excel',
-    loadComponent: () =>
-      import('../my-portal/category-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
-  },
-  {
-    path: 'view-list-doc',
-    loadComponent: () =>
-      import('../my-portal/category-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
-  },
-  {
-    path: 'view-list-course',
-    loadComponent: () =>
-      import('../my-portal/category-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
-  },
-  {
-    path: 'create-category',
-    loadComponent: () =>
-      import('../my-portal/create-category/create-category.component').then((m) => m.CreateCategoryComponent),
-  },
-  {
-    path: 'list-excel',
-    loadComponent: () =>
-      import('../my-portal/create-category/list-excel/list-excel.component').then((m) => m.ListExcelComponent),
-  },
-  {
-    path: 'list-doc',
-    loadComponent: () =>
-      import('../my-portal/create-category/list-doc/list-doc.component').then((m) => m.ListDocComponent),
-  },
-  {
-    path: 'list-course',
-    loadComponent: () =>
-      import('../my-portal/create-category/list-course/list-course.component').then((m) => m.ListCourseComponent),
-  },
-  {
-    path: 'category-list-approve',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/category-list-approve.component').then((m) => m.CategoryListApproveComponent),
-  },
-  {
-    path: 'approve-excel',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/approve-excel/approve-excel.component').then((m) => m.ApproveExcelComponent),
-  },
-  {
-    path: 'approve-doc',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/approve-doc/approve-doc.component').then((m) => m.ApproveDocComponent),
-  },
-  {
-    path: 'approve-course',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent),
-  },
-  {
-    path: 'approved-list',
-    loadComponent: () =>
-      import('../my-portal/approved-list/approved-list.component').then((m) => m.ApprovedListComponent),
-  },
-  {
-    path: 'view-list-excel/:type',
-    loadComponent: () =>
-      import('../my-portal/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
-  },
-  {
-    path: 'view-list-doc/:type',
-    loadComponent: () =>
-      import('../my-portal/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
-  },
-  {
-    path: 'view-list-course/:type',
-    loadComponent: () =>
-      import('../my-portal/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
-  },
-  {
-    path: 'excel-list',
-    loadComponent: () =>
-      import('../my-portal/excel-list/excel-list.component').then((m) => m.ExcelListComponent),
-  },
-  {
-    path: 'excel-report-toggle',
-    loadComponent: () =>
-      import('../my-portal/excel-report-toggle/excel-report-toggle.component').then((m) => m.ExcelReportToggleComponent),
-  },
-  {
-    path: 'datasource-table',
-    loadComponent: () =>
-      import('../my-portal/datasource-table/datasource-table.component').then((m) => m.DatasourceTableComponent),
-  },
-  {
-    path: 'excel-report',
-    loadComponent: () =>
-      import('../my-portal/excel-report/excel-report.component').then((m) => m.ExcelReportComponent),
-  }
-]
-export const myjob: Routes = [
+import { MyjobComponent } from './myjob.component';
+import { MyjobDashboardComponent } from './dashboard/myjob-dashboard.component';
+
+export const routes: Routes = [
   {
-    path: "myjob", children: [
-      {
-        //////////////MyJob/////////////////
-        path: 'home',
-        loadComponent: () =>
-          import('./home-common/home-common.component').then((m) => m.HomeCommonComponent),
-      },
-      {
-        path: 'member-manage',
-        loadComponent: () =>
-          import('./user-management/user-setting/user-setting.component').then((m) => m.UserSettingComponent),
-      },
-      {
-        path: 'manage-companys',
-        loadComponent: () =>
-          import('./company-manage/company-manage.component').then((m) => m.CompanyManageComponent),
-      },
-      {
-        path: 'manage-articles',
-        loadComponent: () =>
-          import('./article-manage/article-manage.component').then((m) => m.ArticleManageComponent),
-      },
-      {
-        path: 'admin-manage',
-        loadComponent: () =>
-          import('./admin-manage/admin-manage.component').then((m) => m.AdminManageComponent),
-      },
-      {
-        path: 'pdpa-manage',
-        loadComponent: () =>
-          import('./pdpa-manage/pdpa-manage.component').then((m) => m.PdpaManageComponent),
-      },
-      {
-        path: 'company-departments',
-        loadComponent: () =>
-          import('./company-department/company-department.component').then((m) => m.CompanyDepartmentComponent),
-      },
-      {
-        path: 'country-registration',
-        loadComponent: () =>
-          import('./company-department/country-registration/country-registration.component').then((m) => m.CountryRegistrationComponent),
-      },
-      {
-        path: 'category-company',
-        loadComponent: () =>
-          import('./company-department/category-company/category-company.component').then((m) => m.CategoryCompanyComponent),
-      },
-      {
-        path: 'degree-manage',
-        loadComponent: () =>
-          import('./company-department/degree-manage/degree-manage.component').then((m) => m.DegreeManageComponent),
-      },
+    path: '',
+    component: MyjobComponent,
+    children: [
       {
-        path: 'job-types',
-        loadComponent: () =>
-          import('./company-department/job-type/job-type.component').then((m) => m.JobTypeComponent),
+        path: 'dashboard',
+        component: MyjobDashboardComponent
       },
       {
-        path: 'provinces',
-        loadComponent: () =>
-          import('./company-department/province/province.component').then((m) => m.ProvinceComponent),
-      },
-      {
-        path: 'admin-manage',
-        loadComponent: () =>
-          import('./admin-manage/admin-manage.component').then((m) => m.AdminManageComponent),
-      },
-      {
-        path: 'position',
-        loadComponent: () =>
-          import('./company-department/company-position/company-position.component').then((m) => m.CompanyPositionComponent),
-      },
-      {
-        path: 'career-cluster',
-        loadComponent: () =>
-          import('./company-department/career-cluster/career-cluster.component').then((m) => m.CareerClusterComponent),
-      },
-      {
-        path: 'institution',
-        loadComponent: () =>
-          import('./company-department/institution/institution.component').then((m) => m.InstitutionComponent),
-      },
-      {
-        path: 'faculty',
-        loadComponent: () =>
-          import('./company-department/faculty/faculty.component').then((m) => m.FacultyComponent),
-      },
-      {
-        path: 'major',
-        loadComponent: () =>
-          import('./company-department/major/major.component').then((m) => m.MajorComponent),
-      },
-      ...portalRoutes
-    ],
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full'
+      }
+    ]
   }
-]
+];
 
 @NgModule({
+  declarations: [
+    MyjobComponent,
+    MyjobDashboardComponent
+  ],
   imports: [
     CommonModule,
-    RouterModule.forChild(myjob),
-    QuillModule.forRoot(),
+    RouterModule.forChild(routes)
   ],
-  declarations: [MyjobComponent],
-  exports: [RouterModule],
+  exports: [
+    MyjobComponent
+  ]
 })
 export class MyjobModule {
-  static routes = myjob;
+  static routes = routes;
 }

src/app/portal-manage/myjob/myjob.routes.ts

+import { Routes } from '@angular/router';
+import { MyjobComponent } from './myjob.component';
+import { MyjobDashboardComponent } from './dashboard/myjob-dashboard.component';
+
+export const MYJOB_ROUTES: Routes = [
+  {
+    path: '',
+    component: MyjobComponent,
+    children: [
+      {
+        path: 'dashboard',
+        component: MyjobDashboardComponent
+      },
+      {
+        path: 'pdpa-manage',
+        loadComponent: () => import('./pdpa/myjob-pdpa-manage.component').then(m => m.MyjobPdpaManageComponent)
+      },
+      {
+        path: 'manage-articles',
+        loadComponent: () => import('./articles/myjob-articles.component').then(m => m.MyjobArticlesComponent)
+      },
+      {
+        path: 'manage-companys',
+        loadComponent: () => import('./company/myjob-company.component').then(m => m.MyjobCompanyComponent)
+      },
+      {
+        path: 'member-manage',
+        loadComponent: () => import('./member/myjob-member.component').then(m => m.MyjobMemberComponent)
+      },
+      {
+        path: 'company-departments',
+        loadComponent: () => import('./department/myjob-department.component').then(m => m.MyjobDepartmentComponent)
+      },
+      {
+        path: 'career-cluster',
+        loadComponent: () => import('./career/myjob-career-cluster.component').then(m => m.MyjobCareerClusterComponent)
+      },
+      {
+        path: 'position',
+        loadComponent: () => import('./position/myjob-position.component').then(m => m.MyjobPositionComponent)
+      },
+      {
+        path: 'job-types',
+        loadComponent: () => import('./job-type/myjob-job-types.component').then(m => m.MyjobJobTypesComponent)
+      },
+      {
+        path: 'category-company',
+        loadComponent: () => import('./category/myjob-category-company.component').then(m => m.MyjobCategoryCompanyComponent)
+      },
+      {
+        path: 'degree-manage',
+        loadComponent: () => import('./degree/myjob-degree.component').then(m => m.MyjobDegreeComponent)
+      },
+      {
+        path: 'country-registration',
+        loadComponent: () => import('./country/myjob-country.component').then(m => m.MyjobCountryComponent)
+      },
+      {
+        path: 'provinces',
+        loadComponent: () => import('./province/myjob-province.component').then(m => m.MyjobProvinceComponent)
+      },
+      {
+        path: 'institution',
+        loadComponent: () => import('./institution/myjob-institution.component').then(m => m.MyjobInstitutionComponent)
+      },
+      {
+        path: 'faculty',
+        loadComponent: () => import('./faculty/myjob-faculty.component').then(m => m.MyjobFacultyComponent)
+      },
+      {
+        path: 'major',
+        loadComponent: () => import('./major/myjob-major.component').then(m => m.MyjobMajorComponent)
+      },
+      {
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full'
+      }
+    ]
+  }
+];

src/app/portal-manage/myjob/pdpa/myjob-pdpa-manage.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-pdpa-manage',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">จัดการ PDPA</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการ PDPA สำหรับ MyJob</p>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MyjobPdpaManageComponent { }

src/app/portal-manage/myjob/position/myjob-position.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-position',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการตำแหน่ง</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการตำแหน่งสำหรับ MyJob</p></div></div>`,
+  styles: []
+})
+export class MyjobPositionComponent { }

src/app/portal-manage/myjob/province/myjob-province.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-myjob-province',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="p-4"><h1 class="text-2xl font-bold mb-4">จัดการจังหวัด</h1><div class="bg-white rounded-lg shadow p-6"><p>ระบบจัดการจังหวัดสำหรับ MyJob</p></div></div>`,
+  styles: []
+})
+export class MyjobProvinceComponent { }

src/app/portal-manage/mylearn/company/mylearn-company.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-mylearn-company',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">จัดการบริษัท</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการบริษัทสำหรับ MyLearn</p>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MylearnCompanyComponent { }

src/app/portal-manage/mylearn/course/mylearn-company-course.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-mylearn-company-course',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">จัดการคอร์สบริษัท</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการคอร์สบริษัทสำหรับ MyLearn</p>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MylearnCompanyCourseComponent { }

src/app/portal-manage/mylearn/course/mylearn-course-transfer.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-mylearn-course-transfer',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">โอนย้ายคอร์ส</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบโอนย้ายคอร์สสำหรับ MyLearn</p>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MylearnCourseTransferComponent { }

src/app/portal-manage/mylearn/dashboard/mylearn-dashboard.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-mylearn-dashboard',
+  template: `
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title">myLearn Dashboard</h4>
+            </div>
+            <div class="card-body">
+              <p>ยินดีต้อนรับสู่ระบบ myLearn</p>
+              <p>ระบบจัดการการเรียนรู้และฝึกอบรม</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      margin: 20px 0;
+    }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+  `]
+})
+export class MylearnDashboardComponent {
+  constructor() { }
+}

src/app/portal-manage/mylearn/mylearn.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-mylearn',
-  templateUrl: './mylearn.component.html',
-  styleUrls: ['./mylearn.component.css']
+  template: `
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title">myLearn</h4>
+            </div>
+            <div class="card-body">
+              <router-outlet></router-outlet>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      margin: 20px 0;
+    }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+  `]
 })
-export class MylearnComponent implements OnInit {
-
+export class MylearnComponent {
   constructor() { }
-
-  ngOnInit() {
-  }
-
 }

src/app/portal-manage/mylearn/mylearn.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MylearnComponent } from './mylearn.component';
 import { RouterModule, Routes } from '@angular/router';
 
-const portalRoutes: Routes = [
-  {
-    path: 'category-list',
-    loadComponent: () =>
-      import('../my-portal/category-list/category-list.component').then((m) => m.CategorylistComponent),
-  },
-  {
-    path: 'view-list-excel',
-    loadComponent: () =>
-      import('../my-portal/category-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
-  },
-  {
-    path: 'view-list-doc',
-    loadComponent: () =>
-      import('../my-portal/category-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
-  },
-  {
-    path: 'view-list-course',
-    loadComponent: () =>
-      import('../my-portal/category-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
-  },
-  {
-    path: 'create-category',
-    loadComponent: () =>
-      import('../my-portal/create-category/create-category.component').then((m) => m.CreateCategoryComponent),
-  },
-  {
-    path: 'list-excel',
-    loadComponent: () =>
-      import('../my-portal/create-category/list-excel/list-excel.component').then((m) => m.ListExcelComponent),
-  },
-  {
-    path: 'list-doc',
-    loadComponent: () =>
-      import('../my-portal/create-category/list-doc/list-doc.component').then((m) => m.ListDocComponent),
-  },
-  {
-    path: 'list-course',
-    loadComponent: () =>
-      import('../my-portal/create-category/list-course/list-course.component').then((m) => m.ListCourseComponent),
-  },
-  {
-    path: 'category-list-approve',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/category-list-approve.component').then((m) => m.CategoryListApproveComponent),
-  },
-  {
-    path: 'approve-excel',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/approve-excel/approve-excel.component').then((m) => m.ApproveExcelComponent),
-  },
-  {
-    path: 'approve-doc',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/approve-doc/approve-doc.component').then((m) => m.ApproveDocComponent),
-  },
-  {
-    path: 'approve-course',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent),
-  },
-  {
-    path: 'approved-list',
-    loadComponent: () =>
-      import('../my-portal/approved-list/approved-list.component').then((m) => m.ApprovedListComponent),
-  },
-  {
-    path: 'view-list-excel/:type',
-    loadComponent: () =>
-      import('../my-portal/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
-  },
-  {
-    path: 'view-list-doc/:type',
-    loadComponent: () =>
-      import('../my-portal/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
-  },
-  {
-    path: 'view-list-course/:type',
-    loadComponent: () =>
-      import('../my-portal/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
-  },
-  {
-    path: 'excel-list',
-    loadComponent: () =>
-      import('../my-portal/excel-list/excel-list.component').then((m) => m.ExcelListComponent),
-  },
-  {
-    path: 'excel-report-toggle',
-    loadComponent: () =>
-      import('../my-portal/excel-report-toggle/excel-report-toggle.component').then((m) => m.ExcelReportToggleComponent),
-  },
-  {
-    path: 'datasource-table',
-    loadComponent: () =>
-      import('../my-portal/datasource-table/datasource-table.component').then((m) => m.DatasourceTableComponent),
-  },
-  {
-    path: 'excel-report',
-    loadComponent: () =>
-      import('../my-portal/excel-report/excel-report.component').then((m) => m.ExcelReportComponent),
-  }
-]
-export const mylearn: Routes = [
+import { MylearnComponent } from './mylearn.component';
+import { MylearnDashboardComponent } from './dashboard/mylearn-dashboard.component';
+
+export const routes: Routes = [
   {
-    path: "mylearn", children: [
+    path: '',
+    component: MylearnComponent,
+    children: [
       {
         path: 'dashboard',
-        loadComponent: () =>
-          import('./dashboard/dashboard.component').then((m) => m.DashboardComponent),
-      },
-      {
-        path: 'mylearn-pdpa-manage',
-        loadComponent: () =>
-          import('./pdpa-manage/pdpa-manage.component').then((m) => m.PdpaManageComponent),
-      },
-      {
-        path: 'user-company',
-        loadComponent: () =>
-          import('./user-company/user-company.component').then((m) => m.UserCompanyComponent),
-      },
-      {
-        path: 'myhrcompany',
-        children: [
-          {
-            path: 'manage-course/:id',
-            loadComponent: () =>
-              import('./myhrcompany/manage-course/manage-course.component')
-                .then(m => m.ManageCourseComponent),
-          },
-          {
-            path: '',
-            loadComponent: () =>
-              import('./myhrcompany/myhrcompany.component')
-                .then(m => m.MyhrcompanyComponent),
-          },
-        ]
-      },
-      {
-        path: 'course-transfer',
-        loadComponent: () =>
-          import('./course-transfer/course-transfer.component').then((m) => m.CourseTransferComponent),
+        component: MylearnDashboardComponent
       },
       {
-        path: 'timeout-screen-manage',
-        loadComponent: () =>
-          import('./timeout-screen-manage/timeout-screen-manage.component').then((m) => m.TimeoutScreenManageComponent),
-      },
-      {
-        path: 'management-user',
-        children: [
-          {
-            path: 'user-role/:id',
-            loadComponent: () =>
-              import('./management-user/user-role/user-role.component')
-                .then(m => m.UserRoleComponent),
-          },
-          {
-            path: 'user-authorization/:id',
-            loadComponent: () =>
-              import('./management-user/user-authorization/user-authorization.component')
-                .then(m => m.UserAuthorizationComponent),
-          },
-          {
-            path: '',
-            loadComponent: () =>
-              import('./management-user/management-user.component')
-                .then(m => m.ManagementUserComponent),
-          },
-        ]
-      },
-      ...portalRoutes
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full'
+      }
     ]
   }
-]
+];
 
 @NgModule({
+  declarations: [
+    MylearnComponent,
+    MylearnDashboardComponent
+  ],
   imports: [
     CommonModule,
-    RouterModule.forChild(mylearn),
+    RouterModule.forChild(routes)
   ],
-  declarations: [MylearnComponent],
-  exports: [RouterModule],
+  exports: [
+    MylearnComponent
+  ]
 })
 export class MylearnModule {
-  static routes = mylearn;
+  static routes = routes;
 }

src/app/portal-manage/mylearn/mylearn.routes.ts

+import { Routes } from '@angular/router';
+import { MylearnComponent } from './mylearn.component';
+import { MylearnDashboardComponent } from './dashboard/mylearn-dashboard.component';
+
+export const MYLEARN_ROUTES: Routes = [
+  {
+    path: '',
+    component: MylearnComponent,
+    children: [
+      {
+        path: 'dashboard',
+        component: MylearnDashboardComponent
+      },
+      {
+        path: 'mylearn-pdpa-manage',
+        loadComponent: () => import('./pdpa/mylearn-pdpa-manage.component').then(m => m.MylearnPdpaManageComponent)
+      },
+      {
+        path: 'myhrcompany',
+        loadComponent: () => import('./company/mylearn-company.component').then(m => m.MylearnCompanyComponent)
+      },
+      {
+        path: 'management-user',
+        loadComponent: () => import('./user/mylearn-user-management.component').then(m => m.MylearnUserManagementComponent)
+      },
+      {
+        path: 'course-transfer',
+        loadComponent: () => import('./course/mylearn-course-transfer.component').then(m => m.MylearnCourseTransferComponent)
+      },
+      {
+        path: 'timeout-screen-manage',
+        loadComponent: () => import('./timeout/mylearn-timeout-manage.component').then(m => m.MylearnTimeoutManageComponent)
+      },
+      {
+        path: 'company-manage-course',
+        loadComponent: () => import('./course/mylearn-company-course.component').then(m => m.MylearnCompanyCourseComponent)
+      },
+      {
+        path: 'user-company',
+        loadComponent: () => import('./user/mylearn-user-company.component').then(m => m.MylearnUserCompanyComponent)
+      },
+      {
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full'
+      }
+    ]
+  }
+];

src/app/portal-manage/mylearn/pdpa/mylearn-pdpa-manage.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-mylearn-pdpa-manage',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">จัดการ PDPA</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการ PDPA สำหรับ MyLearn</p>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MylearnPdpaManageComponent { }

src/app/portal-manage/mylearn/timeout/mylearn-timeout-manage.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-mylearn-timeout-manage',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">จัดการเวลาหน้าจอ</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการเวลาหน้าจอสำหรับ MyLearn</p>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MylearnTimeoutManageComponent { }

src/app/portal-manage/mylearn/user/mylearn-user-company.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-mylearn-user-company',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">จัดการผู้ใช้บริษัท</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการผู้ใช้บริษัทสำหรับ MyLearn</p>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MylearnUserCompanyComponent { }

src/app/portal-manage/mylearn/user/mylearn-user-management.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-mylearn-user-management',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">การจัดการผู้ใช้งาน</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการผู้ใช้งานสำหรับ MyLearn</p>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class MylearnUserManagementComponent { }

src/app/portal-manage/myskill-x/dashboard/myskill-x-dashboard.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-myskill-x-dashboard',
+  template: `
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title">mySkill-X Dashboard</h4>
+            </div>
+            <div class="card-body">
+              <p>ยินดีต้อนรับสู่ระบบ mySkill-X</p>
+              <p>ระบบจัดการทักษะและความสามารถ</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      margin: 20px 0;
+    }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+  `]
+})
+export class MyskillXDashboardComponent {
+  constructor() { }
+}

src/app/portal-manage/myskill-x/myskill-x.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-myskill-x',
-  templateUrl: './myskill-x.component.html',
-  styleUrls: ['./myskill-x.component.css']
+  template: `
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title">mySkill-X</h4>
+            </div>
+            <div class="card-body">
+              <router-outlet></router-outlet>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      margin: 20px 0;
+    }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+  `]
 })
-export class MyskillXComponent implements OnInit {
-
+export class MyskillXComponent {
   constructor() { }
-
-  ngOnInit() {
-  }
-
 }

src/app/portal-manage/myskill-x/myskill-x.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MyskillXComponent } from './myskill-x.component';
 import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '../../shared/shared.module';
-import { QuillModule } from 'ngx-quill';
 
+import { MyskillXComponent } from './myskill-x.component';
+import { MyskillXDashboardComponent } from './dashboard/myskill-x-dashboard.component';
 
-const portalRoutes: Routes = [
-  {
-    path: 'category-list',
-    loadComponent: () =>
-      import('../my-portal/category-list/category-list.component').then((m) => m.CategorylistComponent),
-  },
-  {
-    path: 'view-list-excel',
-    loadComponent: () =>
-      import('../my-portal/category-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
-  },
-  {
-    path: 'view-list-doc',
-    loadComponent: () =>
-      import('../my-portal/category-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
-  },
-  {
-    path: 'view-list-course',
-    loadComponent: () =>
-      import('../my-portal/category-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
-  },
-  {
-    path: 'create-category',
-    loadComponent: () =>
-      import('../my-portal/create-category/create-category.component').then((m) => m.CreateCategoryComponent),
-  },
-  {
-    path: 'list-excel',
-    loadComponent: () =>
-      import('../my-portal/create-category/list-excel/list-excel.component').then((m) => m.ListExcelComponent),
-  },
-  {
-    path: 'list-doc',
-    loadComponent: () =>
-      import('../my-portal/create-category/list-doc/list-doc.component').then((m) => m.ListDocComponent),
-  },
-  {
-    path: 'list-course',
-    loadComponent: () =>
-      import('../my-portal/create-category/list-course/list-course.component').then((m) => m.ListCourseComponent),
-  },
-  {
-    path: 'category-list-approve',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/category-list-approve.component').then((m) => m.CategoryListApproveComponent),
-  },
-  {
-    path: 'approve-excel',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/approve-excel/approve-excel.component').then((m) => m.ApproveExcelComponent),
-  },
-  {
-    path: 'approve-doc',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/approve-doc/approve-doc.component').then((m) => m.ApproveDocComponent),
-  },
-  {
-    path: 'approve-course',
-    loadComponent: () =>
-      import('../my-portal/category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent),
-  },
-  {
-    path: 'approved-list',
-    loadComponent: () =>
-      import('../my-portal/approved-list/approved-list.component').then((m) => m.ApprovedListComponent),
-  },
-  {
-    path: 'view-list-excel/:type',
-    loadComponent: () =>
-      import('../my-portal/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
-  },
-  {
-    path: 'view-list-doc/:type',
-    loadComponent: () =>
-      import('../my-portal/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
-  },
-  {
-    path: 'view-list-course/:type',
-    loadComponent: () =>
-      import('../my-portal/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
-  },
-  {
-    path: 'excel-list',
-    loadComponent: () =>
-      import('../my-portal/excel-list/excel-list.component').then((m) => m.ExcelListComponent),
-  },
-  {
-    path: 'excel-report-toggle',
-    loadComponent: () =>
-      import('../my-portal/excel-report-toggle/excel-report-toggle.component').then((m) => m.ExcelReportToggleComponent),
-  },
-  {
-    path: 'datasource-table',
-    loadComponent: () =>
-      import('../my-portal/datasource-table/datasource-table.component').then((m) => m.DatasourceTableComponent),
-  },
-  {
-    path: 'excel-report',
-    loadComponent: () =>
-      import('../my-portal/excel-report/excel-report.component').then((m) => m.ExcelReportComponent),
-  }
-]
-export const myportal: Routes = [
-  {
-    path: 'myskill-x', children: [
-      //////////////MyPortal/////////////////
-      ...portalRoutes
+export const routes: Routes = [
+  {
+    path: '',
+    component: MyskillXComponent,
+    children: [
+      {
+        path: 'dashboard',
+        component: MyskillXDashboardComponent
+      },
+      {
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full'
+      }
     ]
   }
 ];
 
 @NgModule({
+  declarations: [
+    MyskillXComponent,
+    MyskillXDashboardComponent
+  ],
   imports: [
     CommonModule,
-    RouterModule.forChild(myportal),
-    QuillModule.forRoot(),
+    RouterModule.forChild(routes)
   ],
-  exports: [RouterModule],
-  declarations: [MyskillXComponent]
+  exports: [
+    MyskillXComponent
+  ]
 })
 export class MyskillXModule {
-  static routes = myportal;
+  static routes = routes;
 }

src/app/portal-manage/myskill-x/myskill-x.routes.ts

+import { Routes } from '@angular/router';
+import { MyskillXComponent } from './myskill-x.component';
+import { MyskillXDashboardComponent } from './dashboard/myskill-x-dashboard.component';
+
+export const MYSKILL_X_ROUTES: Routes = [
+  {
+    path: '',
+    component: MyskillXComponent,
+    children: [
+      {
+        path: 'dashboard',
+        component: MyskillXDashboardComponent
+      },
+      {
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full'
+      }
+    ]
+  }
+];

src/app/portal-manage/portal-manage.routes.ts

@@ -5,22 +5,128 @@ import { WidgetListComponent } from './widget-management/widget-list.component';
 import { WidgetFormComponent } from './widget-management/widget-form.component';
 import { moduleAccessGuard } from '../core/guards/module-access.guard';
 import { DatasetWidgetLinkerComponent } from './widget-management/dataset-widget-linker.component';
+import { HomeComponent } from './home/home.component';
+import { MeetingBookingComponent } from './meeting-booking/meeting-booking.component';
+import { MenuPermissionManagementComponent } from './menu-permission-management/menu-permission-management.component';
+// import { CompanyManagementComponent } from './company-management/company-management.component';
 
 export const portalManageRoutes: Routes = [
-    // Route for the specific MyHR+ module, which has its own services and routing.
-    // This must come BEFORE the generic ':appName' routes.
+    // Home/Dashboard Route
+    {
+        path: '',
+        component: HomeComponent,
+        pathMatch: 'full'
+    },
+    {
+        path: 'home',
+        component: HomeComponent
+    },
+
+    // === แอปพลิเคชันที่เข้าถึงได้ ===
+
+    // myHR-Plus Module
     {
         path: 'myhr-plus',
-        canActivate: [moduleAccessGuard], // Use the same guard to check if user can access 'myhr-plus'
+        canActivate: [moduleAccessGuard],
         loadChildren: () => import('./myhr-plus/myhr-plus.routes').then(m => m.MYHR_PLUS_ROUTES)
     },
+
+    // myHR-Lite Module
+    {
+        path: 'myhr-lite',
+        canActivate: [moduleAccessGuard],
+        loadChildren: () => import('./myhr-lite/myhr-lite.routes').then(m => m.MYHR_LITE_ROUTES)
+    },
+
+    // Zeeme Plus Module
+    {
+        path: 'zeeme',
+        canActivate: [moduleAccessGuard],
+        loadChildren: () => import('./zeeme/zeeme.routes').then(m => m.ZEEME_ROUTES)
+    },
+
+    // myFace Module
+    {
+        path: 'myface',
+        canActivate: [moduleAccessGuard],
+        loadChildren: () => import('./myface/myface.routes').then(m => m.MYFACE_ROUTES)
+    },
+
+    // myLearn Module
+    {
+        path: 'mylearn',
+        canActivate: [moduleAccessGuard],
+        loadChildren: () => import('./mylearn/mylearn.routes').then(m => m.MYLEARN_ROUTES)
+    },
+
+    // myJob Module
+    {
+        path: 'myjob',
+        canActivate: [moduleAccessGuard],
+        loadChildren: () => import('./myjob/myjob.routes').then(m => m.MYJOB_ROUTES)
+    },
+
+    // mySkill-X Module
+    {
+        path: 'myskill-x',
+        canActivate: [moduleAccessGuard],
+        loadChildren: () => import('./myskill-x/myskill-x.routes').then(m => m.MYSKILL_X_ROUTES)
+    },
+
+    // === การบริการ ===
+
+    // Dashboard
+    {
+        path: 'dashboard',
+        canActivate: [moduleAccessGuard],
+        loadChildren: () => import('./dashboard-management/dashboard-management.module').then(m => m.DashboardManagementModule)
+    },
+
+    // Meeting Booking
+    {
+        path: 'meeting-booking',
+        component: MeetingBookingComponent,
+        canActivate: [moduleAccessGuard]
+    },
+
+    // === การตั้งค่าระบบ ===
+
+    // Permission Management
     {
         path: 'permission-management',
         canActivate: [moduleAccessGuard],
         loadChildren: () => import('./permission-management/permission-management.routes').then(m => m.PERMISSION_ROUTES)
     },
 
-    // --- Generic App Routes ---
+    // Menu Permission Management
+    {
+        path: 'menu-permission-management',
+        component: MenuPermissionManagementComponent,
+        canActivate: [moduleAccessGuard]
+    },
+
+    // Company Management
+    {
+        path: 'company-management',
+        canActivate: [moduleAccessGuard],
+        loadChildren: () => import('./company-management/company-management.module').then(m => m.CompanyManagementModule)
+    },
+
+    // Widget Management
+    {
+        path: 'widget-management',
+        canActivate: [moduleAccessGuard],
+        loadChildren: () => import('./widget-management/widget-management.module').then(m => m.WidgetManagementModule)
+    },
+
+    // Dashboard Management
+    {
+        path: 'dashboard-management',
+        component: DashboardManagementComponent,
+        canActivate: [moduleAccessGuard]
+    },
+
+    // === Generic App Routes ===
     // These routes are for simple apps that don't need special module-level services.
 
     // Dynamic route for dashboard management per application
@@ -29,6 +135,7 @@ export const portalManageRoutes: Routes = [
         component: DashboardManagementComponent,
         canActivate: [moduleAccessGuard]
     },
+
     // Dynamic routes for widget warehouse per application
     {
         path: ':appName/widget-warehouse',
@@ -45,15 +152,17 @@ export const portalManageRoutes: Routes = [
         component: DatasetWidgetLinkerComponent,
         canActivate: [moduleAccessGuard]
     },
-    // Route for viewing a specific dashboard, remains unchanged
+
+    // Route for viewing a specific dashboard
     {
         path: 'dashboard-viewer/:dashboardId',
         component: DashboardViewerComponent
+    },
+
+    // Redirect for unknown routes
+    {
+        path: '**',
+        redirectTo: '',
+        pathMatch: 'full'
     }
-    // Optional: A redirect for the base portal-manage path
-    // {
-    //     path: '',
-    //     redirectTo: 'myhr-plus/dashboard-management', // Default to one app
-    //     pathMatch: 'full'
-    // }
 ];

src/app/portal-manage/user-role-management/user-role-management.component.scss

-.user-info {
-  .user-name {
-    font-weight: 500;
-    margin-bottom: 2px;
-  }
-
-  .user-email {
-    font-size: 0.875rem;
-  }
-}
-
-.badge {
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 0.75rem;
-  font-weight: 500;
-
-  &.badge-success {
-    background-color: #4caf50;
-    color: white;
-  }
-
-  &.badge-danger {
-    background-color: #f44336;
-    color: white;
-  }
-
-  &.badge-primary {
-    background-color: #2196f3;
-    color: white;
-  }
-
-  &.badge-secondary {
-    background-color: #6c757d;
-    color: white;
-  }
-}
-
-.stat-card {
-  text-align: center;
-  padding: 20px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border-radius: 8px;
-  margin-bottom: 16px;
-
-  .stat-number {
-    font-size: 2.5rem;
-    font-weight: bold;
-    margin-bottom: 8px;
-  }
-
-  .stat-label {
-    font-size: 0.9rem;
-    opacity: 0.9;
-  }
-}
-
-.permission-category {
-  margin-bottom: 24px;
-
-  h5 {
-    color: #333;
-    margin-bottom: 12px;
-    padding-bottom: 8px;
-    border-bottom: 2px solid #e0e0e0;
-  }
-
-  .permission-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 12px;
-
-    .permission-item {
-      padding: 12px;
-      border: 1px solid #e0e0e0;
-      border-radius: 4px;
-      background-color: #fafafa;
-
-      mat-checkbox {
-        margin-bottom: 4px;
-      }
-
-      small {
-        display: block;
-        margin-top: 4px;
-      }
-    }
-  }
-}
-
-.table-responsive {
-  overflow-x: auto;
-}
-
-mat-card {
-  margin-bottom: 16px;
-}
-
-mat-card-header {
-  margin-bottom: 16px;
-}
-
-mat-form-field {
-  margin-bottom: 16px;
-}
-
-// Form styling
-form {
-  .row {
-    margin-bottom: 16px;
-  }
-}
-
-// Button styling
-button[mat-raised-button] {
-  margin-right: 8px;
-}
-
-// Loading spinner
-mat-spinner {
-  margin: 0 auto;
-}
-
-// Empty state
-.text-center {
-  text-align: center;
-}
-
-.text-muted {
-  color: #6c757d;
-}
-
-// Card hover effects
-mat-card:hover {
-  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-  transition: box-shadow 0.2s ease;
-}
-
-// Responsive design
-@media (max-width: 768px) {
-  .permission-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .stat-card {
-    margin-bottom: 12px;
-
-    .stat-number {
-      font-size: 2rem;
-    }
-  }
-
-  .table-responsive {
-    font-size: 0.875rem;
-  }
-}
-
-// Material table styling
-.mat-mdc-table {
-  width: 100%;
-}
-
-.mat-mdc-header-cell {
-  font-weight: 600;
-  color: #333;
-}
-
-.mat-mdc-cell {
-  padding: 8px 12px;
-}
-
-// Checkbox styling
-mat-checkbox {
-  margin-right: 8px;
-}
-
-// Slide toggle styling
-mat-slide-toggle {
-  margin: 8px 0;
-}
-
-// Form field styling
-mat-form-field {
-  .mat-mdc-form-field-subscript-wrapper {
-    display: none;
-  }
-}
-
-// Tab styling
-mat-tab-group {
-  margin-top: 16px;
-}
-
-// Card content spacing
-mat-card-content {
-  padding: 16px;
-}
-
-// Row spacing
-.row {
-  margin-bottom: 16px;
-}
-
-// Utility classes
-.w-100 {
-  width: 100%;
-}
-
-.mt-3 {
-  margin-top: 16px;
-}
-
-.mb-3 {
-  margin-bottom: 16px;
-}
-
-.me-2 {
-  margin-right: 8px;
-}
-
-.ms-2 {
-  margin-left: 8px;
-}

src/app/portal-manage/widget-management/widget-management.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+
+import { WidgetListComponent } from './widget-list.component';
+import { WidgetFormComponent } from './widget-form.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: WidgetListComponent
+  },
+  {
+    path: 'edit/:widgetId',
+    component: WidgetFormComponent
+  }
+];
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    WidgetListComponent,
+    WidgetFormComponent
+  ],
+  exports: []
+})
+export class WidgetManagementModule {
+  static routes = routes;
+}

src/app/portal-manage/zeeme/attendance/zeeme-attendance.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-zeeme-attendance',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">ระบบลงเวลา</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบลงเวลาทำงานสำหรับ Zeeme</p>
+        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="bg-green-50 p-4 rounded-lg">
+            <h3 class="font-semibold text-green-800">เข้างาน</h3>
+            <p class="text-sm text-green-600">เวลา: 08:00</p>
+          </div>
+          <div class="bg-red-50 p-4 rounded-lg">
+            <h3 class="font-semibold text-red-800">ออกงาน</h3>
+            <p class="text-sm text-red-600">เวลา: 17:00</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class ZeemeAttendanceComponent { }

src/app/portal-manage/zeeme/dashboard/zeeme-dashboard.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-zeeme-dashboard',
+  template: `
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title">Zeeme Plus Dashboard</h4>
+            </div>
+            <div class="card-body">
+              <p>ยินดีต้อนรับสู่ระบบ Zeeme Plus</p>
+              <p>ระบบจัดการเวลาและลงเวลา</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      margin: 20px 0;
+    }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+  `]
+})
+export class ZeemeDashboardComponent {
+  constructor() { }
+}

src/app/portal-manage/zeeme/overtime/zeeme-overtime.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-zeeme-overtime',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">การทำงานล่วงเวลา</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบจัดการการทำงานล่วงเวลาสำหรับ Zeeme</p>
+        <div class="mt-4">
+          <button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded">
+            ขอทำงานล่วงเวลา
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class ZeemeOvertimeComponent { }

src/app/portal-manage/zeeme/reports/zeeme-attendance-report.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-zeeme-attendance-report',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">รายงานการลงเวลา</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>รายงานการลงเวลาทำงานสำหรับ Zeeme</p>
+        <div class="mt-4">
+          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
+            ส่งออกรายงาน
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class ZeemeAttendanceReportComponent { }

src/app/portal-manage/zeeme/reports/zeeme-overtime-report.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-zeeme-overtime-report',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">รายงานการทำงานล่วงเวลา</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>รายงานการทำงานล่วงเวลาสำหรับ Zeeme</p>
+        <div class="mt-4">
+          <button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded">
+            ส่งออกรายงาน
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class ZeemeOvertimeReportComponent { }

src/app/portal-manage/zeeme/reports/zeeme-summary-report.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-zeeme-summary-report',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">รายงานสรุป</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>รายงานสรุปข้อมูลการทำงานสำหรับ Zeeme</p>
+        <div class="mt-4">
+          <button class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded">
+            ส่งออกรายงาน
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class ZeemeSummaryReportComponent { }

src/app/portal-manage/zeeme/time-tracking/zeeme-time-tracking.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-zeeme-time-tracking',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">ติดตามเวลา</h1>
+      <div class="bg-white rounded-lg shadow p-6">
+        <p>ระบบติดตามเวลาทำงานสำหรับ Zeeme</p>
+        <div class="mt-4">
+          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded mr-2">
+            เริ่มงาน
+          </button>
+          <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded">
+            หยุดงาน
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class ZeemeTimeTrackingComponent { }

src/app/portal-manage/zeeme/zeeme.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-zeeme',
-  templateUrl: './zeeme.component.html',
-  styleUrls: ['./zeeme.component.css']
+  template: `
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="card-title">Zeeme Plus</h4>
+            </div>
+            <div class="card-body">
+              <router-outlet></router-outlet>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      margin: 20px 0;
+    }
+    .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+  `]
 })
-export class ZeemeComponent implements OnInit {
-
+export class ZeemeComponent {
   constructor() { }
-
-  ngOnInit() {
-  }
-
 }

src/app/portal-manage/zeeme/zeeme.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ZeemeComponent } from './zeeme.component';
 import { RouterModule, Routes } from '@angular/router';
 
-export const zeeme: Routes = [
+import { ZeemeComponent } from './zeeme.component';
+import { ZeemeDashboardComponent } from './dashboard/zeeme-dashboard.component';
+
+export const routes: Routes = [
   {
-    path: "zeeme", children:[
+    path: '',
+    component: ZeemeComponent,
+    children: [
       {
         path: 'dashboard',
-      loadComponent: () =>
-        import('./dashboard/dashboard.component').then((m) => m.DashboardComponent),
+        component: ZeemeDashboardComponent
       },
+      {
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full'
+      }
     ]
   }
-]
+];
 
 @NgModule({
+  declarations: [
+    ZeemeComponent,
+    ZeemeDashboardComponent
+  ],
   imports: [
     CommonModule,
-    RouterModule.forChild(zeeme),
+    RouterModule.forChild(routes)
   ],
-  declarations: [ZeemeComponent]
+  exports: [
+    ZeemeComponent
+  ]
 })
 export class ZeemeModule {
-  static routes = zeeme;
- }
+  static routes = routes;
+}

src/app/portal-manage/zeeme/zeeme.routes.ts

+import { Routes } from '@angular/router';
+import { ZeemeComponent } from './zeeme.component';
+import { ZeemeDashboardComponent } from './dashboard/zeeme-dashboard.component';
+
+export const ZEEME_ROUTES: Routes = [
+  {
+    path: '',
+    component: ZeemeComponent,
+    children: [
+      {
+        path: 'dashboard',
+        component: ZeemeDashboardComponent
+      },
+      {
+        path: 'time-tracking',
+        loadComponent: () => import('./time-tracking/zeeme-time-tracking.component').then(m => m.ZeemeTimeTrackingComponent)
+      },
+      {
+        path: 'attendance',
+        loadComponent: () => import('./attendance/zeeme-attendance.component').then(m => m.ZeemeAttendanceComponent)
+      },
+      {
+        path: 'overtime',
+        loadComponent: () => import('./overtime/zeeme-overtime.component').then(m => m.ZeemeOvertimeComponent)
+      },
+      {
+        path: 'attendance-report',
+        loadComponent: () => import('./reports/zeeme-attendance-report.component').then(m => m.ZeemeAttendanceReportComponent)
+      },
+      {
+        path: 'overtime-report',
+        loadComponent: () => import('./reports/zeeme-overtime-report.component').then(m => m.ZeemeOvertimeReportComponent)
+      },
+      {
+        path: 'summary-report',
+        loadComponent: () => import('./reports/zeeme-summary-report.component').then(m => m.ZeemeSummaryReportComponent)
+      },
+      {
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full'
+      }
+    ]
+  }
+];

src/app/shared/components/sidebar/sidebar.component.ts

@@ -64,7 +64,7 @@ export class SidebarComponent {
   options = { autoHide: false, scrollbarMinSize: 100 };
   icon!: SafeHtml;
 
-  public menuItems!: Menu[];
+  public menuItems: Menu[] = [];
   public menuitemsSubscribe$!: Subscription;
   companyModel: CompanyModel = new CompanyModel()
   isCommonRoute: boolean = false;
@@ -167,7 +167,7 @@ export class SidebarComponent {
     console.log('myface routes',this.isMyFaceRoute);
     console.log('zeeme routes',this.isZeemeRoute);
     console.log('myhrplus routes',this.isMyhrPlusRoute);
-    
+
   }
 
   checkUrlChanges(): void {
@@ -188,7 +188,7 @@ export class SidebarComponent {
           (this.previousUrl.includes('/myprotal')&& this.currentUrl.includes('/myprotal')) ||
           (this.previousUrl.includes('/mylearn')&& this.currentUrl.includes('/mylearn')) ||
           (this.previousUrl.includes('/myjob')&& this.currentUrl.includes('/myjob')) ||
-          (this.previousUrl.includes('/myhr-lite')&& this.currentUrl.includes('/myhr-lite')) 
+          (this.previousUrl.includes('/myhr-lite')&& this.currentUrl.includes('/myhr-lite'))
         ) {
           console.log('URL changed between /installer and /admin.');
           // Implement any logic needed when changing between /installer and /admin
@@ -279,6 +279,9 @@ export class SidebarComponent {
 
   //Active Nav State
   setNavActive(item: any) {
+    if (!this.menuItems || !Array.isArray(this.menuItems)) {
+      return;
+    }
     this.menuItems?.filter((menuItem) => {
       if (menuItem !== item) {
         menuItem.active = false;
@@ -330,6 +333,9 @@ export class SidebarComponent {
 
 
     if (!item.active) {
+      if (!this.menuItems || !Array.isArray(this.menuItems)) {
+        return;
+      }
       this.menuItems?.forEach((a: any) => {
         if (this.menuItems.includes(item)) {
           a.active = false;
@@ -352,6 +358,9 @@ export class SidebarComponent {
   }
   // Close Nav menu
   closeNavActive() {
+    if (!this.menuItems || !Array.isArray(this.menuItems)) {
+      return;
+    }
     this.menuItems?.forEach((a: any) => {
       if (this.menuItems) {
         a.active = false;
@@ -365,6 +374,9 @@ export class SidebarComponent {
   }
 
   ParentActive() {
+    if (!this.menuItems || !Array.isArray(this.menuItems)) {
+      return;
+    }
     this.menuItems.map((element: any) => {
       if (element.children) {
         element.active = false;

src/app/shared/services/nav-service-documentation.md

+ 
\ No newline at end of file