@finema/finework-layer 2.0.62 → 2.0.64

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [2.0.64](https://gitlab.finema.co/finema/internal/finework/compare/2.0.63...2.0.64) (2026-09-15)
+
+### Bug Fixes
+
+* fetch PDF as blob to bypass X-Frame-Options restrictions and add loading states ([4584b67](https://gitlab.finema.co/finema/internal/finework/commit/4584b67b555b19a3d2f10a25f1d89f9340dec134))
+
+## [2.0.63](https://gitlab.finema.co/finema/internal/finework/compare/2.0.62...2.0.63) (2026-09-15)
+
 ## [2.0.62](https://gitlab.finema.co/finema/internal/finework/compare/2.0.61...2.0.62) (2026-09-15)
 
 ### Bug Fixes

package/app/components/HelpHub/ManualViewer.vue

@@ -137,7 +137,7 @@
                     :alt="group.label"
                     class="size-4 rounded"
                   />
-                  <span class="text-xs font-semibold tracking-wide text-gray-500 uppercase">
+                  <span class="text-xs font-semibold">
                     {{ group.label }}
                   </span>
                   <span
@@ -246,9 +246,9 @@
           class="relative flex-1 overflow-hidden bg-gray-600"
         >
           <iframe
-            v-if="current?.file"
-            :key="current.file.url"
-            :src="`${current.file.url}#view=FitH`"
+            v-if="viewerBlobUrl"
+            :key="viewerBlobUrl"
+            :src="`${viewerBlobUrl}#view=FitH`"
             title="User manual"
             class="size-full border-0"
           />
@@ -256,7 +256,7 @@
             v-else
             class="flex h-full items-center justify-center bg-white text-sm text-gray-500"
           >
-            ไม่พบไฟล์คู่มือ
+            {{ viewerError ? 'ไม่สามารถโหลดไฟล์ได้' : (current?.file ? 'กำลังโหลด...' : 'ไม่พบไฟล์คู่มือ') }}
           </div>
         </div>
       </div>
@@ -333,6 +333,41 @@ const current = computed<IManual | null>(
   () => props.manuals.find((m) => m.id === selectedId.value) ?? null,
 )
 
+// The API sets X-Frame-Options/CSP frame-ancestors that block embedding the
+// PDF URL directly in an <iframe> across subdomains. Fetching the bytes and
+// rendering via a blob: URL sidesteps that, since it isn't a framed request.
+const viewerBlobUrl = ref<string | null>(null)
+const viewerError = ref(false)
+
+const revokeViewerBlobUrl = () => {
+  if (viewerBlobUrl.value) {
+    URL.revokeObjectURL(viewerBlobUrl.value)
+    viewerBlobUrl.value = null
+  }
+}
+
+watch(() => current.value?.file?.url, async (url) => {
+  revokeViewerBlobUrl()
+  viewerError.value = false
+
+  if (!url) return
+
+  try {
+    const res = await fetch(url)
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+
+    const blob = await res.blob()
+
+    viewerBlobUrl.value = URL.createObjectURL(blob)
+  } catch {
+    viewerError.value = true
+  }
+}, {
+  immediate: true,
+})
+
+onBeforeUnmount(revokeViewerBlobUrl)
+
 const canManage = (app: string) =>
   auth.isSuperAdmin.value || auth.hasPermission(app as UserModule, Permission.SUPER)
 

package/app/composables/useAuth.ts

@@ -116,63 +116,63 @@ export enum UserModule {
 }
 
 export const UserModuleLabel = {
+  [UserModule.ASSET]: 'Asset',
   [UserModule.CHECKIN]: 'Clock-In',
-  [UserModule.TIMESHEET]: 'Timesheet',
-  [UserModule.TODO]: 'Todo',
-  [UserModule.PMO]: 'PMO',
-  [UserModule.REQUEST]: 'Request',
-  [UserModule.SETTING]: 'Setting',
-  [UserModule.QUOTATION]: 'Quotation',
-  [UserModule.COSTSHEET]: 'Cost Sheet',
-  [UserModule.NEWSLETTER]: 'Newsletter',
   [UserModule.CONTRACT]: 'Contract',
-  [UserModule.EVALUATION]: 'Evaluation',
-  [UserModule.EMPLOYEE]: 'Employee',
-  [UserModule.ASSET]: 'Asset',
-  [UserModule.RECRUIT]: 'Recruit',
-  [UserModule.LG]: 'งบค้ำประกัน',
+  [UserModule.COSTSHEET]: 'Cost Sheet',
+  [UserModule.DOCUMENT]: 'Document',
   [UserModule.EFACTORING]: 'E-Factoring',
-  [UserModule.RESOURCE]: 'Resource',
+  [UserModule.EMPLOYEE]: 'Employee',
+  [UserModule.EVALUATION]: 'Evaluation',
+  [UserModule.PMO_SETUP]: 'Lead in',
   [UserModule.LOAN]: 'Loan',
-  [UserModule.PURCHASE]: 'Purchase',
+  [UserModule.NEWSLETTER]: 'Newsletter',
+  [UserModule.PMO]: 'PMO',
+  [UserModule.PMO_PRESALE_BIDDING]: 'Presale & Bidding',
   [UserModule.TOR]: 'Presales Tools',
+  [UserModule.PMO_DELIVERY]: 'Project Delivery',
+  [UserModule.PURCHASE]: 'Purchase',
+  [UserModule.QUOTATION]: 'Quotation',
+  [UserModule.RECRUIT]: 'Recruit',
+  [UserModule.REQUEST]: 'Request',
+  [UserModule.RESOURCE]: 'Resource',
+  [UserModule.RESOURCE_ALLOCATION]: 'Resource Allocation',
+  [UserModule.SETTING]: 'Setting',
   [UserModule.SUPPORT]: 'Support',
-  [UserModule.PMO_SETUP]: 'Lead In',
-  [UserModule.PMO_PRESALE_BIDDING]: 'Presale & Bidding',
-  [UserModule.PMO_DELIVERY]: 'Delivery',
+  [UserModule.TIMESHEET]: 'Timesheet',
+  [UserModule.TODO]: 'Todo',
   [UserModule.PMO_WARRANTY]: 'Warranty',
-  [UserModule.RESOURCE_ALLOCATION]: 'Resource Allocation',
-  [UserModule.DOCUMENT]: 'Document',
+  [UserModule.LG]: 'งบค้ำประกัน',
 }
 
 export const UserModuleLogo = {
+  [UserModule.ASSET]: '/admin/asset.svg',
   [UserModule.CHECKIN]: '/admin/clock-in-logo.svg',
-  [UserModule.TIMESHEET]: '/admin/timesheet-logo.svg',
-  [UserModule.TODO]: '/admin/todo.svg',
-  [UserModule.PMO]: '/admin/pmo-logo.svg',
-  [UserModule.REQUEST]: '/admin/request.svg',
-  [UserModule.SETTING]: '/admin/report.svg',
-  [UserModule.QUOTATION]: '/admin/quotation.svg',
-  [UserModule.COSTSHEET]: '/admin/cost-sheet.svg',
-  [UserModule.NEWSLETTER]: '/admin/newsletter.svg',
   [UserModule.CONTRACT]: '/admin/contract.svg',
-  [UserModule.EVALUATION]: '/admin/evaluation.svg',
-  [UserModule.EMPLOYEE]: '/admin/employee.svg',
-  [UserModule.ASSET]: '/admin/asset.svg',
-  [UserModule.RECRUIT]: '/admin/recruit.svg',
-  [UserModule.LG]: '/admin/guarantee.svg',
+  [UserModule.COSTSHEET]: '/admin/cost-sheet.svg',
+  [UserModule.DOCUMENT]: '/admin/document.svg',
   [UserModule.EFACTORING]: '/admin/efactoring.svg',
-  [UserModule.RESOURCE]: '/admin/resource.svg',
-  [UserModule.LOAN]: '/admin/loan.svg',
-  [UserModule.PURCHASE]: '/admin/purchase.svg',
-  [UserModule.TOR]: '/admin/presale_tool.svg',
-  [UserModule.SUPPORT]: '/admin/support.svg',
+  [UserModule.EMPLOYEE]: '/admin/employee.svg',
+  [UserModule.EVALUATION]: '/admin/evaluation.svg',
   [UserModule.PMO_SETUP]: '/admin/pmo_setup.svg',
+  [UserModule.LOAN]: '/admin/loan.svg',
+  [UserModule.NEWSLETTER]: '/admin/newsletter.svg',
+  [UserModule.PMO]: '/admin/pmo-logo.svg',
   [UserModule.PMO_PRESALE_BIDDING]: '/admin/pmo_presale_bidding.svg',
+  [UserModule.TOR]: '/admin/presale_tool.svg',
   [UserModule.PMO_DELIVERY]: '/admin/pmo_delivery.svg',
-  [UserModule.PMO_WARRANTY]: '/admin/pmo_warranty.svg',
+  [UserModule.PURCHASE]: '/admin/purchase.svg',
+  [UserModule.QUOTATION]: '/admin/quotation.svg',
+  [UserModule.RECRUIT]: '/admin/recruit.svg',
+  [UserModule.REQUEST]: '/admin/request.svg',
+  [UserModule.RESOURCE]: '/admin/resource.svg',
   [UserModule.RESOURCE_ALLOCATION]: '/admin/resource-allocation.svg',
-  [UserModule.DOCUMENT]: '/admin/document.svg',
+  [UserModule.SETTING]: '/admin/report.svg',
+  [UserModule.SUPPORT]: '/admin/support.svg',
+  [UserModule.TIMESHEET]: '/admin/timesheet-logo.svg',
+  [UserModule.TODO]: '/admin/todo.svg',
+  [UserModule.PMO_WARRANTY]: '/admin/pmo_warranty.svg',
+  [UserModule.LG]: '/admin/guarantee.svg',
 }
 
 // Admin-console variants of a module (shown as their own app in the portal)
@@ -190,14 +190,16 @@ export const UserModuleAdminLogo = {
   [UserModule.SETTING]: '/admin/report.svg',
 }
 
-export const UserModuleOptions = Object.entries(UserModuleLabel).map(([value, label]) => ({
-  value,
-  label,
-  avatar: {
-    src: UserModuleLogo[value as keyof typeof UserModuleLogo],
-    alt: label,
-  },
-}))
+export const UserModuleOptions = Object.entries(UserModuleLabel)
+  .map(([value, label]) => ({
+    value,
+    label,
+    avatar: {
+      src: UserModuleLogo[value as keyof typeof UserModuleLogo],
+      alt: label,
+    },
+  }))
+  .sort((a, b) => a.label.localeCompare(b.label))
 
 export interface IUserAccessLevel {
   used_id: string

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@finema/finework-layer",
   "type": "module",
-  "version": "2.0.62",
+  "version": "2.0.64",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground -o",