From 8023de14378a1e9c4f337420c9c21b772a00ded5 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 4 Mar 2025 13:39:48 +0700
Subject: [PATCH 1/8] feat: add title

---
 src/pages/15_dash-board/MainPage.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/pages/15_dash-board/MainPage.vue b/src/pages/15_dash-board/MainPage.vue
index 081ecf2e..bd02a8aa 100644
--- a/src/pages/15_dash-board/MainPage.vue
+++ b/src/pages/15_dash-board/MainPage.vue
@@ -1,11 +1,20 @@
 <script lang="ts" setup>
 // NOTE: Library
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 
 // NOTE:  Components
 
 // NOTE: Stores & Type
+import { useNavigator } from 'src/stores/navigator';
 
 // NOTE: Variable
+
+const navigatorStore = useNavigator();
+
+onMounted(async () => {
+  navigatorStore.current.title = 'report.title';
+  navigatorStore.current.path = [{ text: '' }];
+});
 </script>
 <template></template>
 <style scoped></style>

From 5ec7012119b961a7e0d75e03d4d33715554fa2e7 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 5 Mar 2025 14:11:06 +0700
Subject: [PATCH 2/8] feat: add dashboard localization for English and Thai

---
 src/i18n/eng.ts | 33 ++++++++++++++++++++++++++++++++-
 src/i18n/tha.ts | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 51e53bf9..aa6cedb5 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -1336,7 +1336,6 @@ export default {
       Succeed: 'Completed',
     },
   },
-
   report: {
     report: {
       title: 'Report',
@@ -1373,4 +1372,36 @@ export default {
       },
     },
   },
+  dashboard: {
+    title: 'Dashboard',
+    newComer: 'New Interested Party',
+    openQuotation: 'Open Quotation',
+    paidSales: 'Paid Sales',
+    pendingSales: 'Pending Sales',
+
+    receipt: {
+      title: 'Tax Invoice Summary',
+      caption: 'By Total Amount',
+      total: 'Total Amount',
+      paid: 'Partially & Fully Paid',
+      pending: 'Pending Payment',
+      cancel: 'Cancelled',
+    },
+    opportunity: {
+      title: 'Sales Opportunity Screening',
+      caption: 'By Sales Opportunity Status',
+    },
+    quotation: {
+      title: 'Quotations & Sales Orders',
+      caption: 'By Document Status',
+      waitCustomer: 'Waiting for Customer',
+      inProgress: 'In Progress',
+      complete: 'Complete',
+      cancel: 'Cancel',
+    },
+    sales: {
+      title: 'Top 5 Highest Sales',
+      caption: 'Based on Tax Invoices',
+    },
+  },
 };
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 7d7b561f..8d165a65 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -1351,4 +1351,36 @@ export default {
       count: 'จำนวนที่ขาย',
     },
   },
+  dashboard: {
+    title: 'Dashboard',
+    newComer: 'ผู้สนใจใหม่',
+    openQuotation: 'ใบเสนอราคาที่เปิดอยู่',
+    paidSales: 'ยอดขายที่ชำระแล้ว',
+    pendingSales: 'ยอดขายที่รอชำระ',
+
+    receipt: {
+      title: 'สรุปยอดใบกำกับภาษี',
+      caption: 'ตามจำนวนเงินรวม',
+      total: 'ยอดรวมทั้งหมด',
+      paid: 'ชำระไม่ครบและชำระครบ',
+      pending: 'รอชำระ',
+      cancel: 'ยกเลิก',
+    },
+    opportunity: {
+      title: 'การคัดกรองโอกาสทางการขาย',
+      caption: 'ตามสถานะโอกาสทางการขาย',
+    },
+    quotation: {
+      title: 'ใบเสนอราคาและใบสั่งขาย',
+      caption: 'ตามสถานะเอกสาร',
+      waitCustomer: 'รอลูกค้าตอบรับ',
+      inProgress: 'กำลังดำเนินการ',
+      complete: 'เสร็จสิ้น',
+      cancel: 'ยกเลิก',
+    },
+    sales: {
+      title: '5 อันดับยอดขายสูงสุด',
+      caption: 'ตามใบกำกับภาษี',
+    },
+  },
 };

From f168b43b1afdf0e711afa52ac06b0f07815e933c Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 5 Mar 2025 14:11:16 +0700
Subject: [PATCH 3/8] feat: add new chart components for opportunity, quotation
 status, receipt, and sales

---
 .../15_dash-board/chart/ChartOpportunity.vue  |  58 ++++++++
 .../chart/ChartQuotationStatus.vue            | 107 ++++++++++++++
 .../15_dash-board/chart/ChartReceipt.vue      | 131 ++++++++++++++++++
 src/pages/15_dash-board/chart/ChartSales.vue  |  75 ++++++++++
 4 files changed, 371 insertions(+)
 create mode 100644 src/pages/15_dash-board/chart/ChartOpportunity.vue
 create mode 100644 src/pages/15_dash-board/chart/ChartQuotationStatus.vue
 create mode 100644 src/pages/15_dash-board/chart/ChartReceipt.vue
 create mode 100644 src/pages/15_dash-board/chart/ChartSales.vue

