From 9bb9ed0809b3715b7b7516027c8ae54ae8f7f561 Mon Sep 17 00:00:00 2001
From: Viet An <tiktaktictac269@gmail.com>
Date: Mon, 4 May 2026 12:00:07 +0700
Subject: [PATCH] changes

---
 app/components/TopMenu.vue                    |  261 +++-
 app/components/cash-book/CashBook.vue         |    7 +
 app/components/common/Avatarbox.vue           |    2 +-
 app/components/exports/Exports.vue            |    7 +
 app/components/imports/Imports.vue            |    7 +
 .../inventory-count/InventoryCount.vue        |    7 +
 .../inventory-transfer/InventoryTransfer.vue  |    7 +
 app/components/pos/POS.vue                    |    7 +
 app/components/receipts/Receipts.vue          |    7 +
 app/components/report/CashBook.vue            |    7 +
 app/components/report/Customers.vue           |    7 +
 app/components/report/Daily.vue               |  800 -----------
 app/components/report/Finance.vue             |    7 +
 app/components/report/FromTo.vue              | 1197 -----------------
 app/components/report/Goods.vue               |    7 +
 app/components/report/Monthly.vue             |   23 -
 app/components/report/NCC.vue                 |    7 +
 app/components/report/TableReportProduct.vue  |  105 --
 .../{report/Test.vue => rights/Rights.vue}    |   11 +-
 app/pages/index.vue                           |   16 +-
 app/plugins/04-components.js                  |   34 +-
 21 files changed, 357 insertions(+), 2176 deletions(-)
 create mode 100644 app/components/cash-book/CashBook.vue
 create mode 100644 app/components/exports/Exports.vue
 create mode 100644 app/components/imports/Imports.vue
 create mode 100644 app/components/inventory-count/InventoryCount.vue
 create mode 100644 app/components/inventory-transfer/InventoryTransfer.vue
 create mode 100644 app/components/pos/POS.vue
 create mode 100644 app/components/receipts/Receipts.vue
 create mode 100644 app/components/report/CashBook.vue
 create mode 100644 app/components/report/Customers.vue
 delete mode 100644 app/components/report/Daily.vue
 create mode 100644 app/components/report/Finance.vue
 delete mode 100644 app/components/report/FromTo.vue
 create mode 100644 app/components/report/Goods.vue
 delete mode 100644 app/components/report/Monthly.vue
 create mode 100644 app/components/report/NCC.vue
 delete mode 100644 app/components/report/TableReportProduct.vue
 rename app/components/{report/Test.vue => rights/Rights.vue} (55%)

diff --git a/app/components/TopMenu.vue b/app/components/TopMenu.vue
index cf0554c..dd54fb4 100644
--- a/app/components/TopMenu.vue
+++ b/app/components/TopMenu.vue
@@ -33,33 +33,35 @@
         <template v-for="(v, i) in leftmenu" :key="i" :id="v.code">
           <a class="navbar-item rounded-lg is-clipped p-0" v-if="!v.submenu" @click="changeTab(v)">
             <span :class="[
-              'px-3 py-2 fs-14 font-medium',
+              'px-2 py-2 font-medium',
               currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-30'
-            ]">
+            ]"
+              style="font-size: 13.5px"
+            >
               {{ v[lang] }}
             </span>
           </a>
-          <div class="navbar-item has-dropdown is-hoverable" v-else>
-            <a class="navbar-item px-2" @click="changeTab(v)">
-              <span :class="[
-                'px-3 py-1 font-medium',
-                currentTab.code === v.code ? 'has-text-primary-bold has-background-primary-soft' : 'has-text-grey-30'
-              ]">
-                <span>{{ v[lang] }}</span>
-                <SvgIcon
-                  style="padding-top: 5px"
-                  v-bind="{ name: 'down2.svg', type: currentTab.code === v.code ? 'white' : 'dark', size: 15 }"
-                >
-                </SvgIcon>
-              </span>
-            </a>
-            <div class="navbar-dropdown has-background-light">
-              <a
-                class="navbar-item has-background-light py-1 border-bottom"
-                v-for="x in v.submenu"
-                @click="changeTab(v, x)"
+          <div class="navbar-item rounded-lg has-dropdown is-hoverable" v-else>
+            <a class="navbar-link rounded-lg p-0" @click="changeTab(v)">
+              <p 
+                :class="[
+                  'px-2 py-2 rounded-lg font-medium is-flex is-align-items-center',
+                  currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-30'
+                ]"
+                style="font-size: 13.5px"
               >
-                {{ x[lang] }}
+                <span>{{ v[lang] }}</span>
+                <Icon name="material-symbols:keyboard-arrow-down-rounded" :size="20" />
+              </p>
+            </a>
+            <div class="navbar-dropdown">
+              <a
+                v-for="(submenu, i) in v.submenu"
+                :key="i"
+                class="navbar-item"
+                @click="changeTab(v, submenu)"
+              >
+                {{ submenu[lang] }}
               </a>
             </div>
           </div>
@@ -134,6 +136,186 @@ const menu = [
     },
     index: 0,
   },
+  {
+    id: 1,
+    category: 'topmenu',
+    classify: 'left',
+    code: 'rights',
+    vi: 'Phân quyền',
+    link: null,
+    detail: {
+      base: 'Rights',
+      component: 'RightsMaster',
+    },
+    index: 0,
+  },
+  {
+    id: 1,
+    category: 'topmenu',
+    classify: 'left',
+    code: 'POS',
+    vi: 'POS',
+    link: null,
+    detail: {
+      base: 'POS',
+      component: 'POSMaster',
+    },
+    index: 0,
+  },
+  {
+    id: 1,
+    category: 'topmenu',
+    classify: 'left',
+    code: 'receipts',
+    vi: 'Hoá đơn',
+    link: null,
+    detail: {
+      base: 'Receipts',
+      component: 'ReceiptsMaster',
+    },
+    index: 0,
+  },
+  {
+    id: 1,
+    category: 'topmenu',
+    classify: 'left',
+    code: 'imports',
+    vi: 'Nhập hàng',
+    link: null,
+    detail: {
+      base: 'Imports',
+      component: 'ImportsMaster',
+    },
+    index: 0,
+  },
+  {
+    id: 1,
+    category: 'topmenu',
+    classify: 'left',
+    code: 'exports',
+    vi: 'Xuất hàng',
+    link: null,
+    detail: {
+      base: 'Exports',
+      component: 'ExportsMaster',
+    },
+    index: 0,
+  },
+  {
+    id: 1,
+    category: 'topmenu',
+    classify: 'left',
+    code: 'inventory-transfer',
+    vi: 'Chuyển kho',
+    link: null,
+    detail: {
+      base: 'InventoryTransfer',
+      component: 'InventoryTransferMaster',
+    },
+    index: 0,
+  },
+  {
+    id: 1,
+    category: 'topmenu',
+    classify: 'left',
+    code: 'inventory-count',
+    vi: 'Kiểm kho',
+    link: null,
+    detail: {
+      base: 'InventoryCount',
+      component: 'InventoryCountMaster',
+    },
+    index: 0,
+  },
+  {
+    id: 1,
+    category: 'topmenu',
+    classify: 'left',
+    code: 'cash-book',
+    vi: 'Sổ quỹ',
+    link: null,
+    detail: {
+      base: 'CashBook',
+      component: 'CashBookMaster',
+    },
+    index: 0,
+  },
+  {
+    id: 1,
+    category: 'topmenu',
+    classify: 'left',
+    code: 'report',
+    vi: 'Báo cáo',
+    link: null,
+    submenu: [
+      {
+        id: 1,
+        category: 'submenu',
+        classify: 'report',
+        code: 'ncc',
+        vi: 'NCC',
+        link: null,
+        detail: {
+          base: 'NCC',
+          component: 'NCCMaster',
+        },
+        index: 0,
+      },
+      {
+        id: 1,
+        category: 'submenu',
+        classify: 'report',
+        code: 'customers',
+        vi: 'Khách hàng',
+        link: null,
+        detail: {
+          base: 'Customers',
+          component: 'CustomersMaster',
+        },
+        index: 0,
+      },
+      {
+        id: 1,
+        category: 'submenu',
+        classify: 'report',
+        code: 'goods',
+        vi: 'Hàng hoá',
+        link: null,
+        detail: {
+          base: 'Goods',
+          component: 'GoodsMaster',
+        },
+        index: 0,
+      },
+      {
+        id: 1,
+        category: 'submenu',
+        classify: 'report',
+        code: 'report-cash-book',
+        vi: 'Sổ quỹ',
+        link: null,
+        detail: {
+          base: 'ReportCashBook',
+          component: 'ReportCashBookMaster',
+        },
+        index: 0,
+      },
+      {
+        id: 1,
+        category: 'submenu',
+        classify: 'report',
+        code: 'finance',
+        vi: 'Tài chính',
+        link: null,
+        detail: {
+          base: 'Finance',
+          component: 'FinanceMaster',
+        },
+        index: 0,
+      },
+    ],
+    index: 0,
+  },
 ]
 // if($store.rights.length>0) {
 //   menu = menu.filter(v=>$findIndex($store.rights, {setting: v.id})>=0)
