@finema/finework-layer 0.2.65 → 0.2.66

package/app/components/Layout/User/index.vue

@@ -1,102 +1,102 @@
-<template>
-  <div class="overflow-hidden pt-[80px]">
-    <div class="flex min-h-[calc(100vh-80px)] flex-col">
-      <nav
-        class="fixed top-0 left-0 z-20 flex min-h-[80px] w-screen items-center justify-center bg-white"
-        style="box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04)"
-      >
-        <div class="mx-auto flex w-full px-4 md:px-8">
-          <div class="flex items-center gap-4">
-            <NuxtLink :to="routes.home.to">
-              <img
-                src="/logo-mini.png"
-                alt="logo_mini"
-                class="h-[27px] w-[172px] cursor-pointer"
-              />
-            </NuxtLink>
-            <Apps />
-          </div>
-
-          <div class="flex flex-1 items-center justify-end gap-2">
-            <DropdownMenu
-              :items="userMenuItems"
-              size="xl"
-              :content="{
-                align: 'end',
-                side: 'bottom',
-              }"
-              :ui="{
-                content: 'w-48',
-              }"
-            >
-              <div class="relative flex cursor-pointer items-center gap-2">
-                <div class="hidden flex-col justify-end text-right lg:flex">
-                  <p class="text-sm font-bold">
-                    {{
-                      auth.me.value?.display_name || auth.me.value?.full_name
-                    }}
-                  </p>
-                  <p class="text-muted text-xs">
-                    {{ auth.me.value?.email }}
-                  </p>
-                </div>
-                <Avatar
-                  class="border-muted size-[36px] border text-2xl"
-                  icon="ri:user-line"
-                  :src="auth.me.value?.avatar_url"
-                />
+<template>
+  <div class="overflow-hidden pt-[80px]">
+    <div class="flex min-h-[calc(100vh-80px)] flex-col">
+      <nav
+        class="fixed top-0 left-0 z-20 flex min-h-[80px] w-screen items-center justify-center bg-white"
+        style="box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04)"
+      >
+        <div class="mx-auto flex w-full px-4 md:px-8">
+          <div class="flex items-center gap-4">
+            <NuxtLink :to="routes.home.to">
+              <img
+                src="/logo-mini.png"
+                alt="logo_mini"
+                class="h-[27px] w-[172px] cursor-pointer"
+              />
+            </NuxtLink>
+            <Apps />
+          </div>
+
+          <div class="flex flex-1 items-center justify-end gap-2">
+            <DropdownMenu
+              :items="userMenuItems"
+              size="xl"
+              :content="{
+                align: 'end',
+                side: 'bottom',
+              }"
+              :ui="{
+                content: 'w-48',
+              }"
+            >
+              <div class="relative flex cursor-pointer items-center gap-2">
+                <div class="hidden flex-col justify-end text-right lg:flex">
+                  <p class="text-sm font-bold">
+                    {{
+                      auth.me.value?.display_name || auth.me.value?.full_name
+                    }}
+                  </p>
+                  <p class="text-muted text-xs">
+                    {{ auth.me.value?.email }}
+                  </p>
+                </div>
+                <Avatar
+                  class="border-muted size-[36px] border text-2xl"
+                  icon="ri:user-line"
+                  :src="auth.me.value?.avatar_url"
+                />
                 <Icon
                   name="i-ph:caret-down-light"
                   class="size-5"
