diff --git a/src/pages/14_report/MainPage.vue b/src/pages/14_report/MainPage.vue
index f980ebec..e53f408e 100644
--- a/src/pages/14_report/MainPage.vue
+++ b/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"
diff --git a/src/stores/report/index.ts b/src/stores/report/index.ts
index 17115d93..0fa216cd 100644
--- a/src/stores/report/index.ts
+++ b/src/stores/report/index.ts
@@ -37,8 +37,13 @@ export async function downloadReportQuotation() {
   );
 }
 
-export async function getReportQuotation() {
-  const res = await api.get<ReportQuotation[]>(`/${ENDPOINT}/quotation`);
+export async function getReportQuotation(params?: {
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
+  const res = await api.get<ReportQuotation[]>(`/${ENDPOINT}/quotation`, {
+    params,
+  });
   if (res.status < 400) {
     res.data;
     return res.data;
@@ -53,8 +58,11 @@ export async function downloadReportInvoice() {
   );
 }
 
-export async function getReportInvoice() {
-  const res = await api.get<Report[]>(`/${ENDPOINT}/invoice`);
+export async function getReportInvoice(params?: {
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
+  const res = await api.get<Report[]>(`/${ENDPOINT}/invoice`, { params });
   if (res.status < 400) {
     return res.data;
   }
@@ -68,8 +76,11 @@ export async function downloadReportReceipt() {
   );
 }
 
-export async function getReportReceipt() {
-  const res = await api.get<Report[]>(`/${ENDPOINT}/receipt`);
+export async function getReportReceipt(params?: {
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
+  const res = await api.get<Report[]>(`/${ENDPOINT}/receipt`, { params });
   if (res.status < 400) {
     return res.data;
   }
@@ -85,8 +96,11 @@ export async function downloadReportSale(
   );
 }
 
-export async function getReportSale() {
-  const res = await api.get<ReportSale>(`/${ENDPOINT}/sale`);
+export async function getReportSale(params?: {
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
+  const res = await api.get<ReportSale>(`/${ENDPOINT}/sale`, { params });
 
   if (res.status < 400) {
     return res.data;
@@ -101,8 +115,13 @@ export async function downloadReportProduct() {
   );
 }
 
-export async function getReportProduct() {
-  const res = await api.get<ReportProduct[]>(`/${ENDPOINT}/product`);
+export async function getReportProduct(params?: {
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
+  const res = await api.get<ReportProduct[]>(`/${ENDPOINT}/product`, {
+    params,
+  });
   if (res.status < 400) {
     return res.data;
   }