@@ -216,14 +398,35 @@ watch(
 .navbar-dropdown {
   padding-block: 0.375rem;
   overflow: hidden;
-}
-.navbar-dropdown > .navbar-item {
-  &:hover {
-    background-color: hsl(30, 48%, 82%) !important;
-  }
+  box-shadow: 0 0.25em 0.5em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1);
 
-  &:last-child {
-    border-bottom: none;
+  > .navbar-item {
+    &:last-child {
+      border-bottom: none;
+    }
   }
 }
+
+@media screen and (min-width: 768px) {
+  .navbar-dropdown a.navbar-item {
+    padding-inline-end: 30px;
+  }
+}
+
+.navbar-item:hover {
+  .navbar-link {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    
+     > p {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  
+}
+
+.navbar-item > .navbar-link:after {
+  display: none;
+}
 </style>
\ No newline at end of file
diff --git a/app/components/cash-book/CashBook.vue b/app/components/cash-book/CashBook.vue
new file mode 100644
index 0000000..1e834de
--- /dev/null
+++ b/app/components/cash-book/CashBook.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  Cash Book
+</template>
diff --git a/app/components/common/Avatarbox.vue b/app/components/common/Avatarbox.vue
index e6a110b..4758d9c 100644
--- a/app/components/common/Avatarbox.vue
+++ b/app/components/common/Avatarbox.vue
@@ -11,7 +11,7 @@ const props = defineProps({
     @click="$emit('justclick')"
     class="rounded-full mx-0 px-0 size-10 font-bold is-flex is-justify-content-center is-align-items-center"
     :style="{
-      border: image ? 'none' : '1px solid #e4e4e4'
+      border: image ? 'none' : '1px solid var(--bulma-grey-70)'
     }"
   >
     <figure v-if="image" class="image">
diff --git a/app/components/exports/Exports.vue b/app/components/exports/Exports.vue
new file mode 100644
index 0000000..ff1c964
--- /dev/null
+++ b/app/components/exports/Exports.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  Exports
+</template>
diff --git a/app/components/imports/Imports.vue b/app/components/imports/Imports.vue
new file mode 100644
index 0000000..dfbad2d
--- /dev/null
+++ b/app/components/imports/Imports.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+ Import 
+</template>
diff --git a/app/components/inventory-count/InventoryCount.vue b/app/components/inventory-count/InventoryCount.vue
new file mode 100644
index 0000000..a3503da
--- /dev/null
+++ b/app/components/inventory-count/InventoryCount.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  Inventory Count
+</template>
diff --git a/app/components/inventory-transfer/InventoryTransfer.vue b/app/components/inventory-transfer/InventoryTransfer.vue
new file mode 100644
index 0000000..3707246
--- /dev/null
+++ b/app/components/inventory-transfer/InventoryTransfer.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  Inventory Transfer
+</template>
diff --git a/app/components/pos/POS.vue b/app/components/pos/POS.vue
new file mode 100644
index 0000000..0d17fa8
--- /dev/null
+++ b/app/components/pos/POS.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  POS
+</template>
diff --git a/app/components/receipts/Receipts.vue b/app/components/receipts/Receipts.vue
new file mode 100644
index 0000000..48b14e5
--- /dev/null
+++ b/app/components/receipts/Receipts.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  Receipts
+</template>
diff --git a/app/components/report/CashBook.vue b/app/components/report/CashBook.vue
new file mode 100644
index 0000000..51024c9
--- /dev/null
+++ b/app/components/report/CashBook.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  Report Cash Book
+</template>
diff --git a/app/components/report/Customers.vue b/app/components/report/Customers.vue
new file mode 100644
index 0000000..23c7c15
--- /dev/null
+++ b/app/components/report/Customers.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  Customers
+</template>
diff --git a/app/components/report/Daily.vue b/app/components/report/Daily.vue
deleted file mode 100644
index 94f39ac..0000000
--- a/app/components/report/Daily.vue
+++ /dev/null
@@ -1,800 +0,0 @@
-<template>
-  <div class="report report-daily-page">
-    <div class="report-header mb-4">
-      <h2 class="header-report-title">Báo cáo tình hình giao dịch & thanh toán theo ngày</h2>
-      <div class="select-date">
-        <span class="label-date">Chọn ngày báo cáo:</span> &nbsp;
-        <Datepicker v-bind="{ record: infoReport, attr: 'date-report' }" @date="select('date-report', $event)" />
-      </div>
-    </div>
-    <div class="report-body">
-      <!-- Report Product -->
-      <div class="report-product">
-        <div class="fixed-grid has-6-cols-desktop has-3-cols-tablet has-2-cols-mobile">
-          <div class="grid">
-            <div class="cell">
-              <p class="cell-label">Tổng số sản phẩm</p>
-              <span class="cell-value">{{ totalProduct }}</span>
-            </div>
-
-            <div
-              class="cell event"
-              v-for="product in saleStatusProductSummary"
-              :style="{ color: product.color }"
-              @click="handlerStatusProduct($event, product)"
-            >
-              <p class="cell-label">{{ product.name }}</p>
-              <span class="cell-value">{{ product.count || 0 }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="chart-report-product">
-          <div class="fixed-grid has-1-cols has-3-cols-desktop">
-            <div class="grid">
-              <div class="cell">
-                <div class="chart-status-product">
-                  <client-only>
-                    <highcharts-vue-chart :highcharts="Highcharts" :options="chartProductStatusOptions" />
-                  </client-only>
-                </div>
-              </div>
-              <div class="cell">
-                <div class="chart-zone-product">
-                  <client-only>
-                    <highcharts-vue-chart :highcharts="Highcharts" :options="chartProductZoneOptions" />
-                  </client-only>
-                </div>
-              </div>
-              <div class="cell">
-                <div class="chart-product-dealer">
-                  <client-only>
-                    <highcharts-vue-chart :highcharts="Highcharts" :options="chartProductDealerOptions" />
-                  </client-only>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="chart-cart-product">
-            <client-only>
-              <highcharts-vue-chart :highcharts="Highcharts" :options="chartStatusProductDealerOptions" />
-            </client-only>
-          </div>
-        </div>
-      </div>
-      <!-- End Report Porduct -->
-    </div>
-    <Modal @close="handlerCloseModal" v-bind="showModal" v-if="showModal.lock"> </Modal>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from "vue";
-import Highcharts from "highcharts";
-import { Chart as HighchartsVueChart } from "highcharts-vue";
-
-import Datepicker from "~/components/datepicker/Datepicker";
-
-const { $numtoString, $findapi, $getapi, $store, $getdata, $mode } = useNuxtApp();
-
-const dealer = $store.dealer;
-const isVietnamese = computed(() => $store.lang.toLowerCase() === "vi");
-const today = new Date().toISOString().split("T")[0];
-
-let selectedChartPie = null;
-
-const productsResponse = ref(null);
-const totalProduct = ref(0);
-
-const infoReport = ref({
-  "date-report": today,
-});
-
-const showModal = ref({
-  title: null,
-  lock: false,
-});
-
-const dataStatusProduct = ref({
-  totalProduct: 0,
-  totalValue: 0,
-  statusCode: null,
-  statusName: null,
-  totalLandArea: 0,
-  totalBuildingArea: 0,
-  totalFloorArea: 0,
-  listProduct: [],
-});
-
-const listSaleStatus = await $getdata("salestatus");
-// const listZoneType = await $getdata("zonetype");
-
-const select = (fieldName, value) => {
-  infoReport.value[fieldName] = value;
-};
-
-function buildDateRange(date) {
-  if (!date) return null;
-  const dateTemp = new Date(date).toISOString().split("T")[0];
-  const start = new Date(`${dateTemp}T00:00:00.000Z`);
-  const end = new Date(`${dateTemp}T23:59:59.999Z`);
-
-  return {
-    start: start.toISOString(),
-    end: end.toISOString(),
-  };
-}
-
-const groupByField = (list, { keyField, nameField, nameTransform, colorField }) => {
-  if (!Array.isArray(list) || list.length === 0) return [];
-
-  const map = new Map();
-
-  for (const item of list) {
-    const key = item[keyField];
-    if (!key) continue;
-
-    let group = map.get(key);
-
-    if (!group) {
-      group = {
-        key,
-        name: nameTransform ? nameTransform(item[nameField]) : nameField ? item[nameField] : key,
-        color: colorField ? item[colorField] : null,
-        count: 0,
-        children: [],
-      };
-      map.set(key, group);
-    }
-
-    group.count++;
-    group.children.push(item);
-  }
-
-  return [...map.values()];
-};
-
-function buildGroupMap(list = []) {
-  if (!Array.isArray(list)) return new Map();
-
-  return new Map(list.filter((item) => item?.key != null).map((item) => [item.key, item]));
-}
-
-function mergeMasterWithGroup(masterList = [], groupMap) {
-  if (!Array.isArray(masterList)) return [];
-
-  return masterList.map((item) => {
-    const found = groupMap.get(item.code);
-
-    return {
-      ...item,
-      count: found?.count ?? 0,
-      children: found?.children ?? [],
-    };
-  });
-}
-
-const formatVniDate = (date) => {
-  const dateTemp = date ? new Date(date) : new Date();
-  const d = String(dateTemp.getDate()).padStart(2, "0");
-  const m = String(dateTemp.getMonth() + 1).padStart(2, "0");
-  const y = dateTemp.getFullYear();
-  return `${d}/${m}/${y}`;
-};
-
-function formatVND(amount, decimals = 2) {
-  if (!amount || isNaN(amount)) return "0 đ";
-
-  if (amount >= 1_000_000_000) return `${(amount / 1_000_000_000).toFixed(decimals)} tỷ`;
-
-  if (amount >= 1_000_000) return `${(amount / 1_000_000).toFixed(decimals)} triệu`;
-
-  return `${amount.toLocaleString("vi-VN")} đ`;
-}
-
-function colorStatus(value) {
-  if (value > 100) {
-    return "#006400";
-  }
-
-  if (value >= 90 && value <= 100) {
-    return "#2ECC71";
-  }
-
-  if (value >= 75 && value < 90) {
-    return "#F1C40F";
-  }
-
-  if (value >= 60 && value < 75) {
-    return "#E67E22";
-  }
-
-  if (value < 60) {
-    return "#E74C3C";
-  }
-
-  return "#BDC3C7";
-}
-
-function calcPercentage(part, whole, decimals = 1) {
-  const numerator = Number(part) || 0;
-  const denominator = Number(whole) || 0;
-
-  if (denominator === 0) return 0;
-
-  return Number(((numerator / denominator) * 100).toFixed(decimals));
-}
-
-function buildChartSeriesByStatus(statusList = [], parents = [], keyGroup = "status") {
-  const parentStatusMaps = parents.map(
-    (parent) => new Map((parent[keyGroup] ?? []).map((st) => [st.key ?? st.code, st.count ?? 0]))
-  );
-
-  return statusList.map((status) => ({
-    name: status.name?.split(". ")[1] ?? status.name,
-    color: status.color || undefined,
-    data: parentStatusMaps.map((map) => ({
-      y: map.get(status.code) ?? 0,
-      key: status.code,
-    })),
-  }));
-}
-
-let scrollPosition = 0;
-
-const toggleBodyScroll = (isActive) => {
-  if (isActive) {
-    scrollPosition = window.scrollY || document.documentElement.scrollTop;
-    document.body.classList.add("popup-open");
-    document.body.style.top = `-${scrollPosition}px`;
-  } else {
-    document.body.classList.remove("popup-open");
-    document.body.style.top = "";
-    window.scrollTo(0, scrollPosition);
-  }
-};
-
-// <====== Fetch product list ======>
-let foundProduct = $findapi("product");
-foundProduct.params.values =
-  "id,code,trade_code,zone_code,type__code,type__name,zone_type__code,zone_type__code,zone_type__name,direction__code,direction__name,land_lot_size,lot_area,building_area,number_of_floors,cart__code,cart__name,cart__dealer__code,cart__dealer__name,origin_price,txnprd__sale_price,status__code,status__name,status__color,status__sale_status__code,status__sale_status__name,status__sale_status__color";
-if (dealer?.code) {
-  foundProduct.params.filter = { cart__dealer__code: dealer?.code };
-  foundProduct.params.exclude = { status__sale_status__code: "not-sold" };
-}
-
-async function fetchProducts() {
-  try {
-    const [productRes] = await $getapi([foundProduct]);
-    productsResponse.value = productRes?.data?.rows ?? [];
-    totalProduct.value = productsResponse.value?.length;
-  } catch (error) {
-    if ($mode === "dev") {
-      console.error("Call api product error", error);
-    }
-    productsResponse.value = [];
-    totalProduct.value = 0;
-  }
-}
-fetchProducts();
-// <====== End fetch product list ======>
-
-// <====== Group status product ======>
-const productGroupStatus = computed(() =>
-  groupByField(productsResponse.value, {
-    keyField: "status__sale_status__code",
-    nameField: "status__sale_status__name",
-    nameTransform: (name) => name?.split(". ")[1] ?? name,
-    colorField: "status__sale_status__color",
-  })
-);
-
-const productGroupStatusMap = computed(() => buildGroupMap(productGroupStatus.value));
-
-const saleStatusProductSummary = computed(() => {
-  const merged = mergeMasterWithGroup(listSaleStatus || [], productGroupStatusMap.value);
-
-  return merged.map((item) => {
-    const name = item.name?.split(". ")[1] ?? item.name;
-    return {
-      ...item,
-      name,
-    };
-  });
-});
-
-const handlerStatusProduct = (e, data) => {
-  e.preventDefault();
-  e.stopPropagation();
-
-  updateProductStatusSummary(data);
-  showModal.value = {
-    component: "report/TableReportProduct",
-    lock: true,
-    title: `Danh sách sản phẩm - Trạng thái: ${data.name} (${formatVniDate(infoReport["date-date-report"])})`,
-    width: "80%",
-    height: "80%",
-    vbind: { data: dataStatusProduct.value },
-  };
-  handlerOpenModal();
-};
-
-function updateProductStatusSummary(statusData = {}) {
-  const listProduct = (statusData.children || []).map((item) => {
-    const buildingArea = Number(item.building_area ?? 0);
-    const floors = Number(item.number_of_floors ?? 0);
-    const totalBuildingArea = buildingArea * floors;
-    const total_built_area = $numtoString(totalBuildingArea);
-    item.txnprd__sale_price = item.txnprd__sale_price ?? item.origin_price;
-    return {
-      ...item,
-      total_built_area,
-    };
-  });
-
-  const totals = listProduct.reduce(
-    (acc, product) => {
-      const salePrice = Number(product.txnprd__sale_price ?? 0);
-      const landArea = Number(product.lot_area ?? 0);
-      const buildingArea = Number(product.building_area ?? 0);
-      const floors = Number(product.number_of_floors ?? 0);
-
-      acc.totalValue += salePrice;
-      acc.totalLandArea += landArea;
-      acc.totalBuildingArea += buildingArea;
-      acc.totalFloorArea += buildingArea * floors;
-
-      return acc;
-    },
-    {
-      totalValue: 0,
-      totalLandArea: 0,
-      totalBuildingArea: 0,
-      totalFloorArea: 0,
-    }
-  );
-
-  dataStatusProduct.value = {
-    statusCode: statusData.code || statusData.key,
-    statusName: statusData.name ?? null,
-    totalProduct: statusData.count ?? 0,
-    totalValue: totals.totalValue,
-    totalLandArea: $numtoString(totals.totalLandArea),
-    totalBuildingArea: $numtoString(totals.totalBuildingArea),
-    totalFloorArea: $numtoString(totals.totalFloorArea),
-    listProduct: listProduct,
-  };
-}
-
-// Options chart status product
-const chartSelectedStatusProductHandler = () => ({
-  select() {
-    selectedChartPie = this;
-    const item = productGroupStatus.value.find((i) => i.key === this.options.key);
-    updateProductStatusSummary(item);
-
-    showModal.value = {
-      component: "report/TableReportProduct",
-      lock: true,
-      title: `Danh sách sản phẩm - Trạng thái: ${this.options.name} (${formatVniDate(infoReport["date-date-report"])})`,
-      width: "80%",
-      height: "80%",
-      vbind: { data: dataStatusProduct.value },
-    };
-    handlerOpenModal();
-  },
-
-  unselect() {
-    if (selectedChartPie !== this) return;
-    selectedChartPie = null;
-    updateProductStatusSummary();
-  },
-});
-
-const chartProductStatusOptions = computed(() => {
-  return {
-    chart: {
-      type: "pie",
-      zooming: {
-        type: "xy",
-      },
-      panning: {
-        enabled: true,
-        type: "xy",
-      },
-    },
-    title: {
-      text: isVietnamese ? "Trạng thái sản phẩm" : "Product status",
-    },
-    subtitle: {
-      text: `Dữ liệu ngày: ${formatVniDate(infoReport.value["date-report"])} - ${totalProduct.value} ${
-        isVietnamese ? "Sản phẩm" : "Products"
-      }`,
-    },
-    plotOptions: {
-      pie: {
-        allowPointSelect: true,
-        cursor: "pointer",
-        dataLabels: [
-          {
-            enabled: true,
-            distance: 20,
-            format: "{point.name}: {point.y:,.0f}", // GIÁ TRỊ
-          },
-          {
-            enabled: true,
-            distance: -40,
-            format: "({point.percentage:.1f}%)", // GIÁ TRỊ
-            style: {
-              fontSize: "0.75em",
-              textOutline: "none",
-              opacity: 0.7,
-            },
-            filter: {
-              operator: ">",
-              property: "percentage",
-              value: 10,
-            },
-          },
-        ],
-        point: {
-          events: chartSelectedStatusProductHandler(),
-        },
-      },
-    },
-    series: [
-      {
-        name: isVietnamese ? "Số lượng" : "Quantity",
-        colorByPoint: true,
-        data: productGroupStatus.value.map((item) => {
-          return {
-            name: item.name,
-            y: item.count,
-            key: item.key,
-            color: item.color,
-          };
-        }),
-      },
-    ],
-  };
-});
-
-// <====== End group status product ======>
-
-// <====== Group zone product ======>
-const productGroupZone = computed(() =>
-  groupByField(productsResponse.value, {
-    keyField: "zone_type__code",
-    nameField: "zone_type__name",
-  })
-);
-
-// Options chart zone product
-const chartProductZoneOptions = computed(() => {
-  return {
-    chart: {
-      type: "pie",
-      zooming: {
-        type: "xy",
-      },
-      panning: {
-        enabled: true,
-        type: "xy",
-      },
-    },
-    title: {
-      text: isVietnamese ? "Sản phẩm theo phân khu" : "Products by category",
-    },
-    subtitle: {
-      text: `Dữ liệu ngày: ${formatVniDate(infoReport.value["date-report"])} - ${productGroupZone.value.length} ${
-        isVietnamese ? "Phân khu" : "Category"
-      }`,
-    },
-    plotOptions: {
-      pie: {
-        cursor: "default",
-        dataLabels: [
-          {
-            enabled: true,
-            distance: 20,
-            format: "{point.name}: {point.y:,.0f}", // GIÁ TRỊ
-          },
-          {
-            enabled: true,
-            distance: -40,
-            format: "({point.percentage:.1f}%)", // GIÁ TRỊ
-            style: {
-              fontSize: "0.75em",
-              textOutline: "none",
-              opacity: 0.7,
-            },
-            filter: {
-              operator: ">",
-              property: "percentage",
-              value: 10,
-            },
-          },
-        ],
-      },
-    },
-    series: [
-      {
-        name: isVietnamese ? "Số lượng" : "Quantity",
-        colorByPoint: true,
-        data: productGroupZone.value.map((item) => {
-          return {
-            name: item.name,
-            y: item.count,
-            key: item.key,
-            color: item.color,
-          };
-        }),
-      },
-    ],
-  };
-});
-
-// <====== End group zone product ======>
-
-// <====== Group dealer product ======>
-const productGroupDealer = computed(() =>
-  groupByField(productsResponse.value, {
-    keyField: "cart__dealer__code",
-    nameField: "cart__dealer__name",
-  })
-);
-// Options chart product dealer
-const chartProductDealerOptions = computed(() => {
-  return {
-    chart: {
-      type: "pie",
-      zooming: {
-        type: "xy",
-      },
-      panning: {
-        enabled: true,
-        type: "xy",
-      },
-    },
-    title: {
-      text: isVietnamese ? "Sản phẩm theo đại lý" : "Products by distributor",
-    },
-    subtitle: {
-      text: `Dữ liệu ngày: ${formatVniDate(infoReport.value["date-report"])} - ${productGroupDealer.value?.length} ${
-        isVietnamese ? "Đại lý" : "Dealer"
-      }`,
-    },
-    plotOptions: {
-      pie: {
-        cursor: "default",
-        dataLabels: [
-          {
-            enabled: true,
-            distance: 20,
-            format: "{point.name}: {point.y:,.0f}", // GIÁ TRỊ
-          },
-          {
-            enabled: true,
-            distance: -40,
-            format: "({point.percentage:.1f}%)", // GIÁ TRỊ
-            style: {
-              fontSize: "0.75em",
-              textOutline: "none",
-              opacity: 0.7,
-            },
-            filter: {
-              operator: ">",
-              property: "percentage",
-              value: 10,
-            },
-          },
-        ],
-      },
-    },
-    series: [
-      {
-        name: isVietnamese ? "Số lượng" : "Quantity",
-        colorByPoint: true,
-        data:
-          productGroupDealer.value?.map((item) => {
-            return {
-              name: item.key,
-              y: item.count,
-              key: item.key,
-              color: item.color ?? null,
-            };
-          }) || [],
-      },
-    ],
-  };
-});
-
-//Options chart status product dealer
-const dealerProductSaleSummary = computed(() =>
-  (productGroupDealer.value ?? []).map((dealer) => {
-    const productSaleByStatus = groupByField(dealer.children ?? [], {
-      keyField: "status__sale_status__code",
-      nameField: "status__sale_status__name",
-      nameTransform: (name) => name?.split(". ")[1] ?? name,
-      colorField: "status__sale_status__color",
-    });
-
-    return {
-      ...dealer,
-      productSaleByStatus,
-    };
-  })
-);
-
-const dataChartTransactionPolicy = computed(() => {
-  const listSaleStatusDealer = listSaleStatus.filter((status) => status.code !== "not-sold");
-  return buildChartSeriesByStatus(listSaleStatusDealer, dealerProductSaleSummary.value, "productSaleByStatus");
-});
-
-const createDealerStatusClickHandler = () => ({
-  click() {
-    const dealerCode = this.category?.split(" - ")?.[0] ?? null;
-    const saleStatusCode = this.options?.key ?? null;
-
-    if (!dealerCode || !saleStatusCode) return;
-
-    const dealerSummary = dealerProductSaleSummary.value?.find((dealer) => dealer.key === dealerCode);
-
-    const productsByStatus = dealerSummary?.productSaleByStatus?.find((status) => status.key === saleStatusCode);
-
-    updateProductStatusSummary(productsByStatus);
-    showModal.value = {
-      component: "report/TableReportProduct",
-      lock: true,
-      title: `Danh sách sản phẩm - Đại lý: ${dealerSummary.key || dealerSummary.code} - Trạng thái: ${
-        productsByStatus.name
-      } (${formatVniDate(infoReport["date-date-report"])})`,
-      width: "80%",
-      height: "80%",
-      vbind: { data: dataStatusProduct.value },
-    };
-    handlerOpenModal();
-  },
-});
-
-const chartStatusProductDealerOptions = computed(() => {
-  return {
-    chart: {
-      type: "column",
-    },
-    title: {
-      text: isVietnamese ? "Trạng thái sản phẩm theo từng đại lý" : "Product status by dealer",
-    },
-    subtitle: {
-      text: ` Dữ liệu ngày: ${formatVniDate(infoReport.value["date-report"])} `,
-    },
-    xAxis: {
-      categories: dealerProductSaleSummary.value?.map((dealer) => `${dealer.key} - ${dealer.count} SP`),
-      crosshair: true,
-      accessibility: {
-        description: "Countries",
-      },
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: "Số lượng",
-      },
-    },
-    tooltip: {
-      headerFormat: "<b>{category}</b><br/>",
-      pointFormat: "{series.name}: {point.y} Sản phẩm",
-    },
-    plotOptions: {
-      column: {
-        cursor: "pointer",
-        pointPadding: 0.2,
-        borderWidth: 0,
-        dataLabels: {
-          enabled: true,
-          format: "{point.y}",
-        },
-        point: {
-          events: createDealerStatusClickHandler(),
-        },
-      },
-    },
-    series: dataChartTransactionPolicy.value,
-  };
-});
-
-// <====== End group dealer product ======>
-
-const handleUnSelectChart = () => {
-  const chart = Highcharts.charts.find((c) => c);
-  if (chart) {
-    chart.series[0]?.points.forEach((p) => {
-      if (p.selected) p.select(false, false);
-    });
-  }
-};
-
-const handlerOpenModal = () => {
-  toggleBodyScroll(true);
-};
-
-const handlerCloseModal = () => {
-  toggleBodyScroll(false);
-  showModal.value = {
-    lock: false,
-  };
-  handleUnSelectChart();
-};
-
-// Reload data change
-watch(
-  infoReport,
-  (newVal) => {
-    // foundCustomer.params.filter.create_time__lte = buildDateRange(infoReport.value["date-report"])?.end;
-    // foundCustomerTransaction.params.filter.txncust__create_time__lte = buildDateRange(
-    //   infoReport.value["date-report"]
-    // )?.end;
-    // fetchCustomer();
-  },
-  { deep: true }
-);
-</script>
-
-<style>
-body.popup-open {
-  position: fixed;
-  width: 100%;
-  overflow: hidden;
-}
-
-.report-daily-page .report-header {
-  display: flex;
-  justify-content: space-between;
-}
-.report-daily-page .report-header .header-report-title {
-  font-size: 1.25rem;
-  font-weight: bolder;
-}
-
-.report-daily-page .report-header .select-date {
-  background-color: #204853;
-  padding: 10px;
-  border-radius: 16px;
-}
-
-.report-daily-page .report-header .select-date .label-date {
-  color: #fff;
-  margin-bottom: 10px;
-  display: inline-block;
-}
-.report-daily-page .cell.event {
-  padding: 10px;
-  border-radius: 16px;
-  cursor: pointer;
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
-}
-
-.report-daily-page .cell.event:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-.report-daily-page .cell .cell-label {
-  font-size: 13px;
-  font-weight: 500;
-}
-.report-daily-page .cell .cell-value {
-  font-size: 28px;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-.report-daily-page .modal-card {
-  overflow-y: hidden;
-}
-
-@media only screen and (max-width: 767px) {
-  .report-daily-page .report-header {
-    flex-direction: column;
-    gap: 10px;
-  }
-}
-</style>
diff --git a/app/components/report/Finance.vue b/app/components/report/Finance.vue
new file mode 100644
index 0000000..5b2efe7
--- /dev/null
+++ b/app/components/report/Finance.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  Finance
+</template>
diff --git a/app/components/report/FromTo.vue b/app/components/report/FromTo.vue
deleted file mode 100644
index 614a27c..0000000
--- a/app/components/report/FromTo.vue
+++ /dev/null
@@ -1,1197 +0,0 @@
-<template>
-  <div class="report-daily-page mb-4">
-    <!-- Report product section -->
-    <div class="header-report mb-2">
-      <h2 class="header-report-title">Báo cáo tình hình giao dịch & thanh toán theo giai đoạn</h2>
-      <div class="select-date">
-        <span class="label-date">Từ ngày:</span> &nbsp;
-        <Datepicker v-bind="{ record: dateReport, attr: 'date-start' }" @date="select('date-start', $event)" />&nbsp;
-        <span class="label-date">đến ngày:</span> &nbsp;
-        <Datepicker v-bind="{ record: dateReport, attr: 'date-end' }" @date="select('date-end', $event)" />
-      </div>
-    </div>
-
-    <div class="body-report">
-      <div class="general-report mb-4">
-        <!-- Transaction -->
-        <div class="general-report-transaction mb-4">
-          <h3 class="general-report-title">Giao dịch</h3>
-          <div class="grid">
-            <div class="cell">
-              <div class="card">
-                <div class="card-content">
-                  <p>Tổng doanh thu</p>
-                  <span>{{$numtoString(revenueSummary.salePrice, { hasUnit: true }) }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="cell">
-              <div class="card">
-                <div class="card-content">
-                  <p>Đã thu</p>
-                  <span>{{$numtoString(revenueSummary.depositAmount, { hasUnit: true }) }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="cell">
-              <div class="card">
-                <div class="card-content">
-                  <p>Còn chờ thu</p>
-                  <span>{{$numtoString(revenueSummary.salePrice - revenueSummary.depositAmount, { hasUnit: true }) }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="cell">
-              <div class="card">
-                <div class="card-content">
-                  <p>Tỉ lệ thu (%)</p>
-                  <span
-                    :style="{
-                      color: ColorStatus(calcPercentage(revenueSummary.depositAmount, revenueSummary.salePrice)),
-                    }"
-                    >{{ calcPercentage(revenueSummary.depositAmount, revenueSummary.salePrice) }} %</span
-                  >
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- Payment -->
-        <div class="general-report-payment mb-4">
-          <h3 class="general-report-title">Thanh toán</h3>
-          <div class="grid">
-            <div class="cell">
-              <div class="card">
-                <div class="card-content">
-                  <p>Tổng tiền phải thu</p>
-                  <span>{{$numtoString(paymentStatusSummary.totalPay, { hasUnit: true }) }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="cell">
-              <div class="card">
-                <div class="card-content">
-                  <p>Đã thu</p>
-                  <span>{{$numtoString(paymentStatusSummary.paid, { hasUnit: true }) }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="cell">
-              <div class="card">
-                <div class="card-content">
-                  <p>Còn phải thu</p>
-                  <span>{{$numtoString(paymentStatusSummary.unpaid, { hasUnit: true }) }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="cell">
-              <div class="card">
-                <div class="card-content">
-                  <p>Tỉ lệ hoàn thành (%)</p>
-                  <span
-                    :style="{
-                      color: ColorStatus(calcPercentage(paymentStatusSummary.paid, paymentStatusSummary.totalPay)),
-                    }"
-                    >{{ calcPercentage(paymentStatusSummary.paid, paymentStatusSummary.totalPay) }} %</span
-                  >
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- Due -->
-        <div class="general-report-due">
-          <h3 class="general-report-title">Đến hạn</h3>
-          <div class="grid">
-            <div class="cell">
-              <div class="card">
-                <div class="card-content">
-                  <p>Giao dịch đến hạn</p>
-                  <span>{{ totalTransactionDue }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="cell">
-              <div class="card">
-                <div class="card-content">
-                  <p>Doanh thu từ giao dịch đến hạn</p>
-                  <span>{{$numtoString(totalAmountTransactionDue, { hasUnit: true }) }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="cell">
-              <div class="card">
-                <div class="card-content">
-                  <p>Thanh toán đến hạn</p>
-                  <span>{{ totalPaymentDue }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="cell">
-              <div class="card">
-                <div class="card-content">
-                  <p>Doanh thu thanh toán đến hạn</p>
-                  <span>{{$numtoString(totalAmountPaymentDue, { hasUnit: true }) }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="report report-transaction">
-        <h3>Giao dịch</h3>
-        <div class="report-transaction-new">
-          <div class="grid">
-            <div
-              class="cell"
-              v-for="item in dataTransactionType"
-              :key="item.code"
-              @click="handlerTransaction($event, item)"
-            >
-              <div class="card">
-                <div class="card-content">
-                  <p>{{ item.name }}</p>
-                  <span>{{ item.count | 0 }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="chart">
-            <client-only v-if="hasTransactionDataNews">
-              <highcharts-vue-chart :highcharts="Highcharts" :options="chartTransactionOptions" />
-            </client-only>
-            <p v-else class="message-alter">{{ emptyMessageTransactionNews }}</p>
-          </div>
-        </div>
-        <!-- Dealer transactions -->
-        <div class="chart dealer-transactions">
-          <client-only>
-            <highcharts-vue-chart :highcharts="Highcharts" :options="chartDealerTransactionOptions" />
-          </client-only>
-        </div>
-      </div>
-
-      <div class="report report-payment">
-        <h3>Thanh toán</h3>
-        <div class="report-payment-new">
-          <div class="grid">
-            <div
-              class="cell"
-              v-for="item in paymentTypeStatus"
-              :key="item.code"
-              @click="handlerPaymentSelect($event, item)"
-            >
-              <div class="card">
-                <div class="card-content">
-                  <p>{{ item.name }}</p>
-                  <span>{{ item.count | 0 }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="chart">
-            <client-only v-if="hasPaymentDataNews">
-              <highcharts-vue-chart :highcharts="Highcharts" :options="chartPaymentOptions" />
-            </client-only>
-            <p v-else class="message-alter">{{ emptyMessagePayMentNews }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Popup -->
-    <div :class="['modal', { 'is-active': showPopup }]">
-      <div class="modal-background" @click="handlerClosePopup"></div>
-
-      <div class="modal-card">
-        <header class="modal-card-head my-0 py-2" v-if="titlePopup">
-          <div style="width: 100%">
-            <div class="field is-grouped">
-              <div class="control is-expanded has-text-left">
-                <p class="fsb-18 has-text-primary" v-html="titlePopup"></p>
-              </div>
-              <div class="control has-text-right">
-                <button class="delete is-medium" @click="handlerClosePopup"></button>
-              </div>
-            </div>
-          </div>
-        </header>
-        <div class="modal-card-body px-4 py-4">Load data danh sách sản phẩm theo trạng thái</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from "vue";
-import Highcharts from "highcharts";
-import { Chart as HighchartsVueChart } from "highcharts-vue";
-
-import Datepicker from "~/components/datepicker/Datepicker";
-
-const { $numtoString, $findapi, $getapi, $store, $getdata, $mode } = useNuxtApp();
-
-const dealer = $store.dealer;
-const isVietnamese = computed(() => $store.lang.toLowerCase() === "vi");
-
-const today = new Date().toISOString().split("T")[0];
-
-const productsResponse = ref(null);
-const transactionResponse = ref(null);
-const transactionDueResponse = ref(null);
-const paymentResponse = ref(null);
-const paymentDueResponse = ref(null);
-
-const showPopup = ref(false);
-const dateReport = ref({
-  "date-start": today,
-  "date-end": today,
-});
-
-const labelProductByStatus = ref(null);
-const labelTransactionPhase = ref(null);
-const productByStatus = ref(null);
-const dataTransactionSelect = ref(null);
-const dataPaymentSelect = ref(null);
-const labelPaymentType = ref(null);
-const selectedProductByStatus = null;
-
-const totalProduct = ref(0);
-const totalTransactionNews = ref(0);
-const totalTransactionDue = ref(0);
-const totalPaymentNews = ref(0);
-const totalPaymentDue = ref(0);
-const listDealer = ref(null);
-
-const formatVniDate = (date) => {
-  const dateTemp = date ? new Date(date) : new Date();
-  const d = String(dateTemp.getDate()).padStart(2, "0");
-  const m = String(dateTemp.getMonth() + 1).padStart(2, "0");
-  const y = dateTemp.getFullYear();
-  return `${d}/${m}/${y}`;
-};
-
-let scrollPosition = 0;
-
-const select = (fieldName, value) => {
-  dateReport.value[fieldName] = value;
-};
-
-const listTransactionPhase = await $getdata("transactionphase");
-const listSalePolicy = await $getdata("salepolicy");
-const listPaymentStatus = await $getdata("paymentstatus");
-const listPaymentType = await $getdata("paymenttype");
-if (!dealer?.code) {
-  listDealer.value = await $getdata("dealer");
-}
-const groupByField = (list, { keyField, nameField, nameTransform, colorField }) => {
-  if (!Array.isArray(list) || list.length === 0) return [];
-
-  const map = new Map();
-
-  for (const item of list) {
-    const key = item[keyField];
-    if (!key) continue;
-
-    let group = map.get(key);
-
-    if (!group) {
-      group = {
-        key,
-        name: nameTransform ? nameTransform(item[nameField]) : nameField ? item[nameField] : key,
-        color: colorField ? item[colorField] : null,
-        count: 0,
-        children: [],
-      };
-      map.set(key, group);
-    }
-
-    group.count++;
-    group.children.push(item);
-  }
-
-  return [...map.values()];
-};
-
-const chartSelectedHandler = ({ source, labelRef, itemRef, selectRef }) => ({
-  select() {
-    selectRef = this;
-    const item = source.value.find((i) => i.key === this.options.key);
-    labelRef.value = item?.name ?? null;
-    itemRef.value = item?.children ? [...item.children] : [];
-    toggleBodyScroll(true);
-  },
-
-  unselect() {
-    if (selectRef !== this) return;
-    selectRef = null;
-    labelRef.value = null;
-    itemRef.value = [];
-    toggleBodyScroll(false);
-  },
-});
-
-const toggleBodyScroll = (isActive) => {
-  if (isActive) {
-    scrollPosition = window.scrollY || document.documentElement.scrollTop;
-    document.body.classList.add("popup-open");
-    document.body.style.top = `-${scrollPosition}px`;
-  } else {
-    document.body.classList.remove("popup-open");
-    document.body.style.top = "";
-    window.scrollTo(0, scrollPosition);
-  }
-};
-
-function buildDateRange(date) {
-  if (!date) return null;
-  const dateTemp = new Date(date).toISOString().split("T")[0];
-  const start = new Date(`${dateTemp}T00:00:00.000Z`);
-  const end = new Date(`${dateTemp}T23:59:59.999Z`);
-
-  return {
-    start: start.toISOString(),
-    end: end.toISOString(),
-  };
-}
-
-function buildGroupMap(list = []) {
-  if (!Array.isArray(list)) return new Map();
-
-  return new Map(list.filter((item) => item?.key != null).map((item) => [item.key, item]));
-}
-
-function mergeMasterWithGroup(masterList = [], groupMap) {
-  if (!Array.isArray(masterList)) return [];
-
-  return masterList.map((item) => {
-    const found = groupMap.get(item.code);
-
-    return {
-      ...item,
-      count: found?.count ?? 0,
-      children: found?.children ?? [],
-    };
-  });
-}
-
-function buildStatusByParent(parentList = [], statusList = [], keyGroup = "") {
-  return parentList.map((parent) => {
-    const groupedStatus =
-      groupByField(parent.children ?? [], {
-        keyField: keyGroup,
-      }) || [];
-
-    const statusMap = buildGroupMap(groupedStatus);
-
-    const status = statusList.map((st) => {
-      const found = statusMap.get(st.code);
-
-      return {
-        ...st,
-        count: found?.count ?? 0,
-        children: found?.children ?? [],
-      };
-    });
-
-    return {
-      ...parent,
-      status,
-    };
-  });
-}
-
-function buildChartSeriesByStatus(statusList = [], parentWithStatus = []) {
-  return statusList.map((status) => ({
-    name: status.name?.split(". ")[1] ?? status.name,
-    data: parentWithStatus.map((parent) => {
-      const map = new Map((parent.status ?? []).map((st) => [st.code, st.count]));
-
-      return map.get(status.code) ?? 0;
-    }),
-  }));
-}
-
-function calcPercentage(part, whole, decimals = 2) {
-  const numerator = Number(part) || 0;
-  const denominator = Number(whole) || 0;
-
-  if (denominator === 0) return 0;
-
-  return Number(((numerator / denominator) * 100).toFixed(decimals));
-}
-
-function hasData(data) {
-  return Array.isArray(data) && data.length > 0;
-}
-
-function ColorStatus(value) {
-  if (value > 100) {
-    return "#006400";
-  }
-
-  if (value >= 90 && value <= 100) {
-    return "#2ECC71";
-  }
-
-  if (value >= 75 && value < 90) {
-    return "#F1C40F";
-  }
-
-  if (value >= 60 && value < 75) {
-    return "#E67E22";
-  }
-
-  if (value < 60) {
-    return "#E74C3C";
-  }
-
-  return "#BDC3C7";
-}
-
-const titlePopup = computed(() => {
-  const isVi = isVietnamese;
-  const productLen = productByStatus?.value?.length;
-  const transactionLen = dataTransactionSelect?.value?.length;
-  const paymentLen = dataPaymentSelect?.value?.length;
-  const dateStart = dateReport.value?.["date-start"];
-  const dateEnd = dateReport.value?.["date-end"];
-  const dateTextStart = dateStart ? formatVniDate(dateStart) : "";
-  const dateTextEnd = dateEnd ? formatVniDate(dateEnd) : "";
-
-  if (productLen) {
-    return isVi
-      ? `Danh sách sản phẩm - Trạng thái: ${labelProductByStatus.value}`
-      : `Product List - Status: ${labelProductByStatus.value}`;
-  }
-
-  if (transactionLen) {
-    return isVi
-      ? `Danh sách giao dịch - Trạng thái: ${labelTransactionPhase.value} (${dateTextStart} - ${dateTextEnd})`
-      : `Transaction list - Status: ${labelTransactionPhase.value} (${dateTextStart} - ${dateTextEnd})`;
-  }
-
-  if (paymentLen) {
-    return isVi
-      ? `Danh sách thanh toán - Loại thanh toán: ${labelPaymentType.value} (${dateTextStart} - ${dateTextEnd})`
-      : `Payment list - Payment type: ${labelPaymentType.value} (${dateTextStart} - ${dateTextEnd})`;
-  }
-
-  return "";
-});
-
-// Fetch products data
-let foundProduct = $findapi("product");
-foundProduct.params.values =
-  "id,code,trade_code,zone_code,type__code,type__name,zone_type__code,zone_type__code,zone_type__name,direction__code,direction__name,cart__code,cart__name,cart__dealer__code,cart__dealer__name,origin_price,status__code,status__name,status__color,status__sale_status__code,status__sale_status__name,status__sale_status__color";
-if (dealer?.code) {
-  foundProduct.params.filter = { cart__dealer__code: dealer?.code };
-  foundProduct.params.exclude = { status__sale_status__code: "not-sold" };
-}
-
-async function fetchApiProduct() {
-  try {
-    const [productRes] = await $getapi([foundProduct]);
-    productsResponse.value = productRes?.data?.rows ?? [];
-    totalProduct.value = productsResponse.value?.length;
-  } catch (error) {
-    if ($mode === "dev") {
-      console.error("Call api product error", error);
-    }
-    productsResponse.value = [];
-    totalProduct.value = 0;
-  }
-}
-fetchApiProduct();
-
-const hasProducts = computed(() => hasData(productsResponse.value));
-
-const emptyMessageProducts = computed(() => (isVietnamese ? `Hiện chưa có sản phẩm` : `No product`));
-
-// Chart product by status
-const productStatus = computed(() =>
-  groupByField(productsResponse.value, {
-    keyField: "status__sale_status__code",
-    nameField: "status__sale_status__name",
-    nameTransform: (name) => name?.split(". ")[1] ?? name,
-    colorField: "status__sale_status__color",
-  })
-);
-
-const chartProductStatusOptions = computed(() => {
-  return {
-    chart: {
-      type: "pie",
-      zooming: {
-        type: "xy",
-      },
-      panning: {
-        enabled: true,
-        type: "xy",
-      },
-    },
-    title: {
-      text: isVietnamese ? "Trạng thái sản phẩm" : "Product status",
-    },
-    subtitle: {
-      text: `(${totalProduct.value} ${isVietnamese ? "Sản phẩm" : "Products"})`,
-    },
-    plotOptions: {
-      pie: {
-        allowPointSelect: true,
-        cursor: "pointer",
-        point: {
-          events: chartSelectedHandler({
-            source: productStatus,
-            labelRef: labelProductByStatus,
-            itemRef: productByStatus,
-            selectRef: selectedProductByStatus,
-          }),
-        },
-      },
-    },
-
-    series: [
-      {
-        name: isVietnamese ? "Số lượng" : "Quantity",
-        colorByPoint: true,
-        data: productStatus.value.map((item) => {
-          return {
-            name: item.name,
-            y: item.count,
-            key: item.key,
-            color: item.color,
-          };
-        }),
-      },
-    ],
-  };
-});
-
-watch(
-  productByStatus,
-  (newVal) => {
-    showPopup.value = Array.isArray(newVal) ? newVal.length > 0 : !!newVal;
-  },
-  { deep: true }
-);
-// <-- End Chart product by status -->
-
-// Fetch transactions data
-let foundTransaction = $findapi("reservation");
-foundTransaction.params.values =
-  "id,code,transaction__code,transaction__product__trade_code,transaction__product__zone_code,transaction__customer__code,transaction__customer__fullname,transaction__policy__code,transaction__policy__name,phase,phase__code,phase__name,transaction__product__cart__code,transaction__product__cart__name,transaction__product__cart__dealer,transaction__product__cart__dealer__code,transaction__product__cart__dealer__name,transaction__origin_price,transaction__discount_amount,transaction__sale_price,transaction__deposit_amount,status,status__code,status__name,create_time";
-
-foundTransaction.params.filter = {
-  ...(dealer?.code
-    ? {
-        transaction__product__cart__dealer__code: dealer?.code,
-      }
-    : {}),
-  create_time__gte: buildDateRange(dateReport.value["date-start"])?.start,
-  create_time__lte: buildDateRange(dateReport.value["date-end"])?.end,
-};
-
-let foundTransactionDue = $findapi("reservation");
-foundTransactionDue.params.values =
-  "id,code,due_date,transaction__code,transaction__product__trade_code,transaction__product__zone_code,transaction__customer__code,transaction__customer__fullname,transaction__policy__code,transaction__policy__name,phase,phase__code,phase__name,transaction__product__cart__code,transaction__product__cart__name,transaction__product__cart__dealer,transaction__product__cart__dealer__code,transaction__product__cart__dealer__name,transaction__origin_price,transaction__discount_amount,transaction__sale_price,transaction__deposit_amount,status,status__code,status__name,create_time";
-
-foundTransactionDue.params.filter = {
-  ...(dealer?.code
-    ? {
-        transaction__product__cart__dealer__code: dealer?.code,
-      }
-    : {}),
-  due_date__gte: dateReport.value["date-start"],
-  due_date__lte: dateReport.value["date-end"],
-};
-foundTransactionDue.params.exclude = { status__code__in: ["approved", "reject", "cancel"] };
-
-async function fetchApiTransaction() {
-  try {
-    const [transactionRes, transactionDueRes] = await $getapi([foundTransaction, foundTransactionDue]);
-
-    const transactions = transactionRes?.data?.rows ?? [];
-    const dueTransactions = transactionDueRes?.data?.rows ?? [];
-
-    transactionResponse.value = transactions;
-    totalTransactionNews.value = transactions.length;
-
-    transactionDueResponse.value = dueTransactions;
-    totalTransactionDue.value = dueTransactions.length;
-  } catch (error) {
-    if ($mode === "dev") {
-      console.error("Call api product error", error);
-    }
-    transactionResponse.value = [];
-    totalTransactionNews.value = 0;
-
-    transactionDueResponse.value = [];
-    totalTransactionDue.value = 0;
-  }
-}
-
-fetchApiTransaction();
-// <-- End Fetch transactions data -->
-
-const transactionType = computed(() =>
-  groupByField(transactionResponse.value || [], {
-    keyField: "phase__code",
-    nameField: "phase__name",
-    nameTransform: (name) => name?.split(". ")[1] ?? name,
-  })
-);
-
-const revenueSummary = computed(() => {
-  const list = transactionResponse.value;
-  if (!Array.isArray(list) || list.length === 0) {
-    return {
-      originPrice: 0,
-      discountAmount: 0,
-      salePrice: 0,
-      depositAmount: 0,
-    };
-  }
-
-  return list.reduce(
-    (acc, item) => {
-      acc.originPrice += Number(item.transaction__origin_price) || 0;
-      acc.discountAmount += Number(item.transaction__discount_amount) || 0;
-      acc.salePrice += Number(item.transaction__sale_price) || 0;
-      acc.depositAmount += Number(item.transaction__deposit_amount) || 0;
-      return acc;
-    },
-    {
-      originPrice: 0,
-      discountAmount: 0,
-      salePrice: 0,
-      depositAmount: 0,
-    }
-  );
-});
-
-const transactionTypeGroupMap = computed(() => buildGroupMap(transactionType.value));
-
-const dataTransactionType = computed(() => mergeMasterWithGroup(listTransactionPhase, transactionTypeGroupMap.value));
-
-const transactionTypePolicy = computed(() =>
-  buildStatusByParent(transactionType.value, listSalePolicy, "transaction__policy__code")
-);
-
-const dataChartTransactionPolicy = computed(() =>
-  buildChartSeriesByStatus(listSalePolicy, transactionTypePolicy.value)
-);
-
-const chartTransactionOptions = computed(() => {
-  return {
-    chart: {
-      type: "column",
-    },
-    title: {
-      text: `${
-        isVietnamese ? "Giao dịch phát sinh giai đoạn" : "Transactions occur during this period."
-      } ${formatVniDate(dateReport.value?.["date-start"])} - ${formatVniDate(dateReport.value?.["date-end"])}`,
-    },
-
-    subtitle: {
-      text: `${totalTransactionNews.value} ${isVietnamese ? "Giao dịch" : "Transaction"}`,
-    },
-
-    xAxis: {
-      categories: dataTransactionType?.value.map((item) => item.name),
-      crosshair: true,
-      accessibility: {
-        description: isVietnamese ? "Giao đoạn giao dịch" : "Trading phase",
-      },
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: isVietnamese ? "Số lượng giao dịch" : "Number of transactions",
-      },
-    },
-    tooltip: {
-      valueSuffix: isVietnamese ? " (Giao dịch)" : " (Transaction)",
-    },
-
-    plotOptions: {
-      column: {
-        pointPadding: 0.2,
-        borderWidth: 0,
-      },
-    },
-
-    series: dataChartTransactionPolicy.value,
-  };
-});
-
-const hasTransactionDataNews = computed(() => hasData(transactionResponse.value));
-
-const emptyMessageTransactionNews = computed(() =>
-  isVietnamese
-    ? `Hiện chưa có giao dịch phát sinh giai đoạn ${formatVniDate(dateReport.value["date-start"])} - ${formatVniDate(
-        dateReport.value["date-end"]
-      )}`
-    : `No transactions phase ${formatVniDate(dateReport.value["date-start"])} - ${formatVniDate(
-        dateReport.value["date-end"]
-      )}`
-);
-
-const handlerTransaction = (e, data) => {
-  e.preventDefault();
-  e.stopPropagation();
-  toggleBodyScroll(true);
-
-  showPopup.value = true;
-  dataTransactionSelect.value = data.children ?? [];
-  labelTransactionPhase.value = data.name ?? "";
-};
-// Dealer Transaction
-
-const transactionDealer = computed(() => {
-  if (dealer?.code) return [];
-
-  const test =  groupByField(transactionResponse.value || [], {
-    keyField: "transaction__product__cart__dealer__code",
-    nameField: "transaction__product__cart__dealer__name",
-    nameTransform: (name) => name?.split(". ")[1] ?? name,
-  });
-
-  console.log('transactionDealer==================' ,test);
-  return test
-  
-});
-
-const transactionDealerGroupMap = computed(() => buildGroupMap(transactionDealer.value));
-
-const dataTransactionDealer = computed(() => {
-  if (dealer?.code) return [];
-
-  const test = mergeMasterWithGroup(listDealer.value || [], transactionDealerGroupMap.value);
-  console.log('test' , test);
-  return test
-});
-
-const chartDealerTransactionOptions = computed(() => {
-  return {
-    chart: {
-      type: "column",
-    },
-    title: {
-      text: `${
-        isVietnamese
-          ? "Giao dịch phát sinh theo đại lý trong giai đoạn"
-          : "Transactions are generated through phased agency"
-      } ${formatVniDate(dateReport.value?.["date-start"])} - ${formatVniDate(dateReport.value?.["date-end"])}`,
-    },
-
-    subtitle: {
-      text: `${totalTransactionNews.value} ${isVietnamese ? "Giao dịch" : "Transaction"}`,
-    },
-
-    xAxis: {
-      categories: listDealer.value?.map((d) => d.code),
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: isVietnamese ? "Phần trăm (%)" : "Percent (%)",
-      },
-    },
-    tooltip: {
-      pointFormat:
-        '<span style="color:{series.color}">{series.name}</span>' + ": <b>{point.y}</b> ({point.percentage:.0f}%)<br/>",
-      shared: true,
-    },
-    plotOptions: {
-      column: {
-        stacking: "percent",
-        dataLabels: {
-          enabled: true,
-          format: "{point.percentage:.0f}%",
-        },
-      },
-    },
-    series: [
-      {
-        name: "Đặt cọc",
-        data: [434, 290, 307, 0, 0],
-      },
-      {
-        name: "Giữ chỗ",
-        data: [272, 153, 156, 0, 0],
-      },
-      {
-        name: "Thỏa thuận THNV",
-        data: [13, 7, 8, 1, 0],
-      },
-      {
-        name: "Chuyển nhượng QSDĐ",
-        data: [55, 35, 41, 6, 0],
-      },
-    ],
-  };
-});
-
-// Transaction Due
-
-const totalAmountTransactionDue = computed(() => {
-  return transactionDueResponse.value?.reduce((total, txn) => {
-    const salePrice = Number(txn.transaction__sale_price) || 0;
-    const deposit = Number(txn.transaction__deposit_amount) || 0;
-    return total + (salePrice - deposit);
-  }, 0);
-});
-// <-- End Transaction Due -->
-
-// fetch data payment
-
-let foundPayment = $findapi("payment_schedule");
-foundPayment.params.values =
-  "id,code,from_date,to_date,type,type__code,type__name,amount,paid_amount,remain_amount,cycle,cycle_days,detail,status,status__code,status__name,txn_detail__code,txn_detail__phase,txn_detail__phase__code,txn_detail__phase__name,txn_detail__transaction__product__trade_code,txn_detail__transaction__product__cart__dealer__code,txn_detail__transaction__product__cart__dealer__name,txn_detail__transaction__customer__code,txn_detail__transaction__customer__fullname,txn_detail__transaction__customer__code,txn_detail__transaction__customer__phone,create_time";
-foundPayment.params.filter = {
-  ...(dealer?.code
-    ? {
-        txn_detail__transaction__product__cart__dealer__code: dealer?.code || null,
-      }
-    : {}),
-  create_time__gte: buildDateRange(dateReport.value["date-start"])?.start,
-  create_time__lte: buildDateRange(dateReport.value["date-end"])?.end,
-};
-
-let foundPaymentDue = $findapi("payment_schedule");
-foundPaymentDue.params.values =
-  "id,code,from_date,to_date,type,type__code,type__name,amount,paid_amount,remain_amount,cycle,cycle_days,detail,status,status__code,status__name,txn_detail__code,txn_detail__phase,txn_detail__phase__code,txn_detail__phase__name,txn_detail__transaction__product__trade_code,txn_detail__transaction__product__cart__dealer__code,txn_detail__transaction__product__cart__dealer__name,txn_detail__transaction__customer__code,txn_detail__transaction__customer__fullname,txn_detail__transaction__customer__code,txn_detail__transaction__customer__phone,create_time";
-foundPaymentDue.params.filter = {
-  ...(dealer?.code
-    ? {
-        txn_detail__transaction__product__cart__dealer__code: dealer?.code || null,
-      }
-    : {}),
-  to_date__gte: dateReport.value["date-start"],
-  to_date__lte: dateReport.value["date-end"],
-  status__code: "unpaid",
-};
-
-async function fetchApiPayment() {
-  try {
-    const [paymentRes, paymentDueRes] = await $getapi([foundPayment, foundPaymentDue]);
-    const payments = paymentRes?.data?.rows ?? [];
-    const duePayments = paymentDueRes?.data?.rows ?? [];
-
-    paymentResponse.value = payments;
-    totalPaymentNews.value = payments.length;
-
-    paymentDueResponse.value = duePayments;
-    totalPaymentDue.value = duePayments.length;
-  } catch (error) {
-    if ($mode === "dev") {
-      console.error("Call api product error", error);
-    }
-    paymentResponse.value = [];
-    totalPaymentNews.value = 0;
-
-    paymentDueResponse.value = [];
-    totalPaymentDue.value = 0;
-  }
-}
-
-fetchApiPayment();
-
-const paymentTypeGroup = computed(() =>
-  groupByField(paymentResponse.value || [], {
-    keyField: "type__code",
-    nameField: "type__name",
-    nameTransform: (name) => name?.split(". ")[1] ?? name,
-  })
-);
-
-const paymentTypeGroupMap = computed(() => buildGroupMap(paymentTypeGroup.value));
-
-const dataPaymentType = computed(() => mergeMasterWithGroup(listPaymentType, paymentTypeGroupMap.value));
-
-const paymentTypeStatus = computed(() => buildStatusByParent(dataPaymentType.value, listPaymentStatus, "status__code"));
-
-const dataChartPaymentStatus = computed(() => buildChartSeriesByStatus(listPaymentStatus, paymentTypeStatus.value));
-
-const chartPaymentOptions = computed(() => {
-  return {
-    chart: {
-      type: "column",
-    },
-    title: {
-      text: `${isVietnamese ? "Thanh toán phát giai đoạn" : "Payment due in stages"} ${formatVniDate(
-        dateReport.value?.["date-start"]
-      )} - ${formatVniDate(dateReport.value?.["date-end"])}`,
-    },
-
-    subtitle: {
-      text: `${totalPaymentNews.value || 0} ${isVietnamese ? "Thanh toán" : "Payment"}`,
-    },
-
-    xAxis: {
-      categories: listPaymentType?.map((item) => item.name),
-      crosshair: true,
-      accessibility: {
-        description: isVietnamese ? "Loại thanh toán" : "Payment type",
-      },
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: isVietnamese ? "Số lượng giao dịch" : "Number of transactions",
-      },
-    },
-    tooltip: {
-      valueSuffix: isVietnamese ? " (Giao dịch)" : " (Transaction)",
-    },
-
-    plotOptions: {
-      column: {
-        pointPadding: 0.2,
-        borderWidth: 0,
-      },
-    },
-
-    series: dataChartPaymentStatus.value,
-  };
-});
-
-const hasPaymentDataNews = computed(() => hasData(paymentResponse.value));
-
-const emptyMessagePayMentNews = computed(() =>
-  isVietnamese
-    ? `Hiện chưa có thanh toán phát sinh giai đoạn ${formatVniDate(dateReport.value["date-start"])} - ${formatVniDate(
-        dateReport.value["date-end"]
-      )}`
-    : `No payments incurred during this period ${formatVniDate(dateReport.value["date-start"])} - ${formatVniDate(
-        dateReport.value["date-end"]
-      )}`
-);
-
-const paymentStatusSummary = computed(() => {
-  const payments = Array.isArray(paymentResponse.value) ? paymentResponse.value : [];
-
-  const groupedByStatus = groupByField(payments, {
-    keyField: "status__code",
-    nameField: "status__name",
-    nameTransform: (name) => name?.split(". ")?.[1] ?? name,
-  });
-
-  const statusList = groupedByStatus.map((group) => {
-    const totalAmount = group.children.reduce((sum, payment) => sum + (Number(payment.amount) || 0), 0);
-    return {
-      key: group.key ?? "UNKNOWN",
-      name: group.name ?? "Không xác định",
-      totalAmount,
-    };
-  });
-  return statusList.reduce(
-    (acc, item) => {
-      acc.totalPay += item.totalAmount;
-
-      if (item.key === "paid") {
-        acc.paid += item.totalAmount;
-      } else {
-        acc.unpaid += item.totalAmount;
-      }
-
-      return acc;
-    },
-    {
-      totalPay: 0,
-      paid: 0,
-      unpaid: 0,
-    }
-  );
-});
-
-const handlerPaymentSelect = (e, data) => {
-  e.preventDefault();
-  e.stopPropagation();
-  toggleBodyScroll(true);
-  showPopup.value = true;
-  dataPaymentSelect.value = data.children ?? [];
-  labelPaymentType.value = data.name ?? "";
-};
-
-const totalAmountPaymentDue = computed(() => {
-  return paymentDueResponse.value?.reduce((total, mpt) => {
-    const amount = Number(mpt.amount) || 0;
-    return total + amount;
-  }, 0);
-});
-// <<<<<<<<<<<<<<<<<<<==========================================>>>>>>>>>>>>>>>>>>>>>>>>>>>>
-// Handler for popup report
-const handlerClosePopup = (e) => {
-  e.preventDefault();
-  e.stopPropagation();
-
-  // Close popup
-  showPopup.value = false;
-
-  // Clear data
-  productByStatus.value = null;
-  dataTransactionSelect.value = null;
-
-  handleUnSelectChart();
-  toggleBodyScroll(false);
-};
-
-// <-- End Handler for popup report -->
-
-const handleUnSelectChart = () => {
-  const chart = Highcharts.charts.find((c) => c);
-  if (chart) {
-    chart.series[0]?.points.forEach((p) => {
-      if (p.selected) p.select(false, false);
-    });
-  }
-};
-// Close popup on ESC key
-const onEsc = (e) => {
-  if (e.key === "Escape") {
-    handlerClosePopup(e);
-    handleUnSelectChart();
-  }
-};
-
-onMounted(() => {
-  window.addEventListener("keydown", onEsc);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("keydown", onEsc);
-});
-
-// <-- End Close popup on ESC key -->
-
-watch(
-  dateReport,
-  (newVal) => {
-    foundTransaction.params.filter.create_time__gte = buildDateRange(newVal["date-start"])?.start;
-    foundTransaction.params.filter.create_time__lte = buildDateRange(newVal["date-end"])?.end;
-    foundTransactionDue.params.filter.due_date__gte = dateReport.value["date-start"];
-    foundTransactionDue.params.filter.due_date__lte = dateReport.value["date-end"];
-    fetchApiTransaction();
-
-    foundPayment.params.filter.create_time__gte = buildDateRange(newVal["date-start"])?.start;
-    foundPayment.params.filter.create_time__lte = buildDateRange(newVal["date-start"])?.end;
-    foundPaymentDue.params.filter.to_date__gte = dateReport.value["date-start"];
-    foundPaymentDue.params.filter.to_date__lte = dateReport.value["date-end"];
-
-    fetchApiPayment();
-
-    console.log("=====> dataTransactionDealer", transactionResponse.value);
-  },
-  { deep: true }
-);
-</script>
-
-<style>
-body.popup-open {
-  position: fixed;
-  width: 100%;
-  overflow: hidden;
-}
-
-.report-daily-page .modal-background {
-  opacity: 0.7 !important;
-}
-
-.report-daily-page .modal-card {
-  width: 90%;
-}
-
-.report-daily-page .message-alter {
-  text-align: center;
-  font-weight: bolder;
-  font-style: italic;
-}
-
-.report-daily-page .header-report .header-report-title {
-  font-size: 2rem;
-  font-weight: bolder;
-  text-align: center;
-  text-transform: uppercase;
-}
-
-.report-daily-page .header-report .select-date {
-  padding: 10px;
-  /* background-color: #f5f5f5; */
-  width: max-content;
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto;
-}
-
-.report-daily-page .header-report .select-date .label-date {
-  font-weight: bolder;
-}
-
-.report-daily-page .report-transaction .card,
-.report-daily-page .report-payment .card {
-  cursor: pointer;
-}
-
-/* Container menu */
-.report-daily-page .highcharts-contextmenu {
-  background: #ffffff !important;
-  border-radius: 8px !important;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
-  padding: 6px 0 !important;
-  min-width: 180px;
-  z-index: 9999 !important;
-}
-
-/* Item menu */
-.report-daily-page .highcharts-contextmenu li {
-  padding: 10px 16px !important;
-  font-size: 14px;
-  color: #333;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-/* Hover */
-.report-daily-page .highcharts-contextmenu li:hover {
-  background: #f5f7fa !important;
-  color: #1e80ff;
-}
-
-/* Separator */
-.report-daily-page .highcharts-contextmenu hr {
-  margin: 6px 0 !important;
-  border-color: #eee !important;
-}
-
-.report-daily-page .highcharts-data-table table {
-  margin: 0 auto;
-}
-
-.report-daily-page .highcharts-data-table table th,
-.report-daily-page .highcharts-data-table table td {
-  padding: 10px;
-  border: 1px solid #ddd;
-}
-
-.report-daily-page .highcharts-data-table table thead {
-  background-color: #204853;
-}
-.report-daily-page .highcharts-data-table table thead th {
-  color: #fff !important;
-}
-.report-daily-page .highcharts-data-table table tbody tr:nth-child(even) {
-  background-color: #f9f9f9;
-}
-.report-daily-page .highcharts-data-table table tbody tr:hover {
-  cursor: pointer;
-  background-color: #4a4a4a;
-}
-.report-daily-page .highcharts-data-table table tbody tr:hover,
-.report-daily-page .highcharts-data-table table tbody tr:hover th {
-  color: #fff;
-}
-</style>
diff --git a/app/components/report/Goods.vue b/app/components/report/Goods.vue
new file mode 100644
index 0000000..b6ebfe5
--- /dev/null
+++ b/app/components/report/Goods.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  Goods
+</template>
diff --git a/app/components/report/Monthly.vue b/app/components/report/Monthly.vue
deleted file mode 100644
index ce22d8a..0000000
--- a/app/components/report/Monthly.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div class="report report-monthly-page">
-    <div class="header-report mb-2">
-      <h2 class="header-report-title">Báo cáo tình hình giao dịch & thanh toán theo tháng</h2>
-      <div class="select-date">
-        <span class="label-date">Từ ngày:</span> &nbsp;
-        <Datepicker v-bind="{ record: dateReport, attr: 'date-start' }" @date="select('date-start', $event)" />&nbsp;
-        <span class="label-date">đến ngày:</span> &nbsp;
-        <Datepicker v-bind="{ record: dateReport, attr: 'date-end' }" @date="select('date-end', $event)" />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-</script>
-<style>
-  .report-monthly-page .header-report .header-report-title {
-  font-size: 2rem;
-  font-weight: bolder;
-  text-align: center;
-  text-transform: uppercase;
-}
-</style>
\ No newline at end of file
diff --git a/app/components/report/NCC.vue b/app/components/report/NCC.vue
new file mode 100644
index 0000000..a431f69
--- /dev/null
+++ b/app/components/report/NCC.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  NCC
+</template>
diff --git a/app/components/report/TableReportProduct.vue b/app/components/report/TableReportProduct.vue
deleted file mode 100644
index 5b11db5..0000000
--- a/app/components/report/TableReportProduct.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <div class="table-report-product">
-    <div class="fixed-grid has-2-cols has-5-cols-desktop">
-      <div class="grid summary-metrics">
-        <div class="cell metric-item">
-          <p class="metric-label">Tổng sản phẩm</p>
-          <span class="metric-value">{{ props.data.totalProduct }}</span>
-        </div>
-        <div class="cell metric-item">
-          <p class="metric-label">Tổng giá trị</p>
-          <span class="metric-value">{{ formatVND(props.data.totalValue) }}</span>
-        </div>
-        <div class="cell metric-item">
-          <p class="metric-label">Tổng diện tích đất</p>
-          <span class="metric-value">{{ props.data.totalLandArea }} m²</span>
-        </div>
-        <div class="cell metric-item">
-          <p class="metric-label">Tổng diện tích xây dựng</p>
-          <span class="metric-value"> {{ props.data.totalBuildingArea }} m² </span>
-        </div>
-        <div class="cell metric-item">
-          <p class="metric-label">Tổng diện tích sàn</p>
-          <span class="metric-value">{{ props.data.totalFloorArea }} m²</span>
-        </div>
-      </div>
-    </div>
-    <DataView v-bind="configurationDataView" v-if="configurationDataView && props.data.listProduct.length > 0" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const props = defineProps({
-  data: Object,
-});
-
-function formatVND(amount, maxDecimals = 2) {
-  if (!Number.isFinite(amount)) return "0 đ";
-
-  const format = (value) => {
-    return Number.isInteger(value) ? value.toString() : value.toFixed(maxDecimals).replace(/\.?0+$/, "");
-  };
-
-  if (amount >= 1_000_000_000) return `${format(amount / 1_000_000_000)} tỷ`;
-
-  if (amount >= 1_000_000) return `${format(amount / 1_000_000)} triệu`;
-
-  return `${amount.toLocaleString("vi-VN")} đ`;
-}
-
-const configurationDataView = ref({
-  data: props.data.listProduct,
-  setting: "product-list-report",
-  pagename: "productListReport",
-});
-</script>
-<style>
-.table-report-product {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.table-report-product .summary-metrics {
-  padding: 16px 20px;
-  background: #fff;
-  border-radius: 12px;
-  flex: 0 0 auto;
-}
-
-.table-report-product .summary-metrics .metric-item {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.table-report-product .summary-metrics .metric-label {
-  font-size: 13px;
-  color: #6b7280;
-  font-weight: 500;
-}
-
-.table-report-product .summary-metrics .metric-value {
-  font-size: 20px;
-  font-weight: 700;
-  color: #111827;
-}
-
-.table-report-product .table-container {
-  flex: 1 1 auto;
-  overflow-y: auto;
-}
-
-.table-report-product .table-container .table {
-  position: relative;
-}
-
-.table-report-product .table-container .table thead {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-</style>
diff --git a/app/components/report/Test.vue b/app/components/rights/Rights.vue
similarity index 55%
rename from app/components/report/Test.vue
rename to app/components/rights/Rights.vue
index ed82087..04e6f12 100644
--- a/app/components/report/Test.vue
+++ b/app/components/rights/Rights.vue
@@ -1,8 +1,7 @@
-<template>
-<div>
-  Hello
-</div>
-</template>
 <script setup>
 
-</script>
\ No newline at end of file
+</script>
+
+<template>
+  <div>Rights</div>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 8c6c982..93f0b4b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -3,14 +3,14 @@
     <TopMenu @changetab="changeTab" />
     <div class="container blockdiv has-text-text-20">
       <div class="mb-2 is-flex is-justify-content-space-between is-align-items-center is-gap-1" v-if="tab">
-        <template v-if="subtab">
-          <span class="fs-17 font-semibold">{{ tab[$store.lang] }}</span>
-          <SvgIcon class="mx-2" v-bind="{ name: 'right.svg', size: 17, type: 'has-text-black' }"></SvgIcon>
-          <span class="fs-17 font-semibold">{{ subtab[$store.lang] }}</span>
-        </template>
-        <div v-else>
-          <div class="is-flex is-gap-1 is-align-items-center mb-1">
-            <p class="fs-17 font-semibold">{{ tab[$store.lang] }}</p>
+        <div>
+          <div class="fs-17 font-semibold is-flex is-gap-1 is-align-items-center mb-1">
+            <div v-if="subtab" class="is-flex is-gap-0.5 is-align-items-center">
+              <span>{{ tab[$store.lang] }}</span>
+              <Icon name="material-symbols:arrow-forward-ios-rounded" :size="16" />
+              <span>{{ subtab[$store.lang] }}</span>
+            </div>
+            <p v-else>{{ tab[$store.lang] }}</p>
             <button
               @click="refresh"
               class="button is-primary is-light rounded-full p-1"
diff --git a/app/plugins/04-components.js b/app/plugins/04-components.js
index 0952a6e..f35c884 100644
--- a/app/plugins/04-components.js
+++ b/app/plugins/04-components.js
@@ -2,6 +2,19 @@ import { defineNuxtPlugin } from "#app";
 import Dashboard from '@/components/dashboard/Dashboard.vue';
 import Orders from '@/components/orders/Orders.vue';
 import Inventory from '@/components/inventory/Inventory.vue';
+import Rights from '@/components/rights/Rights.vue';
+import POS from '@/components/pos/POS.vue';
+import Receipts from '@/components/receipts/Receipts.vue';
+import Imports from '@/components/imports/Imports.vue';
+import Exports from '@/components/exports/Exports.vue';
+import InventoryTransfer from '@/components/inventory-transfer/InventoryTransfer.vue';
+import InventoryCount from '@/components/inventory-count/InventoryCount.vue';
+import CashBook from '@/components/cash-book/CashBook.vue';
+import NCC from '@/components/report/NCC.vue';
+import Customers from '@/components/report/Customers.vue';
+import Goods from '@/components/report/Goods.vue';
+import ReportCashBook from '@/components/report/CashBook.vue';
+import Finance from '@/components/report/Finance.vue';
 import Notebox from "~/components/common/Notebox.vue";
 import ProductCountbox from "~/components/common/ProductCountbox.vue";
 import SvgIcon from "~/components/SvgIcon.vue";
@@ -21,9 +34,6 @@ import InternalEntry from "~/components/modal/InternalEntry.vue"
 
 import Configuration from "~/components/maintab/Configuration.vue";
 import DebtView from "~/components/accounting/DebtView.vue";
-import ReportDaily from "~/components/report/Daily.vue";
-import ReportFormTo from "~/components/report/FromTo.vue";
-import ReportMonthly from "~/components/report/Monthly.vue";
 
 //format
 import FormatNumber from "~/components/datatable/format/FormatNumber.vue";
@@ -106,9 +116,6 @@ const components = {
   MenuParam,
   ScrollBox,
   MenuPayment,
-  ReportDaily,
-  ReportFormTo,
-  ReportMonthly,
   DataModel,
   FormatNumber,
   MenuApp,
@@ -131,7 +138,20 @@ const components = {
   Overdue,
   Dashboard,
   Orders,
-  Inventory
+  Inventory,
+  Rights,
+  POS,
+  Receipts,
+  Imports,
+  Exports,
+  InventoryTransfer,
+  InventoryCount,
+  CashBook,
+  NCC,
+  Customers,
+  Goods,
+  ReportCashBook,
+  Finance,
 };
 
 export default defineNuxtPlugin((nuxtApp) => {