@finema/finework-layer 2.0.51 → 2.0.53

package/app/components/PortalApp.vue

@@ -1,284 +1,126 @@
 <template>
-  <DefineTemplate>
-    <div class="space-y-6">
-      <div
-        v-if="dailyApps.length > 0"
-        class="space-y-5"
-      >
-        <div class="text-lg font-bold text-gray-600">
-          Daily work Apps
-        </div>
-        <div
-          class="grid"
-          :class="[isNavbar ?`gap-5 md:grid-cols-2 xl:grid-cols-4` : `grid-cols-1 gap-2`]"
-        >
-          <component
-            :is="app.status === StatusPortal.DEVELOPING ? 'div' : NuxtLink"
-            v-for="app in dailyApps"
-            :key="app.name"
-            :to="app.status !== StatusPortal.DEVELOPING ? app.to : undefined"
-            class="relative flex items-center gap-3 rounded-lg px-2.5 py-[15px]"
-            :class="app.status === StatusPortal.DEVELOPING
-              ? 'cursor-not-allowed bg-gray-200 opacity-60'
-              : 'bg-gray-100 hover:bg-gray-200'"
-            @click="app.status !== StatusPortal.DEVELOPING && handleLinkClick(app.to)"
-          >
-            <div
-              v-if="app.status === StatusPortal.DEVELOPING"
-              class="absolute top-2 right-2 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-semibold text-orange-600"
-            >
-              กำลังพัฒนา
-            </div>
-            <img
-              :src="app.logo"
-              :alt="app.label"
-              class="h-[45px] w-[45px] bg-white"
-            />
-            <div>
-              <div class="text-lg font-bold">
-                {{ app.label }}
-              </div>
-              <div class="text-sm text-gray-500">
-                {{ app.description }}
-              </div>
-            </div>
-          </component>
-        </div>
-      </div>
-      <div
-        v-if="managementApps.length > 0"
-        class="space-y-5"
-      >
-        <div class="text-lg font-bold text-gray-600">
-          Management
-        </div>
-        <div
-          class="grid"
-          :class="[isNavbar ?`gap-5 md:grid-cols-2 xl:grid-cols-4` : `grid-cols-1 gap-2`]"
-        >
-          <component
-            :is="app.status === StatusPortal.DEVELOPING ? 'div' : NuxtLink"
-            v-for="app in managementApps"
-            :key="app.name"
-            :to="app.status !== StatusPortal.DEVELOPING ? app.to : undefined"
-            class="relative flex items-center gap-3 rounded-lg px-2.5 py-[15px]"
-            :class="app.status === StatusPortal.DEVELOPING
-              ? 'cursor-not-allowed bg-gray-200 opacity-60'
-              : 'bg-gray-100 hover:bg-gray-200'"
-            @click="app.status !== StatusPortal.DEVELOPING && handleLinkClick(app.to)"
-          >
-            <div
-              v-if="app.status === StatusPortal.DEVELOPING"
-              class="absolute top-2 right-2 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-semibold text-orange-600"
-            >
-              กำลังพัฒนา
-            </div>
-            <img
-              :src="app.logo"
-              :alt="app.label"
-              class="h-[45px] w-[45px] bg-white"
-            />
-            <div>
-              <div class="text-lg font-bold">
-                {{ app.label }}
-              </div>
-              <div class="text-sm text-gray-500">
-                {{ app.description }}
-              </div>
-            </div>
-          </component>
-        </div>
-      </div>
+  <Card
+    v-if="categories.length > 0"
+    :ui="{
+      body: isNavbar
+        ? 'md:max-h-[calc(100vh-115px)] overflow-auto'
+        : 'h-full overflow-auto p-4!',
+    }"
+  >
+    <div class="space-y-6 bg-white">
+      <Input
+        v-model="search"
+        icon="ph:magnifying-glass"
+        placeholder="Search app"
+        size="lg"
+        :ui="{ base: 'rounded-lg' }"
+      />
 
       <div
