diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 10820f76..87294e6b 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -34,6 +34,7 @@ import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa
 import DialogForm from 'components/DialogForm.vue';
 import SideMenu from 'components/SideMenu.vue';
 import { AddButton } from 'components/button';
+import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
 
 import {
   columnsCustomer,
@@ -1347,397 +1348,31 @@ const emptyCreateDialog = ref(false);
                   v-if="listEmployee.length !== 0"
                   class="surface-2 q-pa-md scroll col full-width"
                 >
-                  <q-table
-                    flat
-                    bordered
-                    :grid="gridView"
-                    :rows="listEmployee"
-                    :columns="columnsEmployee"
-                    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"
-                      >
-                        <q-th
-                          v-for="col in props.cols"
-                          :key="col.name"
-                          :props="props"
-                        >
-                          <span v-if="col.label !== ''">
-                            {{ $t(col.label) }}
-                          </span>
-                        </q-th>
-                      </q-tr>
-                    </template>
-
-                    <template v-slot:body="props">
-                      <q-tr
-                        :style="
-                          props.rowIndex % 2 !== 0
-                            ? $q.dark.isActive
-                              ? 'background: hsl(var(--gray-11-hsl)/0.2)'
-                              : `background: #f9fafc`
-                            : ''
-                        "
-                        :class="{
-                          'app-text-muted': props.row.status === 'INACTIVE',
-                          'status-active': props.row.status !== 'INACTIVE',
-                          'status-inactive': props.row.status === 'INACTIVE',
-                        }"
-                        :props="props"
-                        :id="`row-table-${props.row.firstNameEN}`"
-                        @click="
-                          () => {
-                            // employeeFormState.drawerModal = true;
-                            // employeeFormStore.assignFormDataEmployee(
-                            //   props.row.id,
-                            // );
-                            // $router.push(`/customer-management/${props.row.id}/branch`);
-                            // openDialogInputForm('INFO', props.row.id);
-                          }
-                        "
-                      >
-                        <q-td v-if="fieldSelected.includes('firstName')">
-                          <div
-                            class="row items-center"
-                            style="flex-wrap: nowrap"
-                          >
-                            <div
-                              style="
-                                width: 50px;
-                                display: flex;
-                                margin-bottom: var(--size-2);
-                              "
-                            >
-                              <div class="branch-card__icon">
-                                <q-avatar size="md">
-                                  <q-img
-                                    :src="
-                                      props.row.profileImageUrl ??
-                                      '/images/employee-avatar.png'
-                                    "
-                                  >
-                                    <template #error>
-                                      <q-img
-                                        src="/images/employee-avatar.png"
-                                      />
-                                    </template>
-                                  </q-img>
-                                </q-avatar>
-                              </div>
-                            </div>
-                            <div class="col">
-                              <div class="col">
-                                {{
-                                  `${props.row.firstName} ${props.row.lastName}` ||
-                                  '-'
-                                }}
-
-                                <q-icon
-                                  class="q-pl-xs"
-                                  :class="{
-                                    'symbol-gender': props.row.gender,
-                                    'symbol-gender__male':
-                                      props.row.gender === 'male',
-                                    'symbol-gender__female':
-                                      props.row.gender === 'female',
-                                  }"
-                                  :name="`mdi-gender-${props.row.gender === 'male' ? 'male' : 'female'}`"
-                                  width="24px"
-                                />
-                              </div>
-                              <div class="col app-text-muted">
-                                {{
-                                  `${props.row.firstNameEN} ${props.row.lastNameEN}` ||
-                                  '-'
-                                }}
-                              </div>
-                            </div>
-                          </div>
-                        </q-td>
-
-                        <q-td
-                          v-if="
-                            fieldSelected.includes('formDialogInputNationality')
-                          "
-                        >
-                          {{ props.row.nationality || '-' }}
-                        </q-td>
-
-                        <q-td
-                          v-if="
-                            fieldSelected.includes('formDialogInputPassportNo')
-                          "
-                        >
-                          {{ props.row.passportNumber || '-' }}
-                        </q-td>
-
-                        <q-td
-                          v-if="fieldSelected.includes('formDialogInputAge')"
-                        >
-                          {{ calculateAge(props.row.dateOfBirth) }}
-                        </q-td>
-
-                        <q-td
-                          v-if="fieldSelected.includes('passportExpiryDate')"
-                        >
-                          {{ dateFormat(props.row.passportExpiryDate) }}
-                        </q-td>
-
-                        <q-td
-                          v-if="
-                            fieldSelected.includes('formDialogEmployeeNRCNo')
-                          "
-                        >
-                          {{ props.row.nrcNo || '-' }}
-                        </q-td>
-
-                        <q-td
-                          v-if="fieldSelected.includes('formDialogInputAge')"
-                        >
-                          <div
-                            class="row items-center"
-                            v-if="props.row.customerBranch"
-                          >
-                            <div class="col">
-                              <div class="col">
-                                {{ props.row.customerBranch.code }}
-                              </div>
-                              <div class="col app-text-muted">
-                                {{
-                                  $i18n.locale === 'en-US'
-                                    ? `${props.row.customerBranch.nameEN}`
-                                    : `${props.row.customerBranch.name}`
-                                }}
-                              </div>
-                            </div>
-                          </div>
-                        </q-td>
-
-                        <q-td v-if="fieldSelected.includes('type')">
-                          <span class="tags tags__pink">
-                            {{ $t('EMPLOYEE') }}
-                          </span>
-                        </q-td>
-                        <q-td>
-                          <q-btn
-                            icon="mdi-eye-outline"
-                            size="sm"
-                            dense
-                            round
-                            flat
-                            @click.stop="
-                              () => {
-                                employeeFormState.drawerModal = true;
-                                employeeFormState.isEmployeeEdit = true;
-                                employeeFormStore.assignFormDataEmployee(
-                                  props.row.id,
-                                );
-                                // openDialogInputForm('INFO', props.row.id);
-                              }
-                            "
-                          />
-
-                          <q-btn
-                            icon="mdi-dots-vertical"
-                            :id="`btn-dots-${props.row.code}`"
-                            size="sm"
-                            dense
-                            round
-                            flat
-                            @click.stop
-                            :key="props.row.id"
-                          >
-                            <q-menu class="bordered">
-                              <q-list v-close-popup>
-                                <q-item
-                                  v-close-popup
-                                  :id="`view-detail-btn-${props.row.name}-view`"
-                                  @click.stop="
-                                    () => {
-                                      // openDialogInputForm('INFO', props.row.id);
-                                      employeeFormState.drawerModal = true;
-                                      employeeFormStore.assignFormDataEmployee(
-                                        props.row.id,
-                                      );
-                                    }
-                                  "
-                                  clickable
-                                  dense
-                                  class="row q-py-sm"
-                                  style="white-space: nowrap"
-                                >
-                                  <q-icon
-                                    name="mdi-eye-outline"
-                                    class="col-3"
-                                    size="xs"
-                                    style="color: hsl(var(--green-6-hsl))"
-                                  />
-                                  <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('viewDetail') }}
-                                  </span>
-                                </q-item>
-
-                                <q-item
-                                  :id="`view-detail-btn-${props.row.name}-edit`"
-                                  clickable
-                                  dense
-                                  class="row q-py-sm"
-                                  style="white-space: nowrap"
-                                  @click="
-                                    async () => {
-                                      await editEmployeeFormPersonal(
-                                        props.row.id,
-                                      );
-                                    }
-                                  "
-                                >
-                                  <q-icon
-                                    name="mdi-pencil-outline"
-                                    class="col-3"
-                                    size="xs"
-                                    style="color: hsl(var(--cyan-6-hsl))"
-                                  />
-                                  <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('edit') }}
-                                  </span>
-                                </q-item>
-                                <q-item
-                                  :id="`view-detail-btn-${props.row.name}-delete`"
-                                  dense
-                                  :clickable="props.row.status === 'CREATED'"
-                                  class="row"
-                                  :class="{
-                                    'surface-3': props.row.status !== 'CREATED',
-                                    'app-text-muted':
-                                      props.row.status !== 'CREATED',
-                                  }"
-                                  style="white-space: nowrap"
-                                  @click="
-                                    deleteEmployeeById({ id: props.row.id })
-                                  "
-                                >
-                                  <q-icon
-                                    name="mdi-trash-can-outline"
-                                    size="xs"
-                                    class="col-3"
-                                    :class="{
-                                      'app-text-negative':
-                                        props.row.status === 'CREATED',
-                                    }"
-                                  />
-                                  <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('delete') }}
-                                  </span>
-                                </q-item>
-
-                                <q-item dense>
-                                  <q-item-section class="q-py-sm">
-                                    <div
-                                      class="q-pa-sm surface-2 rounded flex items-center"
-                                    >
-                                      <ToggleButton
-                                        :id="`view-detail-btn-${props.row.name}-status`"
-                                        two-way
-                                        :model-value="
-                                          props.row.status !== 'INACTIVE'
-                                        "
-                                        @click="
-                                          async () => {
-                                            triggerChangeStatus(
-                                              props.row.id,
-                                              props.row.status,
-                                            );
-                                          }
-                                        "
-                                      />
-                                      <span class="q-pl-md">
-                                        {{
-                                          props.row.status !== 'INACTIVE'
-                                            ? $t('switchOnLabel')
-                                            : $t('switchOffLabel')
-                                        }}
-                                      </span>
-                                    </div>
-                                  </q-item-section>
-                                </q-item>
-                              </q-list>
-                            </q-menu>
-                          </q-btn>
-                        </q-td>
-                      </q-tr>
-                    </template>
-
-                    <template v-slot:item="props">
-                      <div class="col-12 col-md-3 col-sm-6">
-                        <PersonCard
-                          :id="`card-${props.row.firstNameEN}`"
-                          :field-selected="fieldSelected"
-                          history
-                          :prefix-id="props.row.firstNameEN ?? props.rowIndex"
-                          :data="{
-                            code: props.row.code,
-                            name:
-                              $i18n.locale === 'en-US'
-                                ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
-                                : `${props.row.firstName} ${props.row.lastName} `.trim(),
-                            img:
-                              props.row.profileImageUrl ||
-                              '/images/employee-avatar.png',
-                            male: props.row.gender === 'male',
-                            female: props.row.gender === 'female',
-                            detail: [
-                              {
-                                icon: 'mdi-passport',
-                                value: props.row.nationality,
-                              },
-
-                              {
-                                icon: 'mdi-clock-outline',
-                                value: props.row.dateOfBirth
-                                  ? calculateAge(props.row.dateOfBirth) ?? ''
-                                  : '',
-                              },
-                            ],
-                          }"
-                          :tag="[
-                            {
-                              color: 'pink',
-                              value: $t('EMPLOYEE'),
-                            },
-                          ]"
-                          :disabled="props.row.status === 'INACTIVE'"
-                          @history="openHistory(props.row.id)"
-                          @update-card="
-                            async () => {
-                              await editEmployeeFormPersonal(props.row.id);
-                            }
-                          "
-                          @enter-card="
-                            () => {
-                              employeeFormState.drawerModal = true;
-                              employeeFormStore.assignFormDataEmployee(
-                                props.row.id,
-                              );
-                            }
-                          "
-                          @delete-card="
-                            deleteEmployeeById({ id: props.row.id })
-                          "
-                          @toggle-status="
-                            triggerChangeStatus(props.row.id, props.row.status)
-                          "
-                        />
-                      </div>
-                    </template>
-                  </q-table>
+                  <TableEmpoloyee
+                    :grid-view="gridView"
+                    :list-employee="listEmployee"
+                    :columns-employee="columnsEmployee"
+                    :field-selected="fieldSelected"
+                    @history="(item) => {}"
+                    @view="
+                      (item) => {
+                        employeeFormState.drawerModal = true;
+                        //employeeFormState.isEmployeeEdit = true;
+                        employeeFormStore.assignFormDataEmployee(item.id);
+                      }
+                    "
+                    @edit="(item) => editEmployeeFormPersonal(item.id)"
+                    @delete="
+                      (item) => {
+                        deleteEmployeeById({ id: item.id });
+                      }
+                    "
+                    @toggle-status="
+                      async (item) => {
+                        triggerChangeStatus(item.id, item.status);
+                      }
+                    "
+                  />
                 </div>
                 <div
                   v-if="listEmployee.length !== 0"