@finema/finework-layer 0.1.1 → 0.1.3

package/.playground/app/pages/layout-admin.vue

@@ -1,13 +1,9 @@
 <template>
-  <LayoutAdmin
-    label="Test Layout"
-    :sidebar-items="sidebarItems"
-    :is-sidebar-group="true"
-  >
+  <LayoutUser>
     <p>
       dasdasd
     </p>
-  </LayoutAdmin>
+  </LayoutUser>
 </template>
 
 <script lang="ts" setup>

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.1.3](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.1.2...0.1.3) (2025-10-15)
+
+## [0.1.2](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.1.1...0.1.2) (2025-10-14)
+
+### Features
+
+* layout user ([6bf83a1](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/6bf83a15db0747323e6fd02555eab0b0c4e3e64e))
+
 ## [0.1.1](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.0.16...0.1.1) (2025-10-14)
 
 ### Bug Fixes

package/app/app.config.ts

@@ -195,7 +195,8 @@ export default defineAppConfig({
       variants: {
         size: {
           xl: {
-            base: 'py-2.5 disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed w-full',
+            base: 'py-2.5 min-h-[100px] items-start disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed w-full',
+            item: 'bg-white',
           },
         },
       },

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

@@ -1,15 +1,20 @@
 <template>
   <aside
-    :class="[`
+    :class="[
+      `
       flex h-full flex-col overflow-y-auto bg-white
       transition-all duration-300
-    `]"
+    `,
+    ]"
   >
     <div
-      :class="['flex h-[72px] items-center max-sm:pr-5', {
-        'justify-center': isCollapsed,
-        'w-[260px] justify-between pl-5': !isCollapsed,
-      }]"
+      :class="[
+        'flex h-[72px] items-center max-sm:pr-5',
+        {
+          'justify-center': isCollapsed,
+          'w-[260px] justify-between pl-5': !isCollapsed,
+        },
+      ]"
     >
       <NuxtLink :to="routes.home.to">
         <img
@@ -22,8 +27,10 @@
 
       <Navbar />
     </div>
-    <div class="bg-primary flex items-center justify-between px-7 py-4 font-bold text-white">
-      {{ isCollapsed ? '' : label }}
+    <div
+      class="bg-primary flex items-center justify-between px-7 py-4 font-bold text-white"
+    >
+      {{ isCollapsed ? "" : label }}
 
       <Icon
         v-if="!isCollapsed"
@@ -40,15 +47,8 @@
     </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 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>
@@ -69,8 +69,10 @@
                 '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',
+              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',
             }"
@@ -96,7 +98,8 @@
             '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 ',
+          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',
@@ -104,10 +107,7 @@
         class="w-full justify-center"
       />
     </div>
-    <div
-      v-if="isMobile"
-      class="border-t border-gray-100 p-3"
-    >
+    <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
@@ -120,7 +120,7 @@
               {{ auth.me.value?.display_name || auth.me.value?.full_name }}
             </p>
             <p class="text-muted truncate text-xs">
-              {{ auth.me.value?.email || '' }}
+              {{ auth.me.value?.email || "" }}
             </p>
           </div>
         </div>
@@ -149,7 +149,7 @@ import type { NavigationMenuItem } from '@nuxt/ui'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import type { Permission, UserModule } from '#imports'
-import Navbar from './Apps.vue'
+import Navbar from '../Apps.vue'
 
 defineEmits<{
   'toggle-collapsed': []
@@ -166,7 +166,6 @@ const props = defineProps<{
 const route = useRoute()
 const auth = useAuth()
 const userMenuItems = [
-
   {
     label: 'View profile',
     icon: 'i-lucide-user',
@@ -193,13 +192,16 @@ const mappedItems = (items: NavigationMenuItem[]): NavigationMenuItem[] => {
 
       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',
+        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 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
 
@@ -221,46 +223,52 @@ const mappedItems = (items: NavigationMenuItem[]): NavigationMenuItem[] => {
 
 // filter items base on auth.hasPermission and nested children  , permissions: ['pmo:USER', 'pmo:ADMIN', 'pmo:SUPER']
 const filterItems = (items: NavigationMenuItem[]): NavigationMenuItem[] => {
-  return items.filter((item) => {
-    if (item.permissions && Array.isArray(item.permissions)) {
-      // permissions: ['pmo:USER', 'pmo:ADMIN', 'pmo:SUPER'] => module: 'pmo', permissions: ['USER', 'ADMIN', 'SUPER']
-      const permissionStrings = item.permissions as string[]
+  return items
+    .filter((item) => {
+      if (item.permissions && Array.isArray(item.permissions)) {
+        // permissions: ['pmo:USER', 'pmo:ADMIN', 'pmo:SUPER'] => module: 'pmo', permissions: ['USER', 'ADMIN', 'SUPER']
+        const permissionStrings = item.permissions as string[]
 
-      // Extract module from first permission (all should have same module)
-      const firstPermission = permissionStrings[0]
+        // Extract module from first permission (all should have same module)
+        const firstPermission = permissionStrings[0]
 
-      if (!firstPermission) {
-        return true
-      }
+        if (!firstPermission) {
+          return true
+        }
 
-      const [moduleStr] = firstPermission.split(':')
+        const [moduleStr] = firstPermission.split(':')
 
-      // Extract all permission levels
-      const permissionLevels = permissionStrings.map((p) => p.split(':')[1]) as Permission[]
+        // Extract all permission levels
+        const permissionLevels = permissionStrings.map(
+          (p) => p.split(':')[1],
+        ) as Permission[]
 
-      return auth.hasPermission(moduleStr as UserModule, ...permissionLevels)
-    }
+        return auth.hasPermission(moduleStr as UserModule, ...permissionLevels)
+      }
 
-    // Recursively filter children
-    if (item.children) {
-      const filteredChildren = filterItems(item.children as NavigationMenuItem[])
+      // Recursively filter children
+      if (item.children) {
+        const filteredChildren = filterItems(
+          item.children as NavigationMenuItem[],
+        )
 
-      // Only include parent if it has visible children or no permission requirement
-      return filteredChildren.length > 0
-    }
+        // Only include parent if it has visible children or no permission requirement
+        return filteredChildren.length > 0
+      }
 
-    return true
-  }).map((item) => {
-    // Apply filtering to children
-    if (item.children) {
-      return {
-        ...item,
-        children: filterItems(item.children as NavigationMenuItem[]),
+      return true
+    })
+    .map((item) => {
+      // Apply filtering to children
+      if (item.children) {
+        return {
+          ...item,
+          children: filterItems(item.children as NavigationMenuItem[]),
+        }
       }
-    }
 
-    return item
-  })
+      return item
+    })
 }
 
 const navigationItems = computed<NavigationMenuItem[]>(() => {

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

@@ -1,13 +1,16 @@
 <template>
   <div class="relative flex min-h-screen flex-1">
     <div
-      :class="[`
+      :class="[
+        `
         fixed inset-0 z-30 hidden w-auto
         lg:block
-      `, {
-        'max-w-[88px]': isCollapsed,
-        'max-w-[260px]': !isCollapsed,
-      }]"
+      `,
+        {
+          'max-w-[88px]': isCollapsed,
+          'max-w-[260px]': !isCollapsed,
+        },
+      ]"
     >
       <Sidebar
         :label="label"
@@ -18,18 +21,17 @@
       />
     </div>
     <div
-      :class="['w-full bg-gray-50', {
-        'lg:pl-[88px]': isCollapsed,
-        'lg:pl-[260px]': !isCollapsed,
-      }]"
+      :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);"
+        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
@@ -41,10 +43,7 @@
             side="left"
           >
             <svg
-              class="
-                cursor-pointer
-                lg:hidden
-              "
+              class="cursor-pointer lg:hidden"
               width="19"
               height="18"
               viewBox="0 0 19 18"
@@ -74,10 +73,7 @@
             <img
               src="/logo-mini.png"
               alt="logo_mini_color"
-              class="
-               w-[126px] min-w-[126px] lg:hidden
-                lg:w-[172px] lg:min-w-[172px]
-              "
+              class="w-[126px] min-w-[126px] lg:hidden lg:w-[172px] lg:min-w-[172px]"
             />
           </NuxtLink>
           <Apps class="lg:hidden" />
@@ -96,14 +92,12 @@
             }"
           >
             <div class="relative flex cursor-pointer items-center gap-2">
-              <div
-                class="hidden flex-col justify-end text-right lg:flex"
-              >
+              <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 || '' }}
+                  {{ auth.me.value?.email || "" }}
                 </p>
               </div>
               <Avatar
@@ -111,22 +105,17 @@
                 icon="ri:user-line"
                 :src="auth.me.value?.avatar_url || ''"
               />
-              <Icon
-                name="i-ph:caret-down-light"
-                class="size-5"
-              />
+              <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
-          "
-        >
+        <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"
+            v-if="
+              !app.pageMeta.isHideBreadcrumbs && breadcrumbsItems.length > 1
+            "
             :items="breadcrumbsItems"
             class="mb-6"
             :ui="{
@@ -136,17 +125,11 @@
           />
           <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
-            "
+            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
-                "
+                class="text-3xl font-bold wrap-break-word lg:max-w-2/3"
                 :title="app.pageMeta.title"
               >
                 {{ app.pageMeta.title }}
@@ -154,10 +137,7 @@
               </h1>
 
               <div id="page-subtitle" />
-              <p
-                v-if="app.pageMeta.sub_title"
-                class="text-[#475467]"
-              >
+              <p v-if="app.pageMeta.sub_title" class="text-[#475467]">
                 {{ app.pageMeta.sub_title }}
               </p>
             </div>
@@ -174,7 +154,7 @@
 import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
 import { computed } from 'vue'
 import Sidebar from './Sidebar.vue'
-import Apps from './Apps.vue'
+import Apps from '../Apps.vue'
 
 defineProps<{
   label: string

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

@@ -0,0 +1,99 @@
+<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>

package/package.json

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