diff --git a/src/components/05_quotation/QuotationCard.vue b/src/components/05_quotation/QuotationCard.vue
index 5c53d8cd..e9f6885c 100644
--- a/src/components/05_quotation/QuotationCard.vue
+++ b/src/components/05_quotation/QuotationCard.vue
@@ -47,7 +47,7 @@ const rand = Math.random();
 </script>
 <template>
   <div
-    class="surface-1 rounded q-pa-sm quo-card bordered column"
+    class="surface-1 rounded q-pa-sm quo-card bordered column full-width"
     :class="{ 'urgent-card': urgent }"
     :style="{ '--animation-delay': rand + 's' }"
   >
@@ -110,8 +110,8 @@ const rand = Math.random();
       </nav>
     </header>
 
-    <div class="ellipsis q-px-xs">
-      <b>{{ title || '-' }}</b>
+    <div class="text-bold q-px-xs ellipsis full-width">
+      {{ title || '-' }}
       <q-tooltip anchor="bottom start" self="top left">
         {{ title || '-' }}
       </q-tooltip>
diff --git a/src/components/05_quotation/TableQuotation.vue b/src/components/05_quotation/TableQuotation.vue
index e3d46c56..a80a4e40 100644
--- a/src/components/05_quotation/TableQuotation.vue
+++ b/src/components/05_quotation/TableQuotation.vue
@@ -18,6 +18,7 @@ const props = withDefaults(
     hideEdit?: boolean;
     page?: number;
     pageSize?: number;
+    hideBtnPreview?: boolean;
   }>(),
   {
     row: () => [],
@@ -127,6 +128,7 @@ defineEmits<{
 
         <q-td class="text-right">
           <q-btn
+            v-if="!hideBtnPreview"
             :id="`btn-preview-${props.row.workName}`"
             icon="mdi-play-box-outline"
             size="sm"
diff --git a/src/components/14_report/Expansion.vue b/src/components/14_report/Expansion.vue
index 581c677b..9f119bbf 100644
--- a/src/components/14_report/Expansion.vue
+++ b/src/components/14_report/Expansion.vue
@@ -15,9 +15,7 @@ defineProps<{
     :default-opened="defaultOpened"
   >
     <template #header>
-      <span>
-        <slot name="header" />
-      </span>
+      <slot name="header" />
     </template>
 
     <main class="surface-1 q-pa-md full-width">
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index a319cf02..7bd226ac 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -85,6 +85,10 @@ div.fullscreen.q-drawer__backdrop {
   font-family: 'Noto Sans Thai', sans-serif;
 }
 
+.dp__overlay_cell_active.dp__overlay_cell_pad {
+  font-family: 'Noto Sans Thai', sans-serif;
+}
+
 .disabled,
 .disabled *,
 [disabled],
diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index c58c3940..c3831765 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -149,6 +149,7 @@ export default {
     included: 'Included',
     notIncluded: 'Not Included',
     dueDate: 'Due date',
+    year: 'year',
   },
 
   menu: {
@@ -241,6 +242,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',
@@ -791,7 +802,7 @@ export default {
 
     paySplitMessage: 'Amount to be paid (Baht)',
     summary: 'Total Summary',
-    periodNo: 'Installment No."',
+    periodNo: 'Installment No.',
     amount: 'Amount',
     payDueDate: 'Pay Due Date',
     callDueDate: 'Call Due Date',
@@ -1141,6 +1152,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.',
@@ -1339,39 +1351,49 @@ export default {
     },
   },
   report: {
-    report: {
-      title: 'Report',
-      view: {
-        Document: 'Document Status Report',
-        Invoice: 'Payment Report',
-        Product: 'Product and Service Report',
-        Sale: 'Sales Summary Report',
-      },
-      document: {
-        code: 'Code',
-        status: 'Quotation Status',
-        createAt: 'Created Date',
-        updateAt: 'Updated Date',
-      },
-      table: {
-        code: 'Code',
-        status: 'Status',
-        createAt: 'Created Date',
-      },
-      product: {
-        did: 'Processed Quantity',
-        sale: 'Sold Quantity',
-        name: 'Product Name',
-        code: 'Product Code',
-      },
-      sale: {
-        byCustomer: 'Sales by Branch',
-        byProductGroup: 'Sales by Product Category',
-        bySale: 'Sales by Salesperson',
-        code: 'Code',
-        name: 'Name',
-        count: 'Sold Quantity',
-      },
+    title: 'Report',
+    value: 'Value',
+    customerName: 'Customer Name',
+    view: {
+      Document: 'Document Status Report',
+      Invoice: 'Payment Report',
+      Product: 'Product and Service Report',
+      Sale: 'Sales Summary Report',
+      Profit: 'Profit and Loss Report',
+    },
+    document: {
+      code: 'Code',
+      status: 'Quotation Status',
+      createAt: 'Created Date',
+      updateAt: 'Updated Date',
+    },
+    table: {
+      code: 'Code',
+      status: 'Status',
+      createAt: 'Created Date',
+    },
+    product: {
+      did: 'Processed Quantity',
+      sale: 'Sold Quantity',
+      name: 'Product Name',
+      code: 'Product Code',
+    },
+    sale: {
+      byCustomer: 'Sales by Branch',
+      byProductGroup: 'Sales by Product Category',
+      bySale: 'Sales by Salesperson',
+      code: 'Code',
+      name: 'Name',
+      count: 'Sold Quantity',
+    },
+    profit: {
+      byMonth: 'Profit Table by Month',
+      byYear: 'Profit Table by Year',
+      month: 'Month',
+      year: 'Year (AD)',
+      netProfit: 'Net Profit',
+      expenses: 'Expenses',
+      income: 'Income',
     },
   },
   dashboard: {
@@ -1406,4 +1428,19 @@ export default {
       caption: 'Based on Tax Invoices',
     },
   },
+
+  month: {
+    1: 'January',
+    2: 'February',
+    3: 'March',
+    4: 'April',
+    5: 'May',
+    6: 'June',
+    7: 'July',
+    8: 'August',
+    9: 'September',
+    10: 'October',
+    11: 'November',
+    12: 'December',
+  },
 };
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 9f59da2f..cbf1b422 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -149,6 +149,7 @@ export default {
     included: 'รวม',
     notIncluded: 'ไม่รวม',
     dueDate: 'วันครบกำหนด',
+    year: 'ปี',
   },
 
   menu: {
@@ -241,6 +242,16 @@ export default {
     },
   },
 
+  noti: {
+    title: 'การแจ้งเตือน',
+    caption: 'การแจ้งเตือนทั้งหมด',
+    unread: 'ยังไม่ได้อ่าน',
+    all: 'ทั้งหมด',
+    read: 'อ่าน',
+    viewAll: 'ดูทั้งหมด',
+    markAsRead: 'ทำเครื่องหมายว่าอ่านแล้ว',
+  },
+
   form: {
     tm6: {
       transportation: 'เที่ยวบิน/พาหนะ',
@@ -1119,6 +1130,7 @@ export default {
       taskListNotFound: 'ไม่พบใบสั่งงาน',
       creditNoteNotFound: 'ไม่พบใบลดหนี้',
       debitNoteNotFound: 'ไม่พบใบเพิ่มหนี้',
+      notificationNotFound: 'ไม่พบการแจ้งเตือน',
 
       productGroupIsUsed: 'กลุ่มสินค้าและบริการที่ใช้งานอยู่',
       productIsUsed: 'สินค้าและบริการใช้งานอยู่',
@@ -1320,11 +1332,14 @@ export default {
 
   report: {
     title: 'รายงาน',
+    customerName: 'ชื่อลูกค้า',
+    value: 'มูลค่า',
     view: {
       Document: 'รายงานสถานะเอกสาร',
       Invoice: 'รายงานการชำระเงิน',
       Product: 'รายงานสินค้าและบริการ',
       Sale: 'รายงานสรุปยอดขาย',
+      Profit: 'รายงานกำไรและขาดทุน',
     },
     document: {
       code: 'รหัส',
@@ -1352,6 +1367,15 @@ export default {
       name: 'ชื่อ',
       count: 'จำนวนที่ขาย',
     },
+    profit: {
+      byMonth: 'ตารางผลกำไรตามเดือน',
+      byYear: 'ตารางผลกำไรตามปี',
+      month: 'เดือน',
+      year: 'ปี (ค.ศ.)',
+      netProfit: 'กำไร',
+      expenses: 'ต้นทุน',
+      income: 'รายได้',
+    },
   },
   dashboard: {
     title: 'Dashboard',
@@ -1385,4 +1409,19 @@ export default {
       caption: 'ตามใบกำกับภาษี',
     },
   },
+
+  month: {
+    1: 'มกราคม',
+    2: 'กุมภาพันธ์',
+    3: 'มีนาคม',
+    4: 'เมษายน',
+    5: 'พฤษภาคม',
+    6: 'มิถุนายน',
+    7: 'กรกฎาคม',
+    8: 'สิงหาคม',
+    9: 'กันยายน',
+    10: 'ตุลาคม',
+    11: 'พฤศจิกายน',
+    12: 'ธันวาคม',
+  },
 };
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 168b895d..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';
@@ -17,6 +18,8 @@ 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';
+import NotiDialog from 'src/pages/00_notification/NotiDialog.vue';
 
 const useMyBranch = useMyBranchStore();
 const { fetchListMyBranch } = useMyBranch;
@@ -27,18 +30,14 @@ interface NotificationButton {
   active: boolean;
 }
 
-interface Notification {
-  id: string;
-  title: string;
-  content: string;
-  read: boolean;
-}
-
 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();
@@ -48,8 +47,9 @@ const canvasModal = ref(false);
 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('');
@@ -65,33 +65,24 @@ 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,
   },
 ]);
-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) => ({
@@ -99,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;
   }
 }
 
@@ -123,12 +114,25 @@ function doLogout() {
   });
 }
 
+function readNoti(id: string) {
+  state.notiDialog = true;
+  state.notiId = id;
+}
+
 onMounted(async () => {
   initTheme();
   initLang();
 
   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;
 
@@ -278,7 +282,7 @@ onMounted(async () => {
 
           <div class="row q-gutter-x-md items-center" style="margin-left: auto">
             <!-- notification -->
-            <!-- <q-btn
+            <q-btn
               round
               dense
               flat
@@ -286,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">
@@ -297,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">
@@ -312,22 +322,30 @@ 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>
-                <q-infinite-scroll :offset="250">
-                  <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 in !filterUnread
-                        ? notification
-                        : notification.filter((v) => !v.read)"
-                      :key="item.id"
+                      @click="readNoti(item.id)"
+                      :key="i"
                     >
                       <q-avatar
                         color="positive"
@@ -343,12 +361,11 @@ 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">
                         {{ moment(item.createdAt).fromNow() }}
-                        5 s
                       </span>
                       <q-tooltip
                         anchor="top middle"
@@ -356,21 +373,29 @@ onMounted(async () => {
                         :delay="1000"
                         :offset="[10, 10]"
                       >
-                        {{ item.content }}
+                        {{ item.detail }}
                       </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>
+                  </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> -->
+            </q-btn>
 
             <!-- เปลี่นนภาษา -->
             <q-btn
@@ -468,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..b581fd68
--- /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"
+          @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"
+          @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..b15f8731
--- /dev/null
+++ b/src/pages/00_notification/NotiDialog.vue
@@ -0,0 +1,69 @@
+<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">
+      <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({
+              date: noti.createdAt,
+              monthStyle: 'long',
+              withTime: true,
+            })
+          }}
+        </div>
+        <q-separator spaced="md" />
+        <div class="text-caption">
+          {{ noti.detail }}
+        </div>
+      </article>
+    </section>
+
+    <template #footer>
+      <CancelButton
+        class="q-ml-auto"
+        :label="$t('general.close')"
+        outlined
+        @click="close"
+      />
+    </template>
+  </DialogFormContainer>
+</template>
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index b73c5f35..13a58c60 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -641,6 +641,7 @@ async function storeDataLocal(id: string) {
                 :visible-columns="pageState.fieldSelected"
                 :grid="pageState.gridView"
                 :hide-edit="pageState.currentTab !== 'Issued'"
+                :hide-btn-preview="pageState.currentTab === 'PaymentSuccess'"
                 @preview="(id: any) => storeDataLocal(id)"
                 @view="
                   (item) => {
@@ -667,6 +668,7 @@ async function storeDataLocal(id: string) {
                       class="col"
                       hide-kebab-delete
                       :hide-kebab-edit="!(pageState.currentTab === 'Issued')"
+                      :hide-preview="pageState.currentTab === 'PaymentSuccess'"
                       :urgent="item.row.urgent"
                       :code="item.row.code"
                       :title="item.row.workName"
diff --git a/src/pages/05_quotation/PaymentForm.vue b/src/pages/05_quotation/PaymentForm.vue
index 06566ead..5bf0e43e 100644
--- a/src/pages/05_quotation/PaymentForm.vue
+++ b/src/pages/05_quotation/PaymentForm.vue
@@ -32,6 +32,8 @@ const prop = defineProps<{
   isDebitNote?: boolean;
 }>();
 
+const firstCodePayment = defineModel<string>('firstCodePayment');
+
 const refQFile = ref<InstanceType<typeof QFile>[]>([]);
 const refQMenu = ref<InstanceType<typeof QMenu>[]>([]);
 const paymentData = ref<QuotationPaymentData[]>([]);
@@ -206,10 +208,15 @@ onMounted(async () => {
   });
   if (ret) {
     paymentData.value = ret.result;
-    slipFile.value = paymentData.value.map((v) => ({
-      paymentId: v.id,
-      data: [],
-    }));
+    slipFile.value = paymentData.value.map((v, i) => {
+      if (i === 0) {
+        firstCodePayment.value = v.code;
+      }
+      return {
+        paymentId: v.id,
+        data: [],
+      };
+    });
   }
 });
 </script>
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 6d14d322..f85d4f38 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -196,7 +196,7 @@ const selectedWorkerItem = computed(() => {
   ];
 });
 const workerList = ref<Employee[]>([]);
-
+const firstCodePayment = ref('');
 const selectedProductGroup = ref('');
 const selectedInstallmentNo = ref<number[]>([]);
 const installmentAmount = ref<number>(0);
@@ -1093,12 +1093,14 @@ watch(
 // }
 
 function storeDataLocal() {
-  quotationFormData.value.productServiceList = productServiceList.value;
+  quotationFormData.value.productServiceList = productService.value;
 
   localStorage.setItem(
     'quotation-preview',
     JSON.stringify({
       data: {
+        codeInvoice: code.value,
+        codePayment: firstCodePayment.value,
         ...quotationFormData.value,
         productServiceList: productService.value,
       },
@@ -1939,6 +1941,7 @@ function covertToNode() {
                 view !== View.Complete
               "
               :data="quotationFormState.source"
+              v-model:first-code-payment="firstCodePayment"
               @fetch-status="
                 () => {
                   fetchQuotation();
@@ -2105,6 +2108,8 @@ function covertToNode() {
 
                                 installmentAmount = props.row.amount;
                                 view = View.Invoice;
+
+                                console.log(code);
                               }
                             }
                           "
@@ -2289,6 +2294,7 @@ function covertToNode() {
           <MainButton
             solid
             icon="mdi-account-multiple-check-outline"
+            class="q-ml-sm"
             color="207 96% 32%"
             id="btn-select-invoice"
             @click="
diff --git a/src/pages/05_quotation/preview/ViewForm.vue b/src/pages/05_quotation/preview/ViewForm.vue
index 26be292e..0a12408f 100644
--- a/src/pages/05_quotation/preview/ViewForm.vue
+++ b/src/pages/05_quotation/preview/ViewForm.vue
@@ -86,10 +86,22 @@ const summaryPrice = ref<SummaryPrice>({
   finalPrice: 0,
 });
 
-async function fetchQuotationById(id: string) {
+async function fetchQuotationById(id: string, codeInvoice: string) {
   const res = await quotationStore.getQuotation(id);
+  if (res) {
+    const installmentNo = res.paySplit.find(
+      (v) => codeInvoice === v.invoice?.code,
+    )?.no;
 
-  if (res) data.value = res;
+    data.value = {
+      ...res,
+      productServiceList: !!installmentNo
+        ? res.productServiceList.filter(
+            (v) => installmentNo === v.installmentNo,
+          )
+        : res.productServiceList,
+    };
+  }
 }
 
 async function getAttachment(quotationId: string) {
@@ -190,7 +202,8 @@ onMounted(async () => {
   if (data.value) {
     if (!!data.value.id) {
       await getAttachment(data.value.id);
-      await fetchQuotationById(data.value.id);
+      if (parsed.data.fetch)
+        await fetchQuotationById(data.value.id, parsed.data.codeInvoice);
     }
 
     const resCustomerBranch = await customerStore.getBranchById(
@@ -203,8 +216,15 @@ onMounted(async () => {
 
     agentPrice.value = data.value.agentPrice || parsed?.meta?.agentPrice;
 
+    const currentCode =
+      view.value === View.Invoice
+        ? parsed.data.codeInvoice
+        : view.value === View.Payment
+          ? parsed.data.codePayment
+          : (parsed?.meta?.source?.code ?? data.value?.code);
+
     details.value = {
-      code: parsed?.meta?.source?.code ?? data.value?.code,
+      code: currentCode,
       createdAt:
         parsed?.meta?.source?.createdAt ??
         new Date(data.value?.createdAt || ''),
diff --git a/src/pages/10_invoice/MainPage.vue b/src/pages/10_invoice/MainPage.vue
index 5b0274cc..12f20809 100644
--- a/src/pages/10_invoice/MainPage.vue
+++ b/src/pages/10_invoice/MainPage.vue
@@ -88,12 +88,16 @@ function triggerView(opts: { quotationId: string }) {
   window.open(url.toString(), '_blank');
 }
 
-function viewDocExample(quotationId: string) {
+function viewDocExample(quotationId: string, codeInvoice: string) {
+  console.log(codeInvoice);
+
   localStorage.setItem(
     'quotation-preview',
     JSON.stringify({
       data: {
         id: quotationId,
+        codeInvoice,
+        fetch: true,
       },
     }),
   );
@@ -346,7 +350,7 @@ watch(
               :rows="data"
               :grid="pageState.gridView"
               @view="(quotationId) => triggerView({ quotationId })"
-              @preview="(quotationId) => viewDocExample(quotationId)"
+              @preview="(item) => viewDocExample(item.quotation.id, item.code)"
             >
               <template #grid="{ item }">
                 <div class="col-md-4 col-sm-6 col-12">
@@ -401,9 +405,7 @@ watch(
                       () => triggerView({ quotationId: item.row.quotation.id })
                     "
                     @preview="
-                      () => {
-                        viewDocExample(item.row.quotation.id);
-                      }
+                      () => viewDocExample(item.row.quotation.id, item.row.code)
                     "
                   />
                 </div>
diff --git a/src/pages/10_invoice/TableInvoice.vue b/src/pages/10_invoice/TableInvoice.vue
index 5ae938c2..901533ca 100644
--- a/src/pages/10_invoice/TableInvoice.vue
+++ b/src/pages/10_invoice/TableInvoice.vue
@@ -41,7 +41,7 @@ withDefaults(
 
 defineEmits<{
   (e: 'view', id: string): void;
-  (e: 'preview', id: string): void;
+  (e: 'preview', data: Invoice): void;
   (e: 'edit', data: T, index: number): void;
   (e: 'delete', data: T, index: number): void;
   (e: 'download', data: T, index: number): void;
@@ -118,7 +118,7 @@ defineEmits<{
               icon="mdi-play-box-outline"
               size="12px"
               :title="$t('preview.doc')"
-              @click.stop="$emit('preview', props.row.quotation.id)"
+              @click.stop="$emit('preview', props.row)"
             />
 
             <q-btn
diff --git a/src/pages/14_report/MainPage.vue b/src/pages/14_report/MainPage.vue
index 9c72fdee..2ee6b411 100644
--- a/src/pages/14_report/MainPage.vue
+++ b/src/pages/14_report/MainPage.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // NOTE: Library
-import { computed, onMounted, reactive, watch } from 'vue';
+import { ref, computed, onMounted, reactive, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { getRole } from 'src/services/keycloak';
 
@@ -19,27 +19,58 @@ import {
   colReport,
   colReportProduct,
   colReportSale,
+  colProfit,
+  colProfitByMoth,
+  colProfitByYear,
 } from './constants';
 import useFlowStore from 'src/stores/flow';
 import { useReportStore } from 'src/stores/report';
 import BadgeComponent from 'src/components/BadgeComponent.vue';
 import Expansion from 'src/components/14_report/Expansion.vue';
+import { SaveButton } from 'src/components/button';
+import { ReportProfit } from 'src/stores/report/types';
 
 // NOTE: Variable
 const navigatorStore = useNavigator();
 const reportStore = useReportStore();
 const flow = useFlowStore();
 
+const dataReportProfitByYears = ref<ReportProfit['dataset']>([]);
+const pastYears = ref<number>(5);
+const optionsPastYears = ref<number[]>([5, 10, 20, 30, 50, 80]);
+
 const {
   dataReportQuotation,
   dataReportInvoice,
   dataReportReceipt,
   dataReportSale,
   dataReportProduct,
+  dataReportProfit,
 } = storeToRefs(reportStore);
 
 const userRoles = computed(() => getRole() || []);
 
+const combinedProfitYear = computed(() => {
+  return (
+    dataReportProfitByYears.value?.reduce<ReportProfit['dataset']>(
+      (acc, val) => {
+        let find = acc.find((item) => item.year === val.year);
+
+        if (find) {
+          find.expenses += val.expenses;
+          find.netProfit += val.netProfit;
+          find.income += val.income;
+        } else {
+          acc.push({ ...val });
+        }
+
+        return acc;
+      },
+      [],
+    ) ?? []
+  );
+});
+
 async function fetchReportQuotation() {
   dataReportQuotation.value = (await reportStore.getReportQuotation()) || [];
 }
@@ -57,6 +88,16 @@ async function fetchReportProduct() {
   dataReportProduct.value = (await reportStore.getReportProduct()) || [];
 }
 
+async function fetchReportProfit() {
+  dataReportProfit.value = (await reportStore.getReportProfit()) || undefined;
+  dataReportProfitByYears.value = dataReportProfit.value?.dataset || [];
+}
+
+async function fetchReportProfitByYears(years: number) {
+  const res = (await reportStore.getReportProfit({ years })) || undefined;
+  dataReportProfitByYears.value = res?.dataset || [];
+}
+
 onMounted(async () => {
   navigatorStore.current.title = 'report.title';
   navigatorStore.current.path = [{ text: '' }];
@@ -64,7 +105,7 @@ onMounted(async () => {
 
 const isExecutive = computed(() => {
   const roles = userRoles.value;
-  return roles.includes('executive');
+  return roles.includes('executive') || roles.includes('system');
 });
 
 const filteredTabs = computed(() => {
@@ -78,7 +119,7 @@ const filteredTabs = computed(() => {
 });
 
 const pageState = reactive({
-  currentTab: isExecutive.value ? ViewMode.Product : ViewMode.Document,
+  currentTab: ViewMode.Document,
 });
 
 async function fetchReportTab() {
@@ -101,6 +142,10 @@ async function fetchReportTab() {
       await fetchReportSale();
       break;
     }
+    case ViewMode.Profit: {
+      await fetchReportProfit();
+      break;
+    }
   }
 }
 
@@ -111,6 +156,10 @@ onMounted(async () => {
 watch([() => pageState.currentTab], async () => {
   await fetchReportTab();
 });
+
+watch([() => pastYears.value], async () => {
+  await fetchReportProfitByYears(pastYears.value);
+});
 </script>
 
 <template>
@@ -166,11 +215,33 @@ watch([() => pageState.currentTab], async () => {
               <!-- Quotatio -->
 
               <Expansion default-opened>
-                <template #header>{{ $t('quotation.title') }}</template>
+                <template #header>
+                  <div class="flex full-width items-center">
+                    {{ $t('quotation.title') }}
+                    <SaveButton
+                      style="margin-left: auto"
+                      :icon="'material-symbols:download'"
+                      :label="$t('general.download')"
+                      @click.stop="reportStore.downloadReportQuotation()"
+                    />
+                  </div>
+                </template>
 
                 <template #main>
                   <TableReport
-                    :row="dataReportQuotation"
+                    :row="
+                      dataReportQuotation.map((v) => ({
+                        ...v,
+                        name:
+                          v.customerBranch.customer.customerType === 'CORP'
+                            ? $i18n.locale === 'eng'
+                              ? v.customerBranch.registerNameEN
+                              : v.customerBranch.registerName
+                            : $i18n.locale === 'eng'
+                              ? `${v.customerBranch.firstNameEN} ${v.customerBranch.lastNameEN}`
+                              : `${v.customerBranch.firstName} ${v.customerBranch.lastName}`,
+                      }))
+                    "
                     :columns="colReportQuotation"
                   >
                     <template #status="{ item }">
@@ -185,9 +256,34 @@ watch([() => pageState.currentTab], async () => {
 
               <!-- Invoice -->
               <Expansion default-opened>
-                <template #header>{{ $t('invoice.title') }}</template>
+                <template #header>
+                  <div class="flex full-width items-center">
+                    {{ $t('invoice.title') }}
+                    <SaveButton
+                      style="margin-left: auto"
+                      :icon="'material-symbols:download'"
+                      :label="$t('general.download')"
+                      @click.stop="reportStore.downloadReportInvoice()"
+                    />
+                  </div>
+                </template>
                 <template #main>
-                  <TableReport :row="dataReportInvoice" :columns="colReport">
+                  <TableReport
+                    :row="
+                      dataReportInvoice.map((v) => ({
+                        ...v,
+                        name:
+                          v.customerBranch.customer.customerType === 'CORP'
+                            ? $i18n.locale === 'eng'
+                              ? v.customerBranch.registerNameEN
+                              : v.customerBranch.registerName
+                            : $i18n.locale === 'eng'
+                              ? `${v.customerBranch.firstNameEN} ${v.customerBranch.lastNameEN}`
+                              : `${v.customerBranch.firstName} ${v.customerBranch.lastName}`,
+                      }))
+                    "
+                    :columns="colReport"
+                  >
                     <template #status="{ item }">
                       <BadgeComponent
                         :title="$t(`invoice.status.${item.row.status}`)"
@@ -200,9 +296,34 @@ watch([() => pageState.currentTab], async () => {
 
               <!-- Receipt -->
               <Expansion default-opened>
-                <template #header>{{ $t('receipt.title') }}</template>
+                <template #header>
+                  <div class="flex full-width items-center">
+                    {{ $t('receipt.title') }}
+                    <SaveButton
+                      style="margin-left: auto"
+                      :icon="'material-symbols:download'"
+                      :label="$t('general.download')"
+                      @click.stop="reportStore.downloadReportReceipt()"
+                    />
+                  </div>
+                </template>
                 <template #main>
-                  <TableReport :row="dataReportReceipt" :columns="colReport">
+                  <TableReport
+                    :row="
+                      dataReportReceipt.map((v) => ({
+                        ...v,
+                        name:
+                          v.customerBranch.customer.customerType === 'CORP'
+                            ? $i18n.locale === 'eng'
+                              ? v.customerBranch.registerNameEN
+                              : v.customerBranch.registerName
+                            : $i18n.locale === 'eng'
+                              ? `${v.customerBranch.firstNameEN} ${v.customerBranch.lastNameEN}`
+                              : `${v.customerBranch.firstName} ${v.customerBranch.lastName}`,
+                      }))
+                    "
+                    :columns="colReport"
+                  >
                     <template #status="{ item }">
                       <BadgeComponent
                         :title="$t(`invoice.status.${item.row.status}`)"
@@ -217,9 +338,34 @@ watch([() => pageState.currentTab], async () => {
 
           <template v-if="pageState.currentTab === ViewMode.Invoice">
             <Expansion default-opened>
-              <template #header>{{ $t('invoice.title') }}</template>
+              <template #header>
+                <div class="flex full-width items-center">
+                  {{ $t('invoice.title') }}
+                  <SaveButton
+                    style="margin-left: auto"
+                    :icon="'material-symbols:download'"
+                    :label="$t('general.download')"
+                    @click.stop="reportStore.downloadReportInvoice()"
+                  />
+                </div>
+              </template>
               <template #main>
-                <TableReport :row="dataReportInvoice" :columns="colReport">
+                <TableReport
+                  :row="
+                    dataReportInvoice.map((v) => ({
+                      ...v,
+                      name:
+                        v.customerBranch.customer.customerType === 'CORP'
+                          ? $i18n.locale === 'eng'
+                            ? v.customerBranch.registerNameEN
+                            : v.customerBranch.registerName
+                          : $i18n.locale === 'eng'
+                            ? `${v.customerBranch.firstNameEN} ${v.customerBranch.lastNameEN}`
+                            : `${v.customerBranch.firstName} ${v.customerBranch.lastName}`,
+                    }))
+                  "
+                  :columns="colReport"
+                >
                   <template #status="{ item }">
                     <BadgeComponent
                       :title="$t(`invoice.status.${item.row.status}`)"
@@ -233,7 +379,17 @@ watch([() => pageState.currentTab], async () => {
 
           <template v-if="pageState.currentTab === ViewMode.Product">
             <Expansion default-opened>
-              <template #header>{{ $t('productService.title') }}</template>
+              <template #header>
+                <div class="flex full-width items-center">
+                  {{ $t('productService.title') }}
+                  <SaveButton
+                    style="margin-left: auto"
+                    :icon="'material-symbols:download'"
+                    :label="$t('general.download')"
+                    @click.stop="reportStore.downloadReportInvoice()"
+                  />
+                </div>
+              </template>
               <template #main>
                 <TableReport
                   :row="dataReportProduct"
@@ -245,7 +401,19 @@ watch([() => pageState.currentTab], async () => {
           <template v-if="pageState.currentTab === ViewMode.Sale">
             <div class="q-gutter-y-md">
               <Expansion default-opened>
-                <template #header>{{ $t('report.sale.byCustomer') }}</template>
+                <template #header>
+                  <div class="flex full-width items-center">
+                    {{ $t('report.sale.byCustomer') }}
+                    <SaveButton
+                      style="margin-left: auto"
+                      :icon="'material-symbols:download'"
+                      :label="$t('general.download')"
+                      @click.stop="
+                        reportStore.downloadReportSale('by-customer')
+                      "
+                    />
+                  </div>
+                </template>
                 <template #main>
                   <TableReport
                     :row="
@@ -254,7 +422,9 @@ watch([() => pageState.currentTab], async () => {
                           code: v.code,
                           name:
                             v.customer.customerType === 'CORP'
-                              ? v.customerName
+                              ? $i18n.locale === 'eng'
+                                ? v.registerNameEN
+                                : v.registerName
                               : $i18n.locale === 'eng'
                                 ? `${v.firstNameEN} ${v.lastNameEN}`
                                 : `${v.firstName} ${v.lastName}`,
@@ -273,7 +443,17 @@ watch([() => pageState.currentTab], async () => {
               </Expansion>
               <Expansion default-opened>
                 <template #header>
-                  {{ $t('report.sale.byProductGroup') }}
+                  <div class="flex full-width items-center">
+                    {{ $t('report.sale.byProductGroup') }}
+                    <SaveButton
+                      style="margin-left: auto"
+                      :icon="'material-symbols:download'"
+                      :label="$t('general.download')"
+                      @click.stop="
+                        reportStore.downloadReportSale('by-product-group')
+                      "
+                    />
+                  </div>
                 </template>
                 <template #main>
                   <TableReport
@@ -295,7 +475,17 @@ watch([() => pageState.currentTab], async () => {
                 </template>
               </Expansion>
               <Expansion default-opened>
-                <template #header>{{ $t('report.sale.bySale') }}</template>
+                <template #header>
+                  <div class="flex full-width items-center">
+                    {{ $t('report.sale.bySale') }}
+                    <SaveButton
+                      style="margin-left: auto"
+                      :icon="'material-symbols:download'"
+                      :label="$t('general.download')"
+                      @click.stop="reportStore.downloadReportSale('by-sale')"
+                    />
+                  </div>
+                </template>
                 <template #main>
                   <TableReport
                     :row="
@@ -353,6 +543,99 @@ watch([() => pageState.currentTab], async () => {
               </Expansion>
             </div>
           </template>
+
+          <template v-if="pageState.currentTab === ViewMode.Profit">
+            <div class="q-gutter-y-md">
+              <Expansion default-opened>
+                <template #header>
+                  <div class="flex full-width items-center">
+                    {{ $t('report.profit.byMonth') }}
+                  </div>
+                </template>
+
+                <template #main>
+                  <TableReport
+                    :row="dataReportProfit?.dataset"
+                    :columns="colProfitByMoth"
+                  >
+                    <template #title="{ item }">
+                      {{ $t(`month.${item.row.month}`) }}
+                    </template>
+                  </TableReport>
+                </template>
+              </Expansion>
+
+              <Expansion default-opened>
+                <template #header>
+                  <div class="flex full-width items-center">
+                    {{ $t('report.profit.byYear') }}
+                  </div>
+                </template>
+
+                <template #main>
+                  <div class="q-gutter-y-md">
+                    <q-select
+                      style="max-width: 150px"
+                      outlined
+                      use-input
+                      fill-input
+                      emit-value
+                      map-options
+                      hide-selected
+                      hide-bottom-space
+                      input-debounce="0"
+                      option-value="value"
+                      option-label="label"
+                      dense
+                      v-model="pastYears"
+                      :options="
+                        optionsPastYears.map((v) => ({
+                          value: v,
+                          label: `${v} ${$t('general.year')}`,
+                        }))
+                      "
+                      label="เลือกปีย้อนหลัง"
+                    ></q-select>
+
+                    <TableReport
+                      :row="combinedProfitYear"
+                      :columns="colProfitByYear"
+                    ></TableReport>
+                  </div>
+                </template>
+              </Expansion>
+
+              <Expansion default-opened>
+                <template #header>
+                  <div class="flex full-width items-center">
+                    {{ $t('report.view.Profit') }}
+                  </div>
+                </template>
+
+                <template #main>
+                  <TableReport
+                    :row="[
+                      {
+                        title: $t('report.profit.netProfit'),
+                        amount: dataReportProfit?.netProfit || 0,
+                      },
+                      {
+                        title: $t('report.profit.expenses'),
+                        amount: dataReportProfit?.expenses || 0,
+                      },
+                      {
+                        title: $t('report.profit.income'),
+                        amount: dataReportProfit?.income || 0,
+                      },
+                    ]"
+                    :columns="colProfit"
+                    hide-header
+                    hide-bottom
+                  ></TableReport>
+                </template>
+              </Expansion>
+            </div>
+          </template>
         </article>
       </div>
     </section>
diff --git a/src/pages/14_report/Table/TableReport.vue b/src/pages/14_report/Table/TableReport.vue
index 29214126..53377433 100644
--- a/src/pages/14_report/Table/TableReport.vue
+++ b/src/pages/14_report/Table/TableReport.vue
@@ -5,6 +5,8 @@ const prop = withDefaults(
   defineProps<{
     row: QTableProps['rows'];
     columns: QTableProps['columns'];
+    hideHeader?: boolean;
+    hideBottom?: boolean;
   }>(),
   {
     row: () => [],
@@ -22,6 +24,8 @@ const prop = withDefaults(
       }))
     "
     :columns
+    :hideHeader
+    :hideBottom
     bordered
     flat
     selection="multiple"
@@ -32,7 +36,12 @@ const prop = withDefaults(
         style="background-color: hsla(var(--info-bg) / 0.07)"
         :props="props"
       >
-        <q-th v-for="col in columns" :key="col.name" :props="props">
+        <q-th
+          v-for="col in columns"
+          style="text-align: center"
+          :key="col.name"
+          :props="props"
+        >
           {{ $t(col.label) }}
         </q-th>
       </q-tr>
diff --git a/src/pages/14_report/constants.ts b/src/pages/14_report/constants.ts
index dd4af0e7..2ff3a22c 100644
--- a/src/pages/14_report/constants.ts
+++ b/src/pages/14_report/constants.ts
@@ -14,6 +14,7 @@ export enum ViewMode {
   Receipt = 'receipt',
   Product = 'product',
   Sale = 'sale',
+  Profit = 'profit',
 }
 
 type ColumnsSale = {
@@ -28,6 +29,25 @@ type ColumnsBySale = ColumnsSale & {
   gender?: string;
 };
 
+type ColumnsProfix = {
+  title: string;
+  amount: number;
+};
+
+type ColumnsProfixByMonth = {
+  month: string;
+  netProfit: number;
+  expenses: number;
+  income: number;
+};
+
+type ColumnsProfixByYear = Omit<ColumnsProfixByMonth, 'moth'> & {
+  year: string;
+  netProfit: number;
+  expenses: number;
+  income: number;
+};
+
 export const colReportQuotation = [
   {
     name: 'code',
@@ -41,6 +61,18 @@ export const colReportQuotation = [
     label: 'report.document.status',
     field: '',
   },
+  {
+    name: 'customer',
+    align: 'left',
+    label: 'report.customerName',
+    field: 'name',
+  },
+  {
+    name: 'amount',
+    align: 'left',
+    label: 'report.value',
+    field: (data: ReportQuotation) => formatNumberDecimal(data.amount, 2),
+  },
   {
     name: 'createAt',
     align: 'center',
@@ -68,6 +100,18 @@ export const colReport = [
     label: 'report.table.status',
     field: '',
   },
+  {
+    name: 'customer',
+    align: 'left',
+    label: 'report.customerName',
+    field: 'name',
+  },
+  {
+    name: 'amount',
+    align: 'left',
+    label: 'report.value',
+    field: (data: Report) => formatNumberDecimal(data.amount, 2),
+  },
   {
     name: 'createAt',
     align: 'center',
@@ -145,9 +189,81 @@ export const colReportBySale = [
   },
 ] as const satisfies QTableProps['columns'];
 
+export const colProfit = [
+  {
+    name: 'title',
+    align: 'left',
+    label: '',
+    field: (data: ColumnsProfix) => data.title,
+  },
+  {
+    name: 'amount',
+    align: 'left',
+    label: '',
+    field: (data: ColumnsProfix) => formatNumberDecimal(data.amount, 2),
+  },
+] as const satisfies QTableProps['columns'];
+
+export const colProfitByMoth = [
+  {
+    name: '#title',
+    align: 'left',
+    label: 'report.profit.month',
+    field: '',
+  },
+  {
+    name: 'netProfit',
+    align: 'left',
+    label: 'report.profit.netProfit',
+    field: (data: ColumnsProfixByMonth) =>
+      formatNumberDecimal(data.netProfit, 2),
+  },
+  {
+    name: 'expenses',
+    align: 'left',
+    label: 'report.profit.expenses',
+    field: (data: ColumnsProfixByMonth) =>
+      formatNumberDecimal(data.expenses, 2),
+  },
+  {
+    name: 'income',
+    align: 'left',
+    label: 'report.profit.income',
+    field: (data: ColumnsProfixByMonth) => formatNumberDecimal(data.income, 2),
+  },
+] as const satisfies QTableProps['columns'];
+
+export const colProfitByYear = [
+  {
+    name: 'title',
+    align: 'left',
+    label: 'report.profit.year',
+    field: (data: ColumnsProfixByYear) => data.year,
+  },
+  {
+    name: 'netProfit',
+    align: 'left',
+    label: 'report.profit.netProfit',
+    field: (data: ColumnsProfixByYear) =>
+      formatNumberDecimal(data.netProfit, 2),
+  },
+  {
+    name: 'expenses',
+    align: 'left',
+    label: 'report.profit.expenses',
+    field: (data: ColumnsProfixByYear) => formatNumberDecimal(data.expenses, 2),
+  },
+  {
+    name: 'income',
+    align: 'left',
+    label: 'report.profit.income',
+    field: (data: ColumnsProfixByYear) => formatNumberDecimal(data.income, 2),
+  },
+] as const satisfies QTableProps['columns'];
 export const pageTabs = [
   { label: 'Document', value: ViewMode.Document, by: ['user'] },
   { label: 'Invoice', value: ViewMode.Invoice, by: ['user'] },
   { label: 'Product', value: ViewMode.Product, by: ['user'] },
   { label: 'Sale', value: ViewMode.Sale, by: ['admin'] },
+  { label: 'Profit', value: ViewMode.Profit, by: ['admin'] },
 ];
diff --git a/src/pages/15_dash-board/MainPage.vue b/src/pages/15_dash-board/MainPage.vue
index e3fc2338..8688f49b 100644
--- a/src/pages/15_dash-board/MainPage.vue
+++ b/src/pages/15_dash-board/MainPage.vue
@@ -1,14 +1,15 @@
 <script lang="ts" setup>
 // NOTE: Library
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, watch } from 'vue';
 
 // NOTE:  Components
 import SelectInput from 'src/components/shared/SelectInput.vue';
 import StatCardComponent from 'src/components/StatCardComponent.vue';
 import ChartReceipt from './chart/ChartReceipt.vue';
-import ChartOpportunity from './chart/ChartOpportunity.vue';
 import ChartQuotationStatus from './chart/ChartQuotationStatus.vue';
-import ChartSales from './chart/ChartSales.vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+// import ChartOpportunity from './chart/ChartOpportunity.vue';
+// import ChartSales from './chart/ChartSales.vue';
 
 // NOTE: Stores & Type
 import { useNavigator } from 'src/stores/navigator';
@@ -16,6 +17,7 @@ import { useQuotationStore } from 'src/stores/quotations';
 import { storeToRefs } from 'pinia';
 import { useReportStore } from 'src/stores/report';
 import { PaymentDataStatus } from 'src/stores/payment/types';
+import { dateFormatJS } from 'src/utils/datetime';
 
 // NOTE: Variable
 const navigatorStore = useNavigator();
@@ -24,57 +26,101 @@ const reportStore = useReportStore();
 const { stats: quotationStats } = storeToRefs(quotationStore);
 const { dataReportPayment } = storeToRefs(reportStore);
 
+const endDate = new Date();
+const startDate = new Date(new Date().setFullYear(endDate.getFullYear() - 1));
+
 const state = reactive({
   role: 'admin',
-  year: 'now',
+  date: [startDate, endDate],
 });
 
-// NOTE: mock
-const option = reactive({
-  role: [
-    { label: 'ผู้ดูแล', value: 'admin' },
-    { label: 'ผู้ใช้', value: 'user' },
-  ],
-  year: [
-    { label: 'ปีนี้', value: 'now' },
-    { label: '2024', value: '2024' },
-  ],
-});
+// const option = reactive({
+//   role: [
+//     { label: 'ผู้ดูแล', value: 'admin' },
+//     { label: 'ผู้ใช้', value: 'user' },
+//   ],
+// });
+
+async function fetchData() {
+  const ret = await quotationStore.getQuotationStats({
+    startDate: state.date[0],
+    endDate: state.date[1],
+  });
+  if (ret) {
+    quotationStats.value = {
+      issued: 0,
+      accepted: 0,
+      expired: 0,
+      paymentInProcess: 0,
+      paymentSuccess: 0,
+      processComplete: 0,
+      canceled: 0,
+    };
+    quotationStats.value = Object.assign(quotationStats.value, ret);
+  }
+
+  const retPayment = await reportStore.getReportPayment({
+    startDate: state.date[0],
+    endDate: state.date[1],
+  });
+  if (retPayment) {
+    dataReportPayment.value = retPayment;
+  }
+}
 
 onMounted(async () => {
   navigatorStore.current.title = 'dashboard.title';
   navigatorStore.current.path = [{ text: '' }];
 
-  const ret = await quotationStore.getQuotationStats();
-  if (ret) {
-    quotationStats.value = Object.assign(quotationStats.value, ret);
-    console.log(quotationStats.value);
-  }
-
-  const retPayment = await reportStore.getReportPayment();
-
-  if (retPayment) {
-    dataReportPayment.value = retPayment;
-  }
+  await fetchData();
 });
+
+watch(
+  () => state.date,
+  async () => {
+    await fetchData();
+  },
+);
 </script>
 <template>
   <div class="column full-height no-wrap">
     <header class="row q-gutter-sm">
-      <SelectInput
+      <!-- <SelectInput
         class="col-md-3 col"
         :option="option.role"
         v-model="state.role"
-      ></SelectInput>
-      <SelectInput
-        class="col-md-2 col"
-        :option="option.year"
-        v-model="state.year"
+        for="selecte-role"
+      ></SelectInput> -->
+      <VueDatePicker
+        utc
+        range
+        teleport
+        auto-apply
+        for="select-date-range"
+        class="col-md-4 col"
+        v-model="state.date"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'tha' ? 'th' : 'en'"
       >
-        <template #prepend>
-          <q-icon name="mdi-calendar-outline app-text-muted" />
+        <template #trigger>
+          <q-input
+            placeholder="DD/MM/YYYY"
+            hide-bottom-space
+            dense
+            outlined
+            for="select-date-range"
+            :model-value="
+              dateFormatJS({ date: state.date[0] }) +
+              '  -  ' +
+              dateFormatJS({ date: state.date[1] })
+            "
+          >
+            <template #prepend>
+              <q-icon name="mdi-calendar-outline" class="app-text-muted" />
+            </template>
+          </q-input>
         </template>
-      </SelectInput>
+      </VueDatePicker>
 
       <div class="col-12 scroll">
         <div style="display: inline-block">
diff --git a/src/pages/15_dash-board/chart/ChartQuotationStatus.vue b/src/pages/15_dash-board/chart/ChartQuotationStatus.vue
index 8792c6dd..832a0d37 100644
--- a/src/pages/15_dash-board/chart/ChartQuotationStatus.vue
+++ b/src/pages/15_dash-board/chart/ChartQuotationStatus.vue
@@ -105,3 +105,9 @@ const chartOptions = computed(() => ({
     ></VueApexCharts>
   </div>
 </template>
+
+<style scoped>
+:deep(.apexcharts-menu.apexcharts-menu-open) {
+  background: var(--surface-1);
+}
+</style>
diff --git a/src/pages/15_dash-board/chart/ChartReceipt.vue b/src/pages/15_dash-board/chart/ChartReceipt.vue
index 8b470064..75258162 100644
--- a/src/pages/15_dash-board/chart/ChartReceipt.vue
+++ b/src/pages/15_dash-board/chart/ChartReceipt.vue
@@ -23,21 +23,6 @@ const prop = withDefaults(
   },
 );
 const chartOptions = computed(() => {
-  const thaiMonths = [
-    'ม.ค.',
-    'ก.พ.',
-    'มี.ค.',
-    'เม.ย.',
-    'พ.ค.',
-    'มิ.ย.',
-    'ก.ค.',
-    'ส.ค.',
-    'ก.ย.',
-    'ต.ค.',
-    'พ.ย.',
-    'ธ.ค.',
-  ];
-
   return {
     colors: ['#035aa1', '#ae3ec9', '#ffa94d', '#e64980'],
     chart: {
@@ -47,6 +32,9 @@ const chartOptions = computed(() => {
         enabled: false,
       },
     },
+    tooltip: {
+      theme: 'dark',
+    },
     legend: {
       position: 'right',
     },
@@ -109,3 +97,9 @@ const detail = [
     </div>
   </div>
 </template>
+
+<style scoped>
+:deep(.apexcharts-menu.apexcharts-menu-open) {
+  background: var(--surface-1);
+}
+</style>
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 1243de88..cfeb63ba 100644
--- a/src/stores/notification/index.ts
+++ b/src/stores/notification/index.ts
@@ -4,7 +4,13 @@ import { api } from 'src/boot/axios';
 import { PaginationResult } from 'src/types';
 import { createDataRefBase } from '../utils';
 
-export type Notification = {};
+export type Notification = {
+  id: string;
+  title: string;
+  detail: string;
+  read?: boolean;
+  createdAt: string;
+};
 
 export const useNotification = defineStore('noti-store', () => {
   const state = createDataRefBase<Notification>();
@@ -28,9 +34,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;
@@ -45,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,
 
@@ -52,5 +81,7 @@ export const useNotification = defineStore('noti-store', () => {
     getNotificationList,
     updateNotification,
     deleteNotification,
+    deleteMultiNotification,
+    markReadNotification,
   };
 });
diff --git a/src/stores/quotations/index.ts b/src/stores/quotations/index.ts
index ad203cee..133b160c 100644
--- a/src/stores/quotations/index.ts
+++ b/src/stores/quotations/index.ts
@@ -32,8 +32,11 @@ export const useQuotationStore = defineStore('quotation-store', () => {
     canceled: 0,
   });
 
-  async function getQuotationStats() {
-    const res = await api.get<QuotationStats>('/quotation/stats');
+  async function getQuotationStats(params?: {
+    startDate: string | Date;
+    endDate: string | Date;
+  }) {
+    const res = await api.get<QuotationStats>('/quotation/stats', { params });
     if (res.status < 400) {
       return res.data;
     }
diff --git a/src/stores/quotations/types.ts b/src/stores/quotations/types.ts
index 606208d3..ce969936 100644
--- a/src/stores/quotations/types.ts
+++ b/src/stores/quotations/types.ts
@@ -414,6 +414,7 @@ export type QuotationPaymentData = {
   remark: string;
   date: string;
   id: string;
+  code: string;
 };
 
 export type Details = {
diff --git a/src/stores/report/index.ts b/src/stores/report/index.ts
index 7686236c..419d9994 100644
--- a/src/stores/report/index.ts
+++ b/src/stores/report/index.ts
@@ -1,6 +1,5 @@
 import { ref } from 'vue';
 import { defineStore } from 'pinia';
-import { Pagination, Status } from '../types';
 import { api } from 'src/boot/axios';
 import {
   Report,
@@ -8,10 +7,35 @@ import {
   ReportProduct,
   ReportQuotation,
   ReportSale,
+  ReportProfit,
 } from './types';
+import { baseUrl } from '../utils';
+import { getToken } from 'src/services/keycloak';
 
 const ENDPOINT = 'report';
 
+async function _download(url: string, filename?: string) {
+  const res = await fetch(url, {
+    headers: { ['Authorization']: 'Bearer ' + (await getToken()) },
+  });
+  const text = await res.json();
+  const blob = new Blob([text], { type: 'text/csv' });
+  if (res.ok && blob) {
+    const a = document.createElement('a');
+    a.download = (filename || 'report') + '.csv';
+    a.href = window.URL.createObjectURL(blob);
+    a.click();
+    a.remove();
+  }
+}
+
+export async function downloadReportQuotation() {
+  await _download(
+    baseUrl + '/' + ENDPOINT + '/quotation/download',
+    'quotation-report',
+  );
+}
+
 export async function getReportQuotation() {
   const res = await api.get<ReportQuotation[]>(`/${ENDPOINT}/quotation`);
   if (res.status < 400) {
@@ -21,6 +45,13 @@ export async function getReportQuotation() {
   return null;
 }
 
+export async function downloadReportInvoice() {
+  await _download(
+    baseUrl + '/' + ENDPOINT + '/invoice/download',
+    'invoice-report',
+  );
+}
+
 export async function getReportInvoice() {
   const res = await api.get<Report[]>(`/${ENDPOINT}/invoice`);
   if (res.status < 400) {
@@ -29,6 +60,13 @@ export async function getReportInvoice() {
   return null;
 }
 
+export async function downloadReportReceipt() {
+  await _download(
+    baseUrl + '/' + ENDPOINT + '/receipt/download',
+    'receipt-report',
+  );
+}
+
 export async function getReportReceipt() {
   const res = await api.get<Report[]>(`/${ENDPOINT}/receipt`);
   if (res.status < 400) {
@@ -37,6 +75,15 @@ export async function getReportReceipt() {
   return null;
 }
 
+export async function downloadReportSale(
+  category: 'by-product-group' | 'by-sale' | 'by-customer',
+) {
+  await _download(
+    baseUrl + '/' + ENDPOINT + '/sale/' + category + '/download',
+    'sale-' + category + '-report',
+  );
+}
+
 export async function getReportSale() {
   const res = await api.get<ReportSale>(`/${ENDPOINT}/sale`);
 
@@ -46,16 +93,53 @@ export async function getReportSale() {
   return null;
 }
 
+export async function downloadReportProduct() {
+  await _download(
+    baseUrl + '/' + ENDPOINT + '/receipt/download',
+    'product-report',
+  );
+}
+
 export async function getReportProduct() {
-  const res = await api.get<ReportProduct[]>(`/${ENDPOINT}/Product`);
+  const res = await api.get<ReportProduct[]>(`/${ENDPOINT}/product`);
   if (res.status < 400) {
     return res.data;
   }
   return null;
 }
 
-export async function getReportPayment() {
-  const res = await api.get<ReportPayment[]>(`/${ENDPOINT}/payment`);
+export async function getReportPayment(params?: {
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
+  const res = await api.get<ReportPayment[]>(`/${ENDPOINT}/payment`, {
+    params,
+  });
+  if (res.status < 400) {
+    return res.data;
+  }
+  return null;
+}
+
+export async function getReportProfit(params?: {
+  years?: number;
+  startDate?: string | Date;
+  endDate?: string | Date;
+}) {
+  let opts = params || {};
+
+  if (params?.years) {
+    const currentYear = new Date().getFullYear();
+    opts.startDate = new Date(currentYear - params.years, 0, 1);
+    opts.endDate = new Date(currentYear, 11, 31);
+  }
+
+  const res = await api.get<ReportProfit>(`/${ENDPOINT}/profit`, {
+    params: {
+      startDate: opts.startDate,
+      endDate: opts.endDate,
+    },
+  });
   if (res.status < 400) {
     return res.data;
   }
@@ -69,6 +153,7 @@ export const useReportStore = defineStore('report-store', () => {
   const dataReportSale = ref<ReportSale>();
   const dataReportProduct = ref<ReportProduct[]>([]);
   const dataReportPayment = ref<ReportPayment[]>([]);
+  const dataReportProfit = ref<ReportProfit>();
 
   return {
     dataReportQuotation,
@@ -77,12 +162,19 @@ export const useReportStore = defineStore('report-store', () => {
     dataReportSale,
     dataReportProduct,
     dataReportPayment,
+    dataReportProfit,
 
+    downloadReportQuotation,
     getReportQuotation,
+    downloadReportInvoice,
     getReportInvoice,
+    downloadReportReceipt,
     getReportReceipt,
+    downloadReportSale,
     getReportSale,
+    downloadReportProduct,
     getReportProduct,
     getReportPayment,
+    getReportProfit,
   };
 });
diff --git a/src/stores/report/types.ts b/src/stores/report/types.ts
index 1f057af2..522c9ce3 100644
--- a/src/stores/report/types.ts
+++ b/src/stores/report/types.ts
@@ -5,8 +5,10 @@ import { CustomerBranch } from '../customer';
 import { PaymentDataStatus } from '../payment/types';
 
 export type ReportQuotation = {
+  customerBranch: CustomerBranch;
   updatedAt: Date | null;
   createdAt: Date | null;
+  amount: number;
   status: QuotationStatus;
   code: string;
 };
@@ -20,7 +22,9 @@ export enum Status {
 
 // use with Invoice and Receipt
 export type Report = {
+  customerBranch: CustomerBranch;
   createdAt: Date | null;
+  amount: number;
   status: Status;
   code: string;
 };
@@ -46,3 +50,16 @@ export type ReportSale = {
   bySale: (User & { _count: number })[];
   byProductGroup: (Omit<ProductGroup, '_count'> & { _count: number })[];
 };
+
+export type ReportProfit = {
+  dataset: {
+    netProfit: number;
+    expenses: number;
+    income: number;
+    year: number;
+    month: number;
+  }[];
+  netProfit: number;
+  expenses: number;
+  income: number;
+};
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),