-                />
-              </div>
-            </DropdownMenu>
-          </div>
-        </div>
-      </nav>
-      <main class="mx-auto w-full max-w-7xl flex-1 px-4 pb-20 2xl:max-w-7/10">
-        <div
-          v-if="app.pageMeta.title"
-          class="mb-4 flex flex-col justify-between gap-1 md:mb-6 md:gap-4 lg:flex-row lg:items-center"
-        >
-          <div class="flex flex-1 flex-col">
-            <h1
-              class="text-3xl font-bold wrap-break-word lg:max-w-2/3"
-              :title="app.pageMeta.title"
-            >
-              {{ app.pageMeta.title }}
-              <span id="page-title-extra" />
-            </h1>
-
-            <div id="page-subtitle" />
-          </div>
-          <div id="page-header" />
-        </div>
-        <slot />
-      </main>
-      <div id="page-footer" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { DropdownMenuItem } from '@nuxt/ui'
-import Apps from '../Apps.vue'
-
-const app = useApp()
-const auth = useAuth()
-const userMenuItems: DropdownMenuItem[] = [
-  {
-    label: 'View profile',
-    icon: 'i-lucide-user',
-    to: routes.account.profile.to,
-  },
-
-  {
-    label: routes.logout.label,
-    icon: 'i-lucide-log-out',
-    to: routes.logout.to,
-    external: true,
-  },
-]
-</script>
+                />
+              </div>
+            </DropdownMenu>
+          </div>
+        </div>
+      </nav>
+      <main class="mx-auto w-full max-w-7xl flex-1 px-4 pb-20 2xl:max-w-7/10">
+        <div
+          v-if="app.pageMeta.title"
+          class="mb-4 flex flex-col justify-between gap-1 md:mb-6 md:gap-4 lg:flex-row lg:items-center"
+        >
+          <div class="flex flex-1 flex-col">
+            <h1
+              class="text-3xl font-bold wrap-break-word lg:max-w-2/3"
+              :title="app.pageMeta.title"
+            >
+              {{ app.pageMeta.title }}
+              <span id="page-title-extra" />
+            </h1>
+
+            <div id="page-subtitle" />
+          </div>
+          <div id="page-header" />
+        </div>
+        <slot />
+      </main>
+      <div id="page-footer" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { DropdownMenuItem } from '@nuxt/ui'
+import Apps from '../Apps.vue'
+
+const app = useApp()
+const auth = useAuth()
+const userMenuItems: DropdownMenuItem[] = [
+  {
+    label: 'View profile',
+    icon: 'i-lucide-user',
+    to: routes.account.profile.to,
+  },
+
+  {
+    label: routes.logout.label,
+    icon: 'i-lucide-log-out',
+    to: routes.logout.to,
+    external: true,
+  },
+]
+</script>

package/app/components/StatusBox.vue

@@ -1,56 +1,56 @@
-<template>
-  <slot v-if="skip" />
-  <template v-else>
-    <Card v-if="status.isLoading">
-      <div class="flex items-center justify-center py-12">
-        <Loader />
-      </div>
-    </Card>
-
-    <!-- Not Found State -->
-    <Card v-else-if="status.isSuccess && !data || status.isError && status.errorData?.code === 'NOT_FOUND'">
-      <div class="py-12 text-center">
-        <Icon
-          name="lucide:search-x"
-          class="mx-auto mb-4 text-gray-400"
-          size="48"
-        />
-        <h3 class="mb-2 text-lg font-medium text-gray-900">
-          ไม่พบข้อมูล
-        </h3>
-        <p class="text-gray-600">
-          ไม่พบข้อมูลที่คุณค้นหา กรุณาลองใหม่อีกครั้ง
-        </p>
-      </div>
-    </Card>
-    <Card v-else-if="status.isError">
-      <div class="py-12 text-center">
-        <Icon
-          name="lucide:alert-circle"
-          class="mx-auto mb-4 text-red-500"
-          size="48"
-        />
-        <h3 class="mb-2 text-lg font-medium text-gray-900">
-          เกิดข้อผิดพลาด
-        </h3>
-        <p class="text-gray-600">
-          ไม่สามารถโหลดข้อมูลได้ กรุณาลองใหม่อีกครั้ง
-        </p>
-      </div>
-    </Card>
-    <slot
-      v-else-if="data"
-      :data="data"
-    />
-  </template>
-</template>
-
-<script lang="ts" setup generic="T">
-import type { IStatus } from '#core/types/lib'
-
-defineProps<{
-  status: IStatus
-  data: T
-  skip?: boolean
-}>()
-</script>
+<template>
+  <slot v-if="skip" />
+  <template v-else>
+    <Card v-if="status.isLoading">
+      <div class="flex items-center justify-center py-12">
+        <Loader />
+      </div>
+    </Card>
+
+    <!-- Not Found State -->
+    <Card v-else-if="status.isSuccess && !data || status.isError && status.errorData?.code === 'NOT_FOUND'">
+      <div class="py-12 text-center">
+        <Icon
+          name="lucide:search-x"
+          class="mx-auto mb-4 text-gray-400"
+          size="48"
+        />
+        <h3 class="mb-2 text-lg font-medium text-gray-900">
+          ไม่พบข้อมูล
+        </h3>
+        <p class="text-gray-600">
+          ไม่พบข้อมูลที่คุณค้นหา กรุณาลองใหม่อีกครั้ง
+        </p>
+      </div>
+    </Card>
+    <Card v-else-if="status.isError">
+      <div class="py-12 text-center">
+        <Icon
+          name="lucide:alert-circle"
+          class="mx-auto mb-4 text-red-500"
+          size="48"
+        />
+        <h3 class="mb-2 text-lg font-medium text-gray-900">
+          เกิดข้อผิดพลาด
+        </h3>
+        <p class="text-gray-600">
+          ไม่สามารถโหลดข้อมูลได้ กรุณาลองใหม่อีกครั้ง
+        </p>
+      </div>
+    </Card>
+    <slot
+      v-else-if="data"
+      :data="data"
+    />
+  </template>
+</template>
+
+<script lang="ts" setup generic="T">
+import type { IStatus } from '#core/types/lib'
+
+defineProps<{
+  status: IStatus
+  data: T
+  skip?: boolean
+}>()
+</script>

