diff --git a/src/pages/14_report/MainPage.vue b/src/pages/14_report/MainPage.vue
index 7f3a32b7..b8464197 100644
--- a/src/pages/14_report/MainPage.vue
+++ b/src/pages/14_report/MainPage.vue
@@ -1,24 +1,362 @@
 <script lang="ts" setup>
 // NOTE: Library
-import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { computed, onMounted, reactive, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { getRole } from 'src/services/keycloak';
 
 // NOTE:  Components
+import TableReport from './Table/TableReport.vue';
 
 // NOTE: Stores & Type
+import { baseUrl } from 'stores/utils';
+import { hslaColors as colorsQuotation } from 'src/pages/05_quotation/constants';
+import { hslaColors as colorsInvoice } from 'src/pages/10_invoice/constants';
 import { useNavigator } from 'src/stores/navigator';
+import {
+  ViewMode,
+  pageTabs,
+  colReportQuotation,
+  colReport,
+  colReportProduct,
+  colReportSale,
+} from './constants';
+import useFlowStore from 'src/stores/flow';
+import { useReportStore } from 'src/stores/report';
+import BadgeComponent from 'src/components/BadgeComponent.vue';
+import Expansion from 'src/components/14_report/Expansion.vue';
 
 // NOTE: Variable
-
 const navigatorStore = useNavigator();
+const reportStore = useReportStore();
+const flow = useFlowStore();
+
+const {
+  dataReportQuotation,
+  dataReportInvoice,
+  dataReportReceipt,
+  dataReportSale,
+  dataReportProduct,
+} = storeToRefs(reportStore);
+
+const userRoles = computed(() => getRole() || []);
+
+async function fetchReportQuotation() {
+  dataReportQuotation.value = (await reportStore.getReportQuotation()) || [];
+}
+async function fetchReportInvoice() {
+  dataReportInvoice.value = (await reportStore.getReportInvoice()) || [];
+}
+
+async function fetchReportReceipt() {
+  dataReportReceipt.value = (await reportStore.getReportReceipt()) || [];
+}
+async function fetchReportSale() {
+  dataReportSale.value = (await reportStore.getReportSale()) || undefined;
+}
+async function fetchReportProduct() {
+  dataReportProduct.value = (await reportStore.getReportProduct()) || [];
+}
 
 onMounted(async () => {
   navigatorStore.current.title = 'report.title';
   navigatorStore.current.path = [{ text: '' }];
 });
+
+const isAdmin = computed(() => {
+  const roles = userRoles.value;
+
+  return roles.includes('head_of_admin') || roles.includes('head_of_account');
+});
+
+const filteredTabs = computed(() => {
+  return pageTabs.filter((tab) => {
+    if (isAdmin.value) {
+      return !(tab.by.length === 1 && tab.by.includes('user'));
+    } else {
+      return !(tab.by.length === 1 && tab.by.includes('admin'));
+    }
+  });
+});
+
+const pageState = reactive({
+  currentTab: isAdmin.value ? ViewMode.Product : ViewMode.Document,
+});
+
+async function fetchReportTab() {
+  switch (pageState.currentTab) {
+    case ViewMode.Document: {
+      await fetchReportQuotation();
+      await fetchReportInvoice();
+      await fetchReportReceipt();
+      break;
+    }
+    case ViewMode.Invoice: {
+      await fetchReportInvoice();
+      break;
+    }
+    case ViewMode.Product: {
+      await fetchReportProduct();
+      break;
+    }
+    case ViewMode.Sale: {
+      await fetchReportSale();
+      break;
+    }
+  }
+}
+
+onMounted(async () => {
+  await fetchReportTab();
+});
+
+watch([() => pageState.currentTab], async () => {
+  await fetchReportTab();
+});
 </script>
 
 <template>
-  <!-- SEC: body content -->
-  <article class="col surface-2 flex items-center justify-center"></article>
+  <div class="column full-height no-wrap">
+    <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"
+        >
+          <nav class="surface-2 bordered-b q-px-md full-width">
+            <q-tabs
+              inline-label
+              mobile-arrows
+              dense
+              v-model="pageState.currentTab"
+              align="left"
+              class="full-width"
+              active-color="info"
+            >
+              <q-tab
+                v-for="tab in filteredTabs"
+                :name="tab.value"
+                :key="tab.value"
+                @click="
+                  () => {
+                    pageState.currentTab = tab.value;
+                    flow.rotate();
+                  }
+                "
+              >
+                <div
+                  class="row text-capitalize"
+                  :class="
+                    pageState.currentTab === tab.value
+                      ? 'text-bold'
+                      : 'app-text-muted'
+                  "
+                >
+                  {{ $t(`report.view${isAdmin ? '.admin' : ''}.${tab.label}`) }}
+                </div>
+              </q-tab>
+            </q-tabs>
+          </nav>
+        </header>
+
+        <!-- SEC: body content -->
+        <article class="col surface-2 full-width scroll q-pa-md">
+          <!-- #TODO change Table   -->
+          <template v-if="pageState.currentTab === ViewMode.Document">
+            <div class="q-gutter-y-md">
+              <!-- Quotatio -->
+
+              <Expansion default-opened>
+                <template #header>{{ $t('quotation.title') }}</template>
+
+                <template #main>
+                  <TableReport
+                    :row="dataReportQuotation"
+                    :columns="colReportQuotation"
+                  >
+                    <template #status="{ item }">
+                      <BadgeComponent
+                        :title="$t(`quotation.status.${item.row.status}`)"
+                        :hsla-color="colorsQuotation[item.row.status] || ''"
+                      />
+                    </template>
+                  </TableReport>
+                </template>
+              </Expansion>
+
+              <!-- Invoice -->
+              <Expansion default-opened>
+                <template #header>{{ $t('invoice.title') }}</template>
+                <template #main>
+                  <TableReport :row="dataReportInvoice" :columns="colReport">
+                    <template #status="{ item }">
+                      <BadgeComponent
+                        :title="$t(`invoice.status.${item.row.status}`)"
+                        :hsla-color="colorsInvoice[item.row.status] || ''"
+                      />
+                    </template>
+                  </TableReport>
+                </template>
+              </Expansion>
+
+              <!-- Receipt -->
+              <Expansion default-opened>
+                <template #header>{{ $t('receipt.title') }}</template>
+                <template #main>
+                  <TableReport :row="dataReportReceipt" :columns="colReport">
+                    <template #status="{ item }">
+                      <BadgeComponent
+                        :title="$t(`invoice.status.${item.row.status}`)"
+                        :hsla-color="colorsInvoice[item.row.status] || ''"
+                      />
+                    </template>
+                  </TableReport>
+                </template>
+              </Expansion>
+            </div>
+          </template>
+
+          <template v-if="pageState.currentTab === ViewMode.Invoice">
+            <Expansion default-opened>
+              <template #header>{{ $t('invoice.title') }}</template>
+              <template #main>
+                <TableReport :row="dataReportInvoice" :columns="colReport">
+                  <template #status="{ item }">
+                    <BadgeComponent
+                      :title="$t(`invoice.status.${item.row.status}`)"
+                      :hsla-color="colorsInvoice[item.row.status] || ''"
+                    />
+                  </template>
+                </TableReport>
+              </template>
+            </Expansion>
+          </template>
+
+          <template v-if="pageState.currentTab === ViewMode.Product">
+            <Expansion default-opened>
+              <template #header>{{ $t('productService.title') }}</template>
+              <template #main>
+                <TableReport
+                  :row="dataReportProduct"
+                  :columns="colReportProduct"
+                />
+              </template>
+            </Expansion>
+          </template>
+          <template v-if="pageState.currentTab === ViewMode.Sale">
+            <div class="q-gutter-y-md">
+              <Expansion default-opened>
+                <template #header>{{ $t('report.sale.byCustomer') }}</template>
+                <template #main>
+                  <TableReport
+                    :row="
+                      dataReportSale?.byCustomer.map((v) => {
+                        return {
+                          code: v.code,
+                          name:
+                            v.customer.customerType === 'CORP'
+                              ? v.customerName
+                              : $i18n.locale === 'eng'
+                                ? `${v.firstNameEN} ${v.lastNameEN}`
+                                : `${v.firstName} ${v.lastName}`,
+
+                          _count: v._count,
+                        };
+                      })
+                    "
+                    :columns="colReportSale"
+                  >
+                    <template #name="{ item }">
+                      {{ item.row.name }}
+                    </template>
+                  </TableReport>
+                </template>
+              </Expansion>
+              <Expansion default-opened>
+                <template #header>
+                  {{ $t('report.sale.byProductGroup') }}
+                </template>
+                <template #main>
+                  <TableReport
+                    :row="
+                      dataReportSale?.byProductGroup.map((v) => {
+                        return {
+                          code: v.code,
+                          name: v.name,
+                          _count: v._count,
+                        };
+                      })
+                    "
+                    :columns="colReportSale"
+                  >
+                    <template #name="{ item }">
+                      {{ item.row.name }}
+                    </template>
+                  </TableReport>
+                </template>
+              </Expansion>
+              <Expansion default-opened>
+                <template #header>{{ $t('report.sale.bySale') }}</template>
+                <template #main>
+                  <TableReport
+                    :row="
+                      dataReportSale?.bySale.map((v) => {
+                        return {
+                          code: v.code,
+                          name:
+                            $i18n.locale === 'eng'
+                              ? `${v.firstNameEN} ${v.lastNameEN}`
+                              : `${v.firstName} ${v.lastName}`,
+                          _count: v._count,
+                          url: v.selectedImage,
+                          id: v.id,
+                          gender: v.gender,
+                        };
+                      })
+                    "
+                    :columns="colReportSale"
+                  >
+                    <template #name="{ item }">
+                      <q-avatar size="md">
+                        <q-img
+                          class="text-center"
+                          :ratio="1"
+                          :src="`${baseUrl}/user/${item.row.id}/profile-image/${item.row.url}?ts=${Date.now()}`"
+                        >
+                          <template #error>
+                            <div
+                              class="no-padding full-width full-height flex items-center justify-center"
+                              :style="`${item.row.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
+                            >
+                              <q-img
+                                v-if="item.row.gender"
+                                :src="
+                                  item.row.gender === 'male'
+                                    ? '/no-img-man.png'
+                                    : '/no-img-female.png'
+                                "
+                              />
+                              <q-icon
+                                v-else
+                                size="sm"
+                                name="mdi-account-outline"
+                                style="color: white"
+                              />
+                            </div>
+                          </template>
+                        </q-img>
+                      </q-avatar>
+
+                      {{ item.row.name }}
+                    </template>
+                  </TableReport>
+                </template>
+              </Expansion>
+            </div>
+          </template>
+        </article>
+      </div>
+    </section>
+  </div>
 </template>
 <style scoped></style>