diff --git a/src/pages/15_dash-board/chart/ChartOpportunity.vue b/src/pages/15_dash-board/chart/ChartOpportunity.vue
new file mode 100644
index 00000000..23900231
--- /dev/null
+++ b/src/pages/15_dash-board/chart/ChartOpportunity.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VueApexCharts from 'vue3-apexcharts';
+
+const props = withDefaults(
+  defineProps<{
+    series: number[];
+    labels: string[];
+  }>(),
+  {
+    labels: () => ['series-1', 'series-2', 'series-3', 'series-4'],
+    series: () => [1, 1, 1, 1],
+  },
+);
+
+const chartOptions = computed(() => ({
+  labels: props.labels,
+  colors: [
+    '#1F253B',
+    '#1B285C',
+    '#031B7D',
+    '#0023AE',
+    '#0933DA',
+    '#365AE9',
+    '#6380F8',
+    '#7583BB',
+  ],
+  chart: {
+    fontFamily: 'Noto Sans Thai',
+    type: 'donut',
+  },
+  dataLabels: {
+    style: {
+      fontSize: '10px',
+      color: 'red',
+    },
+  },
+  legend: {
+    show: false,
+    position: 'bottom',
+  },
+}));
+</script>
+<template>
+  <div class="surface-1 rounded bordered q-pa-md">
+    {{ $t('dashboard.opportunity.title') }}
+    <div class="text-caption app-text-muted">
+      {{ $t('dashboard.opportunity.caption') }}
+    </div>
+    <VueApexCharts
+      type="donut"
+      height="200"
+      :options="chartOptions"
+      :series="series"
+    ></VueApexCharts>
+  </div>
+</template>
diff --git a/src/pages/15_dash-board/chart/ChartQuotationStatus.vue b/src/pages/15_dash-board/chart/ChartQuotationStatus.vue
new file mode 100644
index 00000000..8792c6dd
--- /dev/null
+++ b/src/pages/15_dash-board/chart/ChartQuotationStatus.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import VueApexCharts from 'vue3-apexcharts';
+
+const props = withDefaults(
+  defineProps<{
+    series: { data: number[] }[];
+    labels: string[];
+  }>(),
+  {
+    series: () => [
+      {
+        data: [1, 2, 3, 4],
+      },
+    ],
+    labels: () => ['1', '2', '3', '4'],
+  },
+);
+
+const chartOptions = computed(() => ({
+  chart: {
+    type: 'bar',
+    fontFamily: 'Noto Sans Thai',
+  },
+  plotOptions: {
+    bar: {
+      barHeight: '100%',
+      distributed: true,
+      horizontal: true,
+      borderRadius: 6,
+      borderRadiusApplication: 'end',
+      dataLabels: {
+        position: 'bottom',
+      },
+    },
+  },
+  colors: ['#f59f00', '#035aa1', '#0ca678', '#c92a2a'],
+  dataLabels: {
+    enabled: false,
+    textAnchor: 'start',
+    style: {
+      colors: ['#fff'],
+    },
+    formatter: function (
+      val: string,
+      opt: {
+        w: { globals: { labels: { [x: string]: string } } };
+        dataPointIndex: string | number;
+      },
+    ) {
+      return opt.w.globals.labels[opt.dataPointIndex] + ': ' + val;
+    },
+    offsetX: 0,
+    dropShadow: {
+      enabled: true,
+    },
+  },
+  stroke: {
+    width: 1,
+    colors: ['#fff'],
+  },
+  xaxis: {
+    categories: props.labels,
+  },
+  yaxis: {
+    labels: {
+      show: false,
+    },
+  },
+  legend: {
+    show: false,
+  },
+  tooltip: {
+    theme: 'dark',
+    x: {
+      show: false,
+    },
+    y: {
+      title: {
+        formatter: function (
+          val: string,
+          opt: {
+            w: { globals: { labels: { [x: string]: string } } };
+            dataPointIndex: string | number;
+          },
+        ) {
+          return opt.w.globals.labels[opt.dataPointIndex] + ':';
+        },
+      },
+    },
+  },
+}));
+</script>
+<template>
+  <div class="surface-1 rounded bordered q-pa-md">
+    {{ $t('dashboard.quotation.title') }}
+    <div class="text-caption app-text-muted">
+      {{ $t('dashboard.quotation.caption') }}
+    </div>
+    <VueApexCharts
+      type="bar"
+      height="200"
+      :options="chartOptions"
+      :series="series"
+    ></VueApexCharts>
+  </div>
+</template>
diff --git a/src/pages/15_dash-board/chart/ChartReceipt.vue b/src/pages/15_dash-board/chart/ChartReceipt.vue
new file mode 100644
index 00000000..b48db65a
--- /dev/null
+++ b/src/pages/15_dash-board/chart/ChartReceipt.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import VueApexCharts from 'vue3-apexcharts';
+import DataDisplay from 'src/components/08_request-list/DataDisplay.vue';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+const { locale } = useI18n({ useScope: 'global' });
+
+withDefaults(
+  defineProps<{
+    series: { name: string; data: number[] }[];
+    summary: number[];
+  }>(),
+  {
+    series: () => [
+      { name: 'series-1', data: [0, 0] },
+      { name: 'series-2', data: [1, 1] },
+      { name: 'series-3', data: [2, 2] },
+      { name: 'series-4', data: [3, 3] },
+    ],
+    summary: () => [0, 0, 0, 0],
+  },
+);
+const chartOptions = computed(() => {
+  const thaiMonths = [
+    'ม.ค.',
+    'ก.พ.',
+    'มี.ค.',
+    'เม.ย.',
+    'พ.ค.',
+    'มิ.ย.',
+    'ก.ค.',
+    'ส.ค.',
+    'ก.ย.',
+    'ต.ค.',
+    'พ.ย.',
+    'ธ.ค.',
+  ];
+
+  return {
+    colors: ['#035aa1', '#ae3ec9', '#ffa94d', '#e64980'],
+    chart: {
+      fontFamily: 'Noto Sans Thai',
+      type: 'line',
+      zoom: {
+        enabled: false,
+      },
+    },
+    legend: {
+      position: 'right',
+    },
+    xaxis: {
+      categories:
+        locale.value === 'tha'
+          ? thaiMonths
+          : [
+              'Jan',
+              'Feb',
+              'Mar',
+              'Apr',
+              'May',
+              'Jun',
+              'Jul',
+              'Aug',
+              'Sep',
+              'Oct',
+              'Nov',
+              'Dec',
+            ],
+    },
+  };
+});
+
+const detail = [
+  {
+    label: 'total',
+    color: 'var(--brand-1)',
+    icon: 'hugeicons:wallet-03',
+  },
+  {
+    label: 'paid',
+    color: 'var(--purple-7)',
+    icon: 'material-symbols-light:credit-card-clock-outline-rounded',
+  },
+  {
+    label: 'pending',
+    color: 'var(--orange-4)',
+    icon: 'material-symbols-light:credit-card-outline',
+  },
+  {
+    label: 'cancel',
+    color: 'var(--pink-7)',
+    icon: 'hugeicons:wallet-remove-02',
+  },
+];
+</script>
+<template>
+  <div class="surface-1 rounded bordered q-pa-md">
+    {{ $t('dashboard.receipt.title') }}
+    <div class="text-caption app-text-muted">
+      {{ $t('dashboard.receipt.caption') }}
+    </div>
+    <VueApexCharts
+      type="line"
+      height="150"
+      :options="chartOptions"
+      :series="series"
+    ></VueApexCharts>
+
+    <div class="row items-center">
+      <span
+        class="col-md col-6 row no-wrap items-center"
+        v-for="(v, i) in detail"
+        :key="v.label"
+      >
+        <q-avatar
+          class="q-mr-sm"
+          size="md"
+          font-size="18px"
+          :style="`background-color: ${v.color}; color: var(--surface-1)`"
+        >
+          <Icon :icon="v.icon" />
+        </q-avatar>
+        <DataDisplay
+          :label="$t(`dashboard.receipt.${v.label}`)"
+          :value="summary[i].toString()"
+        />
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/src/pages/15_dash-board/chart/ChartSales.vue b/src/pages/15_dash-board/chart/ChartSales.vue
new file mode 100644
index 00000000..2cafbef2
--- /dev/null
+++ b/src/pages/15_dash-board/chart/ChartSales.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import VueApexCharts from 'vue3-apexcharts';
+
+const { t } = useI18n();
+
+const series = [
+  {
+    name: 'Net Profit',
+    data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
+  },
+  {
+    name: 'Revenue',
+    data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
+  },
+  {
+    name: 'Free Cash Flow',
+    data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
+  },
+];
+const chartOptions = {
+  chart: {
+    type: 'bar',
+    fontFamily: 'Noto Sans Thai',
+  },
+  plotOptions: {
+    bar: {
+      horizontal: false,
+      columnWidth: '55%',
+      borderRadius: 2,
+      borderRadiusApplication: 'end',
+    },
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  stroke: {
+    show: true,
+    width: 2,
+    colors: ['transparent'],
+  },
+  xaxis: {
+    categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+  },
+  yaxis: {
+    title: {
+      text: '$ (thousands)',
+    },
+  },
+  fill: {
+    opacity: 1,
+  },
+  tooltip: {
+    y: {
+      formatter: function (val: string) {
+        return '$ ' + val + ' thousands';
+      },
+    },
+  },
+};
+</script>
+<template>
+  <div class="surface-1 rounded bordered q-pa-md">
+    {{ $t('dashboard.sales.title') }}
+    <div class="text-caption app-text-muted">
+      {{ $t('dashboard.sales.caption') }}
+    </div>
+    <VueApexCharts
+      type="bar"
+      height="200"
+      :options="chartOptions"
+      :series="series"
+    ></VueApexCharts>
+  </div>
+</template>

From 1c9874a9e792c4418b0de178297f1ceafa69356f Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 5 Mar 2025 14:11:20 +0700
Subject: [PATCH 4/8] feat: enhance dashboard with new chart components and
 role/year selection

---
 src/pages/15_dash-board/MainPage.vue | 137 ++++++++++++++++++++++++++-
 1 file changed, 133 insertions(+), 4 deletions(-)

diff --git a/src/pages/15_dash-board/MainPage.vue b/src/pages/15_dash-board/MainPage.vue
index bd02a8aa..0a82c3a7 100644
--- a/src/pages/15_dash-board/MainPage.vue
+++ b/src/pages/15_dash-board/MainPage.vue
@@ -1,20 +1,149 @@
 <script lang="ts" setup>
 // NOTE: Library
-import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, reactive } 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';
 
 // NOTE: Stores & Type
 import { useNavigator } from 'src/stores/navigator';
 
 // NOTE: Variable
