From ff95d207d2eb9a7c63f21cc88be31aa1131ce895 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Thu, 31 Oct 2024 17:53:10 +0700
Subject: [PATCH 01/11] feat: add notification type

---
 src/stores/notification/index.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/stores/notification/index.ts b/src/stores/notification/index.ts
index 1243de88..5aa43fe5 100644
--- a/src/stores/notification/index.ts
+++ b/src/stores/notification/index.ts
@@ -4,7 +4,12 @@ import { api } from 'src/boot/axios';
 import { PaginationResult } from 'src/types';
 import { createDataRefBase } from '../utils';
 
-export type Notification = {};
+export type Notification = {
+  title: string;
+  detail: string;
+  receiverId?: string;
+  groupId?: string[];
+};
 
 export const useNotification = defineStore('noti-store', () => {
   const state = createDataRefBase<Notification>();

From 838490d90d974258a2016f780987191bfed3afa7 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Thu, 31 Oct 2024 17:56:46 +0700
Subject: [PATCH 02/11] fix: get possibly undefined type

---
 src/stores/utils/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index 109bce33..84f504a7 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -532,7 +532,7 @@ export function createDataRefBase<T>(
   defaultPageSize = 30,
 ) {
   return {
-    data: ref<T[]>(),
+    data: ref<T[]>([]),
     page: ref<number>(defaultPage),
     pageMax: ref<number>(defaultPageMax),
     pageSize: ref<number>(defaultPageSize),

From 74d80a163de55a936cd39f0acb53fb38993ff38f Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Thu, 31 Oct 2024 17:59:51 +0700
Subject: [PATCH 03/11] feat: fetch notification from api

---
 src/layouts/MainLayout.vue | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 168b895d..edee3b05 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -17,6 +17,7 @@ import { useConfigStore } from 'src/stores/config';
 import { useNavigator } from 'src/stores/navigator';
 import { initLang, initTheme, Lang, setLang } from 'src/utils/ui';
 import { baseUrl } from 'stores/utils';
+import { useNotification } from 'src/stores/notification';
 
 const useMyBranch = useMyBranchStore();
 const { fetchListMyBranch } = useMyBranch;
@@ -37,8 +38,11 @@ interface Notification {
 const $q = useQuasar();
 const loaderStore = useLoader();
 const navigatorStore = useNavigator();
+const notificationStore = useNotification();
 const configStore = useConfigStore();
 
+const { data: notificationData } = storeToRefs(notificationStore);
+
 const { visible } = storeToRefs(loaderStore);
 const { t } = useI18n({ useScope: 'global' });
 const userStore = useUserStore();
@@ -129,6 +133,14 @@ onMounted(async () => {
 
   await configStore.getConfig();
 
+  {
+    const noti = await notificationStore.getNotificationList();
+
+    if (noti) {
+      notificationData.value = noti.result;
+    }
+  }
+
   await fetchListMyBranch(getUserId() ?? '');
   leftDrawerOpen.value = $q.screen.gt.xs ? true : false;
 
@@ -324,10 +336,10 @@ onMounted(async () => {
                       clickable
                       class="q-py-sm"
                       v-ripple
-                      v-for="item in !filterUnread
-                        ? notification
-                        : notification.filter((v) => !v.read)"
-                      :key="item.id"
+                      v-for="(item, i) in !filterUnread
+                        ? notificationData
+                        : notificationData"
+                      :key="i"
                     >
                       <q-avatar
                         color="positive"
@@ -343,7 +355,7 @@ onMounted(async () => {
                           {{ item.title }}
                         </span>
                         <span class="block ellipsis full-width text-stone">
-                          {{ item.content }}
+                          {{ item.detail }}
                         </span>
                       </div>
                       <span align="right" class="col text-caption text-stone">
@@ -356,7 +368,7 @@ onMounted(async () => {
                         :delay="1000"
                         :offset="[10, 10]"
                       >
-                        {{ item.content }}
+                        {{ item.detail }}
                       </q-tooltip>
                     </q-item>
                   </div>

From 9c04b209926f3d7b2837d1f0ad70c5a3d0624b97 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Fri, 8 Nov 2024 09:23:53 +0700
Subject: [PATCH 04/11] fix: wrong variable name

---
 src/stores/notification/index.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/stores/notification/index.ts b/src/stores/notification/index.ts
index 5aa43fe5..a1b2593c 100644
--- a/src/stores/notification/index.ts
+++ b/src/stores/notification/index.ts
@@ -33,9 +33,12 @@ export const useNotification = defineStore('noti-store', () => {
     return res.data;
   }
 
-  async function updateNotification(paymentId: string, payload: Notification) {
+  async function updateNotification(
+    notificationId: string,
+    payload: Notification,
+  ) {
     const res = await api.put<Notification & { id: string }>(
-      `/notification/${paymentId}`,
+      `/notification/${notificationId}`,
       payload,
     );
     if (res.status >= 400) return null;

From 80cb67323b01827816f81de169ad31277a5c3722 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 5 Mar 2025 11:10:45 +0700
Subject: [PATCH 05/11] refactor: update data receive from backend

---
 src/layouts/MainLayout.vue       | 43 ++++++--------------------------
 src/stores/notification/index.ts |  5 ++--
 2 files changed, 11 insertions(+), 37 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index edee3b05..be00b93f 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -18,6 +18,7 @@ import { useNavigator } from 'src/stores/navigator';
 import { initLang, initTheme, Lang, setLang } from 'src/utils/ui';
 import { baseUrl } from 'stores/utils';
 import { useNotification } from 'src/stores/notification';
+import moment from 'moment';
 
 const useMyBranch = useMyBranchStore();
 const { fetchListMyBranch } = useMyBranch;
@@ -28,13 +29,6 @@ interface NotificationButton {
   active: boolean;
 }
 
-interface Notification {
-  id: string;
-  title: string;
-  content: string;
-  read: boolean;
-}
-
 const $q = useQuasar();
 const loaderStore = useLoader();
 const navigatorStore = useNavigator();
@@ -82,20 +76,6 @@ const notiMenu = ref<NotificationButton[]>([
     active: false,
   },
 ]);
-const notification = ref<Notification[]>([
-  {
-    id: '1',
-    title: 'Unread',
-    content: 'Unread',
-    read: false,
-  },
-  {
-    id: '3',
-    title: 'Read',
-    content: 'Already read',
-    read: true,
-  },
-]);
 
 function setActive(button: NotificationButton) {
   notiMenu.value = notiMenu.value.map((current) => ({
@@ -290,7 +270,7 @@ onMounted(async () => {
 
           <div class="row q-gutter-x-md items-center" style="margin-left: auto">
             <!-- notification -->
-            <!-- <q-btn
+            <q-btn
               round
               dense
               flat
@@ -329,7 +309,7 @@ onMounted(async () => {
                     @click="setActive(btn)"
                   />
                 </div>
-                <q-infinite-scroll :offset="250">
+                <div style="max-height: 30vh; overflow-y: auto">
                   <div class="caption cursor-pointer">
                     <q-item
                       dense
@@ -337,8 +317,9 @@ onMounted(async () => {
                       class="q-py-sm"
                       v-ripple
                       v-for="(item, i) in !filterUnread
-                        ? notificationData
-                        : notificationData"
+                        ? notificationData.filter((v) => !v.read)
+                        : notificationData.filter((v) => v.read)"
+                      @click="notificationStore.getNotification(item.id)"
                       :key="i"
                     >
                       <q-avatar
@@ -372,17 +353,9 @@ onMounted(async () => {
                       </q-tooltip>
                     </q-item>
                   </div>
-                  <template v-slot:loading>
-                    <div
-                      class="text-center q-my-md"
-                      v-if="noti && noti?.result.length < noti?.total"
-                    >
-                      <q-spinner-dots color="primary" size="40px" />
-                    </div>
-                  </template>
-                </q-infinite-scroll>
+                </div>
               </q-menu>
-            </q-btn> -->
+            </q-btn>
 
             <!-- เปลี่นนภาษา -->
             <q-btn
diff --git a/src/stores/notification/index.ts b/src/stores/notification/index.ts
index a1b2593c..4f3d4cfe 100644
--- a/src/stores/notification/index.ts
+++ b/src/stores/notification/index.ts
@@ -5,10 +5,11 @@ import { PaginationResult } from 'src/types';
 import { createDataRefBase } from '../utils';
 
 export type Notification = {
+  id: string;
   title: string;
   detail: string;
-  receiverId?: string;
-  groupId?: string[];
+  read?: boolean;
+  createdAt: string;
 };
 
 export const useNotification = defineStore('noti-store', () => {

From ace2aec85b4747ae7148e10b39f687f3e87567e6 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 5 Mar 2025 13:28:50 +0700
Subject: [PATCH 06/11] feat: unread count

---
 src/layouts/MainLayout.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index be00b93f..11bb48e7 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -19,6 +19,7 @@ import { initLang, initTheme, Lang, setLang } from 'src/utils/ui';
 import { baseUrl } from 'stores/utils';
 import { useNotification } from 'src/stores/notification';
 import moment from 'moment';
+import { computed } from 'vue';
 
 const useMyBranch = useMyBranchStore();
 const { fetchListMyBranch } = useMyBranch;
@@ -47,7 +48,9 @@ const leftDrawerOpen = ref<boolean>(false);
 const leftDrawerMini = ref(false);
 
 const filterUnread = ref(false);
-const unread = ref<number>(1);
+const unread = computed<number>(
+  () => notificationData.value.filter((v) => !v.read).length || 0,
+);
 // const filterRole = ref<string[]>();
 const userImage = ref<string>();
 const userGender = ref('');
@@ -316,9 +319,9 @@ onMounted(async () => {
                       clickable
                       class="q-py-sm"
                       v-ripple
-                      v-for="(item, i) in !filterUnread
+                      v-for="(item, i) in filterUnread
                         ? notificationData.filter((v) => !v.read)
-                        : notificationData.filter((v) => v.read)"
+                        : notificationData"
                       @click="notificationStore.getNotification(item.id)"
                       :key="i"
                     >

From ac0d3649d4c6031457e8a77639bb1933eabaa074 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 5 Mar 2025 15:26:22 +0700
Subject: [PATCH 07/11] chore: clean

---
 src/layouts/MainLayout.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 11bb48e7..f1f2f470 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -344,7 +344,6 @@ onMounted(async () => {
                       </div>
                       <span align="right" class="col text-caption text-stone">
                         {{ moment(item.createdAt).fromNow() }}
-                        5 s
                       </span>
                       <q-tooltip
                         anchor="top middle"

From f9077cc03017286cf7be6ff4e5cfd561b318dd89 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 6 Mar 2025 10:46:39 +0700
Subject: [PATCH 08/11] feat: add notification translations for English and
 Thai

---
 src/i18n/eng.ts | 11 +++++++++++
 src/i18n/tha.ts | 11 +++++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index c822240c..e65a0688 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -240,6 +240,16 @@ export default {
     },
   },
 
+  noti: {
+    title: 'Notification',
+    caption: 'All Notification',
+    unread: 'Unread',
+    all: 'All',
+    read: 'Read',
+    viewALL: 'View All',
+    markAsRead: 'Mark as Read',
+  },
+
   form: {
     tm6: {
       transportation: 'Flight/Vehicle',
@@ -1139,6 +1149,7 @@ export default {
       taskListNotFound: 'Task list cannot be found.',
       creditNoteNotFound: 'Credit note cannot be found.',
       debitNoteNotFound: 'Debit note cannot be found.',
+      notificationNotFound: 'Notification cannot be found.',
 
       productGroupIsUsed: 'Product group is in used.',
       productIsUsed: 'Product is in used.',
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index c3205cbc..fa792f43 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -240,6 +240,16 @@ export default {
     },
   },
 
+  noti: {
+    title: 'การแจ้งเตือน',
+    caption: 'การแจ้งเตือนทั้งหมด',
+    unread: 'ยังไม่ได้อ่าน',
+    all: 'ทั้งหมด',
+    read: 'อ่าน',
+    viewAll: 'ดูทั้งหมด',
+    markAsRead: 'ทำเครื่องหมายว่าอ่านแล้ว',
+  },
+
   form: {
     tm6: {
       transportation: 'เที่ยวบิน/พาหนะ',
@@ -1117,6 +1127,7 @@ export default {
       taskListNotFound: 'ไม่พบใบสั่งงาน',
       creditNoteNotFound: 'ไม่พบใบลดหนี้',
       debitNoteNotFound: 'ไม่พบใบเพิ่มหนี้',
+      notificationNotFound: 'ไม่พบการแจ้งเตือน',
 
       productGroupIsUsed: 'กลุ่มสินค้าและบริการที่ใช้งานอยู่',
       productIsUsed: 'สินค้าและบริการใช้งานอยู่',

From ede8e8018192e90bde936e82339fd183fdf08e1a Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 6 Mar 2025 10:46:53 +0700
Subject: [PATCH 09/11] feat: add notification route and functions to delete
 and mark notifications as read

---
 src/router/routes.ts             |  6 +++++-
 src/stores/notification/index.ts | 22 ++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/router/routes.ts b/src/router/routes.ts
index 6d752495..2f7405d1 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -135,6 +135,11 @@ const routes: RouteRecordRaw[] = [
         name: 'dashBoard',
         component: () => import('pages/15_dash-board/MainPage.vue'),
       },
+      {
+        path: '/notification',
+        name: 'Notification',
+        component: () => import('pages/00_notification/MainPage.vue'),
+      },
     ],
   },
 
@@ -208,7 +213,6 @@ const routes: RouteRecordRaw[] = [
     name: 'DebitNoteView',
     component: () => import('pages/12_debit-note/FormPage.vue'),
   },
-
   {
     path: '/debit-note/document-view',
     name: 'DebitNoteDocumentView',
diff --git a/src/stores/notification/index.ts b/src/stores/notification/index.ts
index 4f3d4cfe..cfeb63ba 100644
--- a/src/stores/notification/index.ts
+++ b/src/stores/notification/index.ts
@@ -54,6 +54,26 @@ export const useNotification = defineStore('noti-store', () => {
     return res.data;
   }
 
+  async function deleteMultiNotification(notificationId: string[]) {
+    const res = await api.delete<Notification & { id: string }>(
+      '/notification',
+      {
+        data: notificationId,
+      },
+    );
+    if (res.status >= 400) return null;
+    return true;
+  }
+
+  async function markReadNotification(notificationId: string[]) {
+    const res = await api.post<Notification & { id: string }>(
+      '/notification/mark-read',
+      { id: notificationId },
+    );
+    if (res.status >= 400) return null;
+    return true;
+  }
+
   return {
     ...state,
 
@@ -61,5 +81,7 @@ export const useNotification = defineStore('noti-store', () => {
     getNotificationList,
     updateNotification,
     deleteNotification,
+    deleteMultiNotification,
+    markReadNotification,
   };
 });

From 65bf510386955fe229f3c0892b5e4e8865462a09 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 6 Mar 2025 10:47:57 +0700
Subject: [PATCH 10/11] feat: add notification dialog component and integrate
 with main layout

---
 src/layouts/MainLayout.vue               |  84 ++++++--
 src/pages/00_notification/MainPage.vue   | 243 +++++++++++++++++++++++
 src/pages/00_notification/NotiDialog.vue |  65 ++++++
 3 files changed, 370 insertions(+), 22 deletions(-)
 create mode 100644 src/pages/00_notification/MainPage.vue
 create mode 100644 src/pages/00_notification/NotiDialog.vue

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index f1f2f470..e84c65ff 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed, reactive } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import { getUserId, getUsername, logout, getRole } from 'src/services/keycloak';
 import { Icon } from '@iconify/vue';
 import { useI18n } from 'vue-i18n';
+import moment from 'moment';
 
 import useLoader from 'stores/loader';
 import ProfileMenu from './ProfileMenu.vue';
@@ -18,8 +19,7 @@ import { useNavigator } from 'src/stores/navigator';
 import { initLang, initTheme, Lang, setLang } from 'src/utils/ui';
 import { baseUrl } from 'stores/utils';
 import { useNotification } from 'src/stores/notification';
-import moment from 'moment';
-import { computed } from 'vue';
+import NotiDialog from 'src/pages/00_notification/NotiDialog.vue';
 
 const useMyBranch = useMyBranchStore();
 const { fetchListMyBranch } = useMyBranch;
@@ -47,7 +47,6 @@ const canvasModal = ref(false);
 const leftDrawerOpen = ref<boolean>(false);
 const leftDrawerMini = ref(false);
 
-const filterUnread = ref(false);
 const unread = computed<number>(
   () => notificationData.value.filter((v) => !v.read).length || 0,
 );
@@ -66,15 +65,20 @@ const language: {
   { value: Lang.English, label: 'English', icon: 'us', date: 'en-gb' },
 ];
 
-const notiOpen = ref(false);
+const state = reactive({
+  filterUnread: false,
+  notiOpen: false,
+  notiDialog: false,
+  notiId: '',
+});
 const notiMenu = ref<NotificationButton[]>([
   {
-    item: 'ทั้งหมด',
+    item: 'all',
     color: 'noti-switch-on',
     active: true,
   },
   {
-    item: 'ยังไม่ได้อ่าน',
+    item: 'unread',
     color: 'noti-switch-off',
     active: false,
   },
@@ -86,12 +90,12 @@ function setActive(button: NotificationButton) {
     color: current.item !== button.item ? 'noti-switch-off' : 'noti-switch-on',
     active: current.item === button.item,
   }));
-  if (button.item === 'ยังไม่ได้อ่าน') {
+  if (button.item === 'unread') {
     // noti.value?.result &&
-    filterUnread.value = true;
+    state.filterUnread = true;
   }
-  if (button.item === 'ทั้งหมด') {
-    filterUnread.value = false;
+  if (button.item === 'all') {
+    state.filterUnread = false;
   }
 }
 
@@ -110,6 +114,11 @@ function doLogout() {
   });
 }
 
+function readNoti(id: string) {
+  state.notiDialog = true;
+  state.notiId = id;
+}
+
 onMounted(async () => {
   initTheme();
   initLang();
@@ -281,7 +290,7 @@ onMounted(async () => {
               :size="$q.screen.lt.sm ? 'sm' : ''"
               :class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
               style="color: var(--surface-1)"
-              @click="notiOpen = !notiOpen"
+              @click="state.notiOpen = !state.notiOpen"
             >
               <q-icon name="mdi-bell" />
               <q-badge v-if="unread !== 0" rounded floating color="negative">
@@ -292,10 +301,16 @@ onMounted(async () => {
                 :offset="[0, 10]"
                 anchor="bottom middle"
                 self="top middle"
-                @before-hide="notiOpen = false"
+                @before-hide="
+                  () => {
+                    state.notiOpen = false;
+                  }
+                "
               >
                 <div class="q-px-md q-py-sm row col-12 items-center">
-                  <div class="text-subtitle1 text-weight-bold">แจ้งเตือน</div>
+                  <div class="text-subtitle1 text-weight-bold">
+                    {{ $t('noti.title') }}
+                  </div>
                   <q-space />
                 </div>
                 <div class="q-px-md q-pb-md q-gutter-x-md">
@@ -307,22 +322,29 @@ onMounted(async () => {
                     :flat="!btn.active"
                     :unelevated="btn.active"
                     :key="index"
-                    :label="btn.item"
+                    :label="$t('noti.' + btn.item)"
                     :class="btn.color"
                     @click="setActive(btn)"
                   />
                 </div>
-                <div style="max-height: 30vh; overflow-y: auto">
-                  <div class="caption cursor-pointer">
+                <div style="max-height: 30vh; width: 400px; overflow-y: auto">
+                  <section
+                    v-if="
+                      state.filterUnread
+                        ? notificationData.filter((v) => !v.read).length
+                        : notificationData.length
+                    "
+                    class="caption cursor-pointer"
+                  >
                     <q-item
+                      v-for="(item, i) in state.filterUnread
+                        ? notificationData.filter((v) => !v.read)
+                        : notificationData"
                       dense
                       clickable
                       class="q-py-sm"
                       v-ripple
-                      v-for="(item, i) in filterUnread
-                        ? notificationData.filter((v) => !v.read)
-                        : notificationData"
-                      @click="notificationStore.getNotification(item.id)"
+                      @click="readNoti(item.id)"
                       :key="i"
                     >
                       <q-avatar
@@ -354,7 +376,23 @@ onMounted(async () => {
                         {{ item.detail }}
                       </q-tooltip>
                     </q-item>
-                  </div>
+                  </section>
+                  <section v-else class="text-center q-py-sm">
+                    <span class="app-text-muted">
+                      {{ $t('general.noData') }}
+                    </span>
+                  </section>
+                </div>
+                <div class="col bordered-t">
+                  <q-btn
+                    flat
+                    dense
+                    color="info"
+                    class="full-width"
+                    @click="() => $router.push('/notification')"
+                  >
+                    {{ $t('noti.viewAll') }}
+                  </q-btn>
                 </div>
               </q-menu>
             </q-btn>
@@ -455,6 +493,8 @@ onMounted(async () => {
       </template>
     </DialogForm>
 
+    <NotiDialog v-model="state.notiDialog" v-model:id="state.notiId" />
+
     <global-loading :visibility="visible" />
   </q-layout>
 </template>
diff --git a/src/pages/00_notification/MainPage.vue b/src/pages/00_notification/MainPage.vue
new file mode 100644
index 00000000..97bd755c
--- /dev/null
+++ b/src/pages/00_notification/MainPage.vue
@@ -0,0 +1,243 @@
+<script lang="ts" setup>
+// NOTE: Library
+import { onMounted, reactive, ref } from 'vue';
+
+// NOTE: Components
+import NoData from 'src/components/NoData.vue';
+import NotiDialog from './NotiDialog.vue';
+
+// NOTE: Stores & Type
+import { useNavigator } from 'src/stores/navigator';
+import { storeToRefs } from 'pinia';
+import { useNotification } from 'src/stores/notification';
+import { dateFormatJS } from 'src/utils/datetime';
+
+// NOTE: Variable
+const navigatorStore = useNavigator();
+const notificationStore = useNotification();
+const { data: noti } = storeToRefs(notificationStore);
+
+const state = reactive({
+  currentTab: 'all',
+  inputSearch: '',
+  notiDialog: false,
+  notiId: '',
+});
+
+const pageTabs = [
+  { label: 'all', value: 'all' },
+  { label: 'unread', value: 'unread' },
+];
+
+const selectedNoti = ref<string[]>([]);
+
+function toggleSelection(id: string, checkAll: boolean = false) {
+  const index = selectedNoti.value.indexOf(id);
+  if (checkAll) {
+    if (selectedNoti.value.length === noti.value.length) {
+      selectedNoti.value = [];
+    } else {
+      selectedNoti.value = [...noti.value.map((v) => v.id)];
+    }
+    return;
+  }
+
+  if (index > -1) {
+    selectedNoti.value.splice(index, 1);
+  } else {
+    selectedNoti.value.push(id);
+  }
+}
+
+async function fetchNoti() {
+  const res = await notificationStore.getNotificationList();
+  if (res) {
+    noti.value = res.result;
+  }
+}
+
+async function markAsRead() {
+  const res = await notificationStore.markReadNotification(selectedNoti.value);
+  if (res) {
+    await fetchNoti();
+    selectedNoti.value = [];
+  }
+}
+
+async function deleteNoti() {
+  const res = await notificationStore.deleteMultiNotification(
+    selectedNoti.value,
+  );
+  if (res) {
+    await fetchNoti();
+    selectedNoti.value = [];
+  }
+}
+
+function readNoti(id: string) {
+  state.notiId = id;
+  state.notiDialog = true;
+}
+
+onMounted(async () => {
+  navigatorStore.current.title = 'noti.title';
+  navigatorStore.current.path = [{ text: 'noti.caption', i18n: true }];
+
+  await fetchNoti();
+});
+</script>
+<template>
+  <main class="column full-height no-wrap">
+    <div class="surface-1 col bordered rounded column">
+      <div class="q-px-lg q-py-xs row items-center">
+        <q-checkbox
+          size="xs"
+          :model-value="selectedNoti.length === noti.length"
+          class="q-px-sm"
+          @click="toggleSelection('', true)"
+        />
+        <q-btn
+          v-if="selectedNoti.length === 0"
+          icon="mdi-refresh"
+          rounded
+          flat
+          dense
+          size="xs"
+          class="app-text-muted-2 q-ml-sm q-mt-xs"
+          @click="async () => await fetchNoti()"
+        >
+          <q-tooltip>Refresh</q-tooltip>
+        </q-btn>
+        <q-btn
+          v-if="selectedNoti.length > 0"
+          icon="mdi-trash-can-outline"
+          rounded
+          flat
+          dense
+          size="xs"
+          class="app-text-muted-2 q-ml-sm q-mt-xs"
+          @click="async () => await deleteNoti()"
+        >
+          <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
+        </q-btn>
+        <q-btn
+          v-if="selectedNoti.length > 0"
+          icon="mdi-email-open-outline"
+          rounded
+          flat
+          dense
+          size="xs"
+          class="app-text-muted-2 q-mx-sm q-mt-xs"
+          @click="async () => await markAsRead()"
+        >
+          <q-tooltip>{{ $t('noti.markAsRead') }}</q-tooltip>
+        </q-btn>
+        <span v-if="selectedNoti.length" class="text-caption app-text-muted-2">
+          {{
+            $t('general.selected', {
+              number: selectedNoti.length,
+              msg: $t('noti.title'),
+            })
+          }}
+        </span>
+      </div>
+
+      <q-tabs
+        inline-label
+        mobile-arrows
+        dense
+        v-model="state.currentTab"
+        align="left"
+        class="full-width bordered-b"
+        active-color="info"
+      >
+        <q-tab
+          v-for="tab in pageTabs"
+          :name="tab.value"
+          :key="tab.value"
+          @click="
+            () => {
+              state.currentTab = tab.value;
+              state.inputSearch = '';
+            }
+          "
+        >
+          <div
+            class="row text-capitalize"
+            :class="
+              state.currentTab === tab.value ? 'text-bold' : 'app-text-muted'
+            "
+          >
+            {{ $t(`noti.${tab.label}`) }}
+            <q-badge
+              rounded
+              class="q-ml-md"
+              style="background: hsl(var(--info-bg))"
+            >
+              {{
+                tab.value === 'all'
+                  ? noti.length
+                  : noti.filter((v) => !v.read).length
+              }}
+            </q-badge>
+          </div>
+        </q-tab>
+      </q-tabs>
+
+      <section class="scroll full-height col">
+        <article
+          v-if="
+            state.currentTab === 'unread'
+              ? noti.filter((v) => !v.read).length > 0
+              : noti.length > 0
+          "
+          class="q-pa-md q-gutter-sm"
+        >
+          <q-item
+            v-for="(n, i) in state.currentTab === 'unread'
+              ? noti.filter((v) => !v.read)
+              : noti"
+            :key="i"
+            clickable
+            :class="{ 'surface-3': !n.read }"
+            class="q-py-sm q-px-md rounded row no-wrap items-center"
+            @click.stop="readNoti(n.id)"
+          >
+            <!-- <div
+              class="rounded"
+              :style="`background: hsl(var(--info-bg)/${n.read ? 0 : 1}); width: 6px; height: 6px`"
+            /> -->
+            <q-checkbox
+              :model-value="selectedNoti.includes(n.id)"
+              size="xs"
+              class="q-pr-lg"
+              @click.stop="toggleSelection(n.id)"
+            />
+            <div class="column">
+              {{ n.title }}
+              <span class="text-caption app-text-muted">
+                {{ n.detail }}
+              </span>
+            </div>
+            <div class="q-ml-auto">
+              {{
+                dateFormatJS({
+                  date: n.createdAt,
+                  dayStyle: 'numeric',
+                  monthStyle: '2-digit',
+                  withTime: true,
+                })
+              }}
+            </div>
+          </q-item>
+        </article>
+        <div v-else class="full-height flex items-center justify-center">
+          <NoData />
+        </div>
+      </section>
+    </div>
+  </main>
+
+  <NotiDialog v-model="state.notiDialog" v-model:id="state.notiId" />
+</template>
+<style scoped></style>
diff --git a/src/pages/00_notification/NotiDialog.vue b/src/pages/00_notification/NotiDialog.vue
new file mode 100644
index 00000000..63a37f9d
--- /dev/null
+++ b/src/pages/00_notification/NotiDialog.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import DialogFormContainer from 'src/components/dialog/DialogFormContainer.vue';
+import DialogHeader from 'src/components/dialog/DialogHeader.vue';
+import { CancelButton } from 'src/components/button';
+import { ref } from 'vue';
+import { Notification, useNotification } from 'src/stores/notification';
+import { dateFormatJS } from 'src/utils/datetime';
+
+const notificationStore = useNotification();
+const open = defineModel<boolean>({ default: false, required: true });
+const notiId = defineModel<string>('id', { default: '', required: true });
+
+const noti = ref<Notification>();
+
+function close() {
+  open.value = false;
+}
+
+async function fetchNoti() {
+  const res = await notificationStore.getNotification(notiId.value);
+  if (res) {
+    noti.value = res;
+  }
+}
+</script>
+<template>
+  <DialogFormContainer
+    width="60vw"
+    height="350px"
+    v-model="open"
+    v-on:open="fetchNoti"
+  >
+    <template #header>
+      <DialogHeader :title="$t('noti.title')" />
+    </template>
+
+    <section v-if="noti" class="q-pa-md col full-width">
+      <div class="surface-1 rounded bordered q-pa-md full-height full-width">
+        {{ noti.title }}
+        <div class="text-caption app-text-muted">
+          {{
+            dateFormatJS({
+              date: noti.createdAt,
+              monthStyle: 'long',
+              withTime: true,
+            })
+          }}
+        </div>
+        <q-separator spaced="md" />
+        <div class="text-caption">
+          {{ noti.detail }}
+        </div>
+      </div>
+    </section>
+
+    <template #footer>
+      <CancelButton
+        class="q-ml-auto"
+        :label="$t('general.close')"
+        outlined
+        @click="close"
+      />
+    </template>
+  </DialogFormContainer>
+</template>

From d3c37124660e0532a2d0c0a3e2d6d78627ff0046 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 6 Mar 2025 11:14:09 +0700
Subject: [PATCH 11/11] style: refine notification dialog layout and update
 button classes

---
 src/pages/00_notification/MainPage.vue   |  4 ++--
 src/pages/00_notification/NotiDialog.vue | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/pages/00_notification/MainPage.vue b/src/pages/00_notification/MainPage.vue
index 97bd755c..b581fd68 100644
--- a/src/pages/00_notification/MainPage.vue
+++ b/src/pages/00_notification/MainPage.vue
@@ -115,7 +115,7 @@ onMounted(async () => {
           flat
           dense
           size="xs"
-          class="app-text-muted-2 q-ml-sm q-mt-xs"
+          class="app-text-muted-2 q-ml-sm"
           @click="async () => await deleteNoti()"
         >
           <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
@@ -127,7 +127,7 @@ onMounted(async () => {
           flat
           dense
           size="xs"
-          class="app-text-muted-2 q-mx-sm q-mt-xs"
+          class="app-text-muted-2 q-mx-sm"
           @click="async () => await markAsRead()"
         >
           <q-tooltip>{{ $t('noti.markAsRead') }}</q-tooltip>
diff --git a/src/pages/00_notification/NotiDialog.vue b/src/pages/00_notification/NotiDialog.vue
index 63a37f9d..b15f8731 100644
--- a/src/pages/00_notification/NotiDialog.vue
+++ b/src/pages/00_notification/NotiDialog.vue
@@ -35,8 +35,12 @@ async function fetchNoti() {
     </template>
 
     <section v-if="noti" class="q-pa-md col full-width">
-      <div class="surface-1 rounded bordered q-pa-md full-height full-width">
-        {{ noti.title }}
+      <article
+        class="surface-1 rounded bordered q-pa-md full-height full-width"
+      >
+        <div class="text-bold">
+          {{ noti.title }}
+        </div>
         <div class="text-caption app-text-muted">
           {{
             dateFormatJS({
@@ -50,7 +54,7 @@ async function fetchNoti() {
         <div class="text-caption">
           {{ noti.detail }}
         </div>
-      </div>
+      </article>
     </section>
 
     <template #footer>