home

src/app/portal-manage/home/home.component.html

@@ -144,23 +144,28 @@
       </div>
     </div>
 
-    <!-- Applications Grid -->
-    <div class="mb-12">
+    <!-- App Categories -->
+    <div class="mb-12" *ngFor="let category of appCategories$ | async">
       <div class="flex items-center justify-between mb-8">
-        <div>
-          <h2 class="text-3xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-2">
-            แอปพลิเคชันที่เข้าถึงได้
-          </h2>
-          <p class="text-gray-600">เลือกแอปพลิเคชันที่คุณต้องการใช้งาน</p>
+        <div class="flex items-center space-x-4">
+          <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-white text-xl shadow-lg">
+            <i [class]="category.icon"></i>
+          </div>
+          <div>
+            <h2 class="text-3xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-2">
+              {{ category.name }}
+            </h2>
+            <p class="text-gray-600">{{ category.description }}</p>
+          </div>
         </div>
         <div class="flex items-center space-x-2">
           <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-          <span class="text-sm text-gray-600">{{ (accessibleApps$ | async)?.length || 0 }} แอปพร้อมใช้งาน</span>
+          <span class="text-sm text-gray-600">{{ category.apps.length }} แอปพร้อมใช้งาน</span>
         </div>
       </div>
 
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-        <div *ngFor="let app of accessibleApps$ | async; let i = index"
+        <div *ngFor="let app of category.apps; let i = index"
              class="group bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-xl border border-white/20 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 cursor-pointer"
              (click)="navigateToApp(app)"
              [style.animation-delay]="(i * 100) + 'ms'">

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

