feat: dashboard data bind api

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>

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>