From 075e7087fe6fe94607a201aef0eb7ae31bd218c1 Mon Sep 17 00:00:00 2001
From: Methapon-Frappet <methapon@frappet.com>
Date: Tue, 16 Apr 2024 18:33:41 +0700
Subject: [PATCH] refactor: overhaul

---
 src/pages/01_branch-management/MainPage.vue | 1229 +++----------------
 1 file changed, 168 insertions(+), 1061 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 38d1514a..ed2bbdb6 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1,82 +1,78 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { ref, onMounted } from 'vue';
-import { Icon } from '@iconify/vue';
+import { ref, onMounted, computed } from 'vue';
 
 import useBranchStore from 'stores/branch';
-import useBranchContactStore from 'stores/branch-contact';
+
 import AppBox from 'components/app/AppBox.vue';
 import AddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
-import StatCardComponent from 'components/StatCardComponent.vue';
-import CardDetailsComponent from 'src/components/01_branch-management/CardDetailsComponent.vue';
-import DetailBranchDrawerComponent from 'src/components/01_branch-management/DetailBranchDrawerComponent.vue';
-import FormDialog from 'src/components/FormDialog.vue';
-import TableCardComponent from 'src/components/01_branch-management/TableCardComponent.vue';
-import { dialog } from 'src/stores/utils';
+import StatCard from 'components/StatCardComponent.vue';
 
