@finema/finework-layer 0.2.75 → 0.2.76

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

@@ -1,145 +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">
-            <Slideover
-              :ui="{
-                content: 'mt-18',
-                header: 'border-0',
-              }"
-              :modal="false"
-              title="Notifications"
-            >
-              <Chip
-                inset
-                color="success"
-              >
-                <Icon
-                  name="ph:bell"
-                  class="size-6 cursor-pointer"
-                />
-              </Chip>
-
-              <template #body>
-                <NotificationList :items="notifications" />
-              </template>
-            </Slideover>
-            <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,
-  },
-]
-
-const notifications = [
-  {
-    id: 1,
-    userName: 'Phoenix Baker',
-    avatarSrc: '/mock/user-1.png',
-    date: '2025-01-01T08:00:00Z',
-    type: 'file',
-    description: 'Added a file to Marketing site redesign',
-    isRead: true,
-  },
-  {
-    id: 2,
-    userName: 'Lana Steiner',
-    avatarSrc: '/mock/user-2.png',
-    date: '2025-01-01T08:00:00Z',
-    type: 'invite',
-    description: 'Invited Alisa Hester to the team',
-    isRead: false,
-  },
-]
-</script>
+<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 border-b border-gray-300 bg-white"
+      >
+        <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-4">
+            <Notifications :ui="{ content: 'mt-[80px]' }" />
+            <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/app/components/Notifications/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <Slideover
+    :ui="{
+      ...ui || {},
+      header: 'border-0',
+      body: 'flex-1 overflow-y-auto p-2 sm:p-2',
+      title: 'text-xl font-bold',
+    }"
+    :modal="false"
+    title="Notifications"
+  >
+    <Chip
+      inset
+      color="success"
+      :show="Number(unreadCount.data?.count) > 0"
+      @click="markAllRead.run()"
+    >
+      <Icon
+        name="ph:bell"
+        class="size-6 cursor-pointer"
+      />
+    </Chip>
+
+    <template #body>
+      <Empty
+        v-if="notification.fetch.items.length === 0 && notification.fetch.status.isSuccess"
+        icon="ph:bell"
+        message="You have no notifications"
+      />
+      <Loader
+        v-else
+        :loading="notification.fetch.status.isLoading"
+      >
+        <div class="space-y-2 divide-y-1 divide-gray-200">
+          <div
+            v-for="item in notification.fetch.items"
+            :key="item.id"
+          >
+            <NuxtLink
+              :to="getLink(item)"
+              :target="getLink(item) === '#' ? '_self' : '_blank'"
+              :class="['mb-2 flex cursor-pointer items-start gap-2 rounded-lg p-4 hover:bg-gray-100']"
+            >
+              <Chip
+                v-if="getImage(item)"
+                position="bottom-right"
+                size="3xl"
+                inset
+                :color="getNotificationColor(item)"
+              >
+                <img
+
+                  :src="getImage(item)!"
+                  class="w-12"
+                />
+              </Chip>
+
+              <div class="flex-1">
+                <div class="flex items-start justify-between gap-2">
+                  <p
+                    class="line-clamp-1 text-sm font-medium text-gray-700"
+                    :title="item.title"
+                  >
+                    {{ item.title }}
+                  </p>
+                  <FormatTimeFromNow
+                    class="text-muted flex-1 text-right text-xs whitespace-nowrap"
+                    :value="item.sent_at"
+                  />
+                </div>
+
+                <p
+                  class="text-sm text-neutral-500"
+                  :title="item.message"
+                >
+                  {{ item.message }}
+                </p>
+              </div>
+            </NuxtLink>
+          </div>
+        </div>
+      </Loader>
+    </template>
+  </Slideover>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  ui?: {
+    content?: string
+  }
+}>()
+
+const notification = useNotificationLoader()
+const unreadCount = useNotificationUnreadCount()
+const markAllRead = useNotificationMarkAllRead()
+
+onMounted(() => {
+  notification.fetchPage()
+  unreadCount.run()
+})
+
+const getLink = (item: INotificationItem) => {
+  if (item.data?.url) {
+    return item.data.url
+  }
+
+  if (item.source_type === 'PMO_PROJECT') {
+    return `/pmo/projects/${item.source_id}`
+  }
+
+  return '#'
+}
+
+const getImage = (item: INotificationItem): string | null => {
+  if (item.source_type?.startsWith('PMO')) {
+    return `/admin/pmo-logo.png`
+  } else if (item.source_type?.startsWith('TIMESHEET')) {
+    return `/admin/timesheet-logo.png`
+  } else if (item.source_type?.startsWith('CLOCKIN')) {
+    return `/admin/clockin-logo.png`
+  } else if (item.source_type?.startsWith('SETTING')) {
+    return `/admin/setting-logo.png`
+  }
+
+  return null
+}
+
+const getNotificationColor = (item: INotificationItem): string => {
+  switch (item.type) {
+    case NotificationType.INFO:
+      return 'info'
+    case NotificationType.SUCCESS:
+      return 'success'
+    case NotificationType.WARNING:
+      return 'warning'
+    case NotificationType.ERROR:
+      return 'error'
+    default:
+      return 'info'
+  }
+}
+
+useWatchTrue(() => markAllRead.status.value.isSuccess, () => {
+  unreadCount.run()
+})
+</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>