From ef81a93690ea867af64e0ec15cd63b5e13a9674e Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 30 Jan 2025 10:10:15 +0700
Subject: [PATCH] refactor: 03 => screen.xs fetch scroll

---
 src/pages/03_customer-management/MainPage.vue | 1056 +++++++++--------
 src/pages/07_agencies-management/MainPage.vue |   22 +-
 2 files changed, 565 insertions(+), 513 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 54f1c77f..c8b8b9dc 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -84,7 +84,6 @@ import { DialogContainer, DialogHeader } from 'components/dialog';
 import KebabAction from 'src/components/shared/KebabAction.vue';
 import { nextTick } from 'vue';
 import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
-import { group } from 'node:console';
 import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 import { AddButton } from 'components/button';
 
@@ -224,10 +223,12 @@ watch(
     if (tabName === 'employer') {
       currentPageCustomer.value = 1;
       currentBtnOpen.value = [];
+      listCustomer.value = [];
       await fetchListCustomer(true);
     }
     if (tabName === 'employee') {
       currentPageEmployee.value = 1;
+      listEmployee.value = [];
       await fetchListEmployee({ fetchStats: true });
     }
 
@@ -383,8 +384,8 @@ async function fetchListCustomer(fetchStats = false) {
     customerType: (
       {
         all: undefined,
-        customerLegalEntity: 'CORP',
-        customerNaturalPerson: 'PERS',
+        customerLegalEntity: CustomerType.Corporate,
+        customerNaturalPerson: CustomerType.Person,
       } as const
     )[customerTypeSelected.value.value],
   });
