@finema/finework-layer 0.0.12 → 0.0.13

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

@@ -0,0 +1,233 @@
+<template>
+  <aside
+    :class="[`
+      flex h-full flex-col overflow-y-auto bg-white
+      transition-all duration-300
+    `]"
+  >
+    <div
+      :class="['flex h-[72px] w-[260px] items-center pl-5 max-sm:pr-5', {
+        'justify-center': isCollapsed,
+        'justify-between': !isCollapsed,
+      }]"
+    >
+      <NuxtLink :to="routes.home.to">
+        <img
+          v-if="!isCollapsed"
+          src="/logo-mini.png"
+          alt="logo_mini_color"
+          class="h-[27px]"
+        />
+      </NuxtLink>
+
+      <Navbar />
+    </div>
+    <div class="bg-primary flex items-center justify-between px-7 py-4 font-bold text-white">
+      {{ isCollapsed ? '' : label }}
+
+      <Icon
+        v-if="!isCollapsed"
+        name="fluent:arrow-circle-left-24-regular"
+        class="size-[24px] cursor-pointer"
+        @click="$emit('toggle-collapsed')"
+      />
+      <Icon
+        v-else
+        name="fluent:arrow-circle-right-24-regular"
+        class="size-[24px] cursor-pointer"
+        @click="$emit('toggle-collapsed')"
+      />
+    </div>
+
+    <div class="flex-1 overflow-y-auto border-r border-gray-200 p-4">
+      <div
+        v-if="isGroup"
+        class="space-y-4 divide-y-1 divide-[#d9d9d9]"
+      >
+        <div
+          v-for="group in navigationItems"
+          :key="group.label"
+          class="pb-4"
+        >
+          <div class="mt-2 mb-2 text-[10px] font-semibold text-gray-400">
+            {{ group.label }}
+          </div>
+          <NavigationMenu
+            orientation="vertical"
+            :items="group.children"
+            :collapsed="isCollapsed"
+            :popover="isCollapsed"
+            :tooltip="isCollapsed"
+            :ui="{
+              list: 'space-y-2 ',
+              label: [
+                'text-sm font-bold text-gray-500 py-[12px] px-[10px] rounded-lg',
+                'hover:text-primary',
+              ],
+              link: [
+                'cursor-pointer text-sm font-bold text-gray-500 px-[10px] rounded-lg gap-3',
+                'hover:text-primary',
+                'data-active:before:bg-white data-active:before:rounded-lg data-active:text-primary font-semibold',
+              ],
+              linkLeadingIcon: 'group-data-[state=open]:text-current text-current size-[24px] group-hover:text-primary',
+              childList: 'border-none ms-0 pl-8 bg-gray-100 mt-2 py-1 rounded-lg',
+              childLink: 'ps-0',
+              childItem: 'ps-0',
+            }"
+            class="w-full justify-center"
+          />
+        </div>
+      </div>
+      <NavigationMenu
+        v-else
+        orientation="vertical"
+        :items="navigationItems"
+        :collapsed="isCollapsed"
+        :popover="isCollapsed"
+        :tooltip="isCollapsed"
+        :ui="{
+          list: 'space-y-2 ',
+          label: [
+            'text-sm font-bold text-gray-500 py-[12px] px-[10px] rounded-lg',
+            'hover:text-primary',
+          ],
+          link: [
+            'cursor-pointer text-sm font-bold text-gray-500 px-[10px] rounded-lg gap-3',
+            'hover:text-primary',
+            'data-active:before:bg-white data-active:before:rounded-lg data-active:text-primary font-semibold',
+          ],
+          linkLeadingIcon: 'group-data-[state=open]:text-current text-current size-[24px] group-hover:text-primary ',
+          childList: 'border-none ms-0 pl-8 bg-gray-100 mt-2 py-1 rounded-lg',
+          childLink: 'ps-0',
+          childItem: 'ps-0',
+        }"
+        class="w-full justify-center"
+      />
+    </div>
+    <div
+      v-if="isMobile"
+      class="border-t border-gray-100 p-3"
+    >
+      <div class="flex items-center justify-between gap-2">
+        <div class="flex min-w-0 flex-1 items-center gap-3">
+          <Avatar
+            class="border-muted size-[32px] flex-shrink-0 border text-lg"
+            icon="ri:user-line"
+            :src="auth.me.value?.avatar_url || ''"
+          />
+          <div class="flex min-w-0 flex-1 flex-col">
+            <p class="truncate text-sm font-bold">
+              {{ auth.me.value?.display_name || auth.me.value?.full_name }}
+            </p>
+            <p class="text-muted truncate text-xs">
+              {{ auth.me.value?.email || '' }}
+            </p>
+          </div>
+        </div>
+        <DropdownMenu
+          arrow
+          size="xl"
+          :items="userMenuItems"
+          :ui="{
+            content: 'w-48',
+          }"
+        >
+          <Button
+            icon="ph:dots-three-outline-vertical-bold"
+            variant="ghost"
+            color="neutral"
+            size="xs"
+          />
+        </DropdownMenu>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+import type { NavigationMenuItem } from '@nuxt/ui'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import Navbar from './Apps.vue'
+
+defineEmits<{
+  'toggle-collapsed': []
+}>()
+
+const props = defineProps<{
+  label: string
+  isCollapsed: boolean
+  isMobile?: boolean
+  items: NavigationMenuItem[]
+  isGroup?: boolean
+}>()
+
+const route = useRoute()
+const auth = useAuth()
+const userMenuItems = [
+
+  {
+    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 mappedItems = (items: NavigationMenuItem[]): NavigationMenuItem[] => {
+  return items.map((item) => {
+    let isAnyChildActive = false
+    const mappedChildren = item.children?.map((child) => {
+      const isChildCurrentlyActive = route.path === child.to
+
+      if (isChildCurrentlyActive) {
+        isAnyChildActive = true
+      }
+
+      return {
+        active: isChildCurrentlyActive,
+        class: 'hover:bg-transparent hover:text-gray-700 hover:font-bold py-2 data-active:before:bg-transparent data-active:text-gray-700 data-active:font-bold',
+        icon: '',
+        ...child,
+      }
+    })
+
+    const selfIsActive = item.to ? route.path.startsWith(String(item.to)) : false
+
+    const itemIsActive = selfIsActive || isAnyChildActive // A root item is active if its own link matches OR if any child is active
+
+    const itemDefaultOpen = item.children ? isAnyChildActive : false
+
+    return {
+      ...item,
+      active: itemIsActive,
+      class: itemIsActive
+        ? 'before:bg-primary before:rounded-lg text-white'
+        : '',
+      defaultOpen: itemDefaultOpen || selfIsActive,
+      open: itemDefaultOpen || selfIsActive,
+      children: mappedChildren,
+      to: mappedChildren ? undefined : item.to,
+    }
+  })
+}
+
+const navigationItems = computed<NavigationMenuItem[]>(() => {
+  if (props.isGroup) {
+    return props.items.map((group) => {
+      return {
+        ...group,
+        children: mappedItems(group.children as NavigationMenuItem[]),
+      }
+    })
+  }
+
+  return mappedItems(props.items)
+})
+</script>

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

@@ -0,0 +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-[72px] w-screen items-center
+          justify-between gap-4 bg-white px-5
+          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="
+                h-[20px]
+                lg:hidden
+              "
+            />
+          </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="flex flex-col justify-end text-right max-sm:hidden"
+              >
+                <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-[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>