-        v-if="financeApps.length > 0"
-        class="space-y-5"
+        v-for="category in filteredCategories"
+        :key="category.key"
+        class="space-y-3"
       >
-        <div class="text-lg font-bold text-gray-600">
-          Finance
-        </div>
-        <div
-          class="grid"
-          :class="[isNavbar ?`gap-5 md:grid-cols-2 xl:grid-cols-4` : `grid-cols-1 gap-2`]"
-        >
-          <component
-            :is="app.status === StatusPortal.DEVELOPING ? 'div' : NuxtLink"
-            v-for="app in financeApps"
-            :key="app.name"
-            :to="app.status !== StatusPortal.DEVELOPING ? app.to : undefined"
-            class="relative flex items-center gap-3 rounded-lg px-2.5 py-[15px]"
-            :class="app.status === StatusPortal.DEVELOPING
-              ? 'cursor-not-allowed bg-gray-200 opacity-60'
-              : 'bg-gray-100 hover:bg-gray-200'"
-            @click="app.status !== StatusPortal.DEVELOPING && handleLinkClick(app.to)"
-          >
-            <div
-              v-if="app.status === StatusPortal.DEVELOPING"
-              class="absolute top-2 right-2 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-semibold text-orange-600"
-            >
-              กำลังพัฒนา
-            </div>
-
-            <img
-              :src="app.logo"
-              :alt="app.label"
-              class="h-[45px] w-[45px] bg-white"
-            />
-
-            <div>
-              <div class="text-lg font-bold">
-                {{ app.label }}
-              </div>
-              <div class="text-sm text-gray-500">
-                {{ app.description }}
-              </div>
-            </div>
-          </component>
+        <div class="text-base font-bold">
+          {{ category.title }}
         </div>
-      </div>
 
-      <div
-        v-if="peopleApps.length >0"
-        class="space-y-5"
-      >
-        <div class="text-lg font-bold text-gray-600">
-          People
-        </div>
+        <!-- Navbar: compact icon-on-top grid -->
         <div
-          class="grid"
-          :class="[isNavbar ?`gap-5 md:grid-cols-2 xl:grid-cols-4` : `grid-cols-1 gap-2`]"
+          v-if="isNavbar"
+          class="grid gap-x-2 gap-y-4"
+          :class="gridColsClass"
         >
           <component
-            :is="app.status === StatusPortal.DEVELOPING ? 'div' : NuxtLink"
-            v-for="app in peopleApps"
+            :is="linkComponent(app)"
+            v-for="app in category.apps"
             :key="app.name"
-            :to="app.status !== StatusPortal.DEVELOPING ? app.to : undefined"
-            class="relative flex items-center gap-3 rounded-lg px-2.5 py-[15px]"
-            :class="app.status === StatusPortal.DEVELOPING
-              ? 'cursor-not-allowed bg-gray-200 opacity-60'
-              : 'bg-gray-100 hover:bg-gray-200'"
-            @click="app.status !== StatusPortal.DEVELOPING && handleLinkClick(app.to)"
+            :to="linkTo(app)"
+            class="group flex flex-col items-center gap-2 rounded-xl p-2 text-center transition-colors"
+            :class="isDeveloping(app) ? 'cursor-not-allowed opacity-60' : 'hover:bg-gray-100'"
+            @click="onAppClick(app)"
           >
-            <div
-              v-if="app.status === StatusPortal.DEVELOPING"
-              class="absolute top-2 right-2 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-semibold text-orange-600"
-            >
-              กำลังพัฒนา
-            </div>
-            <img
-              :src="app.logo"
-              :alt="app.label"
-              class="h-[45px] w-[45px] bg-white"
-            />
-            <div>
-              <div class="text-lg font-bold">
-                {{ app.label }}
-              </div>
-              <div class="text-sm text-gray-500">
-                {{ app.description }}
-              </div>
+            <div class="relative">
+              <img
+                :src="app.logo"
+                :alt="app.label"
+                class="size-12.5 rounded-xl object-contain"
+              />
+              <span
+                v-if="isDeveloping(app)"
+                class="absolute -top-1.5 -right-1.5 rounded-full bg-orange-100 px-1.5 py-0.5 text-[10px] font-semibold text-orange-600"
+              >
+                กำลังพัฒนา
+              </span>
             </div>