package/app/composables/useRequestOptions.ts

@@ -1,50 +1,50 @@
-import type { AxiosRequestConfig } from 'axios'
-
-export const useRequestOptions = () => {
-  const config = useRuntimeConfig()
-
-  const mock = (): Omit<AxiosRequestConfig, 'baseURL'> & {
-    baseURL: string
-  } => {
-    return {
-      baseURL: config.public.baseAPIMock || 'http://localhost:3000/api/mock',
-    }
-  }
-
-  const base = (): Omit<AxiosRequestConfig, 'baseURL'> & {
-    baseURL: string
-  } => {
-    return {
-      baseURL: config.public.baseAPI,
-    }
-  }
-
-  const auth = (): Omit<AxiosRequestConfig, 'baseURL'> & {
-    baseURL: string
-  } => {
-    return {
-      baseURL: config.public.baseAPI,
-      headers: {
-        Authorization: `Bearer ${useAuth().token.value}`,
-      },
-    }
-  }
-
-  const file = (): Omit<AxiosRequestConfig, 'baseURL'> & {
-    baseURL: string
-  } => {
-    return {
-      baseURL: config.public.baseAPI + '/uploads',
-      headers: {
-        Authorization: `Bearer ${useAuth().token.value}`,
-      },
-    }
-  }
-
-  return {
-    base,
-    mock,
-    auth,
-    file,
-  }
-}
+import type { AxiosRequestConfig } from 'axios'
+
+export const useRequestOptions = () => {
+  const config = useRuntimeConfig()
+
+  const mock = (): Omit<AxiosRequestConfig, 'baseURL'> & {
+    baseURL: string
+  } => {
+    return {
+      baseURL: config.public.baseAPIMock || 'http://localhost:3000/api/mock',
+    }
+  }
+
+  const base = (): Omit<AxiosRequestConfig, 'baseURL'> & {
+    baseURL: string
+  } => {
+    return {
+      baseURL: config.public.baseAPI,
+    }
+  }
+
+  const auth = (): Omit<AxiosRequestConfig, 'baseURL'> & {
+    baseURL: string
+  } => {
+    return {
+      baseURL: config.public.baseAPI,
+      headers: {
+        Authorization: `Bearer ${useAuth().token.value}`,
+      },
+    }
+  }
+
+  const file = (): Omit<AxiosRequestConfig, 'baseURL'> & {
+    baseURL: string
+  } => {
+    return {
+      baseURL: config.public.baseAPI + '/uploads',
+      headers: {
+        Authorization: `Bearer ${useAuth().token.value}`,
+      },
+    }
+  }
+
+  return {
+    base,
+    mock,
+    auth,
+    file,
+  }
+}

package/app/constants/routes.ts

