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'">