+            <span class="line-clamp-2 text-sm font-semibold">
+              {{ app.label }}
+            </span>
           </component>
         </div>
-      </div>
 
-      <div
-        v-if="legalApps.length > 0"
-        class="space-y-5"
-      >
-        <div class="text-lg font-bold text-gray-600">
-          Legal
-        </div>
+        <!-- Standalone: long list with descriptions -->
         <div
-          class="grid"
-          :class="[isNavbar ?`gap-5 md:grid-cols-2 xl:grid-cols-4` : `grid-cols-1 gap-2`]"
+          v-else
+          class="flex flex-col"
         >
           <component
-            :is="app.status === StatusPortal.DEVELOPING ? 'div' : NuxtLink"
-            v-for="app in legalApps"
+            :is="linkComponent(app)"
+            v-for="app in category.apps"
             :key="app.name"
-            :to="app.status !== StatusPortal.DEVELOPING ? app.to : undefined"
-            class="relative flex items-center gap-3 rounded-lg px-2.5 py-[15px]"
-            :class="app.status === StatusPortal.DEVELOPING
-              ? 'cursor-not-allowed bg-gray-200 opacity-60'
-              : 'bg-gray-100 hover:bg-gray-200'"
-            @click="app.status !== StatusPortal.DEVELOPING && handleLinkClick(app.to)"
+            :to="linkTo(app)"
+            class="flex items-start gap-3 border-b border-gray-100 px-1 py-3 transition-colors last:border-0"
+            :class="isDeveloping(app) ? 'cursor-not-allowed opacity-60' : 'hover:bg-gray-50'"
+            @click="onAppClick(app)"
           >
-            <div
-              v-if="app.status === StatusPortal.DEVELOPING"
-              class="absolute top-2 right-2 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-semibold text-orange-600"
-            >
-              กำลังพัฒนา
-            </div>
             <img
               :src="app.logo"
               :alt="app.label"
-              class="h-[45px] w-[45px] bg-white"
+              class="size-11 shrink-0 object-contain"
             />
-            <div>
-              <div class="text-lg font-bold">
+            <div class="min-w-0">
+              <div class="flex items-center gap-2 font-bold text-gray-900">
                 {{ app.label }}
+                <span
+                  v-if="isDeveloping(app)"
+                  class="rounded-full bg-orange-100 px-1.5 py-0.5 text-[10px] font-semibold text-orange-600"
+                >
+                  กำลังพัฒนา
+                </span>
               </div>
-              <div class="text-sm text-gray-500">
+              <div class="line-clamp-2 text-sm text-gray-500">
                 {{ app.description }}
               </div>
             </div>
           </component>
         </div>
       </div>
-    </div>
-  </DefineTemplate>
-  <Card
-    v-if="dailyApps.length > 0 || managementApps.length > 0 || financeApps.length > 0 || peopleApps.length > 0 || legalApps.length > 0"
-    :ui="{
-      body: isNavbar
-        ? 'md:max-h-[100vh] md:max-h-[calc(100vh-115px)]  overflow-auto'
-        : 'h-full overflow-auto p-4!',
-    }"
-  >
-    <div class="bg-white">
-      <ReuseTemplate v-if="isNavbar" />
-      <Collapsible
-        v-else
-        v-model:open="open"
-        default-open
-      >
-        <div class="flex items-center justify-between gap-4">
-          <div class="mb-5 flex items-center gap-2">
-            <img
-              src="/icon-finema.png"
-              alt="icon-finema"
-              class="h-8 w-8 -translate-y-1"
-            />
-            <div class="text-2xl font-bold">
-              My Apps
-            </div>
-          </div>
 