-import { BranchContactCreate } from 'src/stores/branch-contact/types';
-
-import {
-  BranchWithChildren,
-  Branch,
-  BranchCreate,
-} from 'src/stores/branch/types';
+import { BranchContactCreate } from 'stores/branch-contact/types';
+import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
+import { watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
 
 const profileFile = ref<File | undefined>(undefined);
-const inputFile = document.createElement('input');
-inputFile.type = 'file';
-inputFile.accept = 'image/*';
 
-inputFile.addEventListener('change', (e) => {
-  profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
-});
+const inputFile = (() => {
+  const element = document.createElement('input');
+  element.type = 'file';
+  element.accept = 'image/*';
+
+  element.addEventListener('change', () => {
+    profileFile.value = element.files?.[0];
+  });
+
+  return element;
+})();
 
 const branchStore = useBranchStore();
-const branchContactStore = useBranchContactStore();
+const { locale } = useI18n();
 
 const { data: branchData } = storeToRefs(branchStore);
 
-const modal = ref<boolean>(false);
+const treeData = computed(() => {
+  const arr: BranchWithChildren[] = [];
 
-const currentHeadOfficeId = ref<string>();
-const currentHeadOfficeName = ref<{
-  nameTh: string;
-  nameEn: string;
-}>({ nameTh: '', nameEn: '' });
-const currentBranchIdEdit = ref<string>('');
-const currentBranchContactIdEdit = ref<string>('');
-const showCurrentBranch = ref<Branch>();
+  branchData.value?.result.forEach((a) => {
+    if (a.isHeadOffice) arr.push(Object.assign(a, { branch: [] }));
+    else arr.find((b) => b.id === a.headOfficeId)?.branch.push(a);
+  });
 
-const shape = ref<boolean>(false);
-const openBranchDrawer = ref<boolean>(false);
-const openCardDetails = ref<boolean>(false);
-const openTableCard = ref<boolean>(true);
-
-const formDialogRef = ref();
-const inputSelectBranch = ref<string>('ทั้งหมด');
-const inputFilter = ref<string>('คอลัมน์');
-const inputSearch = ref<string>('');
-const optionsBranch: string[] = ['ทั้งหมด', 'สำนักงานใหญ่', 'สาขา'];
-const optionsFilter: string[] = [
-  'ชื่อสาขา',
-  'ที่อยู่',
-  'เบอร์โทร',
-  'สำนักงานใหญ่',
-  'ประเภท',
-  'สถานะ',
-];
-
-const urlQrCode = ref<string | boolean>(false);
-const formDataContact = ref<BranchContactCreate>({
-  lineId: '',
-  telephoneNo: '',
+  return arr;
 });
 
-const formType = ref<'edit' | 'create' | 'delete'>('create');
-const typeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
-const inputCode = ref<string>('');
-const formData = ref<BranchCreate>({
+onMounted(async () => {
+  await branchStore.fetchList({ pageSize: 99999 });
+  const _stats = await branchStore.stats();
+
+  if (_stats) {
+    stats.value.push(
+      { count: _stats.hq, label: 'branchHQLabel' },
+      { count: _stats.br, label: 'branchLabel' },
+    );
+  }
+});
+
+watch(locale, () => {
+  console.log(locale.value);
+});
+
+const fieldDisplay = ref([
+  'branchLabelName',
+  'branchLabelTel',
+  'branchLabelAddress',
+  'branchLabelType',
+  'branchLabelStatus',
+]);
+const fieldSelected = ref<string[]>(fieldDisplay.value);
+const stats = ref<{ count: number; label: string }[]>([]);
+
+const defaultFormData = {
+  headOfficeId: null,
   taxNo: '',
   nameEN: '',
   name: '',
@@ -90,1039 +86,150 @@ const formData = ref<BranchCreate>({
   subDistrictId: '',
   districtId: '',
   provinceId: '',
-  headOfficeId: null,
-});
+  contact: [{ lineId: '', telephoneNo: '' }],
+};
 
-const selected = ref<string>('');
-
-const expanded = ref<string[]>([]);
-
-const branchStats = ref<{ amount: number; label: string }[]>([]);
-
-const treeData = ref<BranchWithChildren[]>([]);
-
-const subBranch = ref<boolean>(false);
-const rowsBranch = ref<
-  {
-    id: string;
-    name: string;
-    branchName: string;
-    address: string;
-    telephoneNo: string;
-    code: string;
-    type: boolean;
-    status: string;
-  }[]
->([]);
+const formData = ref<BranchCreate & { contact: BranchContactCreate[] }>(
+  structuredClone(defaultFormData),
+);
 
 function clearData() {
-  formData.value = {
-    taxNo: '',
-    nameEN: '',
-    name: '',
-    addressEN: '',
-    address: '',
-    zipCode: '',
-    email: '',
-    telephoneNo: '',
-    longitude: '',
-    latitude: '',
-    subDistrictId: '',
-    districtId: '',
-    provinceId: '',
-    headOfficeId: null,
-  };
-
-  formDataContact.value = {
-    lineId: '',
-    telephoneNo: '',
-  };
-
+  formData.value = structuredClone(defaultFormData);
   profileFile.value = undefined;
-  urlQrCode.value = false;
 }
-function openDialog() {
-  modal.value = true;
-}
-
-async function getTree() {
-  const result = await branchStore.fetchList<BranchWithChildren>({
-    tree: true,
-  });
-
-  if (result) {
-    treeData.value = result.result;
-    rowsBranch.value = treeData.value
-      .filter((v) => v.isHeadOffice)
-      .map((v) => ({
-        id: v.id,
-        name: v.code,
-        branchName: v.name,
-        address: v.address,
-        telephoneNo: v.telephoneNo,
-        code: v.code,
-        type: v.isHeadOffice,
-        status: v.status.toString(),
-      }));
-
-    subBranch.value = false;
-    showCurrentBranch.value = undefined;
-    currentHeadOfficeId.value = undefined;
-  }
-}
-
-function changeSubject(
-  formType: 'edit' | 'create' | 'delete',
-  typeBranch: 'headOffice' | 'subBranch',
-) {
-  if (typeBranch === 'headOffice') {
-    return formType === 'create' ? 'เพิ่มสำนักงานใหญ่' : 'แก้ไขสำนักงานใหญ่';
-  }
-  if (typeBranch === 'subBranch') {
-    return formType === 'create' ? 'เพิ่มสาขา' : 'แก้ไขสาขา';
-  }
-  return '';
-}
-
-function triggerCreateSubBranch(code: string, id: string) {
-  clearData();
-  formType.value = 'create';
-  typeBranch.value = 'subBranch';
-  inputCode.value = code;
-  formData.value.headOfficeId = id;
-  openDialog();
-}
-
-async function triggerEditSubBranch(code: string, id: string) {
-  await clearData();
-  formType.value = 'edit';
-  typeBranch.value = 'subBranch';
-  inputCode.value = code;
-  formData.value.headOfficeId = id;
-  currentBranchIdEdit.value = id;
-  await fetchFormEditBranch(id);
-  await fetchFormEditBranchContact(id);
-  await formDialogRef.value.fetchDistrict(formData.value.provinceId);
-  await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
-  openDialog();
-}
-
-function triggerDeleteSubBranch(id: string) {
-  clearData();
-  formType.value = 'delete';
-  typeBranch.value = 'subBranch';
-  formData.value.headOfficeId = id;
-  dialog({
-    color: 'negative',
-    icon: 'mdi-alert',
-    title: 'ยืนยังการลบข้อมูล',
-    actionText: 'ตกลง',
-    persistent: true,
-    message: 'ท่านต้องการลบข้อมูลหรือมั้ย',
-    action: async () => {
-      await deleteForm(id);
-      await getTree();
-    },
-    cancel: () => {},
-  });
-}
-
-function triggerCreateHeadOffice() {
-  clearData();
-  formType.value = 'create';
-  typeBranch.value = 'headOffice';
-  openDialog();
-}
-
-async function triggerEditHeadOffice(id: string) {
-  clearData();
-  formType.value = 'edit';
-  typeBranch.value = 'headOffice';
-  currentBranchIdEdit.value = id;
-  await fetchFormEditBranch(id);
-  await fetchFormEditBranchContact(id);
-
-  await formDialogRef.value.fetchDistrict(formData.value.provinceId);
-  await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
-
-  openDialog();
-}
-
-function triggerDeleteHeadOffice(id: string) {
-  clearData();
-  formType.value = 'delete';
-  typeBranch.value = 'headOffice';
-
-  dialog({
-    color: 'negative',
-    icon: 'mdi-alert',
-    title: 'ยืนยังการลบข้อมูล',
-    actionText: 'ตกลง',
-    persistent: true,
-    message: 'ท่านต้องการลบข้อมูลหรือมั้ย',
-    action: async () => {
-      await deleteForm(id);
-      await getTree();
-    },
-    cancel: () => {},
-  });
-}
-
-async function fetchFormEditBranch(id: string) {
-  const result = await branchStore.fetchById<Branch>(id);
-
-  if (result) {
-    formData.value = {
-      taxNo: result.taxNo,
-      nameEN: result.nameEN,
-      name: result.name,
-      addressEN: result.addressEN,
-      address: result.address,
-      zipCode: result.zipCode,
-      email: result.email,
-      telephoneNo: result.telephoneNo,
-      longitude: result.longitude,
-      latitude: result.latitude,
-      subDistrictId: result.subDistrictId,
-      districtId: result.districtId,
-      provinceId: result.provinceId,
-      headOfficeId: result.headOfficeId,
-    };
-  }
-}
-
-async function deleteForm(idBranch: string) {
-  await fetchFormEditBranchContact(idBranch);
-  await branchContactStore.deleteById(
-    idBranch,
-    currentBranchContactIdEdit.value,
-  );
-  await branchStore.deleteById(idBranch);
-}
-
-async function fetchFormEditBranchContact(id: string) {
-  const result = await branchContactStore.fetchList(id);
-
-  if (result) {
-    const first = result.result.pop();
-
-    if (!first) return;
-
-    currentBranchContactIdEdit.value = first.id;
-    urlQrCode.value = first.qrCodeImageUrl;
-    formDataContact.value = {
-      lineId: first.lineId,
-      telephoneNo: first.telephoneNo,
-    };
-  }
-}
-
-async function submitForm(
-  typeSubmit: 'create' | 'edit' | 'delete',
-  formTypeSubmit: 'headOffice' | 'subBranch',
-  inputBranchCreate: BranchCreate,
-  inputBranchContactCreate: BranchContactCreate,
-) {
-  if (formTypeSubmit === 'headOffice') {
-    if (typeSubmit === 'create') {
-      const result = await branchStore.create(inputBranchCreate);
-      if (result) {
-        await branchContactStore.create(
-          result.id,
-          inputBranchContactCreate,
-          profileFile.value,
-        );
-        getTree();
-        modal.value = false;
-        return;
-      }
-    }
-    if (typeSubmit === 'edit') {
-      await branchStore.editById(currentBranchIdEdit.value, inputBranchCreate);
-
-      if (currentBranchIdEdit.value && currentBranchContactIdEdit.value) {
-        await branchContactStore.editById(
-          currentBranchIdEdit.value,
-          currentBranchContactIdEdit.value,
-          inputBranchContactCreate,
-          profileFile.value ? profileFile.value : undefined,
-        );
-      } else {
-        await branchContactStore.create(
-          currentBranchIdEdit.value,
-          inputBranchContactCreate,
-          profileFile.value ? profileFile.value : undefined,
-        );
-      }
-
-      getTree();
-      modal.value = false;
-      return;
-    }
-  }
-
-  if (formTypeSubmit === 'subBranch') {
-    if (typeSubmit === 'create') {
-      const result = await branchStore.create(inputBranchCreate);
-      if (result) {
-        await branchContactStore.create(
-          result.id,
-          inputBranchContactCreate,
-          profileFile.value,
-        );
-        getTree();
-        modal.value = false;
-        return;
-      }
-    }
-
-    if (typeSubmit === 'edit') {
-      await branchStore.editById(currentBranchIdEdit.value, inputBranchCreate);
-      await branchContactStore.editById(
-        currentBranchIdEdit.value,
-        currentBranchContactIdEdit.value,
-        inputBranchContactCreate,
-        profileFile.value ? profileFile.value : undefined,
-      );
-      getTree();
-      modal.value = false;
-      return;
-    }
-  }
-}
-
-async function fetchCard(id: string, drawer = false) {
-  const result = await branchStore.fetchById<Branch>(id);
-
-  if (result) {
-    showCurrentBranch.value = result;
-
-    if (drawer) openBranchDrawer.value = true;
-    else {
-      openCardDetails.value = true;
-      openTableCard.value = false;
-    }
-  }
-}
-
-async function fetchSubBranch(id: string) {
-  const result = await branchStore.fetchById<BranchWithChildren>(id, {
-    includeSubBranch: true,
-  });
-
-  if (result) {
-    if (result.isHeadOffice) {
-      currentHeadOfficeId.value = result.id;
-      currentHeadOfficeName.value = {
-        nameTh: result.name,
-        nameEn: result.nameEN,
-      };
-    }
-    rowsBranch.value = result.branch.map((v) => ({
-      id: v.id,
-      name: v.code,
-      branchName: v.name,
-      address: v.address,
-      telephoneNo: v.telephoneNo,
-      code: v.code,
-      type: v.isHeadOffice,
-      status: v.status,
-    }));
-
-    showCurrentBranch.value = undefined;
-    subBranch.value = true;
-    openCardDetails.value = false;
-    openTableCard.value = true;
-  }
-}
-
-onMounted(async () => {
-  getTree();
-  const result = await branchStore.stats();
-
-  if (result) {
-    branchStats.value.push({
-      amount: result.hq,
-      label: 'branchHQLabel',
-    });
-    branchStats.value.push({
-      amount: result.br,
-      label: 'branchLabel',
-    });
-  }
-});
 </script>
+
 <template>
   <div class="column">
     <div class="row text-h6 text-weight-bold q-mb-md">
       {{ $t('branchManagement') }}
     </div>
 
-    <AppBox
-      bordered
-      class="q-mb-md"
-      :class="{ 'bg-card-branch-title': $q.dark.isActive }"
-    >
-      <StatCardComponent :branch="branchStats" :dark="$q.dark.isActive" />
+    <AppBox bordered class="q-mb-md">
+      <StatCard :branch="stats" :dark="$q.dark.isActive" />
     </AppBox>
 
-    <AppBox bordered style="width: 100%" v-if="!branchData?.total">
-      <div class="row justify-end">
+    <AppBox class="column" no-padding bordered style="min-height: 70vh">
+      <template v-if="!branchData.total">
         <TooltipComponent
+          class="self-end"
           title="branchNoMainOfficeYet"
           caption="branchClickToCreateMainOffice"
-          imgSrc="img-table-"
+          imgSrc="personnel-table-"
         />
-      </div>
-      <div
-        style="
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: 40vh;
-        "
-      >
-        <AddButton :label="'สร้างสำนักงานใหญ่'" @trigger="() => openDialog()" />
-      </div>
-    </AppBox>
 
-    <AppBox
-      class="bordered branch-container no-padding"
-      :class="{ dark: $q.dark.isActive }"
-      v-if="branchData && branchData.total > 0"
-    >
-      <AppBox class="bg-card-branch-title" style="border-radius: 0">
-        <div class="row items-center">
-          <span
-            v-if="false"
-            class="col q-pl-md text-h6 text-weight-bold color-card-branch-title"
-          >
-            {{ $t('headQuarters') }}
-          </span>
-
-          <span class="col text-h7 text-weight-bold color-card-branch-title">
-            <div class="row" style="width: 300px">
-              <div class="column q-px-sm" @click="getTree()">ทั้งหมด</div>
-              <div class="column q-px-sm" v-if="currentHeadOfficeId">></div>
-              <div
-                class="column q-px-sm"
-                v-if="currentHeadOfficeId"
-                @click="fetchSubBranch(currentHeadOfficeId)"
-              >
-                {{ currentHeadOfficeName.nameTh }}
-              </div>
-
-              <div
-                class="column q-px-sm"
-                v-if="showCurrentBranch && !showCurrentBranch.isHeadOffice"
-              >
-                >
-              </div>
-              <div
-                class="column q-px-sm"
-                v-if="showCurrentBranch && !showCurrentBranch.isHeadOffice"
-              >
-                {{ showCurrentBranch.code }}
-              </div>
-            </div>
-          </span>
-
-          <div class="col-3">
-            <q-input
-              class="bordered rounded q-px-md"
-              borderless
-              dense
-              v-model="inputSearch"
-              label="ค้นหา"
-            >
-              <template #prepend>
-                <Icon icon="ic:baseline-search" />
-              </template>
-            </q-input>
-          </div>
+        <div class="row items-center justify-center" style="flex-grow: 1">
+          <AddButton label="branchAdd" @trigger="() => {}" />
         </div>
-      </AppBox>
-
-      <AppBox class="no-padding row bordered-t" style="border-radius: 0">
-        <div class="q-pa-md bg-branch-tree-box bordered-r" style="width: 21%">
-          <div
-            @click="triggerCreateHeadOffice()"
-            class="btn-add col-2 text-weight-bold cursor-pointer color-card-branch-btn"
-          >
-            <div class="text-h4 q-mr-md">+</div>
-            {{ $t('btnCreate') }}
-          </div>
-
-          <q-scroll-area
-            class="q-pa-sm bg-branch-tree-scroll"
-            style="height: 350px; width: 100%; border-radius: 6px"
-          >
-            <div class="col">
-              <q-tree
-                :nodes="treeData"
-                dense
-                node-key="name"
-                v-model:expanded="expanded"
-                v-model:selected="selected"
-                children-key="branch"
-              >
-                <template #default-header="prop">
-                  <div
-                    @click="
-                      () => {
-                        fetchSubBranch(prop.node.id);
-
-                        if (
-                          !expanded.includes(prop.node.name) &&
-                          expanded.length <= 1
-                        ) {
-                          expanded.push(prop.node.name);
-                        } else expanded[1] = prop.node.name;
-                      }
-                    "
-                    class="q-px-sm color-brach-tree-text"
-                    :class="{
-                      'color-tree-active': expanded.includes(prop.node.name),
-                      'bg-branch-tree':
-                        prop.node.isHeadOffice &&
-                        expanded.includes(prop.node.name),
-                      'dark-tree': $q.dark.isActive,
-                    }"
-                    style="border-radius: 6px"
-                  >
-                    {{ prop.node.name }}
-                  </div>
-
-                  <q-space />
-
-                  <q-btn
-                    class="color-brach-tree-btn"
-                    @click.stop="
-                      triggerCreateSubBranch(prop.node.code, prop.node.id)
-                    "
-                    v-if="prop.node.isHeadOffice"
-                    size="lg"
-                    flat
-                    square
-                    dense
-                  >
-                    <Icon
-                      v-if="expanded.includes(prop.node.name)"
-                      icon="eva:file-add-fill"
-                    />
-
-                    <Icon v-else icon="eva:file-add-outline" />
-                  </q-btn>
-                  <!-- subBranch -->
-                  <q-btn
-                    v-else
-                    class="color-brach-tree-btn"
-                    @click.stop
-                    size="lg"
-                    dense
-                    flat
-                    name="menu"
-                  >
-                    <Icon icon="ri:more-2-fill" width="16px" />
-                    <q-menu class="bordered" style="width: 150px">
-                      <q-list>
-                        <q-item
-                          clickable
-                          v-close-popup
-                          dense
-                          @click="
-                            triggerEditSubBranch(prop.node.code, prop.node.id)
-                          "
-                        >
-                          <q-item-section avatar class="q-py-sm">
-                            <q-icon
-                              style="color: hsl(var(--cyan-6-hsl))"
-                              name="mdi-pencil-outline"
-                            />
-                          </q-item-section>
-                          <q-item-section>{{ $t('edit') }}</q-item-section>
-                        </q-item>
-
-                        <q-item
-                          clickable
-                          v-close-popup
-                          dense
-                          @click="triggerDeleteSubBranch(prop.node.id)"
-                        >
-                          <q-item-section avatar class="q-py-sm">
-                            <q-icon
-                              style="color: hsl(var(--red-6-hsl))"
-                              name="mdi-trash-can-outline"
-                            />
-                          </q-item-section>
-                          <q-item-section>{{ $t('delete') }}</q-item-section>
-                        </q-item>
-
-                        <q-item v-close-popup dense>
-                          <q-item-section class="q-py-sm">
-                            <div
-                              class="bg-branch-tree-toggle q-pa-sm"
-                              style="border-radius: 6px"
-                              :class="{ 'dark-toggle': $q.dark.isActive }"
-                            >
-                              <q-toggle
-                                dense
-                                :label="$t('closedStatus')"
-                                size="sm"
-                                v-model="shape"
-                                val="md"
-                              />
-                            </div>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
-                  </q-btn>
-
-                  <q-btn
-                    v-if="prop.node.isHeadOffice"
-                    class="color-brach-tree-btn"
-                    @click.stop
-                    size="lg"
-                    dense
-                    flat
-                    name="menu"
-                  >
-                    <Icon icon="ri:more-2-fill" width="16px" />
-                    <q-menu class="bordered" style="width: 150px">
-                      <q-list>
-                        <q-item
-                          clickable
-                          v-close-popup
-                          dense
-                          @click="triggerEditHeadOffice(prop.node.id)"
-                        >
-                          <q-item-section avatar class="q-py-sm">
-                            <q-icon
-                              style="color: hsl(var(--cyan-6-hsl))"
-                              name="mdi-pencil-outline"
-                            />
-                          </q-item-section>
-                          <q-item-section>{{ $t('edit') }}</q-item-section>
-                        </q-item>
-
-                        <q-item
-                          clickable
-                          v-close-popup
-                          dense
-                          @click="triggerDeleteHeadOffice(prop.node.id)"
-                        >
-                          <q-item-section avatar class="q-py-sm">
-                            <q-icon
-                              style="color: hsl(var(--red-6-hsl))"
-                              name="mdi-trash-can-outline"
-                            />
-                          </q-item-section>
-                          <q-item-section>{{ $t('delete') }}</q-item-section>
-                        </q-item>
-
-                        <q-item v-close-popup dense>
-                          <q-item-section class="q-py-sm">
-                            <div
-                              class="bg-branch-tree-toggle q-pa-sm"
-                              style="border-radius: 6px"
-                              :class="{ 'dark-toggle': $q.dark.isActive }"
-                            >
-                              <q-toggle
-                                dense
-                                :label="$t('closedStatus')"
-                                size="sm"
-                                v-model="shape"
-                                val="md"
-                              />
-                            </div>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
-                  </q-btn>
-                </template>
-              </q-tree>
-            </div>
-          </q-scroll-area>
-        </div>
-
-        <div v-if="openTableCard" class="col" style="overflow-y: auto">
-          <AppBox class="q-pb-none">
-            <div class="row">
-              <div class="col">
-                <q-select
-                  style="width: 150px"
-                  dense
-                  outlined
-                  v-model="inputSelectBranch"
-                  :options="optionsBranch"
-                  label="เลือก"
-                />
-              </div>
-              <div class="col-3">
-                <q-select
-                  dense
-                  outlined
-                  v-model="inputFilter"
-                  :options="optionsFilter"
-                />
-              </div>
-            </div>
-          </AppBox>
-
-          <AppBox>
-            <TableCardComponent
-              @navigate="(v) => fetchSubBranch(v.id)"
-              @show-info="(v) => fetchCard(v.id, !subBranch)"
-              :sub-branch="subBranch"
-              :rows="rowsBranch"
-            />
-          </AppBox>
-        </div>
-
+      </template>
+      <template v-else>
         <div
-          v-if="openCardDetails"
-          class="col bordered"
-          style="overflow-y: auto"
+          class="row bordered-b q-pa-md"
+          :style="{
+            color: 'var(--brand-1)',
+            backgroundColor: 'hsla(var(--info-bg) / .1)',
+          }"
         >
-          <CardDetailsComponent
-            v-if="showCurrentBranch"
-            :data="showCurrentBranch"
-            class="q-pa-sm"
-          />
+          <div class="text-h5"><q-icon name="mdi-home"></q-icon></div>
         </div>
-      </AppBox>
+        <div class="row" style="flex-grow: 1; flex-wrap: nowrap">
+          <div class="tree-container q-pa-md bordered-r">
+            <q-tree
+              :nodes="treeData"
+              node-key="id"
+              label-key="name"
+              children-key="branch"
+            >
+              <template #default-header="{ node }">
+                <div class="row items-center justify-between full-width">
+                  <span>{{ node.name }}</span>
+                  <div class="q-gutter-xs" @click.stop>
+                    <q-btn icon="mdi-file-plus-outline" fab-mini unelevated />
+                    <q-btn icon="mdi-dots-vertical" fab-mini unelevated />
+                  </div>
+                </div>
+              </template>
+            </q-tree>
+          </div>
+          <div class="branch-wrapper q-pa-md">
+            <div class="q-mb-md flex" style="gap: var(--size-4)">
+              <div style="flex-grow: 1">
+                <q-select
+                  :options="
+                    fieldDisplay.map((v) => ({ label: $t(v), value: v }))
+                  "
+                  v-model="fieldSelected"
+                  option-label="label"
+                  option-value="value"
+                  map-options
+                  emit-value
+                  outlined
+                  multiple
+                  dense
+                />
+              </div>
+              <div style="flex-grow: 1">
+                <q-select
+                  :options="
+                    fieldDisplay.map((v) => ({ label: $t(v), value: v }))
+                  "
+                  v-model="fieldSelected"
+                  option-label="label"
+                  option-value="value"
+                  map-options
+                  emit-value
+                  outlined
+                  multiple
+                  dense
+                />
+              </div>
+            </div>
+            <div class="branch-container">
+              <BranchCard
+                v-for="item in branchData.result.map((v) => ({
+                  id: v.id,
+                  hq: v.isHeadOffice,
+                  branchLabelCode: v.code,
+                  branchLabelName: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+                  branchLabelTel: v.telephoneNo,
+                  branchLabelAddress:
+                    $i18n.locale === 'en-US'
+                      ? `${v.addressEN || ''} ${v.subDistrict?.nameEN || ''} ${v.district?.nameEN || ''} ${v.province?.nameEN || ''}`
+                      : `${v.address || ''} ${v.subDistrict?.name || ''} ${v.district?.name || ''} ${v.province?.name || ''}`,
+                  branchLabelType: $t(
+                    v.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
+                  ),
+                  branchLabelStatus: v.status,
+                }))"
+                :key="item.id"
+                :data="item"
+                :field-selected="fieldSelected"
+                @view-detail="(b) => console.log(b)"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
     </AppBox>
   </div>
