diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 3754ed55..1d22c2e1 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -26,6 +26,7 @@ import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
 import { watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import useFlowStore from 'src/stores/flow';
+import { Status } from 'src/stores/types';
 
 const { t } = useI18n();
 const utilsStore = useUtilsStore();
@@ -63,6 +64,7 @@ const columns = [
 
 const modal = ref<boolean>(false);
 const hideStat = ref(false);
+const currentStatus = ref<Status | 'All'>('All');
 
 const profileFileImg = ref<File | undefined>(undefined);
 const imageUrl = ref<string | null>('');
@@ -524,7 +526,7 @@ watch(locale, () => {
       />
     </transition>
 
-    <div class="column col surface-1 rounded" :no-padding="!!branchData.total">
+    <div class="col surface-2 rounded" :no-padding="!!branchData.total">
       <template v-if="!branchData.total">
         <TooltipComponent
           class="self-end"
@@ -540,18 +542,20 @@ watch(locale, () => {
           />
         </div>
       </template>
+
       <template v-else>
-        <div class="row" style="flex-grow: 1; flex-wrap: nowrap">
+        <div class="full-height column" style="flex-grow: 1; flex-wrap: nowrap">
           <q-splitter
             v-model="splitterModel"
             :limits="[0, 100]"
             style="width: 100%"
+            class="col"
           >
             <template v-slot:before>
-              <div class="rounded surface-1 column" style="height: 100%">
+              <div class="surface-1 column full-height">
                 <div
-                  class="row bordered-b q-pl-sm text-weight-bold surface-2 items-center"
-                  style="height: 50px"
+                  class="row bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
+                  :style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
                 >
                   <div class="col">จัดการสาขาทั้งหมด</div>
 
@@ -584,8 +588,8 @@ watch(locale, () => {
                   </q-btn>
                 </div>
 
-                <div class="col" style="position: relative">
-                  <div class="scroll" style="position: absolute; inset: 0">
+                <div class="col">
+                  <div class="scroll">
                     <q-tree
                       :nodes="treeData"
                       node-key="id"
@@ -775,82 +779,47 @@ watch(locale, () => {
             </template>
 
             <template v-slot:after>
-              <div class="column" style="height: 100%">
+              <div class="column full-height">
                 <div
-                  class="row justify-between q-pl-md items-center surface-2 bordered-b q-pr-md"
-                  style="height: 50px"
+                  class="row q-py-sm q-px-md justify-between full-width surface-3 bordered-b"
                 >
-                  <div class="col-6">
-                    <q-input
-                      for="input-Search"
-                      style="width: 250px"
-                      :label-color="$q.dark.isActive ? 'white' : 'grey-10'"
+                  <q-input
+                    for="input-search"
+                    outlined
+                    dense
+                    :label="$t('search')"
+                    class="q-mr-md col-12 col-md-4"
+                    :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+                    v-model="inputSearch"
+                    debounce="200"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+
+                  <div
+                    class="row col-12 col-md-6"
+                    :class="{ 'q-pt-xs': $q.screen.lt.md }"
+                  >
+                    <q-select
+                      v-model="statusFilter"
                       outlined
                       dense
-                      label="ค้นหา"
-                      v-model="inputSearch"
-                      debounce="500"
-                    ></q-input>
-                  </div>
-
-                  <div class="col-6 row q-gutter-x-sm justify-end text-right">
-                    <q-btn-dropdown
-                      class="bordered rounded surface-1"
-                      dense
-                      unelevated
-                      :label="labelBtnStatus"
-                    >
-                      <q-list>
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="
-                            async () => {
-                              labelBtnStatus = $t('all');
-                              statusFilter = 'all';
-                            }
-                          "
-                        >
-                          <q-item-section>
-                            <q-item-label>{{ $t('all') }}</q-item-label>
-                          </q-item-section>
-                        </q-item>
-
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="
-                            async () => {
-                              labelBtnStatus = $t('statusACTIVE');
-                              statusFilter = 'statusACTIVE';
-                            }
-                          "
-                        >
-                          <q-item-section>
-                            <q-item-label>
-                              {{ $t('statusACTIVE') }}
-                            </q-item-label>
-                          </q-item-section>
-                        </q-item>
-
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="
-                            async () => {
-                              labelBtnStatus = $t('statusINACTIVE');
-                              statusFilter = 'statusINACTIVE';
-                            }
-                          "
-                        >
-                          <q-item-section>
-                            <q-item-label>
-                              {{ $t('statusINACTIVE') }}
-                            </q-item-label>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-btn-dropdown>
+                      option-value="value"
+                      option-label="label"
+                      class="col"
+                      map-options
+                      emit-value
+                      :options="[
+                        { label: $t('all'), value: 'all' },
+                        { label: $t('statusACTIVE'), value: 'statusACTIVE' },
+                        {
+                          label: $t('statusINACTIVE'),
+                          value: 'statusINACTIVE',
+                        },
+                      ]"
+                    ></q-select>
 
                     <q-select
                       id="select-field"
@@ -859,6 +828,7 @@ watch(locale, () => {
                         fieldDisplay.map((v) => ({ label: $t(v), value: v }))
                       "
                       :display-value="$t('displayField')"
+                      class="col q-mx-sm"
                       v-model="fieldSelected"
                       option-label="label"
                       option-value="value"
@@ -870,8 +840,8 @@ watch(locale, () => {
                     />
 
                     <q-btn-toggle
-                      v-model="modeView"
                       id="btn-mode"
+                      v-model="modeView"
                       dense
                       class="no-shadow bordered rounded surface-1"
                       :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
@@ -916,83 +886,311 @@ watch(locale, () => {
                     </q-btn-toggle>
                   </div>
                 </div>
-                <div style="position: relative; flex: 1">
-                  <div
-                    style="position: absolute; inset: 0"
-                    class="scroll q-pa-md"
-                  >
-                    <q-table
-                      flat
-                      bordered
-                      :rows-per-page-options="[0]"
-                      :rows="
-                        treeData
-                          .flatMap((v) => [v, ...v.branch])
-                          .filter((v) => {
-                            if (
-                              statusFilter === 'statusACTIVE' &&
-                              v.status === 'INACTIVE'
-                            ) {
-                              return false;
-                            }
-                            if (
-                              statusFilter === 'statusINACTIVE' &&
-                              v.status !== 'INACTIVE'
-                            ) {
-                              return false;
-                            }
-
-                            const terms = `${v.code} ${$i18n.locale === 'en-US' ? v.nameEN : v.name} ${v.telephoneNo}`;
-                            if (inputSearch && !terms.includes(inputSearch)) {
-                              return false;
-                            }
-
-                            if (
-                              !!currentHq.id &&
-                              currentHq.id === v.headOfficeId
-                            ) {
-                              return true;
-                            }
-                            if (fieldSelectedBranch.value === 'all')
-                              return true;
-                            if (fieldSelectedBranch.value === 'branchHQLabel')
-                              return v.isHeadOffice;
-                            if (fieldSelectedBranch.value === 'branchLabel')
-                              return !v.isHeadOffice;
 
+                <div
+                  class="q-pa-md col scroll"
+                  style="background-color: transparent; overflow-x: auto"
+                >
+                  <q-table
+                    flat
+                    bordered
+                    :rows-per-page-options="[0]"
+                    :rows="
+                      treeData
+                        .flatMap((v) => [v, ...v.branch])
+                        .filter((v) => {
+                          if (
+                            statusFilter === 'statusACTIVE' &&
+                            v.status === 'INACTIVE'
+                          ) {
                             return false;
-                          })
-                      "
-                      :columns="columns"
-                      :grid="modeView"
-                      card-container-class="row q-col-gutter-md"
-                      row-key="name"
-                      hide-pagination
-                      :visible-columns="fieldSelected"
-                    >
-                      <template v-slot:header="props">
-                        <q-tr class="surface-2" :props="props">
-                          <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>
+                          }
+                          if (
+                            statusFilter === 'statusINACTIVE' &&
+                            v.status !== 'INACTIVE'
+                          ) {
+                            return false;
+                          }
 
-                      <template v-slot:body="props">
-                        <q-tr
-                          :class="{
-                            'app-text-muted': props.row.status === 'INACTIVE',
-                                 'cursor-pointer': props.row._count.branch !== 0,
-                          }"
+                          const terms = `${v.code} ${$i18n.locale === 'en-US' ? v.nameEN : v.name} ${v.telephoneNo}`;
+                          if (inputSearch && !terms.includes(inputSearch)) {
+                            return false;
+                          }
+
+                          if (
+                            !!currentHq.id &&
+                            currentHq.id === v.headOfficeId
+                          ) {
+                            return true;
+                          }
+                          if (fieldSelectedBranch.value === 'all') return true;
+                          if (fieldSelectedBranch.value === 'branchHQLabel')
+                            return v.isHeadOffice;
+                          if (fieldSelectedBranch.value === 'branchLabel')
+                            return !v.isHeadOffice;
+
+                          return false;
+                        })
+                    "
+                    :columns="columns"
+                    :grid="modeView"
+                    card-container-class="row q-col-gutter-md"
+                    row-key="name"
+                    hide-pagination
+                    :visible-columns="fieldSelected"
+                  >
+                    <template v-slot:header="props">
+                      <q-tr class="surface-3" :props="props">
+                        <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',
+                          'cursor-pointer': props.row._count.branch !== 0,
+                        }"
+                        :props="props"
+                        @click="
+                          () => {
+                            if (
+                              props.row.isHeadOffice &&
+                              props.row._count.branch !== 0
+                            ) {
+                              fieldSelectedBranch.value = '';
+                              inputSearch = '';
+                              currentHq = {
+                                id: props.row.id,
+                                code: props.row.code,
+                              };
+                              beforeBranch = {
+                                id: '',
+                                code: '',
+                              };
+                            }
+                          }
+                        "
+                      >
+                        <q-td v-if="fieldSelected.includes('branchLabelName')">
+                          <div class="row items-center">
+                            <div
+                              :class="{
+                                'status-active':
+                                  props.row.status !== 'INACTIVE',
+                                'status-inactive':
+                                  props.row.status === 'INACTIVE',
+                                'branch-card__hq': props.row.isHeadOffice,
+                                'branch-card__br': !props.row.isHeadOffice,
+                              }"
+                              style="
+                                width: 50px;
+                                display: flex;
+                                margin-bottom: var(--size-2);
+                              "
+                            >
+                              <div class="branch-card__icon">
+                                <q-icon
+                                  size="md"
+                                  style="scale: 0.8"
+                                  name="mdi-office-building-outline"
+                                />
+                              </div>
+                            </div>
+                            <div class="col">
+                              <div class="col">{{ props.row.name }}</div>
+                              <div class="col app-text-muted">
+                                {{ props.row.code }}
+                              </div>
+                            </div>
+                          </div>
+                        </q-td>
+                        <q-td
+                          v-if="fieldSelected.includes('branchLabelAddress')"
+                        >
+                          {{ props.row.address }}
+                        </q-td>
+                        <q-td v-if="fieldSelected.includes('branchLabelTel')">
+                          {{ props.row.contact[0]?.telephoneNo || '-' }}
+                        </q-td>
+                        <q-td v-if="fieldSelected.includes('branchLabelType')">
+                          {{
+                            props.row.isHeadOffice
+                              ? $t('branchHQLabel')
+                              : $t('branchLabel')
+                          }}
+                        </q-td>
+                        <q-td>
+                          <q-btn
+                            icon="mdi-dots-vertical"
+                            size="sm"
+                            dense
+                            round
+                            flat
+                            @click.stop
+                          >
+                            <q-menu class="bordered">
+                              <q-list v-close-popup>
+                                <q-item
+                                  :id="`view-detail-btn-${props.row.name}-view`"
+                                  @click.stop="
+                                    if (props.row.isHeadOffice) {
+                                      triggerEdit(
+                                        'drawer',
+                                        props.row.id,
+                                        'headOffice',
+                                        props.row.code,
+                                      );
+                                    } else {
+                                      triggerEdit(
+                                        'drawer',
+                                        props.row.id,
+                                        'subBranch',
+                                      );
+                                    }
+                                  "
+                                  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="
+                                    () => {
+                                      if (props.row.isHeadOffice) {
+                                        triggerEdit(
+                                          'form',
+                                          props.row.id,
+                                          'headOffice',
+                                          props.row.code,
+                                        );
+                                      } else {
+                                        triggerEdit(
+                                          'form',
+                                          props.row.id,
+                                          'subBranch',
+                                        );
+                                      }
+                                    }
+                                  "
+                                >
+                                  <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="triggerDelete(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">
+                                      <q-toggle
+                                        :id="`view-detail-btn-${props.row.name}-status`"
+                                        dense
+                                        size="sm"
+                                        :label="
+                                          props.row.status !== 'INACTIVE'
+                                            ? $t('switchOnLabel')
+                                            : $t('switchOffLabel')
+                                        "
+                                        @click="
+                                          async () => {
+                                            const res =
+                                              await branchStore.editById(
+                                                props.row.id,
+                                                {
+                                                  status:
+                                                    props.row.status !==
+                                                    'INACTIVE'
+                                                      ? 'INACTIVE'
+                                                      : 'ACTIVE',
+                                                },
+                                              );
+                                            if (res)
+                                              props.row.status = res.status;
+                                          }
+                                        "
+                                        :model-value="
+                                          props.row.status === 'CREATED' ||
+                                          props.row.status === 'ACTIVE'
+                                        "
+                                      />
+                                    </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-6">
+                        <BranchCard
+                          :id="`branch-card-${props.row.name}`"
+                          :class="{
+                            'cursor-pointer': props.row._count.branch !== 0,
+                          }"
                           @click="
                             () => {
-                              if (props.row.isHeadOffice && props.row._count.branch !==0) {
+                              if (
+                                props.row.isHeadOffice &&
+                                props.row._count.branch !== 0
+                              ) {
                                 fieldSelectedBranch.value = '';
                                 inputSearch = '';
                                 currentHq = {
@@ -1006,432 +1204,188 @@ watch(locale, () => {
                               }
                             }
                           "
-                        >
-                          <q-td
-                            v-if="fieldSelected.includes('branchLabelName')"
-                          >
-                            <div class="row items-center">
-                              <div
-                                :class="{
-                                  'status-active':
-                                    props.row.status !== 'INACTIVE',
-                                  'status-inactive':
-                                    props.row.status === 'INACTIVE',
-                                  'branch-card__hq': props.row.isHeadOffice,
-                                  'branch-card__br': !props.row.isHeadOffice,
-                                }"
-                                style="
-                                  width: 50px;
-                                  display: flex;
-                                  margin-bottom: var(--size-2);
-                                "
-                              >
-                                <div class="branch-card__icon">
-                                  <q-icon
-                                    size="md"
-                                    style="scale: 0.8"
-                                    name="mdi-office-building-outline"
-                                  />
-                                </div>
-                              </div>
-                              <div class="col">
-                                <div class="col">{{ props.row.name }}</div>
-                                <div class="col app-text-muted">
-                                  {{ props.row.code }}
-                                </div>
-                              </div>
-                            </div>
-                          </q-td>
-                          <q-td
-                            v-if="fieldSelected.includes('branchLabelAddress')"
-                          >
-                            {{ props.row.address }}
-                          </q-td>
-                          <q-td v-if="fieldSelected.includes('branchLabelTel')">
-                            {{ props.row.contact[0]?.telephoneNo || '-' }}
-                          </q-td>
-                          <q-td
-                            v-if="fieldSelected.includes('branchLabelType')"
-                          >
-                            {{
+                          :metadata="props.row"
+                          :color="props.row.isHeadOffice ? 'hq' : 'br'"
+                          :key="props.row.id"
+                          :data="{
+                            branchLabelCode: props.row.code,
+                            branchLabelName:
+                              $i18n.locale === 'en-US'
+                                ? props.row.nameEN
+                                : props.row.name,
+                            branchLabelTel: props.row.contact
+                              .map((c: BranchContact) => c.telephoneNo)
+                              .join(','),
+                            branchLabelAddress:
+                              $i18n.locale === 'en-US'
+                                ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
+                                : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
+                            branchLabelType: $t(
                               props.row.isHeadOffice
-                                ? $t('branchHQLabel')
-                                : $t('branchLabel')
-                            }}
-                          </q-td>
-                          <q-td>
-                           
+                                ? 'branchHQLabel'
+                                : 'branchLabel',
+                            ),
+                          }"
+                          :field-selected="fieldSelected"
+                          :badge-field="['branchLabelStatus']"
+                          :inactive="props.row.status === 'INACTIVE'"
+                          @view-detail="
+                            (v) => {
+                              triggerEdit(
+                                'drawer',
+                                v.id,
+                                v.isHeadOffice ? 'headOffice' : 'subBranch',
+                                v.code,
+                              );
+                            }
+                          "
+                        >
+                          <template v-slot:action>
+                            <q-menu class="bordered">
+                              <q-list>
+                                <q-item
+                                  :id="`view-detail-btn-${props.row.name}-view`"
+                                  @click.stop="
+                                    if (props.row.isHeadOffice) {
+                                      triggerEdit(
+                                        'drawer',
+                                        props.row.id,
+                                        'headOffice',
+                                        props.row.code,
+                                      );
+                                    } else {
+                                      triggerEdit(
+                                        'drawer',
+                                        props.row.id,
+                                        'subBranch',
+                                      );
+                                    }
+                                  "
+                                  v-close-popup
+                                  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-btn
-                              icon="mdi-dots-vertical"
-                              size="sm"
-                              dense
-                              round
-                              flat
-                              @click.stop
-                            >
-                              <q-menu class="bordered">
-                                <q-list v-close-popup>
-                                  <q-item
-                                    :id="`view-detail-btn-${props.row.name}-view`"
-                                    @click.stop="
+                                <q-item
+                                  :id="`view-detail-btn-${props.row.name}-edit`"
+                                  v-close-popup
+                                  clickable
+                                  dense
+                                  class="row q-py-sm"
+                                  style="white-space: nowrap"
+                                  @click="
+                                    () => {
                                       if (props.row.isHeadOffice) {
                                         triggerEdit(
-                                          'drawer',
+                                          'form',
                                           props.row.id,
                                           'headOffice',
                                           props.row.code,
                                         );
                                       } else {
                                         triggerEdit(
-                                          'drawer',
+                                          'form',
                                           props.row.id,
                                           'subBranch',
                                         );
                                       }
-                                    "
-                                    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="
-                                      () => {
-                                        if (props.row.isHeadOffice) {
-                                          triggerEdit(
-                                            'form',
-                                            props.row.id,
-                                            'headOffice',
-                                            props.row.code,
-                                          );
-                                        } else {
-                                          triggerEdit(
-                                            'form',
-                                            props.row.id,
-                                            'subBranch',
-                                          );
-                                        }
-                                      }
-                                    "
-                                  >
-                                    <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"
+                                    }
+                                  "
+                                >
+                                  <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
+                                  v-close-popup
+                                  :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="triggerDelete(props.row.id)"
+                                >
+                                  <q-icon
+                                    name="mdi-trash-can-outline"
+                                    size="xs"
+                                    class="col-3"
                                     :class="{
-                                      'surface-3':
-                                        props.row.status !== 'CREATED',
-                                      'app-text-muted':
-                                        props.row.status !== 'CREATED',
+                                      'app-text-negative':
+                                        props.row.status === 'CREATED',
                                     }"
-                                    style="white-space: nowrap"
-                                    @click="triggerDelete(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>
+                                  />
+                                  <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">
-                                        <q-toggle
-                                          :id="`view-detail-btn-${props.row.name}-status`"
-                                          dense
-                                          size="sm"
-                                          :label="
-                                            props.row.status !== 'INACTIVE'
-                                              ? $t('switchOnLabel')
-                                              : $t('switchOffLabel')
-                                          "
-                                          @click="
-                                            async () => {
-                                              const res =
-                                                await branchStore.editById(
-                                                  props.row.id,
-                                                  {
-                                                    status:
-                                                      props.row.status !==
-                                                      'INACTIVE'
-                                                        ? 'INACTIVE'
-                                                        : 'ACTIVE',
-                                                  },
-                                                );
-                                              if (res)
-                                                props.row.status = res.status;
-                                            }
-                                          "
-                                          :model-value="
-                                            props.row.status === 'CREATED' ||
-                                            props.row.status === 'ACTIVE'
-                                          "
-                                        />
-                                      </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-6">
-                          <BranchCard
-                            :id="`branch-card-${props.row.name}`"
-                            :class="{
-                              'cursor-pointer': props.row._count.branch !== 0,
-                            }"
-                            @click="
-                              () => {
-                                if (props.row.isHeadOffice && props.row._count.branch !==0) {
-                                  fieldSelectedBranch.value = '';
-                                  inputSearch = '';
-                                  currentHq = {
-                                    id: props.row.id,
-                                    code: props.row.code,
-                                  };
-                                  beforeBranch = {
-                                    id: '',
-                                    code: '',
-                                  };
-                                }
-                              }
-                            "
-                            :metadata="props.row"
-                            :color="props.row.isHeadOffice ? 'hq' : 'br'"
-                            :key="props.row.id"
-                            :data="{
-                              branchLabelCode: props.row.code,
-                              branchLabelName:
-                                $i18n.locale === 'en-US'
-                                  ? props.row.nameEN
-                                  : props.row.name,
-                              branchLabelTel: props.row.contact
-                                .map((c: BranchContact) => c.telephoneNo)
-                                .join(','),
-                              branchLabelAddress:
-                                $i18n.locale === 'en-US'
-                                  ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
-                                  : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
-                              branchLabelType: $t(
-                                props.row.isHeadOffice
-                                  ? 'branchHQLabel'
-                                  : 'branchLabel',
-                              ),
-                            }"
-                            :field-selected="fieldSelected"
-                            :badge-field="['branchLabelStatus']"
-                            :inactive="props.row.status === 'INACTIVE'"
-                            @view-detail="
-                              (v) => {
-                                triggerEdit(
-                                  'drawer',
-                                  v.id,
-                                  v.isHeadOffice ? 'headOffice' : 'subBranch',
-                                  v.code,
-                                );
-                              }
-                            "
-                          >
-                            <template v-slot:action>
-                              <q-menu  class="bordered" >
-                                <q-list>
-                                  <q-item
-                                    :id="`view-detail-btn-${props.row.name}-view`"
-                                    @click.stop="
-                                      if (props.row.isHeadOffice) {
-                                        triggerEdit(
-                                          'drawer',
-                                          props.row.id,
-                                          'headOffice',
-                                          props.row.code,
-                                        );
-                                      } else {
-                                        triggerEdit(
-                                          'drawer',
-                                          props.row.id,
-                                          'subBranch',
-                                        );
-                                      }
-                                    "
-                                    v-close-popup
-                                    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`"
-                                     v-close-popup
-                                    clickable
-                                    dense
-                                    class="row q-py-sm"
-                                    style="white-space: nowrap"
-                                    @click="
-                                      () => {
-                                        if (props.row.isHeadOffice) {
-                                          triggerEdit(
-                                            'form',
-                                            props.row.id,
-                                            'headOffice',
-                                            props.row.code,
-                                          );
-                                        } else {
-                                          triggerEdit(
-                                            'form',
-                                            props.row.id,
-                                            'subBranch',
-                                          );
-                                        }
-                                      }
-                                    "
-                                  >
-                                    <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
-                                    v-close-popup
-                                    :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="triggerDelete(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">
-                                        <q-toggle
-                                          :id="`view-detail-btn-${props.row.name}-status`"
-                                          dense
-                                          size="sm"
-                                          :label="
-                                            props.row.status !== 'INACTIVE'
-                                              ? $t('switchOnLabel')
-                                              : $t('switchOffLabel')
-                                          "
-                                          @click="
-                                            async () => {
-                                              const res =
-                                                await branchStore.editById(
-                                                  props.row.id,
-                                                  {
-                                                    status:
-                                                      props.row.status !==
-                                                      'INACTIVE'
-                                                        ? 'INACTIVE'
-                                                        : 'ACTIVE',
-                                                  },
-                                                );
-                                              if (res)
-                                                props.row.status = res.status;
-                                            }
-                                          "
-                                          :model-value="
-                                            props.row.status === 'CREATED' ||
-                                            props.row.status === 'ACTIVE'
-                                          "
-                                        />
-                                      </div>
-                                    </q-item-section>
-                                  </q-item>
-                                </q-list>
-                              </q-menu>
-                            </template>
-                          </BranchCard>
-                        </div>
-                      </template>
-                    </q-table>
-                  </div>
+                                <q-item dense>
+                                  <q-item-section class="q-py-sm">
+                                    <div class="q-pa-sm surface-2 rounded">
+                                      <q-toggle
+                                        :id="`view-detail-btn-${props.row.name}-status`"
+                                        dense
+                                        size="sm"
+                                        :label="
+                                          props.row.status !== 'INACTIVE'
+                                            ? $t('switchOnLabel')
+                                            : $t('switchOffLabel')
+                                        "
+                                        @click="
+                                          async () => {
+                                            const res =
+                                              await branchStore.editById(
+                                                props.row.id,
+                                                {
+                                                  status:
+                                                    props.row.status !==
+                                                    'INACTIVE'
+                                                      ? 'INACTIVE'
+                                                      : 'ACTIVE',
+                                                },
+                                              );
+                                            if (res)
+                                              props.row.status = res.status;
+                                          }
+                                        "
+                                        :model-value="
+                                          props.row.status === 'CREATED' ||
+                                          props.row.status === 'ACTIVE'
+                                        "
+                                      />
+                                    </div>
+                                  </q-item-section>
+                                </q-item>
+                              </q-list>
+                            </q-menu>
+                          </template>
+                        </BranchCard>
+                      </div>
+                    </template>
+                  </q-table>
                 </div>
               </div>
             </template>