@finema/finework-layer 0.2.73 → 0.2.75

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.2.75](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.74...0.2.75) (2025-12-03)
+
+### Features
+
+* add formatting components for Currency, Date, DateTime, Number, Percent, and TimeFromNow ([e11525f](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/e11525fe616bbd2bf25defea2f3b9aae3f06e102))
+
+### Bug Fixes
+
+* notification ([af8af78](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/af8af785855cccb995e5274ef5063f939b4226b7))
+
+## [0.2.74](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.73...0.2.74) (2025-12-01)
+
+### Features
+
+* file public ([61086f7](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/61086f782eec2c8bef272c3ba44f854e00d002ee))
+
 ## [0.2.73](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.72...0.2.73) (2025-12-01)
 
 ### Bug Fixes

package/app/components/Format/Currency.vue

@@ -0,0 +1,17 @@
+<template>
+  <component :is="props.as || 'span'">
+    {{ getValue }} {{ unit ? unit : '' }}
+  </component>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  value: number | string | null | undefined
+  as?: string
+  unit?: string
+}>()
+
+const getValue = computed(() => {
+  return NumberHelper.toCurrency(props.value)
+})
+</script>

package/app/components/Format/Date.vue

@@ -0,0 +1,24 @@
+<template>
+  <component
+    :is="props.as || 'span'"
+    :title="getValue"
+  >
+    {{ getValue ?? '–' }}
+  </component>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  value: string | Date
+  as?: string
+}>()
+
+const config = useAppConfig()
+const localeInject = inject('locale')
+
+const getValue = computed(() => {
+  return (localeInject ?? config.core.locale) === 'th'
+    ? TimeHelper.displayDateThai(props.value)
+    : TimeHelper.displayDate(props.value)
+})
+</script>

package/app/components/Format/DateTime.vue

@@ -0,0 +1,24 @@
+<template>
+  <component
+    :is="props.as || 'span'"
+    :title="getValue"
+  >
+    {{ getValue }}
+  </component>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  value: string | Date
+  as?: string
+}>()
+
+const config = useAppConfig()
+const localeInject = inject('locale')
+
+const getValue = computed(() => {
+  return (localeInject ?? config.core.locale) === 'th'
+    ? `${TimeHelper.displayDateThai(props.value)} น.`
+    : TimeHelper.displayDateTime(props.value)
+})
+</script>

package/app/components/Format/Number.vue

@@ -0,0 +1,17 @@
+<template>
+  <component :is="props.as || 'span'">
+    {{ getValue }} {{ unit ? unit : '' }}
+  </component>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  value: number | string | null | undefined
+  as?: string
+  unit?: string
+}>()
+
+const getValue = computed(() => {
+  return NumberHelper.withFixed(props.value || 0)
+})
+</script>

package/app/components/Format/Percent.vue

@@ -0,0 +1,38 @@
+<template>
+  <component :is="props.as || 'span'">
+    {{ getValue }}{{ unit || '%' }}
+  </component>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  value: number | string | null | undefined
+  total: number | string | null | undefined
+  as?: string
+  unit?: string
+  remaining?: boolean
+}>()
+
+const getValue = computed(() => {
+  const total = Number(props.total)
+  const value = Number(props.value)
+
+  if (Number.isNaN(total) || total === 0) return '--'
+
+  const used = Number.isNaN(value) ? 0 : value
+
+  if (props.remaining) {
+    return NumberHelper.withFixed(((total - used) / total) * 100)
+  }
+
+  let percent
+
+  if (props.remaining) {
+    percent = ((total - used) / total) * 100
+  } else {
+    percent = (used / total) * 100
+  }
+
+  return NumberHelper.withFixed(Math.abs(percent))
+})
+</script>

package/app/components/Format/TimeFromNow.vue

@@ -0,0 +1,38 @@
+<template>
+  <component
+    :is="props.as || 'span'"
+    :title="TimeHelper.displayDateTime(props.value)"
+  >
+    {{ getValue }}
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { formatDistanceToNow, differenceInDays } from 'date-fns'
+import * as locales from 'date-fns/locale'
+
+const props = defineProps<{
+  value: string | Date
+  as?: string
+}>()
+
+const config = useAppConfig()
+const localeInject = inject('locale')
+
+const getValue = computed(() => {
+  const locale = (localeInject ?? config.core.locale) === 'th'
+    ? locales.th
+    : locales.enUS
+
+  const daysDiff = differenceInDays(new Date(), props.value)
+
+  if (daysDiff <= 6) {
+    return formatDistanceToNow(props.value, {
+      addSuffix: true,
+      locale,
+    })
+  }
+
+  return TimeHelper.displayDateTime(props.value)
+})
+</script>

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

