refactor: add start date and end date

src/pages/14_report/MainPage.vue

@@ -30,6 +30,7 @@ import BadgeComponent from 'src/components/BadgeComponent.vue';
 import Expansion from 'src/components/14_report/Expansion.vue';
 import { SaveButton } from 'src/components/button';
 import { ReportProfit } from 'src/stores/report/types';
+import { dateFormatJS } from 'src/utils/datetime';
 
 // NOTE: Variable
 const navigatorStore = useNavigator();
@@ -50,6 +51,13 @@ const {
   detaReportDept,
 } = storeToRefs(reportStore);
 
+const endDate = new Date();
+const startDate = new Date(new Date().setFullYear(endDate.getFullYear() - 1));
+
+const state = reactive({
+  date: [startDate, endDate],
+});
+
 const userRoles = computed(() => getRole() || []);
 
 const combinedProfitYear = computed(() => {
@@ -74,24 +82,48 @@ const combinedProfitYear = computed(() => {
 });
 
 async function fetchReportQuotation() {
-  dataReportQuotation.value = (await reportStore.getReportQuotation()) || [];
+  dataReportQuotation.value =
+    (await reportStore.getReportQuotation({
+      startDate: state.date[0],
+      endDate: state.date[1],
+    })) || [];
 }
 async function fetchReportInvoice() {
-  dataReportInvoice.value = (await reportStore.getReportInvoice()) || [];
+  dataReportInvoice.value =
+    (await reportStore.getReportInvoice({
+      startDate: state.date[0],
+      endDate: state.date[1],
+    })) || [];
 }
 
 async function fetchReportReceipt() {
-  dataReportReceipt.value = (await reportStore.getReportReceipt()) || [];
+  dataReportReceipt.value =
+    (await reportStore.getReportReceipt({
+      startDate: state.date[0],
+      endDate: state.date[1],
+    })) || [];
 }
 async function fetchReportSale() {
-  dataReportSale.value = (await reportStore.getReportSale()) || undefined;
+  dataReportSale.value =
+    (await reportStore.getReportSale({
+      startDate: state.date[0],
+      endDate: state.date[1],
+    })) || undefined;
 }
 async function fetchReportProduct() {
-  dataReportProduct.value = (await reportStore.getReportProduct()) || [];
+  dataReportProduct.value =
+    (await reportStore.getReportProduct({
+      startDate: state.date[0],
+      endDate: state.date[1],
+    })) || [];
 }
 
 async function fetchReportProfit() {
-  dataReportProfit.value = (await reportStore.getReportProfit()) || undefined;
+  dataReportProfit.value =
+    (await reportStore.getReportProfit({
+      startDate: state.date[0],
+      endDate: state.date[1],
+    })) || undefined;
   dataReportProfitByYears.value = dataReportProfit.value?.dataset || [];
 }
 
@@ -163,7 +195,7 @@ onMounted(async () => {
   await fetchReportTab();
 });
 
-watch([() => pageState.currentTab], async () => {
+watch([() => pageState.currentTab, () => state.date], async () => {
   await fetchReportTab();
 });
 
@@ -174,9 +206,50 @@ watch([() => pastYears.value], async () => {
 
 <template>
   <div class="column full-height no-wrap">
+    <div class="row q-mb-sm">
+      <VueDatePicker
+        utc
+        range
+        teleport
+        auto-apply
+        for="select-date-range"
+        class="col-md-3 col"
+        v-model="state.date"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'tha' ? 'th' : 'en'"
+      >
+        <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-tooltip>
+              {{
+                dateFormatJS({ date: state.date[0] }) +
+                '  -  ' +
+                dateFormatJS({ date: state.date[1] })
+              }}
+            </q-tooltip>
+          </q-input>
+        </template>
+      </VueDatePicker>
+    </div>
+
     <section class="col surface-1 rounded bordered overflow-hidden">
       <div class="column full-height">
         <!-- SEC: header content -->
+
         <header
           class="row surface-3 justify-between full-width items-center"
           style="z-index: 1"