-          <Button
-            v-if="!isNavbar"
-            variant="outline"
-            color="neutral"
-            :icon="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
-          />
-        </div>
-        <template #content>
-          <ReuseTemplate />
-        </template>
-      </Collapsible>
+      <Empty
+        v-if="search && filteredCategories.length === 0"
+        icon="ph:magnifying-glass"
+        message="No apps found"
+      />
     </div>
   </Card>
 </template>
 
 <script lang="ts" setup>
 import { resolveComponent } from 'vue'
-import { createReusableTemplate } from '@vueuse/core'
+// Import the shared maps straight from the layer so PortalApp stays deterministic
+// even in apps that shadow UserModuleLabel / UserModuleLogo with their own copy.
+import {
+  UserModuleAdminLabel,
+  UserModuleAdminLogo,
+  UserModuleLabel,
+  UserModuleLogo,
+} from '#layer/app/composables/useAuth'
 
 const emit = defineEmits<{
   (e: 'close'): void
 }>()
 
-const props = defineProps<{
+defineProps<{
   isNavbar?: boolean
 }>()
 
@@ -286,11 +128,26 @@ const enum StatusPortal {
   ACTIVE = 'active',
   DEVELOPING = 'developing',
 }
+
+interface IPortalApp {
+  name: string
+  label: string
+  logo: string
+  description: string
+  to: string
+  status: StatusPortal
+}
+
+interface IPortalCategory {
+  key: string
+  title: string
+  apps: IPortalApp[]
+}
+
 const NuxtLink = resolveComponent('NuxtLink')
 const auth = useAuth()
 const route = useRoute()
-const open = ref(true)
-const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+const search = ref('')
 
 const handleLinkClick = (to: string) => {
   if (route.path === to) {
@@ -298,372 +155,194 @@ const handleLinkClick = (to: string) => {
   }
 }
 
-const dailyApps = computed(() => [
-  ...(auth.hasPermission(UserModule.CHECKIN, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'Clock-In',
-        logo: '/admin/clock-in-logo.png',
-        label: ' Clock-In',
-        description: 'เช็กอินเวลางาน และเลือกสถานที่ทำงาน',
-        to: routes.clockin.home.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+const isDeveloping = (app: IPortalApp) => app.status === StatusPortal.DEVELOPING
+const linkComponent = (app: IPortalApp) => (isDeveloping(app) ? 'div' : NuxtLink)
+const linkTo = (app: IPortalApp) => (isDeveloping(app) ? undefined : app.to)
+
+const onAppClick = (app: IPortalApp) => {
+  if (!isDeveloping(app)) {
+    handleLinkClick(app.to)
+  }
+}
+
+const USER_ADMIN_SUPER = [Permission.USER, Permission.ADMIN, Permission.SUPER]
+const ADMIN_SUPER = [Permission.ADMIN, Permission.SUPER]
+
+const can = (module: UserModule, ...permissions: AccessPermission[]) =>
+  auth.hasPermission(module, ...permissions)
+
+/** App whose label/logo come from the shared UserModule maps. */
+const toApp = (
+  module: UserModule,
+  to: string,
+  description: string,
+  overrides: Partial<IPortalApp> = {},
+): IPortalApp => ({
+  name: overrides.name ?? module,
+  label: overrides.label ?? UserModuleLabel[module as keyof typeof UserModuleLabel],
+  logo: overrides.logo ?? UserModuleLogo[module as keyof typeof UserModuleLogo],
+  description,
+  to,
+  status: overrides.status ?? StatusPortal.ACTIVE,
+})
+
+/** Admin-console variant of a module, using the shared admin maps. */
+const toAdminApp = (
+  module: keyof typeof UserModuleAdminLabel,
+  to: string,
+  description: string,
+): IPortalApp => ({
+  name: `${module}-admin`,
+  label: UserModuleAdminLabel[module],
+  logo: UserModuleAdminLogo[module],
+  description,
+  to,
+  status: StatusPortal.ACTIVE,
+})
+
+const dailyApps = computed<IPortalApp[]>(() => [
+  ...(can(UserModule.CHECKIN, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.CHECKIN, routes.clockin.home.to, 'เช็กอินเวลางาน และเลือกสถานที่ทำงาน')]
     : []),
-  {
-    name: 'Timesheet',
-    logo: '/admin/timesheet-logo.png',
-    label: ' Timesheet',
-    description: 'บันทึกงานที่ทำในแต่ละวัน',
-    to: routes.timesheet.home.to,
-    status: StatusPortal.ACTIVE,
-  },
-  {
-    name: 'todo',
-    logo: '/admin/todo.png',
-    label: 'Todo',
-    description: 'ระบบจัดการงาน',
-    to: routes.todo.dashboard.to,
-    status: StatusPortal.ACTIVE,
-  },
-  {
-    name: 'Request',
-    logo: '/admin/request.png',
-    label: 'Request',
-    description: 'ระบบขอ ลา เบิก อนุมัติรายการต่างๆ',
-    to: routes.request.myRequest.requests.to,
-    status: StatusPortal.ACTIVE,
-  },
+  toApp(UserModule.TIMESHEET, routes.timesheet.home.to, 'บันทึกงานที่ทำในแต่ละวัน'),
+  toApp(UserModule.TODO, routes.todo.dashboard.to, 'ระบบจัดการงาน'),
+  toApp(UserModule.REQUEST, routes.request.myRequest.requests.to, 'ระบบขอ ลา เบิก อนุมัติรายการต่างๆ'),
 ])
 
-const managementApps = computed(() => [
-  ...(auth.hasPermission(
-    UserModule.PMO,
-    Permission.ADMIN,
-    Permission.USER,
-    Permission.SUPER,
-  )
-    ? [
-      {
-        name: 'pmo',
-        logo: '/admin/pmo-logo.png',
-        label: 'PMO',
-        description: 'จัดระเบียบและบริหารโครงการของคุณ',
-        to: routes.pmo.project.projects.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+const managementApps = computed<IPortalApp[]>(() => [
+  ...(can(UserModule.PMO, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.PMO, routes.pmo.project.projects.to, 'จัดระเบียบและบริหารโครงการของคุณ')]
     : []),
-  ...(auth.hasPermission(
-    UserModule.PMO_SETUP,
-    Permission.ADMIN,
-    Permission.USER,
-    Permission.SUPER,
-  )
-    ? [
-      {
-        name: 'pmo-setup',
-        logo: '/admin/pmo_setup.png',
-        label: 'Lead in',
-        description: 'ตั้งค่าและบริหารจัดการโครงการ PMO',
-        to: routes.pmoSetup.dashboard.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.PMO_SETUP, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.PMO_SETUP, routes.pmoSetup.dashboard.to, 'ตั้งค่าและบริหารจัดการโครงการ PMO')]
     : []),
-  ...(auth.hasPermission(
-    UserModule.PMO_PRESALE_BIDDING,
-    Permission.ADMIN,
-    Permission.USER,
-    Permission.SUPER,
-  )
-    ? [
-      {
-        name: 'pmo-presale-bidding',
-        logo: '/admin/pmo_presale_bidding.png',
-        label: 'Presale & Bidding',
-        description: 'บริหารจัดการงาน Presale และ Bidding',
-        to: routes.pmoPresaleBidding.dashboard.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.PMO_PRESALE_BIDDING, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.PMO_PRESALE_BIDDING, routes.pmoPresaleBidding.dashboard.to, 'บริหารจัดการงาน Presale และ Bidding')]
     : []),
-  ...(auth.hasPermission(
-    UserModule.PMO_DELIVERY,
-    Permission.ADMIN,
-    Permission.USER,
-    Permission.SUPER,
-  )
-    ? [
-      {
-        name: 'pmo-delivery',
-        logo: '/admin/pmo_delivery.png',
-        label: 'Delivery',
-        description: 'บริหารจัดการโครงการช่วง Delivery',
-        to: routes.pmoDelivery.dashboard.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.PMO_DELIVERY, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.PMO_DELIVERY, routes.pmoDelivery.dashboard.to, 'บริหารจัดการโครงการช่วง Delivery')]
     : []),
-  ...(auth.hasPermission(
-    UserModule.PMO_WARRANTY,
-    Permission.ADMIN,
-    Permission.USER,
-    Permission.SUPER,
-  )
-    ? [
-      {
-        name: 'pmo-warranty',
-        logo: '/admin/pmo_warranty.png',
-        label: 'Warranty',
-        description: 'บริหารจัดการโครงการช่วง Warranty',
-        to: routes.pmoWarranty.dashboard.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.PMO_WARRANTY, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.PMO_WARRANTY, routes.pmoWarranty.dashboard.to, 'บริหารจัดการโครงการช่วง Warranty')]
     : []),
-  ...(auth.hasPermission(UserModule.CHECKIN, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'clockin-admin',
-        logo: '/admin/clock-in-admin-logo.png',
-        label: 'Clock-in Report',
-        description: 'รายงานการลงเวลา',
-        to: routes.adminClockin.checkinDashboard.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.RESOURCE_ALLOCATION, ...ADMIN_SUPER)
+    ? [toApp(UserModule.RESOURCE_ALLOCATION, routes.resourceAllocation.dashboard.to, 'วางแผนและจัดสรรกำลังคนในโครงการ')]
     : []),
-
-  ...(auth.hasPermission(UserModule.TIMESHEET, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'timesheet-admin',
-        logo: '/admin/timesheet-admin-logo.png',
-        label: 'Timesheet Report',
-        description: 'รายงานการบันทึกข้อมูลไทม์ชีท',
-        to: routes.adminTimesheet.summaryReport.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.CHECKIN, ...ADMIN_SUPER)
+    ? [toAdminApp(UserModule.CHECKIN, routes.adminClockin.checkinDashboard.to, 'รายงานการลงเวลา')]
     : []),
-  ...(auth.hasPermission(UserModule.SETTING, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'report',
-        logo: '/admin/report.svg',
-        label: 'Report',
-        description: 'รายงานภาพรวมบริษัท',
-        to: routes.report.checkinSummaryDashboard.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.TIMESHEET, ...ADMIN_SUPER)
+    ? [toAdminApp(UserModule.TIMESHEET, routes.adminTimesheet.summaryReport.to, 'รายงานการบันทึกข้อมูลไทม์ชีท')]
     : []),
-  ...(auth.hasPermission(UserModule.TOR, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'tor',
-        logo: '/admin/tor.svg',
-        label: 'Presales Tools',
-        description: 'ระบบสร้างตารางเปรียบเทียบข้อกำหนด',
-        to: routes.tor.home.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.SETTING, Permission.SUPER)
+    ? [toAdminApp(UserModule.SETTING, routes.report.checkinSummaryDashboard.to, 'รายงานภาพรวมบริษัท')]
     : []),
-  ...(auth.hasPermission(UserModule.SUPPORT, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'support',
-        logo: '/admin/support.svg',
-        label: 'Support',
-        description: 'Heatmap Monitor & Report',
-        to: routes.support.home.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.TOR, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.TOR, routes.tor.home.to, 'ระบบสร้างตารางเปรียบเทียบข้อกำหนด')]
     : []),
-  ...(auth.hasPermission(UserModule.DOCUMENT, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'document',
-        logo: '/admin/document.svg',
-        label: 'Document Flow',
-        description: 'ทะเบียนเอกสาร รับ-ส่ง',
-        to: routes.docsManagement.root.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.SUPPORT, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.SUPPORT, routes.support.home.to, 'Heatmap Monitor & Report')]
+    : []),
+  ...(can(UserModule.DOCUMENT, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.DOCUMENT, routes.docsManagement.root.to, 'ทะเบียนเอกสาร รับ-ส่ง')]
     : []),
-
 ])
 
-const financeApps = computed(() => [
-
-  ...(auth.hasPermission(UserModule.QUOTATION, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'Quotation',
-        logo: '/admin/quotation.png',
-        label: 'Quotation',
-        description: 'รายรับรายจ่ายงบประมาณโครงการ',
-        to: routes.quotation.quotations.home.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+const financeApps = computed<IPortalApp[]>(() => [
+  ...(can(UserModule.QUOTATION, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.QUOTATION, routes.quotation.quotations.home.to, 'รายรับรายจ่ายงบประมาณโครงการ')]
     : []),
-  ...(auth.hasPermission(UserModule.COSTSHEET, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'Cost Sheet',
-        logo: '/admin/cost-sheet.png',
-        label: 'Cost Sheet',
-        description: 'รายรับรายจ่ายงบประมาณโครงการ',
-        to: routes.costSheet.overview.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.COSTSHEET, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.COSTSHEET, routes.costSheet.overview.to, 'รายรับรายจ่ายงบประมาณโครงการ')]
     : []),
-  ...(auth.hasPermission(UserModule.EFACTORING, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'eFactoring',
-        logo: '/admin/efactoring.png',
-        label: 'eFactoring',
-        description: 'การเบิกเงินหมุนเวียนกับธนาคาร',
-        to: routes.eFactoring.dashboard.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.EFACTORING, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.EFACTORING, routes.eFactoring.dashboard.to, 'การเบิกเงินหมุนเวียนกับธนาคาร')]
     : []),
-  ...(auth.hasPermission(UserModule.LG, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'Guarantee',
-        logo: '/admin/guarantee.png',
-        label: 'งบค้ำประกัน',
-        description: 'การเบิกเงินค้ำซองและค้ำสัญญา',
-        to: routes.lg.overview.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.LG, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.LG, routes.lg.overview.to, 'การเบิกเงินค้ำซองและค้ำสัญญา')]
     : []),
-  ...(auth.hasPermission(UserModule.LOAN, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'Loan',
-        logo: '/admin/loan.svg',
-        label: 'Loan',
-        description: 'รายการกู้เงินจากธนาคาร',
-        to: routes.loan.list.lists.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.LOAN, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.LOAN, routes.loan.list.lists.to, 'รายการกู้เงินจากธนาคาร')]
     : []),
 ])
 
-const peopleApps = computed(() => [
-  ...(auth.hasPermission(UserModule.EMPLOYEE, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'Employee',
-        logo: '/admin/employee.png',
-        label: 'Employee',
-        description: 'ระบบจัดการข้อมูลพนักงาน',
-        to: routes.employee.root.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+const peopleApps = computed<IPortalApp[]>(() => [
+  ...(can(UserModule.EMPLOYEE, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.EMPLOYEE, routes.employee.root.to, 'ระบบจัดการข้อมูลพนักงาน')]
     : []),
-  ...(auth.hasPermission(UserModule.NEWSLETTER, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'Newsletter',
-        logo: '/admin/newsletter.png',
-        label: 'Newsletter',
-        description: 'ระบบจัดการข่าวสาร',
-        to: routes.newsletter.announcement.announcements.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.NEWSLETTER, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.NEWSLETTER, routes.newsletter.announcement.announcements.to, 'ระบบจัดการข่าวสาร')]
     : []),
-
-  ...(auth.hasPermission(UserModule.ASSET, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'Assets',
-        logo: '/admin/assets.png',
-        label: 'Assets',
-        description: 'ระบบจัดการสินทรัพย์',
-        to: routes.asset.dashboard.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.ASSET, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.ASSET, routes.asset.dashboard.to, 'ระบบจัดการสินทรัพย์')]
     : []),
-  ...(auth.hasPermission(UserModule.RESOURCE, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'Resource',
-        logo: '/admin/resource.svg',
-        label: 'Resource',
-        description: 'ระบบจัดการทรัพยากรบุคคล',
-        to: routes.resource.talentSearchAndCvBuilder.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.RESOURCE, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.RESOURCE, routes.resource.talentSearchAndCvBuilder.to, 'ระบบจัดการทรัพยากรบุคคล')]
     : []),
-  ...(auth.hasPermission(UserModule.REQUEST, Permission.SUPER, Permission.ADMIN)
-    ? [
-      {
-        name: 'Request Admin',
-        logo: '/admin/request-admin.svg',
-        label: 'Request Admin',
-        description: 'ระบบจัดการคำขออนุมัติต่างๆ',
-        to: routes.requestAdmin.userRequest.users.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.REQUEST, Permission.SUPER, Permission.ADMIN)
+    ? [toAdminApp(UserModule.REQUEST, routes.requestAdmin.userRequest.users.to, 'ระบบจัดการคำขออนุมัติต่างๆ')]
     : []),
-  ...(auth.hasPermission(UserModule.EVALUATION, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'Evaluation',
-        logo: '/admin/evaluation.png',
-        label: 'Evaluation',
-        description: 'ระบบจัดการการประเมิน',
-        to: routes.evaluation.general.generals.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.EVALUATION, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.EVALUATION, routes.evaluation.general.generals.to, 'ระบบจัดการการประเมิน')]
     : []),
-  ...(auth.hasPermission(UserModule.RECRUIT, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'Recruit',
-        logo: '/admin/recruit.png',
-        label: 'Recruit',
-        description: 'ระบบการสรรหาบุคลากร',
-        to: routes.recruit.root.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+  ...(can(UserModule.RECRUIT, ...ADMIN_SUPER)
+    ? [toApp(UserModule.RECRUIT, routes.recruit.root.to, 'ระบบการสรรหาบุคลากร')]
     : []),
-
 ])
 
-const legalApps = computed(() => [
-  ...(auth.hasPermission(UserModule.CONTRACT, Permission.USER, Permission.ADMIN, Permission.SUPER)
-    ? [
-      {
-        name: 'Contract',
-        logo: '/admin/contract.png',
-        label: 'Contract',
-        description: 'สร้างและจัดการสัญญา',
-        to: routes.legal.dashboard.to,
-        status: StatusPortal.ACTIVE,
-      },
-    ]
+const legalApps = computed<IPortalApp[]>(() => [
+  ...(can(UserModule.CONTRACT, ...USER_ADMIN_SUPER)
+    ? [toApp(UserModule.CONTRACT, routes.legal.dashboard.to, 'สร้างและจัดการสัญญา')]
     : []),
 ])
+
+const categories = computed<IPortalCategory[]>(() =>
+  [
+    {
+      key: 'daily',
+      title: 'Daily work Apps',
+      apps: dailyApps.value,
+    },
+    {
+      key: 'management',
+      title: 'Management',
+      apps: managementApps.value,
+    },
+    {
+      key: 'finance',
+      title: 'Finance',
+      apps: financeApps.value,
+    },
+    {
+      key: 'people',
+      title: 'People',
+      apps: peopleApps.value,
+    },
+    {
+      key: 'legal',
+      title: 'Legal',
+      apps: legalApps.value,
+    },
+  ].filter((category) => category.apps.length > 0),
+)
+
+const filteredCategories = computed<IPortalCategory[]>(() => {
+  const keyword = search.value.trim().toLowerCase()
+
+  if (!keyword) {
+    return categories.value
+  }
+
+  return categories.value
+    .map((category) => ({
+      ...category,
+      apps: category.apps.filter((app) =>
+        app.label.toLowerCase().includes(keyword)
+        || app.description.toLowerCase().includes(keyword),
+      ),
+    }))
+    .filter((category) => category.apps.length > 0)
+})
+
+const gridColsClass = 'grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-7'
 </script>