@@ -80,6 +80,28 @@
         </div>
 
         <div class="flex items-center justify-center gap-4">
+          <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
             size="xl"
             :items="userMenuItems"
@@ -189,6 +211,30 @@ const isCollapsed = useCookie<boolean>('app.admin.sidebar.isCollapsed', {
   path: '/',
 })
 
+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',
+    fileName: 'Tech requirements.pdf',
+    fileSize: '720 KB',
+    fileIcon: 'ph:file-pdf',
+    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,
+  },
+]
+
 const userMenuItems: DropdownMenuItem[] = [
   {
     label: 'View profile',

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

@@ -18,6 +18,28 @@
           </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"
@@ -99,4 +121,25 @@ const userMenuItems: DropdownMenuItem[] = [
     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>

package/app/components/NotificationList.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="space-y-6">
+    <div
+      v-for="(item, index) in items"
+      :key="item.id"
+    >
+      <div class="flex gap-3">
+        <Avatar
+          :src="item.avatarSrc || item.userName"
+          :alt="item.userName"
+          class="size-12 rounded-full object-cover"
+        />
+
+        <div class="flex-1">
+          <div class="flex items-center gap-2">
+            <p class="font-medium">
+              {{ item.userName }}
+            </p>
+            <FormatTimeFromNow
+              class="text-muted text-xs"
+              :value="new Date(new Date().getTime() - 5 * 60 * 1000)"
+            />
+          </div>
+
+          <p class="text-sm text-neutral-700">
+            {{ item.description }}
+          </p>
+        </div>
+
+        <span
+          v-if="item.isRead"
+          class="bg-success mt-1 size-3 self-start rounded-full"
+        />
+      </div>
+      <Separator
+        v-if="index < items.length - 1"
+        class="my-4"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+export type NotificationType = 'file' | 'invite'
+
+export interface NotificationItem {
+  id: number
+  userName: string
+  avatarSrc: string
+  date: string
+  type: NotificationType
+  description: string
+
+  // file type
+  fileName?: string
+  fileSize?: string
+  fileIcon?: string
+
+  isRead: boolean
+}
+
+const props = defineProps<{
+  items: NotificationItem[]
+}>()
+</script>

package/app/composables/useRequestOptions.ts

@@ -1,5 +1,14 @@
 import type { AxiosRequestConfig } from 'axios'
 
+export enum FileAppType {
+  COMMON = 'COMMON',
+  PMO = 'PMO',
+  HR = 'HR',
+  FINANCE = 'FINANCE',
+  QUOTATION = 'QUOTATION',
+  TODO = 'TODO',
+}
+
 export const useRequestOptions = () => {
   const config = useRuntimeConfig()
 
@@ -30,7 +39,25 @@ export const useRequestOptions = () => {
     }
   }
 
-  const file = (): Omit<AxiosRequestConfig, 'baseURL'> & {
+  const file = (fileAppType: FileAppType = FileAppType.COMMON): Omit<AxiosRequestConfig, 'baseURL'> & {
+    baseURL: string
+  } => {
+    return {
+      baseURL: config.public.baseAPI + '/uploads',
+      headers: {
+        Authorization: `Bearer ${useAuth().token.value}`,
+      },
+      transformRequest: (data) => {
+        if (data instanceof FormData) {
+          data.append('app', fileAppType)
+        }
+
+        return data
+      },
+    }
+  }
+
+  const filePublic = (fileAppType: FileAppType = FileAppType.COMMON): Omit<AxiosRequestConfig, 'baseURL'> & {
     baseURL: string
   } => {
     return {
@@ -38,6 +65,14 @@ export const useRequestOptions = () => {
       headers: {
         Authorization: `Bearer ${useAuth().token.value}`,
       },
+      transformRequest: (data) => {
+        if (data instanceof FormData) {
+          data.append('is_public', 'true')
+          data.append('app', fileAppType)
+        }
+
+        return data
+      },
     }
   }
 
@@ -46,5 +81,6 @@ export const useRequestOptions = () => {
     mock,
     auth,
     file,
+    filePublic,
   }
 }

package/package.json

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