feat: implement date range selection for quotation stats and payment report

src/pages/15_dash-board/MainPage.vue

@@ -1,14 +1,15 @@
 <script lang="ts" setup>
 // NOTE: Library
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, watch } from 'vue';
 
 // NOTE:  Components
 import SelectInput from 'src/components/shared/SelectInput.vue';
 import StatCardComponent from 'src/components/StatCardComponent.vue';
 import ChartReceipt from './chart/ChartReceipt.vue';
-import ChartOpportunity from './chart/ChartOpportunity.vue';
 import ChartQuotationStatus from './chart/ChartQuotationStatus.vue';
-import ChartSales from './chart/ChartSales.vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+// import ChartOpportunity from './chart/ChartOpportunity.vue';
+// import ChartSales from './chart/ChartSales.vue';
 
 // NOTE: Stores & Type
 import { useNavigator } from 'src/stores/navigator';
@@ -16,6 +17,7 @@ import { useQuotationStore } from 'src/stores/quotations';
 import { storeToRefs } from 'pinia';
 import { useReportStore } from 'src/stores/report';
 import { PaymentDataStatus } from 'src/stores/payment/types';
+import { dateFormatJS } from 'src/utils/datetime';
 
 // NOTE: Variable
 const navigatorStore = useNavigator();
@@ -24,57 +26,101 @@ const reportStore = useReportStore();
 const { stats: quotationStats } = storeToRefs(quotationStore);
 const { dataReportPayment } = storeToRefs(reportStore);
 
+const endDate = new Date();
+const startDate = new Date(new Date().setFullYear(endDate.getFullYear() - 1));
+
 const state = reactive({
   role: 'admin',
-  year: 'now',
+  date: [startDate, endDate],
 });
 
-// NOTE: mock
-const option = reactive({
-  role: [
-    { label: 'ผู้ดูแล', value: 'admin' },
-    { label: 'ผู้ใช้', value: 'user' },
-  ],
-  year: [
-    { label: 'ปีนี้', value: 'now' },
-    { label: '2024', value: '2024' },
-  ],
-});
+// const option = reactive({
+//   role: [
+//     { label: 'ผู้ดูแล', value: 'admin' },
+//     { label: 'ผู้ใช้', value: 'user' },
+//   ],
+// });
+
+async function fetchData() {
+  const ret = await quotationStore.getQuotationStats({
+    startDate: state.date[0],
+    endDate: state.date[1],
+  });
+  if (ret) {
+    quotationStats.value = {
+      issued: 0,
+      accepted: 0,
+      expired: 0,
+      paymentInProcess: 0,
+      paymentSuccess: 0,
+      processComplete: 0,
+      canceled: 0,
+    };
+    quotationStats.value = Object.assign(quotationStats.value, ret);
+  }
+
+  const retPayment = await reportStore.getReportPayment({
+    startDate: state.date[0],
+    endDate: state.date[1],
+  });
+  if (retPayment) {
+    dataReportPayment.value = retPayment;
+  }
+}
 
 onMounted(async () => {
   navigatorStore.current.title = 'dashboard.title';
   navigatorStore.current.path = [{ text: '' }];
 
-  const ret = await quotationStore.getQuotationStats();
-  if (ret) {
-    quotationStats.value = Object.assign(quotationStats.value, ret);
-    console.log(quotationStats.value);
-  }
-
-  const retPayment = await reportStore.getReportPayment();
-
-  if (retPayment) {
-    dataReportPayment.value = retPayment;
-  }
+  await fetchData();
 });
+
+watch(
+  () => state.date,
+  async () => {
+    await fetchData();
+  },
+);
 </script>
 <template>
   <div class="column full-height no-wrap">
     <header class="row q-gutter-sm">
-      <SelectInput
+      <!-- <SelectInput
         class="col-md-3 col"
         :option="option.role"
         v-model="state.role"
-      ></SelectInput>
-      <SelectInput
-        class="col-md-2 col"
-        :option="option.year"
-        v-model="state.year"
+        for="selecte-role"
+      ></SelectInput> -->
+      <VueDatePicker
+        utc
+        range
+        teleport
+        auto-apply
+        for="select-date-range"
+        class="col-md-4 col"
+        v-model="state.date"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'tha' ? 'th' : 'en'"
       >
-        <template #prepend>
-          <q-icon name="mdi-calendar-outline app-text-muted" />
+        <template #trigger>
+          <q-input
+            placeholder="DD/MM/YYYY"
+            hide-bottom-space
+            dense
+            outlined
+            for="select-date-range"
+            :model-value="
+              dateFormatJS({ date: state.date[0] }) +
+              '  -  ' +
+              dateFormatJS({ date: state.date[1] })
+            "
+          >
+            <template #prepend>
+              <q-icon name="mdi-calendar-outline" class="app-text-muted" />
+            </template>
+          </q-input>
         </template>
-      </SelectInput>
+      </VueDatePicker>
 
       <div class="col-12 scroll">
         <div style="display: inline-block">