-
 const navigatorStore = useNavigator();
 
+const state = reactive({
+  role: 'admin',
+  year: 'now',
+});
+
+// NOTE: mock
+const option = reactive({
+  role: [
+    { label: 'ผู้ดูแล', value: 'admin' },
+    { label: 'ผู้ใช้', value: 'user' },
+  ],
+  year: [
+    { label: 'ปีนี้', value: 'now' },
+    { label: '2024', value: '2024' },
+  ],
+});
+
 onMounted(async () => {
-  navigatorStore.current.title = 'report.title';
+  navigatorStore.current.title = 'dashboard.title';
   navigatorStore.current.path = [{ text: '' }];
 });
 </script>
-<template></template>
+<template>
+  <div class="column full-height no-wrap">
+    <header class="row q-gutter-sm">
+      <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"
+      >
+        <template #prepend>
+          <q-icon name="mdi-calendar-outline app-text-muted" />
+        </template>
+      </SelectInput>
+
+      <div class="col-12 scroll">
+        <div style="display: inline-block">
+          <StatCardComponent
+            :dark="$q.dark.isActive"
+            text-size="10px"
+            :branch="[
+              {
+                icon: 'mdi-account-outline',
+                count: 0,
+                label: $t('dashboard.newComer'),
+                color: 'pink',
+              },
+              {
+                icon: 'material-symbols-light:receipt-long',
+                count: 0,
+                label: $t('dashboard.openQuotation'),
+                color: 'cyan',
+              },
+              {
+                icon: 'si:wallet-detailed-line',
+                count: 0,
+                label: $t('dashboard.paidSales'),
+                color: 'light-yellow',
+              },
+              {
+                icon: 'fluent:money-hand-24-regular',
+                count: 0,
+                label: $t('dashboard.pendingSales'),
+                color: 'light-purple',
+              },
+            ]"
+          />
+        </div>
+      </div>
+    </header>
+
+    <section class="col q-mt-md">
+      <div class="full-height scroll">
+        <article class="row q-col-gutter-sm">
+          <div class="col-md-8 col-12">
+            <ChartReceipt
+              class="full-height"
+              :summary="[45, 30, 10, 5]"
+              :series="[
+                {
+                  name: $t('dashboard.receipt.total'),
+                  data: [45, 78, 92, 34, 67, 89, 120, 150, 180, 200, 50],
+                },
+                {
+                  name: $t('dashboard.receipt.paid'),
+                  data: [30, 50, 70, 20, 40, 65, 80, 130, 160, 190, 210],
+                },
+                {
+                  name: $t('dashboard.receipt.pending'),
+                  data: [10, 25, 45, 30, 50, 60, 75, 95, 110, 130, 150],
+                },
+                {
+                  name: $t('dashboard.receipt.cancel'),
+                  data: [5, 20, 15, 25, 35, 40, 55, 70, 85, 100, 300],
+                },
+              ]"
+            />
+          </div>
+          <div class="col-md-4 col-12">
+            <ChartOpportunity
+              class="full-height"
+              :labels="['1', '2', '3', '4', '5', '6', '7', '8']"
+              :series="[581, 389, 609, 581, 603, 600, 699, 347]"
+            />
+          </div>
+          <div class="col-md-4 col-12">
+            <ChartQuotationStatus
+              class="full-height"
+              :labels="[
+                $t('dashboard.quotation.waitCustomer'),
+                $t('dashboard.quotation.inProgress'),
+                $t('dashboard.quotation.complete'),
+                $t('dashboard.quotation.cancel'),
+              ]"
+              :series="[{ data: [1, 2, 3, 4] }]"
+            />
+          </div>
+          <div class="col-md-8 col-12">
+            <ChartSales class="full-height" />
+          </div>
+        </article>
+      </div>
+    </section>
+  </div>
+</template>
 <style scoped></style>