@@ -392,7 +393,9 @@ async function fetchListCustomer(fetchStats = false) {
   if (resultList) {
     currentPageCustomer.value = resultList.page;
     maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
-    listCustomer.value = resultList.result;
+    $q.screen.xs
+      ? listCustomer.value.push(...resultList.result)
+      : (listCustomer.value = resultList.result);
   }
 
   if (fetchStats) {
@@ -426,7 +429,9 @@ async function fetchListEmployee(opt?: {
     maxPageEmployee.value = Math.ceil(
       resultListEmployee.total / pageSize.value,
     );
-    listEmployee.value = resultListEmployee.result;
+    $q.screen.xs
+      ? listEmployee.value.push(...resultListEmployee.result)
+      : (listEmployee.value = resultListEmployee.result);
   }
 
   if (opt && opt.fetchStats)
@@ -1098,7 +1103,7 @@ const emptyCreateDialog = ref(false);
             class="q-px-md row q-gutter-x-sm items-center"
           >
             <nav
-              class="col rounded q-pa-sm text-center app-text-muted"
+              class="col rounded q-pa-sm text-center app-text-muted text-caption"
               :class="{
                 'active-tab-sm': customerTypeSelected.value === v,
                 'bordered surface-1': customerTypeSelected.value !== v,
@@ -1198,155 +1203,161 @@ const emptyCreateDialog = ref(false);
                   <NoData :not-found="!!inputSearch" />
                 </div>
 
-                <div
+                <article
                   v-if="listCustomer.length !== 0"
                   class="col q-pa-md scroll full-width"
                 >
-                  <q-table
-                    flat
-                    bordered
-                    :grid="gridView"
-                    :rows="listCustomer"
-                    :columns="columnsCustomer"
-                    class="full-width"
-                    card-container-class="q-col-gutter-md"
-                    row-key="name"
-                    :rows-per-page-options="[0]"
-                    hide-pagination
-                    :visible-columns="fieldSelected"
+                  <q-infinite-scroll
+                    :offset="100"
+                    @load="
+                      (_, done) => {
+                        if (
+                          $q.screen.gt.xs ||
+                          currentPageCustomer === maxPageCustomer
+                        )
+                          return;
+                        currentPageCustomer = currentPageCustomer + 1;
+                        fetchListCustomer().then(() =>
+                          done(currentPageCustomer >= maxPageCustomer),
+                        );
+                      }
+                    "
                   >
-                    <template v-slot:header="props">
-                      <q-tr
-                        style="background-color: hsla(var(--info-bg) / 0.07)"
-                        :props="props"
-                      >
-                        <q-th
-                          v-for="col in props.cols"
-                          :key="col.name"
+                    <q-table
+                      flat
+                      bordered
+                      :grid="gridView"
+                      :rows="listCustomer"
+                      :columns="columnsCustomer"
+                      class="full-width"
+                      card-container-class="q-col-gutter-md"
+                      row-key="name"
+                      :rows-per-page-options="[0]"
+                      hide-pagination
+                      :visible-columns="fieldSelected"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr
+                          style="background-color: hsla(var(--info-bg) / 0.07)"
                           :props="props"
                         >
-                          {{ $t(col.label) }}
-                        </q-th>
-                        <q-th auto-width />
-                      </q-tr>
-                    </template>
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            {{ $t(col.label) }}
+                          </q-th>
+                          <q-th auto-width />
+                        </q-tr>
+                      </template>
 
-                    <template v-slot:body="props">
-                      <q-tr
-                        :class="{
-                          'app-text-muted': props.row.status === 'INACTIVE',
-                          'status-active': props.row.status !== 'INACTIVE',
-                          'status-inactive': props.row.status === 'INACTIVE',
-                        }"
-                        :id="`row-table-${props.row.id}`"
-                        :props="props"
-                        @click="
-                          $router.push(
-                            `/customer-management/${props.row.id}/branch`,
-                          )
-                        "
-                        :style="
-                          props.rowIndex % 2 !== 0
-                            ? $q.dark.isActive
-                              ? 'background: hsl(var(--gray-11-hsl)/0.2)'
-                              : `background: #f9fafc`
-                            : ''
-                        "
-                      >
-                        <q-td
-                          class="text-center"
-                          v-if="fieldSelected.includes('orderNumber')"
+                      <template v-slot:body="props">
+                        <q-tr
+                          :class="{
+                            'app-text-muted': props.row.status === 'INACTIVE',
+                            'status-active': props.row.status !== 'INACTIVE',
+                            'status-inactive': props.row.status === 'INACTIVE',
+                          }"
+                          :id="`row-table-${props.row.id}`"
+                          :props="props"
+                          @click="
+                            $router.push(
+                              `/customer-management/${props.row.id}/branch`,
+                            )
+                          "
+                          :style="
+                            props.rowIndex % 2 !== 0
+                              ? $q.dark.isActive
+                                ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                                : `background: #f9fafc`
+                              : ''
+                          "
                         >
-                          {{
-                            (currentPageCustomer - 1) * pageSize +
-                            props.rowIndex +
-                            1
-                          }}
-                        </q-td>
+                          <q-td
+                            class="text-center"
+                            v-if="fieldSelected.includes('orderNumber')"
+                          >
+                            {{
+                              (currentPageCustomer - 1) * pageSize +
+                              props.rowIndex +
+                              1
+                            }}
+                          </q-td>
 
-                        <q-td
-                          v-if="fieldSelected.includes('titleName')"
-                          class="ellipsis"
-                        >
-                          <div class="row items-center no-wrap">
-                            <div
-                              class="q-mr-sm"
-                              style="
-                                display: flex;
-                                margin-bottom: var(--size-2);
-                              "
-                            >
+                          <q-td
+                            v-if="fieldSelected.includes('titleName')"
+                            class="ellipsis"
+                          >
+                            <div class="row items-center no-wrap">
                               <div
-                                :style="`
+                                class="q-mr-sm"
+                                style="
+                                  display: flex;
+                                  margin-bottom: var(--size-2);
+                                "
+                              >
+                                <div
+                                  :style="`
                                   border-radius: 50%;
                                   border-style: solid;
                                   border-width: 2px;
                                   border-color: hsl(var(${props.row.customerType === 'CORP' ? '--violet-11-hsl' : '--teal-10-hsl'}));
                                 `"
-                              >
-                                <div class="branch-card__icon">
-                                  <q-avatar size="md">
-                                    <q-img
-                                      :src="`${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`"
-                                      class="full-height full-width"
-                                    >
-                                      <template #error>
-                                        <q-img
-                                          :src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
-                                        />
-                                      </template>
-                                    </q-img>
-                                  </q-avatar>
+                                >
+                                  <div class="branch-card__icon">
+                                    <q-avatar size="md">
+                                      <q-img
+                                        :src="`${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`"
+                                        class="full-height full-width"
+                                      >
+                                        <template #error>
+                                          <q-img
+                                            :src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
+                                          />
+                                        </template>
+                                      </q-img>
+                                    </q-avatar>
+                                  </div>
+                                </div>
+                              </div>
+                              <div class="col">
+                                <div class="col">
+                                  {{
+                                    props.row.customerType === 'CORP'
+                                      ? props.row.branch[0]?.registerName || '-'
+                                      : optionStore.mapOption(
+                                          props.row.branch[0].namePrefix,
+                                        ) +
+                                          ' ' +
+                                          props.row.branch[0]?.firstName +
+                                          ' ' +
+                                          props.row.branch[0]?.lastName || '-'
+                                  }}
+                                </div>
+                                <div class="col app-text-muted">
+                                  {{
+                                    props.row.customerType === 'CORP'
+                                      ? props.row.branch[0]?.registerNameEN ||
+                                        '-'
+                                      : capitalizeFirstLetter(
+                                          props.row.branch[0].namePrefix,
+                                        ) +
+                                          ' ' +
+                                          props.row.branch[0]?.firstNameEN +
+                                          ' ' +
+                                          props.row.branch[0]?.lastNameEN || '-'
+                                  }}
                                 </div>
                               </div>
                             </div>
-                            <div class="col">
-                              <div class="col">
-                                {{
-                                  props.row.customerType === 'CORP'
-                                    ? props.row.branch[0]?.registerName || '-'
-                                    : optionStore.mapOption(
-                                        props.row.branch[0].namePrefix,
-                                      ) +
-                                        ' ' +
-                                        props.row.branch[0]?.firstName +
-                                        ' ' +
-                                        props.row.branch[0]?.lastName || '-'
-                                }}
-                              </div>
-                              <div class="col app-text-muted">
-                                {{
-                                  props.row.customerType === 'CORP'
-                                    ? props.row.branch[0]?.registerNameEN || '-'
-                                    : capitalizeFirstLetter(
-                                        props.row.branch[0].namePrefix,
-                                      ) +
-                                        ' ' +
-                                        props.row.branch[0]?.firstNameEN +
-                                        ' ' +
-                                        props.row.branch[0]?.lastNameEN || '-'
-                                }}
-                              </div>
-                            </div>
-                          </div>
-                        </q-td>
+                          </q-td>
 
-                        <q-td
-                          v-if="fieldSelected.includes('businessTypePure')"
-                          style="max-width: 150px"
-                          class="ellipsis"
-                        >
-                          {{
-                            props.row.branch.length !== 0
-                              ? props.row.branch[0].businessType !== null
-                                ? optionStore.mapOption(
-                                    props.row.branch[0].businessType,
-                                  )
-                                : ''
-                              : '-'
-                          }}
-
-                          <q-tooltip>
+                          <q-td
+                            v-if="fieldSelected.includes('businessTypePure')"
+                            style="max-width: 150px"
+                            class="ellipsis"
+                          >
                             {{
                               props.row.branch.length !== 0
                                 ? props.row.branch[0].businessType !== null
@@ -1356,25 +1367,25 @@ const emptyCreateDialog = ref(false);
                                   : ''
                                 : '-'
                             }}
-                          </q-tooltip>
-                        </q-td>
 
-                        <q-td
-                          v-if="fieldSelected.includes('jobPosition')"
-                          style="max-width: 150px"
-                          class="ellipsis"
-                        >
-                          {{
-                            props.row.branch.length !== 0
-                              ? props.row.branch[0].jobPosition !== null
-                                ? optionStore.mapOption(
-                                    props.row.branch[0].jobPosition,
-                                  )
-                                : ''
-                              : '-'
-                          }}
+                            <q-tooltip>
+                              {{
+                                props.row.branch.length !== 0
+                                  ? props.row.branch[0].businessType !== null
+                                    ? optionStore.mapOption(
+                                        props.row.branch[0].businessType,
+                                      )
+                                    : ''
+                                  : '-'
+                              }}
+                            </q-tooltip>
+                          </q-td>
 
-                          <q-tooltip>
+                          <q-td
+                            v-if="fieldSelected.includes('jobPosition')"
+                            style="max-width: 150px"
+                            class="ellipsis"
+                          >
                             {{
                               props.row.branch.length !== 0
                                 ? props.row.branch[0].jobPosition !== null
@@ -1384,27 +1395,21 @@ const emptyCreateDialog = ref(false);
                                   : ''
                                 : '-'
                             }}
-                          </q-tooltip>
-                        </q-td>
 
-                        <q-td v-if="fieldSelected.includes('address')">
-                          {{
-                            formatAddress({
-                              address: props.row.branch[0].address,
-                              addressEN: props.row.branch[0].addressEN,
-                              moo: props.row.branch[0].moo,
-                              mooEN: props.row.branch[0].mooEN,
-                              soi: props.row.branch[0].soi,
-                              soiEN: props.row.branch[0].soiEN,
-                              street: props.row.branch[0].street,
-                              streetEN: props.row.branch[0].streetEN,
-                              province: props.row.branch[0].province,
-                              district: props.row.branch[0].district,
-                              subDistrict: props.row.branch[0].subDistrict,
-                              en: $i18n.locale === 'eng',
-                            })
-                          }}
-                          <q-tooltip>
+                            <q-tooltip>
+                              {{
+                                props.row.branch.length !== 0
+                                  ? props.row.branch[0].jobPosition !== null
+                                    ? optionStore.mapOption(
+                                        props.row.branch[0].jobPosition,
+                                      )
+                                    : ''
+                                  : '-'
+                              }}
+                            </q-tooltip>
+                          </q-td>
+
+                          <q-td v-if="fieldSelected.includes('address')">
                             {{
                               formatAddress({
                                 address: props.row.branch[0].address,
@@ -1421,288 +1426,90 @@ const emptyCreateDialog = ref(false);
                                 en: $i18n.locale === 'eng',
                               })
                             }}
-                          </q-tooltip>
-                        </q-td>
+                            <q-tooltip>
+                              {{
+                                formatAddress({
+                                  address: props.row.branch[0].address,
+                                  addressEN: props.row.branch[0].addressEN,
+                                  moo: props.row.branch[0].moo,
+                                  mooEN: props.row.branch[0].mooEN,
+                                  soi: props.row.branch[0].soi,
+                                  soiEN: props.row.branch[0].soiEN,
+                                  street: props.row.branch[0].street,
+                                  streetEN: props.row.branch[0].streetEN,
+                                  province: props.row.branch[0].province,
+                                  district: props.row.branch[0].district,
+                                  subDistrict: props.row.branch[0].subDistrict,
+                                  en: $i18n.locale === 'eng',
+                                })
+                              }}
+                            </q-tooltip>
+                          </q-td>
 
-                        <q-td v-if="fieldSelected.includes('contactName')">
-                          {{ props.row.branch[0]?.contactName || '-' }}
-                        </q-td>
+                          <q-td v-if="fieldSelected.includes('contactName')">
+                            {{ props.row.branch[0]?.contactName || '-' }}
+                          </q-td>
 
-                        <q-td v-if="fieldSelected.includes('officeTel')">
-                          {{ props.row.branch[0]?.officeTel || '-' }}
-                        </q-td>
+                          <q-td v-if="fieldSelected.includes('officeTel')">
+                            {{ props.row.branch[0]?.officeTel || '-' }}
+                          </q-td>
 
-                        <q-td>
-                          <q-btn
-                            :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
-                            dense
-                            flat
-                            @click.stop="
-                              async () => {
-                                if (!currentBtnOpen[props.rowIndex]) {
-                                  customerFormState.currentCustomerId =
-                                    props.row.id;
+                          <q-td>
+                            <q-btn
+                              :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
+                              dense
+                              flat
+                              @click.stop="
+                                async () => {
+                                  if (!currentBtnOpen[props.rowIndex]) {
+                                    customerFormState.currentCustomerId =
+                                      props.row.id;
 
-                                  await fetchListEmployee({
-                                    customerId: props.row.id,
-                                    page: 1,
-                                    pageSize: 9999,
-                                  });
+                                    await fetchListEmployee({
+                                      customerId: props.row.id,
+                                      page: 1,
+                                      pageSize: 9999,
+                                    });
 
-                                  currentBtnOpen.map((v, i) => {
-                                    if (i !== props.rowIndex) {
-                                      currentBtnOpen[i] = false;
-                                    }
-                                  });
+                                    currentBtnOpen.map((v, i) => {
+                                      if (i !== props.rowIndex) {
+                                        currentBtnOpen[i] = false;
+                                      }
+                                    });
+                                  }
+                                  currentBtnOpen[props.rowIndex] =
+                                    !currentBtnOpen[props.rowIndex];
                                 }
-                                currentBtnOpen[props.rowIndex] =
-                                  !currentBtnOpen[props.rowIndex];
-                              }
-                            "
-                          >
-                            <div class="row items-center">
-                              <q-icon name="mdi-account-group-outline" />
-                              <q-icon
-                                class="btn-arrow-right"
-                                :class="{
-                                  active: currentBtnOpen[props.rowIndex],
-                                }"
-                                size="xs"
-                                name="mdi-chevron-right"
-                              />
-                            </div>
-                          </q-btn>
-                          <q-btn
-                            icon="mdi-eye-outline"
-                            :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
-                            size="sm"
-                            dense
-                            round
-                            flat
-                            @click.stop="editCustomerForm(props.row.id)"
-                          />
-
-                          <KebabAction
-                            :id-name="
-                              props.row.branch[0].customerName ||
-                              props.row.branch[0].firstName
-                            "
-                            :status="props.row.status"
-                            @view="
-                              () => {
-                                const { branch, ...payload } = props.row;
-                                currentCustomer = payload;
-                                editCustomerForm(props.row.id);
-                              }
-                            "
-                            @edit="
-                              async () => {
-                                await editCustomerForm(props.row.id);
-                                customerFormState.branchIndex = 0;
-                              }
-                            "
-                            @delete="deleteCustomerById(props.row.id)"
-                            @change-status="
-                              async () => {
-                                triggerChangeStatus(
-                                  props.row.id,
-                                  props.row.status,
-                                );
-                              }
-                            "
-                          />
-                        </q-td>
-                      </q-tr>
-
-                      <q-tr
-                        v-show="currentBtnOpen[props.rowIndex]"
-                        :props="props"
-                      >
-                        <q-td colspan="100%" style="padding: 16px">
-                          <div class="text-center">
-                            <TableEmpoloyee
-                              in-table
-                              :list-employee="listEmployee"
-                              :columns-employee="columnsEmployee"
-                              @history="
-                                (item: any) => {
-                                  openHistory(item.id);
-                                }
-                              "
-                              @view="
-                                async (item: any) => {
-                                  employeeFormState.drawerModal = true;
-                                  employeeFormState.isEmployeeEdit = false;
-                                  employeeFormStore.assignFormDataEmployee(
-                                    item.id,
-                                  );
-                                  await fetchImageList(
-                                    item.id,
-                                    item.selectedImage || '',
-                                    'employee',
-                                  );
-                                }
-                              "
-                              @edit="
-                                (item: any) => editEmployeeFormPersonal(item.id)
-                              "
-                              @delete="
-                                (item: any) => {
-                                  deleteEmployeeById({ id: item.id });
-                                }
-                              "
-                              @toggle-status="
-                                async (item: any) => {
-                                  triggerChangeStatus(item.id, item.status);
-                                }
-                              "
-                            />
-                          </div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-
-                    <template v-slot:item="props">
-                      <div class="col-12 col-md-6 column">
-                        <BranchCard
-                          i18n-key="customer.table"
-                          class="surface-1 col"
-                          :virtual-branch="false"
-                          :id="`branch-card-${props.row.name}`"
-                          :class="{
-                            'cursor-pointer': props.row._count.branch !== 0,
-                          }"
-                          @click="
-                            $router.push(
-                              `/customer-management/${props.row.id}/branch`,
-                            )
-                          "
-                          :metadata="props.row"
-                          :color="
-                            props.row.customerType === 'CORP'
-                              ? 'hq'
-                              : 'br-virtual'
-                          "
-                          :key="props.row.id"
-                          :data="{
-                            branchLabelName:
-                              props.row.customerType === 'CORP'
-                                ? $i18n.locale === 'eng'
-                                  ? props.row.branch[0]?.registerNameEN || '-'
-                                  : props.row.branch[0]?.registerName || '-'
-                                : $i18n.locale === 'eng'
-                                  ? props.row.branch[0]?.firstNameEN +
-                                      ' ' +
-                                      props.row.branch[0]?.lastNameEN || '-'
-                                  : props.row.branch[0]?.firstName +
-                                      ' ' +
-                                      props.row.branch[0]?.lastName || '-',
-                          }"
-                          :inactive="props.row.status === 'INACTIVE'"
-                          :field-selected="
-                            fieldSelected.filter((v) => {
-                              return columnsCustomer.some((c) => c.name === v);
-                            })
-                          "
-                        >
-                          <template #image>
-                            <q-avatar size="3rem">
-                              <q-img
-                                :src="`${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`"
-                                class="full-height full-width"
-                              >
-                                <template #error>
-                                  <q-img
-                                    :src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
-                                  />
-                                </template>
-                              </q-img>
-                              <q-badge
-                                class="absolute-bottom-right no-padding"
-                                style="
-                                  border-radius: 50%;
-                                  min-width: 10px;
-                                  min-height: 10px;
-                                "
-                                :style="{
-                                  background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
-                                }"
-                              ></q-badge>
-                            </q-avatar>
-                          </template>
-                          <template #data>
-                            <div
-                              class="row"
-                              style="
-                                display: flex;
-                                padding-block: var(--size-2);
                               "
                             >
-                              <div class="col-12 q-py-sm row">
-                                <span class="col-4 app-text-muted">
-                                  {{
-                                    props.row.customerType === 'CORP'
-                                      ? $t('customer.form.legalPersonCode')
-                                      : $t('customer.form.cardNumber')
-                                  }}
-                                </span>
-                                <span class="col">
-                                  {{
-                                    props.row.customerType === 'CORP'
-                                      ? props.row.branch[0]?.legalPersonNo
-                                      : props.row.branch[0]?.citizenId
-                                  }}
-                                </span>
+                              <div class="row items-center">
+                                <q-icon name="mdi-account-group-outline" />
+                                <q-icon
+                                  class="btn-arrow-right"
+                                  :class="{
+                                    active: currentBtnOpen[props.rowIndex],
+                                  }"
+                                  size="xs"
+                                  name="mdi-chevron-right"
+                                />
                               </div>
-                              <div
-                                class="col-12 q-py-sm row"
-                                v-for="key in fieldSelected
-                                  .filter((v) => {
-                                    return (
-                                      v !== 'orderNumber' &&
-                                      v !== 'titleName' &&
-                                      v !== 'address' &&
-                                      v !== 'contactName' &&
-                                      columnsCustomer.some((c) => c.name === v)
-                                    );
-                                  })
-                                  .sort((lhs, rhs) => {
-                                    const fields = [
-                                      ...columnsEmployee,
-                                      ...columnsCustomer,
-                                    ];
-                                    return (
-                                      fields.findIndex((i) => i.name === lhs) -
-                                      fields.findIndex((i) => i.name === rhs)
-                                    );
-                                  })"
-                                :key="key"
-                              >
-                                <span class="col-4 app-text-muted">
-                                  {{ $t(`customer.table.${key}`) }}
-                                </span>
-                                <span class="col">
-                                  {{
-                                    key === 'businessTypePure'
-                                      ? optionStore.mapOption(
-                                          props.row.branch[0].businessType,
-                                        )
-                                      : key === 'jobPosition'
-                                        ? optionStore.mapOption(
-                                            props.row.branch[0].jobPosition,
-                                          )
-                                        : key === 'officeTel'
-                                          ? props.row.branch[0].officeTel || '-'
-                                          : ''
-                                  }}
-                                </span>
-                              </div>
-                            </div>
-                          </template>
-                          <template v-slot:action>
+                            </q-btn>
+                            <q-btn
+                              icon="mdi-eye-outline"
+                              :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
+                              size="sm"
+                              dense
+                              round
+                              flat
+                              @click.stop="editCustomerForm(props.row.id)"
+                            />
+
                             <KebabAction
+                              :id-name="
+                                props.row.branch[0].customerName ||
+                                props.row.branch[0].firstName
+                              "
                               :status="props.row.status"
-                              :id-name="props.row.name"
                               @view="
                                 () => {
                                   const { branch, ...payload } = props.row;
@@ -1718,21 +1525,256 @@ const emptyCreateDialog = ref(false);
                               "
                               @delete="deleteCustomerById(props.row.id)"
                               @change-status="
-                                triggerChangeStatus(
-                                  props.row.id,
-                                  props.row.status,
-                                )
+                                async () => {
+                                  triggerChangeStatus(
+                                    props.row.id,
+                                    props.row.status,
+                                  );
+                                }
                               "
                             />
-                          </template>
-                        </BranchCard>
+                          </q-td>
+                        </q-tr>
+
+                        <q-tr
+                          v-show="currentBtnOpen[props.rowIndex]"
+                          :props="props"
+                        >
+                          <q-td colspan="100%" style="padding: 16px">
+                            <div class="text-center">
+                              <TableEmpoloyee
+                                in-table
+                                :list-employee="listEmployee"
+                                :columns-employee="columnsEmployee"
+                                @history="
+                                  (item: any) => {
+                                    openHistory(item.id);
+                                  }
+                                "
+                                @view="
+                                  async (item: any) => {
+                                    employeeFormState.drawerModal = true;
+                                    employeeFormState.isEmployeeEdit = false;
+                                    employeeFormStore.assignFormDataEmployee(
+                                      item.id,
+                                    );
+                                    await fetchImageList(
+                                      item.id,
+                                      item.selectedImage || '',
+                                      'employee',
+                                    );
+                                  }
+                                "
+                                @edit="
+                                  (item: any) =>
+                                    editEmployeeFormPersonal(item.id)
+                                "
+                                @delete="
+                                  (item: any) => {
+                                    deleteEmployeeById({ id: item.id });
+                                  }
+                                "
+                                @toggle-status="
+                                  async (item: any) => {
+                                    triggerChangeStatus(item.id, item.status);
+                                  }
+                                "
+                              />
+                            </div>
+                          </q-td>
+                        </q-tr>
+                      </template>
+
+                      <template v-slot:item="props">
+                        <div class="col-12 col-md-6 column">
+                          <BranchCard
+                            i18n-key="customer.table"
+                            class="surface-1 col"
+                            :virtual-branch="false"
+                            :id="`branch-card-${props.row.name}`"
+                            :class="{
+                              'cursor-pointer': props.row._count.branch !== 0,
+                            }"
+                            @click="
+                              $router.push(
+                                `/customer-management/${props.row.id}/branch`,
+                              )
+                            "
+                            :metadata="props.row"
+                            :color="
+                              props.row.customerType === 'CORP'
+                                ? 'hq'
+                                : 'br-virtual'
+                            "
+                            :key="props.row.id"
+                            :data="{
+                              branchLabelName:
+                                props.row.customerType === 'CORP'
+                                  ? $i18n.locale === 'eng'
+                                    ? props.row.branch[0]?.registerNameEN || '-'
+                                    : props.row.branch[0]?.registerName || '-'
+                                  : $i18n.locale === 'eng'
+                                    ? props.row.branch[0]?.firstNameEN +
+                                        ' ' +
+                                        props.row.branch[0]?.lastNameEN || '-'
+                                    : props.row.branch[0]?.firstName +
+                                        ' ' +
+                                        props.row.branch[0]?.lastName || '-',
+                            }"
+                            :inactive="props.row.status === 'INACTIVE'"
+                            :field-selected="
+                              fieldSelected.filter((v) => {
+                                return columnsCustomer.some(
+                                  (c) => c.name === v,
+                                );
+                              })
+                            "
+                          >
+                            <template #image>
+                              <q-avatar size="3rem">
+                                <q-img
+                                  :src="`${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`"
+                                  class="full-height full-width"
+                                >
+                                  <template #error>
+                                    <q-img
+                                      :src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
+                                    />
+                                  </template>
+                                </q-img>
+                                <q-badge
+                                  class="absolute-bottom-right no-padding"
+                                  style="
+                                    border-radius: 50%;
+                                    min-width: 10px;
+                                    min-height: 10px;
+                                  "
+                                  :style="{
+                                    background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                                  }"
+                                ></q-badge>
+                              </q-avatar>
+                            </template>
+                            <template #data>
+                              <div
+                                class="row"
+                                style="
+                                  display: flex;
+                                  padding-block: var(--size-2);
+                                "
+                              >
+                                <div class="col-12 q-py-sm row">
+                                  <span class="col-4 app-text-muted">
+                                    {{
+                                      props.row.customerType === 'CORP'
+                                        ? $t('customer.form.legalPersonCode')
+                                        : $t('customer.form.cardNumber')
+                                    }}
+                                  </span>
+                                  <span class="col">
+                                    {{
+                                      props.row.customerType === 'CORP'
+                                        ? props.row.branch[0]?.legalPersonNo
+                                        : props.row.branch[0]?.citizenId
+                                    }}
+                                  </span>
+                                </div>
+                                <div
+                                  class="col-12 q-py-sm row"
+                                  v-for="key in fieldSelected
+                                    .filter((v) => {
+                                      return (
+                                        v !== 'orderNumber' &&
+                                        v !== 'titleName' &&
+                                        v !== 'address' &&
+                                        v !== 'contactName' &&
+                                        columnsCustomer.some(
+                                          (c) => c.name === v,
+                                        )
+                                      );
+                                    })
+                                    .sort((lhs, rhs) => {
+                                      const fields = [
+                                        ...columnsEmployee,
+                                        ...columnsCustomer,
+                                      ];
+                                      return (
+                                        fields.findIndex(
+                                          (i) => i.name === lhs,
+                                        ) -
+                                        fields.findIndex((i) => i.name === rhs)
+                                      );
+                                    })"
+                                  :key="key"
+                                >
+                                  <span class="col-4 app-text-muted">
+                                    {{ $t(`customer.table.${key}`) }}
+                                  </span>
+                                  <span class="col">
+                                    {{
+                                      key === 'businessTypePure'
+                                        ? optionStore.mapOption(
+                                            props.row.branch[0].businessType,
+                                          )
+                                        : key === 'jobPosition'
+                                          ? optionStore.mapOption(
+                                              props.row.branch[0].jobPosition,
+                                            )
+                                          : key === 'officeTel'
+                                            ? props.row.branch[0].officeTel ||
+                                              '-'
+                                            : ''
+                                    }}
+                                  </span>
+                                </div>
+                              </div>
+                            </template>
+                            <template v-slot:action>
+                              <KebabAction
+                                :status="props.row.status"
+                                :id-name="props.row.name"
+                                @view="
+                                  () => {
+                                    const { branch, ...payload } = props.row;
+                                    currentCustomer = payload;
+                                    editCustomerForm(props.row.id);
+                                  }
+                                "
+                                @edit="
+                                  async () => {
+                                    await editCustomerForm(props.row.id);
+                                    customerFormState.branchIndex = 0;
+                                  }
+                                "
+                                @delete="deleteCustomerById(props.row.id)"
+                                @change-status="
+                                  triggerChangeStatus(
+                                    props.row.id,
+                                    props.row.status,
+                                  )
+                                "
+                              />
+                            </template>
+                          </BranchCard>
+                        </div>
+                      </template>
+                    </q-table>
+                    <template v-slot:loading>
+                      <div
+                        v-if="
+                          $q.screen.lt.sm &&
+                          currentPageCustomer !== maxPageCustomer
+                        "
+                        class="row justify-center"
+                      >
+                        <q-spinner-dots color="primary" size="40px" />
                       </div>
                     </template>
-                  </q-table>
-                </div>
+                  </q-infinite-scroll>
+                </article>
 
-                <div
-                  v-if="listCustomer.length !== 0"
+                <footer
+                  v-if="listCustomer.length !== 0 && $q.screen.gt.xs"
                   class="row justify-between items-center q-px-md q-py-sm"
                 >
                   <div class="row col-4 items-center">
@@ -1775,7 +1817,7 @@ const emptyCreateDialog = ref(false);
                       "
                     />
                   </div>
-                </div>
+                </footer>
               </template>
 
               <!-- employee -->
@@ -1792,49 +1834,77 @@ const emptyCreateDialog = ref(false);
                   <NoData :not-found="!!inputSearch" />
                 </div>
 
-                <div
+                <article
                   v-if="listEmployee.length !== 0"
                   class="surface-2 q-pa-md scroll col full-width"
                 >
-                  <TableEmpoloyee
-                    v-model:page-size="pageSize"
-                    v-model:current-page="currentPageEmployee"
-                    :grid-view="gridView"
-                    :list-employee="listEmployee"
-                    :columns-employee="columnsEmployee"
-                    :field-selected="fieldSelected"
-                    @history="
-                      (item: any) => {
-                        openHistory(item.id);
-                      }
-                    "
-                    @view="
-                      async (item: any) => {
-                        employeeFormState.drawerModal = true;
-                        employeeFormState.isEmployeeEdit = false;
-                        employeeFormStore.assignFormDataEmployee(item.id);
-                        await fetchImageList(
-                          item.id,
-                          item.selectedImage || '',
-                          'employee',
+                  <q-infinite-scroll
+                    :offset="100"
+                    @load="
+                      (_, done) => {
+                        if (
+                          $q.screen.gt.xs ||
+                          currentPageEmployee === maxPageEmployee
+                        )
+                          return;
+                        currentPageEmployee = currentPageEmployee + 1;
+                        fetchListEmployee().then(() =>
+                          done(currentPageEmployee >= maxPageEmployee),
                         );
                       }
                     "
-                    @edit="(item: any) => editEmployeeFormPersonal(item.id)"
-                    @delete="
-                      (item: any) => {
-                        deleteEmployeeById({ id: item.id });
-                      }
-                    "
-                    @toggle-status="
-                      async (item: any) => {
-                        triggerChangeStatus(item.id, item.status);
-                      }
-                    "
-                  />
-                </div>
-                <div
-                  v-if="listEmployee.length !== 0"
+                  >
+                    <TableEmpoloyee
+                      v-model:page-size="pageSize"
+                      v-model:current-page="currentPageEmployee"
+                      :grid-view="gridView"
+                      :list-employee="listEmployee"
+                      :columns-employee="columnsEmployee"
+                      :field-selected="fieldSelected"
+                      @history="
+                        (item: any) => {
+                          openHistory(item.id);
+                        }
+                      "
+                      @view="
+                        async (item: any) => {
+                          employeeFormState.drawerModal = true;
+                          employeeFormState.isEmployeeEdit = false;
+                          employeeFormStore.assignFormDataEmployee(item.id);
+                          await fetchImageList(
+                            item.id,
+                            item.selectedImage || '',
+                            'employee',
+                          );
+                        }
+                      "
+                      @edit="(item: any) => editEmployeeFormPersonal(item.id)"
+                      @delete="
+                        (item: any) => {
+                          deleteEmployeeById({ id: item.id });
+                        }
+                      "
+                      @toggle-status="
+                        async (item: any) => {
+                          triggerChangeStatus(item.id, item.status);
+                        }
+                      "
+                    />
+                    <template v-slot:loading>
+                      <div
+                        v-if="
+                          $q.screen.lt.sm &&
+                          currentPageEmployee !== maxPageEmployee
+                        "
+                        class="row justify-center"
+                      >
+                        <q-spinner-dots color="primary" size="40px" />
+                      </div>
+                    </template>
+                  </q-infinite-scroll>
+                </article>
+                <footer
+                  v-if="listEmployee.length !== 0 && $q.screen.gt.xs"
                   class="row justify-between items-center q-px-md q-py-sm"
                 >
                   <div class="row col-4 items-center">
@@ -1875,7 +1945,7 @@ const emptyCreateDialog = ref(false);
                       "
                     />
                   </div>
-                </div>
+                </footer>
               </template>
 
               <template
diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index c80f114a..193fd8e0 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -13,6 +13,7 @@ import { useInstitution } from 'src/stores/institution';
 import { Institution, InstitutionPayload } from 'src/stores/institution/types';
 import { formatAddress } from 'src/utils/address';
 
+import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import KebabAction from 'src/components/shared/KebabAction.vue';
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -756,26 +757,7 @@ watch(
                 {{ $t('general.recordPerPage') }}
               </div>
               <div>
-                <q-btn-dropdown
-                  dense
-                  unelevated
-                  :label="pageSize"
-                  class="bordered q-pl-md"
-                >
-                  <q-list>
-                    <q-item
-                      v-for="v in [10, 30, 50, 100, 500, 1000]"
-                      :key="v"
-                      clickable
-                      v-close-popup
-                      @click="pageSize = v"
-                    >
-                      <q-item-section>
-                        <q-item-label>{{ v }}</q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-btn-dropdown>
+                <PaginationPageSize v-model="pageSize" />
               </div>
             </div>
           </div>