-
-  <DetailBranchDrawerComponent
-    @trigger-edit="
-      (v) => {
-        subBranch
-          ? triggerEditSubBranch(v.code, v.id)
-          : triggerEditHeadOffice(v.id);
-        openBranchDrawer = false;
-      }
-    "
-    @trigger-delete="
-      (v) => {
-        subBranch
-          ? triggerDeleteSubBranch(v.id)
-          : triggerDeleteHeadOffice(v.id);
-      }
-    "
-    v-if="showCurrentBranch"
-    v-model:open="openBranchDrawer"
-    :data="showCurrentBranch"
-  />
-
-  <FormDialog
-    ref="formDialogRef"
-    v-model:modal="modal"
-    v-model:address="formData.address"
-    v-model:addressEN="formData.addressEN"
-    v-model:provinceId="formData.provinceId as string"
-    v-model:districtId="formData.districtId as string"
-    v-model:subDistrictId="formData.subDistrictId as string"
-    v-model:zipCode="formData.zipCode"
-    :title="changeSubject(formType, typeBranch)"
-    :submit="() => submitForm(formType, typeBranch, formData, formDataContact)"
-  >
-    <template #top>
-      <div class="row full-width">
-        <div class="col">
-          <q-input
-            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-            v-model="inputCode"
-            dense
-            outlined
-            :label="$t('formDialogInputCode')"
-            readonly
-          />
-        </div>
-
-        <div class="col q-pl-md">
-          <q-input
-            hide-bottom-space
-            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-            v-model="formData.taxNo"
-            dense
-            outlined
-            :label="$t('formDialogInputTaxNo')"
-            lazy-rules
-            :rules="[
-              (val) =>
-                (val && val.length > 0) || $t('formDialogInputTaxNoValidate'),
-            ]"
-          />
-        </div>
-      </div>
-
-      <div class="row full-width">
-        <div class="col">
-          <q-input
-            hide-bottom-space
-            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-            v-model="formData.name"
-            dense
-            outlined
-            :label="
-              typeBranch === 'headOffice'
-                ? $t('formDialogInputNameHq')
-                : $t('formDialogInputNameSubBranch')
-            "
-            lazy-rules
-            :rules="[(val) => val && val.length > 0]"
-            :error-message="
-              typeBranch === 'headOffice'
-                ? $t('formDialogInputNameHqValidate')
-                : $t('formDialogInputNameSubBranchValidate')
-            "
-          />
-        </div>
-
-        <div class="col q-pl-md">
-          <q-input
-            hide-bottom-space
-            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-            v-model="formData.nameEN"
-            dense
-            outlined
-            :label="
-              typeBranch === 'headOffice'
-                ? $t('formDialogInputNameHqEn')
-                : $t('formDialogInputNameSubBranchEn')
-            "
-            :rules="[(val) => val && val.length > 0]"
-            :error-message="
-              typeBranch === 'headOffice'
-                ? $t('formDialogInputNameHqEnValidate')
-                : $t('formDialogInputNameSubBranchEnValidate')
-            "
-          />
-        </div>
-      </div>
-    </template>
-
-    <template #append>
-      <AppBox
-        class="q-mt-md branch-form-input-Contact"
-        :class="{ 'dark-form-input-Contact': $q.dark.isActive }"
-      >
-        <div class="row q-mb-md">
-          <div class="col">
-            <q-input
-              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-              hide-bottom-space
-              v-model="formDataContact.telephoneNo"
-              dense
-              outlined
-              :label="$t('formDialogInputTelephoneContact')"
-            />
-          </div>
-          <div class="col q-pl-md">
-            <q-input
-              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-              hide-bottom-space
-              v-model="formDataContact.lineId"
-              dense
-              outlined
-              label="Line Id"
-            />
-          </div>
-        </div>
-
-        <div
-          class="branch-form-show-qr-code q-pa-md column items-center justify-center full-width"
-          :class="{ 'dark-form-show-qr-code': $q.dark.isActive }"
-        >
-          <div class="col q-pb-md">
-            <q-img
-              v-if="urlQrCode"
-              :src="urlQrCode as string"
-              style="width: 100px; height: 100px"
-            />
-            <q-btn
-              class="branch-form-btn-qr-code"
-              v-else
-              unelevated
-              :color="$q.dark.isActive ? 'grey-10' : 'grey-2'"
-              :text-color="$q.dark.isActive ? 'white' : 'grey-5'"
-            >
-              <Icon icon="teenyicons:add-outline" width="20px" height="50px" />
-            </q-btn>
-          </div>
-          <div class="col">
-            <q-btn
-              style="
-                background: var(--blue-5);
-                color: var(--blue-0);
-                font-size: 12px;
-              "
-              unelevated
-              rounded
-              :label="$t('formDialogUploadQrCode')"
-              @click="inputFile.click()"
-            ></q-btn>
-          </div>
-        </div>
-      </AppBox>
-    </template>
-
-    <template #midBottom>
-      <div>
-        <div class="row full-width q-pb-md">
-          <div class="col q-pr-md">
-            <q-input
-              v-model="formData.telephoneNo"
-              dense
-              outlined
-              :label="$t('formDialogInputTelephoneHq')"
-            />
-          </div>
-          <div class="col">
-            <q-input
-              v-model="formData.email"
-              dense
-              outlined
-              :label="$t('formDialogInputEmailHq')"
-            />
-          </div>
-        </div>
-
-        <div
-          class="column q-pa-sm full-width bordered"
-          style="border-radius: 6px"
-        >
-          <div class="col">location</div>
-          <div class="col self-center bg-image q-pa-md">
-            <q-btn
-              rounded
-              style="
-                background: var(--blue-5);
-                color: var(--blue-0);
-                font-size: 12px;
-              "
-              class="flex flrx-center"
-              label="location"
-            ></q-btn>
-          </div>
-        </div>
-      </div>
-    </template>
-  </FormDialog>
 </template>
 
 <style scoped>