From 9a196b7077b886caf66000da47b03c18b4162dc0 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 5 Mar 2025 16:00:14 +0700
Subject: [PATCH 5/8] feat: integrate quotation statistics into dashboard and
 adjust layout for responsiveness

---
 src/pages/15_dash-board/MainPage.vue | 34 ++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/pages/15_dash-board/MainPage.vue b/src/pages/15_dash-board/MainPage.vue
index 0a82c3a7..58ca2bd4 100644
--- a/src/pages/15_dash-board/MainPage.vue
+++ b/src/pages/15_dash-board/MainPage.vue
@@ -12,9 +12,13 @@ import ChartSales from './chart/ChartSales.vue';
 
 // NOTE: Stores & Type
 import { useNavigator } from 'src/stores/navigator';
+import { useQuotationStore } from 'src/stores/quotations';
+import { storeToRefs } from 'pinia';
 
 // NOTE: Variable
 const navigatorStore = useNavigator();
+const quotationStore = useQuotationStore();
+const { stats: quotationStats } = storeToRefs(quotationStore);
 
 const state = reactive({
   role: 'admin',
@@ -36,6 +40,12 @@ const option = reactive({
 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);
+  }
 });
 </script>
 <template>
@@ -95,7 +105,7 @@ onMounted(async () => {
     <section class="col q-mt-md">
       <div class="full-height scroll">
         <article class="row q-col-gutter-sm">
-          <div class="col-md-8 col-12">
+          <div class="col-sm-8 col-12">
             <ChartReceipt
               class="full-height"
               :summary="[45, 30, 10, 5]"
@@ -119,15 +129,16 @@ onMounted(async () => {
               ]"
             />
           </div>
-          <div class="col-md-4 col-12">
+          <div class="col-sm-4 col-12">
             <ChartOpportunity
               class="full-height"
               :labels="['1', '2', '3', '4', '5', '6', '7', '8']"
               :series="[581, 389, 609, 581, 603, 600, 699, 347]"
             />
           </div>
-          <div class="col-md-4 col-12">
+          <div class="col-sm-4 col-12">
             <ChartQuotationStatus
+              v-if="quotationStats"
               class="full-height"
               :labels="[
                 $t('dashboard.quotation.waitCustomer'),
@@ -135,10 +146,23 @@ onMounted(async () => {
                 $t('dashboard.quotation.complete'),
                 $t('dashboard.quotation.cancel'),
               ]"
-              :series="[{ data: [1, 2, 3, 4] }]"
+              :series="[
+                {
+                  data: true
+                    ? []
+                    : [
+                        quotationStats.issued || 0,
+                        quotationStats.accepted +
+                          quotationStats.paymentInProcess +
+                          quotationStats.paymentSuccess || 1,
+                        quotationStats.processComplete || 1,
+                        quotationStats.canceled || 1,
+                      ],
+                },
+              ]"
             />
           </div>
-          <div class="col-md-8 col-12">
+          <div class="col-sm-8 col-12">
             <ChartSales class="full-height" />
           </div>
         </article>

From 58b5613d2ca4334a753fc4eec9dead8616a2666a Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 5 Mar 2025 16:32:41 +0700
Subject: [PATCH 6/8] feat: dashboard data bind api

---
 .../08_request-list/DataDisplay.vue           |  5 +-
 src/i18n/tha.ts                               |  2 +-
 src/pages/15_dash-board/MainPage.vue          | 98 +++++++++++++------
 .../15_dash-board/chart/ChartReceipt.vue      | 28 +-----
 src/stores/report/index.ts                    | 19 +++-
 src/stores/report/types.ts                    |  7 ++
 6 files changed, 100 insertions(+), 59 deletions(-)

diff --git a/src/components/08_request-list/DataDisplay.vue b/src/components/08_request-list/DataDisplay.vue
index a969b865..b344a5bb 100644
--- a/src/components/08_request-list/DataDisplay.vue
+++ b/src/components/08_request-list/DataDisplay.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
+import { formatNumberDecimal } from 'src/stores/utils';
 
-defineEmits<{ (e: 'labelClick', value: string, index: number): void }>();
+defineEmits<{ (e: 'labelClick', value: string, index: number | null): void }>();
 
 withDefaults(
   defineProps<{
@@ -38,7 +39,7 @@ withDefaults(
             v-if="typeof value === 'string'"
             @click="$emit('labelClick', value, null)"
           >
-            {{ value }}
+            {{ formatNumberDecimal(+value, 2) }}
             <q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
           </span>
           <span v-else :class="{ 'link cursor-pointer': clickable }">
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 8d165a65..1ab24f72 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -1362,7 +1362,7 @@ export default {
       title: 'สรุปยอดใบกำกับภาษี',
       caption: 'ตามจำนวนเงินรวม',
       total: 'ยอดรวมทั้งหมด',
-      paid: 'ชำระไม่ครบและชำระครบ',
+      paid: 'ชำระแล้ว',
       pending: 'รอชำระ',
       cancel: 'ยกเลิก',
     },
diff --git a/src/pages/15_dash-board/MainPage.vue b/src/pages/15_dash-board/MainPage.vue
index 58ca2bd4..e3fc2338 100644
--- a/src/pages/15_dash-board/MainPage.vue
+++ b/src/pages/15_dash-board/MainPage.vue
@@ -14,11 +14,15 @@ import ChartSales from './chart/ChartSales.vue';
 import { useNavigator } from 'src/stores/navigator';
 import { useQuotationStore } from 'src/stores/quotations';
 import { storeToRefs } from 'pinia';
+import { useReportStore } from 'src/stores/report';
+import { PaymentDataStatus } from 'src/stores/payment/types';
 
 // NOTE: Variable
 const navigatorStore = useNavigator();
 const quotationStore = useQuotationStore();
+const reportStore = useReportStore();
 const { stats: quotationStats } = storeToRefs(quotationStore);
+const { dataReportPayment } = storeToRefs(reportStore);
 
 const state = reactive({
   role: 'admin',
@@ -46,6 +50,12 @@ onMounted(async () => {
     quotationStats.value = Object.assign(quotationStats.value, ret);
     console.log(quotationStats.value);
   }
+
+  const retPayment = await reportStore.getReportPayment();
+
+  if (retPayment) {
+    dataReportPayment.value = retPayment;
+  }
 });
 </script>
 <template>
@@ -72,27 +82,32 @@ onMounted(async () => {
             :dark="$q.dark.isActive"
             text-size="10px"
             :branch="[
-              {
-                icon: 'mdi-account-outline',
-                count: 0,
-                label: $t('dashboard.newComer'),
-                color: 'pink',
-              },
               {
                 icon: 'material-symbols-light:receipt-long',
-                count: 0,
+                count:
+                  (quotationStats.issued || 0) +
+                  (quotationStats.accepted || 0) +
+                  (quotationStats.paymentInProcess || 0) +
+                  (quotationStats.paymentSuccess || 0) +
+                  (quotationStats.processComplete || 0) +
+                  (quotationStats.canceled || 0),
                 label: $t('dashboard.openQuotation'),
                 color: 'cyan',
               },
               {
                 icon: 'si:wallet-detailed-line',
-                count: 0,
+                count:
+                  (quotationStats.paymentSuccess || 0) +
+                  (quotationStats.processComplete || 0),
                 label: $t('dashboard.paidSales'),
                 color: 'light-yellow',
               },
               {
                 icon: 'fluent:money-hand-24-regular',
-                count: 0,
+                count:
+                  (quotationStats.issued || 0) +
+                  (quotationStats.accepted || 0) +
+                  (quotationStats.paymentInProcess || 0),
                 label: $t('dashboard.pendingSales'),
                 color: 'light-purple',
               },
@@ -108,34 +123,57 @@ onMounted(async () => {
           <div class="col-sm-8 col-12">
             <ChartReceipt
               class="full-height"
-              :summary="[45, 30, 10, 5]"
+              :summary="[
+                dataReportPayment.reduce(
+                  (a, c) =>
+                    a +
+                    (c.data[PaymentDataStatus.Success] || 0) +
+                    (c.data[PaymentDataStatus.Wait] || 0),
+                  0,
+                ),
+                dataReportPayment.reduce(
+                  (a, c) => a + (c.data[PaymentDataStatus.Success] || 0),
+                  0,
+                ),
+                dataReportPayment.reduce(
+                  (a, c) => a + (c.data[PaymentDataStatus.Wait] || 0),
+                  0,
+                ),
+              ]"
+              :categories="
+                dataReportPayment.map((v) => v.month + ' / ' + v.year)
+              "
               :series="[
                 {
                   name: $t('dashboard.receipt.total'),
-                  data: [45, 78, 92, 34, 67, 89, 120, 150, 180, 200, 50],
+                  data: dataReportPayment.map(
+                    (v) =>
+                      (v.data[PaymentDataStatus.Success] || 0) +
+                      (v.data[PaymentDataStatus.Wait] || 0),
+                  ),
                 },
                 {
                   name: $t('dashboard.receipt.paid'),
-                  data: [30, 50, 70, 20, 40, 65, 80, 130, 160, 190, 210],
+                  data: dataReportPayment.map(
+                    (v) => v.data[PaymentDataStatus.Success] || 0,
+                  ),
                 },
                 {
                   name: $t('dashboard.receipt.pending'),
-                  data: [10, 25, 45, 30, 50, 60, 75, 95, 110, 130, 150],
-                },
-                {
-                  name: $t('dashboard.receipt.cancel'),
-                  data: [5, 20, 15, 25, 35, 40, 55, 70, 85, 100, 300],
+                  data: dataReportPayment.map(
+                    (v) => v.data[PaymentDataStatus.Wait] || 0,
+                  ),
                 },
               ]"
             />
           </div>
-          <div class="col-sm-4 col-12">
+          <!-- <div class="col-sm-4 col-12">
             <ChartOpportunity
               class="full-height"
               :labels="['1', '2', '3', '4', '5', '6', '7', '8']"
               :series="[581, 389, 609, 581, 603, 600, 699, 347]"
             />
-          </div>
+          </div> -->
           <div class="col-sm-4 col-12">
             <ChartQuotationStatus
               v-if="quotationStats"
@@ -148,23 +186,21 @@ onMounted(async () => {
               ]"
               :series="[
                 {
-                  data: true
-                    ? []
-                    : [
-                        quotationStats.issued || 0,
-                        quotationStats.accepted +
-                          quotationStats.paymentInProcess +
-                          quotationStats.paymentSuccess || 1,
-                        quotationStats.processComplete || 1,
-                        quotationStats.canceled || 1,
-                      ],
+                  data: [
+                    (quotationStats.issued || 0) +
+                      (quotationStats.accepted || 0),
+                    (quotationStats.paymentInProcess || 0) +
+                      (quotationStats.paymentSuccess || 0),
+                    quotationStats.processComplete || 0,
+                    quotationStats.canceled || 0,
+                  ],
                 },
               ]"
             />
           </div>
-          <div class="col-sm-8 col-12">
+          <!-- <div class="col-sm-8 col-12">
             <ChartSales class="full-height" />
-          </div>
+          </div> -->
         </article>
       </div>
     </section>
diff --git a/src/pages/15_dash-board/chart/ChartReceipt.vue b/src/pages/15_dash-board/chart/ChartReceipt.vue
index b48db65a..8b470064 100644
--- a/src/pages/15_dash-board/chart/ChartReceipt.vue
+++ b/src/pages/15_dash-board/chart/ChartReceipt.vue
@@ -6,19 +6,20 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 const { locale } = useI18n({ useScope: 'global' });
 
-withDefaults(
+const prop = withDefaults(
   defineProps<{
     series: { name: string; data: number[] }[];
     summary: number[];
+    categories: string[];
   }>(),
   {
     series: () => [
       { name: 'series-1', data: [0, 0] },
       { name: 'series-2', data: [1, 1] },
       { name: 'series-3', data: [2, 2] },
-      { name: 'series-4', data: [3, 3] },
     ],
     summary: () => [0, 0, 0, 0],
+    categories: () => ['Jan', 'Feb', 'Mar'],
   },
 );
 const chartOptions = computed(() => {
@@ -50,23 +51,7 @@ const chartOptions = computed(() => {
       position: 'right',
     },
     xaxis: {
-      categories:
-        locale.value === 'tha'
-          ? thaiMonths
-          : [
-              'Jan',
-              'Feb',
-              'Mar',
-              'Apr',
-              'May',
-              'Jun',
-              'Jul',
-              'Aug',
-              'Sep',
-              'Oct',
-              'Nov',
-              'Dec',
-            ],
+      categories: prop.categories,
     },
   };
 });
@@ -87,11 +72,6 @@ const detail = [
     color: 'var(--orange-4)',
     icon: 'material-symbols-light:credit-card-outline',
   },
-  {
-    label: 'cancel',
-    color: 'var(--pink-7)',
-    icon: 'hugeicons:wallet-remove-02',
-  },
 ];
 </script>
 <template>
diff --git a/src/stores/report/index.ts b/src/stores/report/index.ts
index 0f0ab14f..7686236c 100644
--- a/src/stores/report/index.ts
+++ b/src/stores/report/index.ts
@@ -2,7 +2,13 @@ import { ref } from 'vue';
 import { defineStore } from 'pinia';
 import { Pagination, Status } from '../types';
 import { api } from 'src/boot/axios';
-import { Report, ReportProduct, ReportQuotation, ReportSale } from './types';
+import {
+  Report,
+  ReportPayment,
+  ReportProduct,
+  ReportQuotation,
+  ReportSale,
+} from './types';
 
 const ENDPOINT = 'report';
 
@@ -48,12 +54,21 @@ export async function getReportProduct() {
   return null;
 }
 
+export async function getReportPayment() {
+  const res = await api.get<ReportPayment[]>(`/${ENDPOINT}/payment`);
+  if (res.status < 400) {
+    return res.data;
+  }
+  return null;
+}
+
 export const useReportStore = defineStore('report-store', () => {
   const dataReportQuotation = ref<ReportQuotation[]>([]);
   const dataReportInvoice = ref<Report[]>([]);
   const dataReportReceipt = ref<Report[]>([]);
   const dataReportSale = ref<ReportSale>();
   const dataReportProduct = ref<ReportProduct[]>([]);
+  const dataReportPayment = ref<ReportPayment[]>([]);
 
   return {
     dataReportQuotation,
@@ -61,11 +76,13 @@ export const useReportStore = defineStore('report-store', () => {
     dataReportReceipt,
     dataReportSale,
     dataReportProduct,
+    dataReportPayment,
 
     getReportQuotation,
     getReportInvoice,
     getReportReceipt,
     getReportSale,
     getReportProduct,
+    getReportPayment,
   };
 });
diff --git a/src/stores/report/types.ts b/src/stores/report/types.ts
index 92215ae3..1f057af2 100644
--- a/src/stores/report/types.ts
+++ b/src/stores/report/types.ts
@@ -2,6 +2,7 @@ import { QuotationStatus } from 'src/stores/quotations/types';
 import { ProductGroup } from '../product-service/types';
 import { User } from '../user';
 import { CustomerBranch } from '../customer';
+import { PaymentDataStatus } from '../payment/types';
 
 export type ReportQuotation = {
   updatedAt: Date | null;
@@ -34,6 +35,12 @@ export type ReportProduct = {
   code: string;
 };
 
+export type ReportPayment = {
+  year: string;
+  month: string;
+  data: Partial<Record<PaymentDataStatus, number>>;
+};
+
 export type ReportSale = {
   byCustomer: (Omit<CustomerBranch, '_count'> & { _count: number })[];
   bySale: (User & { _count: number })[];

From 9e7d67fb6c4e01114d6dc4014a303d92e0056e4d Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 5 Mar 2025 15:41:59 +0700
Subject: [PATCH 7/8] feat: add request cancel badge

---
 src/i18n/eng.ts                                | 1 +
 src/i18n/tha.ts                                | 1 +
 src/pages/08_request-list/TableRequestList.vue | 9 +++++++++
 src/stores/request-list/types.ts               | 5 +++++
 4 files changed, 16 insertions(+)

diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index aa6cedb5..7354505a 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -936,6 +936,7 @@ export default {
       InProgress: 'In Progress',
       Completed: 'Completed',
       Canceled: 'Canceled',
+      CancelRequested: 'Cancel Requested',
 
       AwaitOrder: 'Awaiting Order',
       ReadyOrder: 'Ready for Order',
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 1ab24f72..54b9d96e 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -924,6 +924,7 @@ export default {
       InProgress: 'กำลังดำเนินการ',
       Completed: 'เสร็จสิ้น',
       Canceled: 'ยกเลิก',
+      CancelRequested: 'ต้องการยกเลิก',
 
       AwaitOrder: 'รอสั่งงาน',
       ReadyOrder: 'พร้อมสั่งงาน',
diff --git a/src/pages/08_request-list/TableRequestList.vue b/src/pages/08_request-list/TableRequestList.vue
index 4277204b..22abf9a9 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -183,6 +183,15 @@ function getEmployeeName(
               $t(`requestList.status.${props.row.requestDataStatus}`) || '-'
             "
           />
+          <BadgeComponent
+            v-if="
+              props.row.customerRequestCancel &&
+              props.row.requestDataStatus !== RequestDataStatus.Canceled
+            "
+            :hsla-color="'--red-5-hsl'"
+            class="q-ml-sm"
+            :title="$t(`requestList.status.CancelRequested`) || '-'"
+          />
         </q-td>
         <q-td class="text-right">
           <q-btn
diff --git a/src/stores/request-list/types.ts b/src/stores/request-list/types.ts
index 124a8c99..c17e0ebf 100644
--- a/src/stores/request-list/types.ts
+++ b/src/stores/request-list/types.ts
@@ -9,6 +9,9 @@ export type RequestData = {
   createdAt: string;
   updatedAt: string;
 
+  customerRequestCancel?: boolean;
+  customerRequestCancelReason?: string;
+
   quotation: QuotationFull & {
     debitNoteQuotationId: string;
     isDebitNote: boolean;
@@ -60,6 +63,8 @@ export type RequestWork = {
   attributes?: Attributes;
   creditNoteId?: string;
   processByUserId?: string;
+  customerRequestCancel?: boolean;
+  customerRequestCancelReason?: string;
 };
 
 export type RowDocument = {

From 72985c382f8b68dec2f6fad2a0dafe2db15930bb Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 5 Mar 2025 15:55:18 +0700
Subject: [PATCH 8/8] feat: customer requested cancel indicator

---
 src/i18n/eng.ts                               |  1 +
 src/i18n/tha.ts                               |  1 +
 .../08_request-list/ProductExpansion.vue      | 27 ++++++++++---------
 src/pages/08_request-list/RequestListView.vue |  2 ++
 .../08_request-list/TableRequestList.vue      | 11 +++++++-
 5 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 7354505a..c58c3940 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -113,6 +113,7 @@ export default {
     group: 'Group',
     laborIdentified: 'Labor identified',
     beDue: 'Due in',
+    noReason: 'No reason',
     due: 'Due',
     overDue: 'Overdue',
     status: 'Status',
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 54b9d96e..9f59da2f 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -113,6 +113,7 @@ export default {
     group: 'กลุ่ม',
     laborIdentified: 'ระบุแรงงาน',
     beDue: 'จะครบกำหนดในอีก',
+    noReason: 'ไม่มีเหตุผล',
     due: 'ครบกำหนด',
     overDue: 'เลยกำหนด',
     status: 'สถานะ',
diff --git a/src/pages/08_request-list/ProductExpansion.vue b/src/pages/08_request-list/ProductExpansion.vue
index a84e8cc4..788f4d0c 100644
--- a/src/pages/08_request-list/ProductExpansion.vue
+++ b/src/pages/08_request-list/ProductExpansion.vue
@@ -1,20 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { baseUrl } from 'src/stores/utils';
 
-import BadgeComponent from 'src/components/BadgeComponent.vue';
-
 import { ProductRelation, PayCondition } from 'src/stores/quotations/types';
 import { Step, RequestWorkStatus } from 'src/stores/request-list/types';
-
-const workStatus = ref([
-  RequestWorkStatus.Ready,
-  RequestWorkStatus.Waiting,
-  RequestWorkStatus.InProgress,
-  RequestWorkStatus.Validate,
-  RequestWorkStatus.Ended,
-  RequestWorkStatus.Completed,
-]);
+import BadgeComponent from 'src/components/BadgeComponent.vue';
 
 defineEmits<{
   (
@@ -29,6 +18,8 @@ const props = defineProps<{
   code: string;
   status?: Step;
   imgUrl?: string;
+  requestCancel?: boolean;
+  requestCancelReason?: string;
   installmentInfo?: {
     total: number;
     paid?: number;
@@ -108,6 +99,18 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
           <div class="rounded q-px-xs app-text-muted surface-3">
             {{ product?.code || code }}
           </div>
+          <BadgeComponent
+            v-if="requestCancel && !cancel"
+            :hsla-color="'--red-5-hsl'"
+            class="q-ml-sm"
+            :title="$t(`requestList.status.CancelRequested`) || '-'"
+          >
+            <template #append>
+              <q-tooltip>
+                {{ requestCancelReason || $t('general.noReason') }}
+              </q-tooltip>
+            </template>
+          </BadgeComponent>
         </div>
 
         <div class="q-ml-auto q-gutter-y-xs">
diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index 2f5ee598..eae2002a 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -731,6 +731,8 @@ async function submitRequestAction(data: {
           <!-- product -->
           <template v-for="(value, index) in productsList" :key="value">
             <ProductExpansion
+              :request-cancel="value.customerRequestCancel"
+              :request-cancel-reason="value.customerRequestCancelReason"
               :cancel="data.requestDataStatus === RequestDataStatus.Canceled"
               :readonly="
                 data.requestDataStatus === RequestDataStatus.Canceled ||
diff --git a/src/pages/08_request-list/TableRequestList.vue b/src/pages/08_request-list/TableRequestList.vue
index 22abf9a9..359cf498 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -191,7 +191,16 @@ function getEmployeeName(
             :hsla-color="'--red-5-hsl'"
             class="q-ml-sm"
             :title="$t(`requestList.status.CancelRequested`) || '-'"
-          />
+          >
+            <template #append>
+              <q-tooltip>
+                {{
+                  props.row.customerRequestCancelReason ||
+                  $t('general.noReason')
+                }}
+              </q-tooltip>
+            </template>
+          </BadgeComponent>
         </q-td>
         <q-td class="text-right">
           <q-btn