@@ -17,6 +17,7 @@ interface AppModule {
   icon: string;
   path: string;
   isVisible: boolean;
+  category: 'applications' | 'services' | 'system';
   permissions: {
     view: boolean;
     create: boolean;
@@ -27,6 +28,14 @@ interface AppModule {
   };
 }
 
+interface AppCategory {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  apps: AppModule[];
+}
+
 interface UserInfo {
   fullName: string;
   email: string;
@@ -49,6 +58,7 @@ interface UserInfo {
 })
 export class HomeComponent implements OnInit {
   accessibleApps$: Observable<AppModule[]>;
+  appCategories$: Observable<AppCategory[]>;
   userInfo$: Observable<UserInfo>;
   currentEmployee$: Observable<Employee | null>;
   currentJwtEmployee$: Observable<EmployeeFromJwt | null>;
@@ -63,6 +73,7 @@ export class HomeComponent implements OnInit {
 
   ngOnInit(): void {
     this.loadAccessibleApps();
+    this.loadAppCategories();
     this.loadUserInfo();
     this.initializeAuth();
   }
@@ -105,40 +116,38 @@ export class HomeComponent implements OnInit {
   private loadAccessibleApps(): void {
     // แสดงทุกเมนูก่อน โดยไม่ต้องตรวจสอบสิทธิ์
     this.accessibleApps$ = of(this.getAppModules());
-    
-    // หลังจากนี้สามารถเพิ่มการตรวจสอบสิทธิ์ได้
-    // this.accessibleApps$ = combineLatest([
-    //   this.employeeAuthService.currentEmployee$,
-    //   this.employeeAuthService.currentJwtEmployee$,
-    //   this.menuPermissionService.getAccessibleMenus(),
-    //   this.menuPermissionService.menuPermissions$
-    // ]).pipe(
-    //   map(([currentEmployee, currentJwtEmployee, accessibleMenus, allMenus]) => {
-    //     // ตรวจสอบ JWT employee ก่อน
-    //     if (currentJwtEmployee) {
-    //       return this.getAppModules().filter(app => {
-    //         const hasJwtPermission = this.employeeAuthService.hasJwtMenuPermission(app.id, 'view');
-    //         return hasJwtPermission;
-    //       });
-    //     }
+  }
 
-    //     // ถ้าไม่มี JWT ให้ใช้ employee permissions
-    //     if (!currentEmployee) {
-    //       return [];
-    //     }
+  private loadAppCategories(): void {
+    this.appCategories$ = of(this.getAppCategories());
+  }
 
-    //     return this.getAppModules().filter(app => {
-    //       // ตรวจสอบสิทธิ์จาก employee permissions
-    //       const hasPermission = this.employeeAuthService.hasMenuPermission(app.id, 'view');
-          
-    //       // ตรวจสอบสิทธิ์จาก menu permissions
-    //       const menu = this.findMenuByPath(allMenus, app.path);
-    //       const hasMenuPermission = menu && menu.isVisible && menu.permissions.view;
-          
-    //       return hasPermission || hasMenuPermission;
-    //     });
-    //   })
-    // );
+  private getAppCategories(): AppCategory[] {
+    const apps = this.getAppModules();
+
+    return [
+      {
+        id: 'applications',
+        name: 'แอปพลิเคชันที่เข้าถึงได้',
+        description: 'แอปพลิเคชันหลักสำหรับการทำงานประจำวัน',
+        icon: 'ri-apps-line',
+        apps: apps.filter(app => app.category === 'applications')
+      },
+      {
+        id: 'services',
+        name: 'การบริการ',
+        description: 'บริการต่างๆ เพื่ออำนวยความสะดวกให้พนักงาน',
+        icon: 'ri-service-line',
+        apps: apps.filter(app => app.category === 'services')
+      },
+      {
+        id: 'system',
+        name: 'การตั้งค่าระบบ',
+        description: 'การจัดการและตั้งค่าระบบสำหรับผู้ดูแลระบบ',
+        icon: 'ri-settings-3-line',
+        apps: apps.filter(app => app.category === 'system')
+      }
+    ];
   }
 
   private loadUserInfo(): void {
@@ -198,6 +207,7 @@ export class HomeComponent implements OnInit {
 
   private getAppModules(): AppModule[] {
     return [
+      // แอปพลิเคชันที่เข้าถึงได้
       {
         id: 'myhr-plus',
         name: 'myhr-plus',
@@ -206,6 +216,7 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/logoallHR/myhr-plus.jpg',
         path: '/myhr-plus',
         isVisible: true,
+        category: 'applications',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
       {
@@ -216,6 +227,7 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/logoallHR/myHR-Lite-logo-new.png',
         path: '/myhr-lite',
         isVisible: true,
+        category: 'applications',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
       {
@@ -226,6 +238,7 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/logoallHR/zeemePlus.png',
         path: '/zeeme',
         isVisible: true,
+        category: 'applications',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
       {
@@ -236,6 +249,7 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/logoallHR/logo_myface.png',
         path: '/myface',
         isVisible: true,
+        category: 'applications',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
       {
@@ -246,6 +260,7 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/logoallHR/mylearn-logo.png',
         path: '/mylearn',
         isVisible: true,
+        category: 'applications',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
       {
@@ -256,6 +271,7 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/logoallHR/logo_myjob.png',
         path: '/myjob',
         isVisible: true,
+        category: 'applications',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
       {
@@ -266,8 +282,10 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/logoallHR/mySkill-x.png',
         path: '/myskill-x',
         isVisible: true,
+        category: 'applications',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
+      // การบริการ
       {
         id: 'dashboard',
         name: 'dashboard',
@@ -276,9 +294,22 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/icons/dashboard.png',
         path: '/dashboard',
         isVisible: true,
+        category: 'services',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
       {
+        id: 'meetingBooking',
+        name: 'meeting-booking',
+        displayName: 'Meeting Booking',
+        description: 'ระบบจองห้องประชุม',
+        icon: './assets/images/icons/calendar.png',
+        path: '/portal-manage/meeting-booking',
+        isVisible: true,
+        category: 'services',
+        permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
+      },
+      // การตั้งค่าระบบ
+      {
         id: 'permissionManagement',
         name: 'permission-management',
         displayName: 'Permission Management',
@@ -286,6 +317,7 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/icons/widget.png',
         path: '/portal-manage/permission-management',
         isVisible: true,
+        category: 'system',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
       {
@@ -296,6 +328,7 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/icons/users.png',
         path: '/portal-manage/role-management',
         isVisible: true,
+        category: 'system',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
       {
@@ -306,6 +339,7 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/icons/menu.png',
         path: '/portal-manage/menu-permission-management',
         isVisible: true,
+        category: 'system',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
       {
@@ -316,16 +350,7 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/icons/users.png',
         path: '/portal-manage/user-role-management',
         isVisible: true,
-        permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
-      },
-      {
-        id: 'meetingBooking',
-        name: 'meeting-booking',
-        displayName: 'Meeting Booking',
-        description: 'ระบบจองห้องประชุม',
-        icon: './assets/images/icons/calendar.png',
-        path: '/portal-manage/meeting-booking',
-        isVisible: true,
+        category: 'system',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
       {
@@ -336,6 +361,7 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/icons/building.png',
         path: '/portal-manage/company-management',
         isVisible: true,
+        category: 'system',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
       {
@@ -346,6 +372,7 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/icons/widget.png',
         path: '/portal-manage/widget-management',
         isVisible: true,
+        category: 'system',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       },
       {
@@ -356,6 +383,7 @@ export class HomeComponent implements OnInit {
         icon: './assets/images/icons/dashboard.png',
         path: '/portal-manage/dashboard-management',
         isVisible: true,
+        category: 'system',
         permissions: { view: true, create: false, edit: false, delete: false, export: false, import: false }
       }
     ];