@@ -1,86 +1,86 @@
-export const routes = {
-  home: {
-    label: 'หน้าแรก',
-    to: '/',
-  },
-  chooseTeam: {
-    label: 'เลือกทีม',
-    to: '/choose-team',
-  },
-  login: {
-    label: 'เลือก',
-    to: '/login',
-  },
-  logout: {
-    label: 'Log out',
-    to: '/api/auth/logout',
-  },
-  releaseHistory: {
-    label: 'Release History',
-    to: '/releases',
-    icon: 'heroicons:tag',
-  },
-  account: {
-    profile: {
-      label: 'โปรไฟล์',
-      to: '/account/profile',
-      icon: 'mage:user',
-    },
-  },
-
-  announcements: {
-    label: 'Finema Newsletter',
-    to: '/announcements',
-    icon: 'mage:announcement',
-  },
-
-  adminClockin: {
-    checkinDashboard: {
-      label: 'ภาพรวมเช็คอิน',
-      icon: 'mage:dashboard',
-      to: '/clockin-admin',
-      permissions: ['clockin:ADMIN'],
-    },
-  },
-  adminTimesheet: {
-    summaryReport: {
-      label: 'ภาพรวม',
-      icon: 'heroicons-outline:user-group',
-      to: '/timesheet-admin/reports/summary',
-      permissions: ['timesheet:ADMIN'],
-    },
-  },
-  admin: {
-    users: {
-      label: 'จัดการผู้ใช้งาน',
-      icon: 'hugeicons:user-circle-02',
-      to: '/admin/users',
-      // permissions: ['setting:SUPER'],
-    },
-  },
-  clockin: {
-    home: {
-      label: 'Clock-In',
-      icon: 'i-heroicons-outline:location-marker',
-      to: '/clockin',
-    },
-  },
-  timesheet: {
-    home: {
-      label: 'Timesheet',
-      icon: 'mage:dashboard',
-      to: '/timesheet',
-    },
-  },
-  pmo: {
-    project: {
-      projects: {
-        label: 'โครงการของฉัน',
-        to: '/pmo/projects',
-        icon: 'lucide:layers',
-        permissions: ['pmo:USER', 'pmo:ADMIN', 'pmo:SUPER'],
-      },
-    },
-  },
-
-} as const
+export const routes = {
+  home: {
+    label: 'หน้าแรก',
+    to: '/',
+  },
+  chooseTeam: {
+    label: 'เลือกทีม',
+    to: '/choose-team',
+  },
+  login: {
+    label: 'เลือก',
+    to: '/login',
+  },
+  logout: {
+    label: 'Log out',
+    to: '/api/auth/logout',
+  },
+  releaseHistory: {
+    label: 'Release History',
+    to: '/releases',
+    icon: 'heroicons:tag',
+  },
+  account: {
+    profile: {
+      label: 'โปรไฟล์',
+      to: '/account/profile',
+      icon: 'mage:user',
+    },
+  },
+
+  announcements: {
+    label: 'Finema Newsletter',
+    to: '/announcements',
+    icon: 'mage:announcement',
+  },
+
+  adminClockin: {
+    checkinDashboard: {
+      label: 'ภาพรวมเช็คอิน',
+      icon: 'mage:dashboard',
+      to: '/clockin-admin',
+      permissions: ['clockin:ADMIN'],
+    },
+  },
+  adminTimesheet: {
+    summaryReport: {
+      label: 'ภาพรวม',
+      icon: 'heroicons-outline:user-group',
+      to: '/timesheet-admin/reports/summary',
+      permissions: ['timesheet:ADMIN'],
+    },
+  },
+  admin: {
+    users: {
+      label: 'จัดการผู้ใช้งาน',
+      icon: 'hugeicons:user-circle-02',
+      to: '/admin/users',
+      // permissions: ['setting:SUPER'],
+    },
+  },
+  clockin: {
+    home: {
+      label: 'Clock-In',
+      icon: 'i-heroicons-outline:location-marker',
+      to: '/clockin',
+    },
+  },
+  timesheet: {
+    home: {
+      label: 'Timesheet',
+      icon: 'mage:dashboard',
+      to: '/timesheet',
+    },
+  },
+  pmo: {
+    project: {
+      projects: {
+        label: 'โครงการของฉัน',
+        to: '/pmo/projects',
+        icon: 'lucide:layers',
+        permissions: ['pmo:USER', 'pmo:ADMIN', 'pmo:SUPER'],
+      },
+    },
+  },
+
+} as const