-.bg-image {
-  background-image: url(/map.png);
-  background-repeat: no-repeat;
-  background-size: auto;
+.tree-container {
+  width: 100%;
+  min-width: 300px;
+  max-width: 25%;
+  max-height: 100%;
 }
 
-.branch-form-show-qr-code {
-  --_bg-branch-form-show-qr-code: linear-gradient(
-    180deg,
-    var(--indigo-0),
-    var(--sand-0)
-  );
+.branch-wrapper {
+  flex-grow: 1;
 
-  --_border-branch-form-show-qr-code: 2px dashed var(--gray-4);
-  border: var(--_border-branch-form-show-qr-code);
-  border-radius: 10px;
-  background-image: var(--_bg-branch-form-show-qr-code);
-
-  &.dark-form-show-qr-code {
-    background: var(--gray-9);
-  }
-}
-
-.branch-form-btn-qr-code {
-  --_color-btn-qr-code: 3px solid var(--gray-4);
-
-  border: var(--_color-btn-qr-code);
-  border-radius: 6px;
-}
-
-.branch-form-input-Contact {
-  --_bg-branch-form-input-Contact: var(--gray-1-hsl);
-  background: hsl(var(--_bg-branch-form-input-Contact));
-
-  &.dark-form-input-Contact {
-    --_bg-branch-form-input-Contact: var(--gray-10-hsl);
-    border: 2px solid var(--gray-9);
-  }
-}
-
-.branch-container {
-  --_color-branch-tree-text: var(--blue-6-hsl);
-  --_color-branch-title: var(--blue-10-hsl);
-  --_bg-branch-title: var(--blue-0-hsl) / 0.5;
-  --_color-branch-btn: var(--cyan-6-hsl);
-  --_color-branch-tree-active: var(--blue-6-hsl);
-  --_bg-branch-tree-box: var(--gray-0-hsl);
-  --_bg-branch-tree-scroll: var(--gray-0-hsl);
-  --_color-branch-tree-scroll: var(--gray-0-hsl);
-
-  &.dark {
-    --_color-branch-title: var(--blue-0-hsl);
-    --_bg-branch-title: var(--gray-9-hsl) / 1;
-    --_color-branch-btn: var(--cyan-6-hsl);
-    --_color-branch-tree-active: var(--blue-6-hsl);
-    --_bg-branch-tree-box: var(--gray-10-hsl);
-    --_bg-branch-tree-scroll: var(--gray-11-hsl);
-    --_color-branch-tree-scroll: var(--gray-8-hsl);
-  }
-}
-
-.bg-branch-tree-toggle {
-  --_bg-branch-tree-toggle: var(--gray-3-hsl);
-  background: hsl(var(--_bg-branch-tree-toggle));
-
-  &.dark-toggle {
-    --_bg-branch-tree-toggle: var(--gray-9-hsl);
-  }
-}
-
-.bg-branch-tree-scroll {
-  background: hsl(var(--_bg-branch-tree-scroll));
-  color: hsl(var(--_color-branch-tree-scroll));
-}
-
-.bg-branch-tree-box {
-  background: hsl(var(--_bg-branch-tree-box));
-}
-
-.bg-card-branch-title {
-  background: hsla(var(--_bg-branch-title));
-}
-
-.color-card-branch-title {
-  color: hsl(var(--_color-branch-title));
-}
-
-.color-card-branch-btn {
-  color: hsl(var(--_color-branch-btn));
-  display: flex;
-  align-items: center;
-}
-
-.color-brach-tree-text,
-.color-brach-tree-btn {
-  color: var(--stone-6);
-}
-
-.color-tree-active {
-  color: hsl(var(--_color-branch-tree-active));
-}
-
-.bg-branch-tree {
-  background: hsla(var(--_color-branch-tree-active) / 0.08);
-
-  &.dark-tree {
-    background: hsla(var(--_color-branch-tree-active) / 0.01);
-    border: 1px solid hsla(var(--_color-branch-tree-active));
+  & > .branch-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: unset;
+    gap: var(--size-4);
   }
 }
 </style>