@finema/finework-layer 0.0.15 → 0.0.17

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

@@ -1,220 +1,220 @@
-<template>
-  <div class="relative flex min-h-screen flex-1">
-    <div
-      :class="[`
-        fixed inset-0 z-30 hidden w-auto
-        lg:block
-      `, {
-        'max-w-[88px]': isCollapsed,
-        'max-w-[260px]': !isCollapsed,
-      }]"
-    >
-      <Sidebar
-        :label="label"
-        :is-collapsed="isCollapsed"
-        :items="sidebarItems"
-        :is-group="isSidebarGroup"
-        @toggle-collapsed="isCollapsed = !isCollapsed"
-      />
-    </div>
-    <div
-      :class="['w-full bg-gray-50', {
-        'lg:pl-[88px]': isCollapsed,
-        'lg:pl-[260px]': !isCollapsed,
-      }]"
-    >
-      <nav
-        class="
-          fixed top-0 left-0 z-20 flex min-h-[64px] w-screen items-center justify-between
-          gap-4 bg-white px-5 lg:min-h-[72px]
-          lg:justify-end
-        "
-        style="box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);"
-      >
-        <div class="flex items-center gap-4">
-          <Slideover
-            v-model:open="isShowSidebarMobile"
-            :ui="{
-              content: 'w-[80%] max-w-[260px] lg:hidden',
-              overlay: 'lg:hidden',
-            }"
-            side="left"
-          >
-            <svg
-              class="
-                cursor-pointer
-                lg:hidden
-              "
-              width="19"
-              height="18"
-              viewBox="0 0 19 18"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              transform="scale(-1, 1)"
-              @click="isShowSidebarMobile = true"
-            >
-              <path
-                d="M10 18L10 16L19 16L19 18L10 18ZM6 2L6 -2.62268e-07L19 -8.30516e-07L19 2L6 2ZM-3.49691e-07 10L-4.37114e-07 8L19 8L19 10L-3.49691e-07 10Z"
-                fill="#4B5563"
-              />
-            </svg>
-
-            <template #content>
-              <Sidebar
-                :label="label"
-                :is-collapsed="false"
-                :is-mobile="true"
-                :items="sidebarItems"
-                :is-group="isSidebarGroup"
-                @toggle-collapsed="isShowSidebarMobile = false"
-              />
-            </template>
-          </Slideover>
-          <NuxtLink :to="routes.home.to">
-            <img
-              src="/logo-mini.png"
-              alt="logo_mini_color"
-              class="
-               w-[126px] min-w-[126px] lg:hidden
-                lg:w-[172px] lg:min-w-[172px]
-              "
-            />
-          </NuxtLink>
-          <Apps class="lg:hidden" />
-        </div>
-
-        <div class="flex items-center justify-center gap-4">
-          <DropdownMenu
-            size="xl"
-            :items="userMenuItems"
-            :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="font-bold">
-                  {{ auth.me.value?.display_name || auth.me.value?.full_name }}
-                </p>
-                <p class="text-muted text-sm">
-                  {{ auth.me.value?.email || '' }}
-                </p>
-              </div>
-              <Avatar
-                class="border-muted size-[40px] 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>
-      </nav>
-      <div class="w-full bg-gray-50 pt-[64px] lg:pt-[72px]">
-        <main
-          class="
-            mx-auto min-h-full w-full flex-1 px-6 py-10 lg:px-8
-          "
-        >
-          <Breadcrumb
-            v-if="!app.pageMeta.isHideBreadcrumbs && breadcrumbsItems.length > 1"
-            :items="breadcrumbsItems"
-            class="mb-6"
-            :ui="{
-              item: 'max-w-2/3',
-              list: 'w-full',
-            }"
-          />
-          <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-start
-            "
-          >
-            <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" />
-              <p
-                v-if="app.pageMeta.sub_title"
-                class="text-[#475467]"
-              >
-                {{ app.pageMeta.sub_title }}
-              </p>
-            </div>
-            <div id="page-header" />
-          </div>
-          <slot />
-        </main>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
-import { computed } from 'vue'
-import Sidebar from './Sidebar.vue'
-import Apps from './Apps.vue'
-
-defineProps<{
-  label: string
-  sidebarItems: NavigationMenuItem[]
-  isSidebarGroup?: boolean
-}>()
-
-const app = useApp()
-const isShowSidebarMobile = ref(false)
-const auth = useAuth()
-// Cookie to store user preference for desktop
-const isCollapsed = useCookie<boolean>('app.admin.sidebar.isCollapsed', {
-  default: () => false,
-  path: '/',
-})
-
-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,
-  },
-]
-
-const breadcrumbsItems = computed(() => [
-  // {
-  //   label: '',
-  //   icon: 'ph:house',
-  //   to: '/',
-  // },
-  ...(app.pageMeta.breadcrumbs || []).map((item: any) => ({
-    ...item,
-    icon: '',
-  })),
-])
-</script>
+<template>
+  <div class="relative flex min-h-screen flex-1">
+    <div
+      :class="[`
+        fixed inset-0 z-30 hidden w-auto
+        lg:block
+      `, {
+        'max-w-[88px]': isCollapsed,
+        'max-w-[260px]': !isCollapsed,
+      }]"
+    >
+      <Sidebar
+        :label="label"
+        :is-collapsed="isCollapsed"
+        :items="sidebarItems"
+        :is-group="isSidebarGroup"
+        @toggle-collapsed="isCollapsed = !isCollapsed"
+      />
+    </div>
+    <div
+      :class="['w-full bg-gray-50', {
+        'lg:pl-[88px]': isCollapsed,
+        'lg:pl-[260px]': !isCollapsed,
+      }]"
+    >
+      <nav
+        class="
+          fixed top-0 left-0 z-20 flex min-h-[64px] w-screen items-center justify-between
+          gap-4 bg-white px-5 lg:min-h-[72px]
+          lg:justify-end
+        "
+        style="box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);"
+      >
+        <div class="flex items-center gap-4">
+          <Slideover
+            v-model:open="isShowSidebarMobile"
+            :ui="{
+              content: 'w-[80%] max-w-[260px] lg:hidden',
+              overlay: 'lg:hidden',
+            }"
+            side="left"
+          >
+            <svg
+              class="
+                cursor-pointer
+                lg:hidden
+              "
+              width="19"
+              height="18"
+              viewBox="0 0 19 18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              transform="scale(-1, 1)"
+              @click="isShowSidebarMobile = true"
+            >
+              <path
+                d="M10 18L10 16L19 16L19 18L10 18ZM6 2L6 -2.62268e-07L19 -8.30516e-07L19 2L6 2ZM-3.49691e-07 10L-4.37114e-07 8L19 8L19 10L-3.49691e-07 10Z"
+                fill="#4B5563"
+              />
+            </svg>
+
+            <template #content>
+              <Sidebar
+                :label="label"
+                :is-collapsed="false"
+                :is-mobile="true"
+                :items="sidebarItems"
+                :is-group="isSidebarGroup"
+                @toggle-collapsed="isShowSidebarMobile = false"
+              />
+            </template>
+          </Slideover>
+          <NuxtLink :to="routes.home.to">
+            <img
+              src="/logo-mini.png"
+              alt="logo_mini_color"
+              class="
+               w-[126px] min-w-[126px] lg:hidden
+                lg:w-[172px] lg:min-w-[172px]
+              "
+            />
+          </NuxtLink>
+          <Apps class="lg:hidden" />
+        </div>
+
+        <div class="flex items-center justify-center gap-4">
+          <DropdownMenu
+            size="xl"
+            :items="userMenuItems"
+            :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="font-bold">
+                  {{ auth.me.value?.display_name || auth.me.value?.full_name }}
+                </p>
+                <p class="text-muted text-sm">
+                  {{ auth.me.value?.email || '' }}
+                </p>
+              </div>
+              <Avatar
+                class="border-muted size-[40px] 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>
+      </nav>
+      <div class="w-full bg-gray-50 pt-[64px] lg:pt-[72px]">
+        <main
+          class="
+            mx-auto min-h-full w-full flex-1 px-6 py-10 lg:px-8
+          "
+        >
+          <Breadcrumb
+            v-if="!app.pageMeta.isHideBreadcrumbs && breadcrumbsItems.length > 1"
+            :items="breadcrumbsItems"
+            class="mb-6"
+            :ui="{
+              item: 'max-w-2/3',
+              list: 'w-full',
+            }"
+          />
+          <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-start
+            "
+          >
+            <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" />
+              <p
+                v-if="app.pageMeta.sub_title"
+                class="text-[#475467]"
+              >
+                {{ app.pageMeta.sub_title }}
+              </p>
+            </div>
+            <div id="page-header" />
+          </div>
+          <slot />
+        </main>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
+import { computed } from 'vue'
+import Sidebar from './Sidebar.vue'
+import Apps from './Apps.vue'
+
+defineProps<{
+  label: string
+  sidebarItems: NavigationMenuItem[]
+  isSidebarGroup?: boolean
+}>()
+
+const app = useApp()
+const isShowSidebarMobile = ref(false)
+const auth = useAuth()
+// Cookie to store user preference for desktop
+const isCollapsed = useCookie<boolean>('app.admin.sidebar.isCollapsed', {
+  default: () => false,
+  path: '/',
+})
+
+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,
+  },
+]
+
+const breadcrumbsItems = computed(() => [
+  // {
+  //   label: '',
+  //   icon: 'ph:house',
+  //   to: '/',
+  // },
+  ...(app.pageMeta.breadcrumbs || []).map((item: any) => ({
+    ...item,
+    icon: '',
+  })),
+])
+</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/useAuth.ts

@@ -8,7 +8,7 @@ export enum Permission {
 export const PERMISSION_LABEL = {
   [Permission.ADMIN]: 'Admin',
   [Permission.USER]: 'User',
-  [Permission.SUPER]: 'Super Admin',
+  [Permission.SUPER]: 'Settings',
   [Permission.NONE]: 'No Access',
 }
 
@@ -166,7 +166,7 @@ export const useAuth = () => {
 
     ...(hasPermission(UserModule.SETTING, Permission.SUPER)
       ? [{
-        label: 'Super Admin',
+        label: 'Settings',
         icon: '/admin/super-admin-logo.png',
         to: routes.admin.users.to,
       }]

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,
+  }
+}