From 7efdc066e80351f5d1292bdda9999fd4ea3850e9 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 17:56:37 +0700
Subject: [PATCH] =?UTF-8?q?refactor:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=20layout=20=20=E0=B8=82=E0=B8=AD=E0=B8=87=20=20branch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue | 1094 ++++++++++++-------
 1 file changed, 706 insertions(+), 388 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index a579e02e..4ef1d80b 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -2,6 +2,8 @@
 import { storeToRefs } from 'pinia';
 import { ref, onMounted, computed } from 'vue';
 import { Icon } from '@iconify/vue';
+import { BranchContact } from 'src/stores/branch-contact/types';
+import type { QTableProps } from 'quasar';
 
 import useBranchStore from 'stores/branch';
 
@@ -28,6 +30,37 @@ import useFlowStore from 'src/stores/flow';
 const { t } = useI18n();
 const utilsStore = useUtilsStore();
 
+const labelBtnStatus = ref<string>(t('all'));
+
+const columns = [
+  {
+    name: 'name',
+    align: 'left',
+    label: 'office',
+    field: 'name',
+    sortable: true,
+  },
+  {
+    name: 'address',
+    align: 'left',
+    label: 'address',
+    field: 'address',
+    sortable: true,
+  },
+  {
+    name: 'telephoneNo',
+    align: 'left',
+    label: 'formDialogTelephone',
+    field: 'telephoneNo',
+  },
+  {
+    name: 'isHeadOffice',
+    align: 'left',
+    label: 'type',
+    field: 'isHeadOffice',
+  },
+] satisfies QTableProps['columns'];
+
 const modal = ref<boolean>(false);
 
 const profileFileImg = ref<File | undefined>(undefined);
@@ -152,6 +185,10 @@ const stats = ref<
   { icon: string; count: number; label: string; color: 'pink' | 'purple' }[]
 >([]);
 
+const modeView = ref<boolean>(false);
+
+const splitterModel = ref(25);
+
 const defaultFormData = {
   headOfficeId: null,
   taxNo: '',
@@ -442,7 +479,7 @@ watch(locale, () => {
     />
 
     <div
-      class="column col surface-1 bordered rounded scroll"
+      class="column col surface-1 rounded scroll"
       :no-padding="!!branchData.total"
     >
       <template v-if="!branchData.total">
@@ -462,7 +499,621 @@ watch(locale, () => {
       </template>
       <template v-else>
         <div class="row" style="flex-grow: 1; flex-wrap: nowrap">
-          <div class="tree-container q-pa-md bordered-r surface-2">
+          <q-splitter
+            v-model="splitterModel"
+            :limits="[25, 80]"
+            style="width: 100%"
+          >
+            <template v-slot:before>
+              <div class="rounded surface-1 full-height">
+                <div
+                  class="row bordered-b q-pl-sm text-weight-bold surface-2"
+                  style="height: 50px; display: flex; align-items: center"
+                >
+                  <div class="col">จัดการสาขาทั้งหมด</div>
+
+                  <div>
+                    <button
+                      id="hq-add-btn"
+                      style="border: none; background: transparent"
+                    >
+                      <Icon
+                        icon="pixelarticons:plus"
+                        height="26"
+                        class="cursor-pointer"
+                        @click="
+                          () => {
+                            if (!currentHq.id) {
+                              triggerCreate('headOffice');
+                            } else {
+                              triggerCreate(
+                                'subBranch',
+                                currentHq.id,
+                                currentHq.code,
+                              );
+                            }
+                          }
+                        "
+                      />
+                    </button>
+                  </div>
+                </div>
+
+                <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 no-wrap"
+                    >
+                      <span>{{ node.name }}</span>
+                      <div class="q-gutter-xs flex no-wrap" @click.stop>
+                        <q-btn
+                          v-if="node.isHeadOffice"
+                          :id="`create-sub-branch-btn-${node.name}`"
+                          @click.stop="
+                            triggerCreate('subBranch', node.id, node.code)
+                          "
+                          icon="mdi-file-plus-outline"
+                          fab-mini
+                          unelevated
+                        />
+
+                        <q-btn
+                          :id="`view-detail-btn-${node.name}`"
+                          icon="mdi-dots-vertical"
+                          fab-mini
+                          unelevated
+                          flat
+                        >
+                          <q-menu class="bordered">
+                            <q-list v-close-popup>
+                              <q-item
+                                :id="`view-detail-btn-${node.name}-view`"
+                                @click.stop="
+                                  if (node.isHeadOffice) {
+                                    triggerEdit(
+                                      'drawer',
+                                      node.id,
+                                      'headOffice',
+                                      node.code,
+                                    );
+                                  } else {
+                                    triggerEdit('drawer', node.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-${node.name}-edit`"
+                                clickable
+                                dense
+                                class="row q-py-sm"
+                                style="white-space: nowrap"
+                                @click="
+                                  () => {
+                                    if (node.isHeadOffice) {
+                                      triggerEdit(
+                                        'form',
+                                        node.id,
+                                        'headOffice',
+                                        node.code,
+                                      );
+                                    } else {
+                                      triggerEdit('form', node.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-${node.name}-delete`"
+                                dense
+                                :clickable="node.status === 'CREATED'"
+                                class="row"
+                                :class="{
+                                  'surface-3': node.status !== 'CREATED',
+                                  'app-text-muted': node.status !== 'CREATED',
+                                }"
+                                style="white-space: nowrap"
+                                @click="triggerDelete(node.id)"
+                              >
+                                <q-icon
+                                  name="mdi-trash-can-outline"
+                                  size="xs"
+                                  class="col-3"
+                                  :class="{
+                                    'app-text-negative':
+                                      node.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-${node.name}-status`"
+                                      dense
+                                      size="sm"
+                                      :label="
+                                        node.status !== 'INACTIVE'
+                                          ? $t('switchOnLabel')
+                                          : $t('switchOffLabel')
+                                      "
+                                      @click="
+                                        async () => {
+                                          const res =
+                                            await branchStore.editById(
+                                              node.id,
+                                              {
+                                                status:
+                                                  node.status !== 'INACTIVE'
+                                                    ? 'INACTIVE'
+                                                    : 'ACTIVE',
+                                              },
+                                            );
+                                          if (res) node.status = res.status;
+                                        }
+                                      "
+                                      :model-value="
+                                        node.status === 'CREATED' ||
+                                        node.status === 'ACTIVE'
+                                      "
+                                    />
+                                  </div>
+                                </q-item-section>
+                              </q-item>
+                            </q-list>
+                          </q-menu>
+                        </q-btn>
+                      </div>
+                    </div>
+                  </template>
+                </q-tree>
+              </div>
+            </template>
+
+            <template v-slot:after>
+              <div class="full-width">
+                <div
+                  class="row justify-between q-pl-md items-center surface-2 bordered-b q-pr-md"
+                  style="height: 50px"
+                >
+                  <div class="col-6">
+                    <q-input
+                      bg-color="white"
+                      for="input-Search"
+                      style="width: 250px"
+                      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"
+                      color="white"
+                      text-color="grey-10"
+                      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>
+
+                    <q-btn
+                      color="white"
+                      text-color="grey-10"
+                      id="btn-filter"
+                      icon="mdi-tune-vertical-variant"
+                      size="sm"
+                      class="bordered rounded"
+                      :class="{ 'app-text-info': statusFilter !== 'all' }"
+                      unelevated
+                    >
+                      <q-menu class="bordered">
+                        <q-list v-close-popup dense>
+                          <q-item
+                            id="btn-filter-all"
+                            clickable
+                            class="flex items-center"
+                            :class="{
+                              'app-text-info': statusFilter === 'all',
+                            }"
+                            @click="statusFilter = 'all'"
+                          >
+                            {{ $t('all') }}
+                          </q-item>
+                          <q-item
+                            id="btn-filter-active"
+                            clickable
+                            class="flex items-center"
+                            :class="{
+                              'app-text-info': statusFilter === 'statusACTIVE',
+                            }"
+                            @click="statusFilter = 'statusACTIVE'"
+                          >
+                            {{ $t('statusACTIVE') }}
+                          </q-item>
+                          <q-item
+                            id="btn-filter-inactive"
+                            clickable
+                            class="flex items-center"
+                            :class="{
+                              'app-text-info':
+                                statusFilter === 'statusINACTIVE',
+                            }"
+                            @click="statusFilter = 'statusINACTIVE'"
+                          >
+                            {{ $t('statusINACTIVE') }}
+                          </q-item>
+                        </q-list>
+                      </q-menu>
+                    </q-btn>
+
+                    <q-btn-toggle
+                      v-model="modeView"
+                      id="btn-mode"
+                      dense
+                      class="no-shadow"
+                      toggle-color="white"
+                      size="xs"
+                      :options="[
+                        { value: true, slot: 'folder' },
+                        { value: false, slot: 'list' },
+                      ]"
+                    >
+                      <template v-slot:folder>
+                        <q-icon
+                          name="mdi-view-grid-outline"
+                          size="16px"
+                          class="q-px-sm q-py-xs rounded"
+                          :style="{
+                            color: modeView ? '#787B7C' : '#C9D3DB',
+                          }"
+                        />
+                      </template>
+                      <template v-slot:list>
+                        <q-icon
+                          name="mdi-format-list-bulleted"
+                          class="q-px-sm q-py-xs rounded"
+                          size="16px"
+                          :style="{
+                            color: modeView === false ? '#787B7C' : '#C9D3DB',
+                          }"
+                        />
+                      </template>
+                    </q-btn-toggle>
+                  </div>
+                </div>
+                <div class="q-pa-md">
+                  <q-table
+                    flat
+                    bordered
+                    :rows="treeData"
+                    :columns="columns"
+                    :grid="modeView"
+                    card-container-class="row q-col-gutter-md"
+                    row-key="name"
+                    hide-pagination
+                  >
+                    <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>
+
+                    <template v-slot:body="props">
+                      <q-tr
+                        :class="{
+                          'app-text-muted': props.row.status === 'INACTIVE',
+                        }"
+                        :props="props"
+                      >
+                        <q-td>
+                          <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>
+                          {{ props.row.address }}
+                        </q-td>
+                        <q-td>
+                          {{ props.row.contact[0].telephoneNo }}
+                        </q-td>
+                        <q-td>
+                          {{
+                            props.row.isHeadOffice
+                              ? $t('branchHQLabel')
+                              : $t('branchLabel')
+                          }}
+                        </q-td>
+                        <q-td>
+                          <q-btn
+                            icon="mdi-eye"
+                            size="sm"
+                            dense
+                            round
+                            flat
+                            @click.stop
+                          />
+                          <q-btn
+                            icon="mdi-dots-vertical"
+                            size="sm"
+                            dense
+                            round
+                            flat
+                            @click.stop
+                          />
+                        </q-td>
+                      </q-tr>
+                    </template>
+
+                    <template v-slot:item="props">
+                      <div class="col-6">
+                        <BranchCard
+                          :id="`branch-card-${props.row.name}`"
+                          @click="
+                            () => {
+                              if (props.row.isHeadOffice) {
+                                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,
+                              );
+                            }
+                          "
+                        />
+                      </div>
+                    </template>
+                  </q-table>
+
+                  <!-- <BranchCard
+                    class="col-6"
+                    :id="`branch-card-${item.name}`"
+                    v-for="item in 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) {
+                          console.log('ทำงาน');
+
+                          return true;
+                        }
+                        if (fieldSelectedBranch.value === 'all') return true;
+                        if (fieldSelectedBranch.value === 'branchHQLabel')
+                          return v.isHeadOffice;
+                        if (fieldSelectedBranch.value === 'branchLabel')
+                          return !v.isHeadOffice;
+
+                        return false;
+                      })"
+                    @click="
+                      () => {
+                        if (item.isHeadOffice) {
+                          fieldSelectedBranch.value = '';
+                          inputSearch = '';
+                          currentHq = { id: item.id, code: item.code };
+                          beforeBranch = {
+                            id: '',
+                            code: '',
+                          };
+                        }
+                      }
+                    "
+                    :metadata="item"
+                    :color="item.isHeadOffice ? 'hq' : 'br'"
+                    :key="item.id"
+                    :data="{
+                      branchLabelCode: item.code,
+                      branchLabelName:
+                        $i18n.locale === 'en-US' ? item.nameEN : item.name,
+                      branchLabelTel: item.contact
+                        .map((c) => c.telephoneNo)
+                        .join(','),
+                      branchLabelAddress:
+                        $i18n.locale === 'en-US'
+                          ? `${item.addressEN || ''} ${item.subDistrict?.nameEN || ''} ${item.district?.nameEN || ''} ${item.province?.nameEN || ''}`
+                          : `${item.address || ''} ${item.subDistrict?.name || ''} ${item.district?.name || ''} ${item.province?.name || ''}`,
+                      branchLabelType: $t(
+                        item.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
+                      ),
+                    }"
+                    :field-selected="fieldSelected"
+                    :badge-field="['branchLabelStatus']"
+                    :inactive="item.status === 'INACTIVE'"
+                    @view-detail="
+                      (v) => {
+                        triggerEdit(
+                          'drawer',
+                          v.id,
+                          v.isHeadOffice ? 'headOffice' : 'subBranch',
+                          v.code,
+                        );
+                      }
+                    "
+                  /> -->
+                </div>
+              </div>
+            </template>
+          </q-splitter>
+
+          <!-- <div class="tree-container bordered-r surface-2">
             <div class="row">
               <button
                 style="border: none; background: transparent"
@@ -515,394 +1166,11 @@ watch(locale, () => {
               </button>
 
               <q-space />
-
-              <button
-                id="hq-add-btn"
-                style="border: none; background: transparent"
-              >
-                <Icon
-                  icon="pixelarticons:plus"
-                  height="26"
-                  class="color-icon-plus cursor-pointer"
-                  @click="
-                    () => {
-                      if (!currentHq.id) {
-                        triggerCreate('headOffice');
-                      } else {
-                        triggerCreate(
-                          'subBranch',
-                          currentHq.id,
-                          currentHq.code,
-                        );
-                      }
-                    }
-                  "
-                />
-              </button>
             </div>
+          </div> -->
+          <!-- ssssssssssssssssssss -->
 
-            <div class="bordered rounded q-mt-sm surface-1">
-              <div
-                class="bordered-b q-pl-sm text-weight-bold surface-3"
-                style="height: 50px; display: flex; align-items: center"
-              >
-                <Icon icon="flowbite:home-solid" width="24px" class="q-mr-md" />
-                {{ $t('all') }}
-              </div>
-
-              <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 no-wrap"
-                  >
-                    <span>{{ node.name }}</span>
-                    <div class="q-gutter-xs flex no-wrap" @click.stop>
-                      <q-btn
-                        v-if="node.isHeadOffice"
-                        :id="`create-sub-branch-btn-${node.name}`"
-                        @click.stop="
-                          triggerCreate('subBranch', node.id, node.code)
-                        "
-                        icon="mdi-file-plus-outline"
-                        fab-mini
-                        unelevated
-                      />
-
-                      <q-btn
-                        :id="`view-detail-btn-${node.name}`"
-                        icon="mdi-dots-vertical"
-                        fab-mini
-                        unelevated
-                        flat
-                      >
-                        <q-menu class="bordered">
-                          <q-list v-close-popup>
-                            <q-item
-                              :id="`view-detail-btn-${node.name}-view`"
-                              @click.stop="
-                                if (node.isHeadOffice) {
-                                  triggerEdit(
-                                    'drawer',
-                                    node.id,
-                                    'headOffice',
-                                    node.code,
-                                  );
-                                } else {
-                                  triggerEdit('drawer', node.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-${node.name}-edit`"
-                              clickable
-                              dense
-                              class="row q-py-sm"
-                              style="white-space: nowrap"
-                              @click="
-                                () => {
-                                  if (node.isHeadOffice) {
-                                    triggerEdit(
-                                      'form',
-                                      node.id,
-                                      'headOffice',
-                                      node.code,
-                                    );
-                                  } else {
-                                    triggerEdit('form', node.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-${node.name}-delete`"
-                              dense
-                              :clickable="node.status === 'CREATED'"
-                              class="row"
-                              :class="{
-                                'surface-3': node.status !== 'CREATED',
-                                'app-text-muted': node.status !== 'CREATED',
-                              }"
-                              style="white-space: nowrap"
-                              @click="triggerDelete(node.id)"
-                            >
-                              <q-icon
-                                name="mdi-trash-can-outline"
-                                size="xs"
-                                class="col-3"
-                                :class="{
-                                  'app-text-negative':
-                                    node.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-${node.name}-status`"
-                                    dense
-                                    size="sm"
-                                    :label="
-                                      node.status !== 'INACTIVE'
-                                        ? $t('switchOnLabel')
-                                        : $t('switchOffLabel')
-                                    "
-                                    @click="
-                                      async () => {
-                                        const res = await branchStore.editById(
-                                          node.id,
-                                          {
-                                            status:
-                                              node.status !== 'INACTIVE'
-                                                ? 'INACTIVE'
-                                                : 'ACTIVE',
-                                          },
-                                        );
-                                        if (res) node.status = res.status;
-                                      }
-                                    "
-                                    :model-value="
-                                      node.status === 'CREATED' ||
-                                      node.status === 'ACTIVE'
-                                    "
-                                  />
-                                </div>
-                              </q-item-section>
-                            </q-item>
-                          </q-list>
-                        </q-menu>
-                      </q-btn>
-                    </div>
-                  </div>
-                </template>
-              </q-tree>
-            </div>
-          </div>
-          <div class="branch-wrapper q-pa-md">
-            <div class="q-mb-md flex" style="gap: var(--size-4)">
-              <div
-                style="
-                  flex-grow: 1;
-                  display: flex;
-                  align-items: stretch;
-                  gap: var(--size-2);
-                "
-              >
-                <template v-if="!currentHq.id">
-                  <q-select
-                    id="select-branch"
-                    for="select-branch"
-                    v-model="fieldSelectedBranch"
-                    style="min-width: 120px"
-                    outlined
-                    :options="
-                      fieldBranch.map((v) => ({ label: $t(v), value: v }))
-                    "
-                    :label="$t('select')"
-                    dense
-                  />
-                  <q-btn
-                    id="btn-filter"
-                    icon="mdi-tune-vertical-variant"
-                    size="sm"
-                    class="bordered rounded"
-                    :class="{ 'app-text-info': statusFilter !== 'all' }"
-                    unelevated
-                  >
-                    <q-menu class="bordered">
-                      <q-list v-close-popup dense>
-                        <q-item
-                          id="btn-filter-all"
-                          clickable
-                          class="flex items-center"
-                          :class="{ 'app-text-info': statusFilter === 'all' }"
-                          @click="statusFilter = 'all'"
-                        >
-                          {{ $t('all') }}
-                        </q-item>
-                        <q-item
-                          id="btn-filter-active"
-                          clickable
-                          class="flex items-center"
-                          :class="{
-                            'app-text-info': statusFilter === 'statusACTIVE',
-                          }"
-                          @click="statusFilter = 'statusACTIVE'"
-                        >
-                          {{ $t('statusACTIVE') }}
-                        </q-item>
-                        <q-item
-                          id="btn-filter-inactive"
-                          clickable
-                          class="flex items-center"
-                          :class="{
-                            'app-text-info': statusFilter === 'statusINACTIVE',
-                          }"
-                          @click="statusFilter = 'statusINACTIVE'"
-                        >
-                          {{ $t('statusINACTIVE') }}
-                        </q-item>
-                      </q-list>
-                    </q-menu>
-                  </q-btn>
-                </template>
-                <div v-else class="text-weight-bold text">
-                  {{ $t('branchInHQ') }}
-                  {{ currentHq.code }}
-                </div>
-              </div>
-
-              <div
-                style="flex-grow: 1; display: flex; justify-content: flex-end"
-              >
-                <q-input
-                  for="input-Search"
-                  style="width: 250px"
-                  outlined
-                  dense
-                  label="ค้นหา"
-                  v-model="inputSearch"
-                  debounce="500"
-                ></q-input>
-              </div>
-
-              <div style="flex-grow: 1">
-                <q-select
-                  id="select-field"
-                  for="select-field"
-                  :options="
-                    fieldDisplay.map((v) => ({ label: $t(v), value: v }))
-                  "
-                  :display-value="$t('displayField')"
-                  v-model="fieldSelected"
-                  option-label="label"
-                  option-value="value"
-                  map-options
-                  emit-value
-                  outlined
-                  multiple
-                  dense
-                />
-              </div>
-            </div>
-            <div class="branch-container">
-              <BranchCard
-                :id="`branch-card-${item.name}`"
-                v-for="item in 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) {
-                      console.log('ทำงาน');
-
-                      return true;
-                    }
-                    if (fieldSelectedBranch.value === 'all') return true;
-                    if (fieldSelectedBranch.value === 'branchHQLabel')
-                      return v.isHeadOffice;
-                    if (fieldSelectedBranch.value === 'branchLabel')
-                      return !v.isHeadOffice;
-
-                    return false;
-                  })"
-                @click="
-                  () => {
-                    if (item.isHeadOffice) {
-                      fieldSelectedBranch.value = '';
-                      inputSearch = '';
-                      currentHq = { id: item.id, code: item.code };
-                      beforeBranch = {
-                        id: '',
-                        code: '',
-                      };
-                    }
-                  }
-                "
-                :metadata="item"
-                :color="item.isHeadOffice ? 'hq' : 'br'"
-                :key="item.id"
-                :data="{
-                  branchLabelCode: item.code,
-                  branchLabelName:
-                    $i18n.locale === 'en-US' ? item.nameEN : item.name,
-                  branchLabelTel: item.contact
-                    .map((c) => c.telephoneNo)
-                    .join(','),
-                  branchLabelAddress:
-                    $i18n.locale === 'en-US'
-                      ? `${item.addressEN || ''} ${item.subDistrict?.nameEN || ''} ${item.district?.nameEN || ''} ${item.province?.nameEN || ''}`
-                      : `${item.address || ''} ${item.subDistrict?.name || ''} ${item.district?.name || ''} ${item.province?.name || ''}`,
-                  branchLabelType: $t(
-                    item.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
-                  ),
-                }"
-                :field-selected="fieldSelected"
-                :badge-field="['branchLabelStatus']"
-                :inactive="item.status === 'INACTIVE'"
-                @view-detail="
-                  (v) => {
-                    triggerEdit(
-                      'drawer',
-                      v.id,
-                      v.isHeadOffice ? 'headOffice' : 'subBranch',
-                      v.code,
-                    );
-                  }
-                "
-              />
-            </div>
-          </div>
+          <!-- ---- -->
         </div>
       </template>
     </div>
@@ -1126,4 +1394,54 @@ watch(locale, () => {
     gap: var(--size-4);
   }
 }
+
+.branch-card__hq {
+  --_branch-card-bg: var(--pink-6-hsl);
+}
+
+.branch-card__br {
+  --_branch-card-bg: var(--violet-11-hsl);
+
+  &.branch-card__dark {
+    --_branch-card-bg: var(--violet-10-hsl);
+  }
+}
+
+.status-active {
+  --_branch-status-color: var(--green-6-hsl);
+}
+
+.status-inactive {
+  --_branch-status-color: var(--red-4-hsl);
+  --_branch-badge-bg: var(--red-4-hsl);
+  filter: grayscale(1);
+  background-color: hsl(var(--gray-6-hsl) / 0.1);
+  opacity: 0.5;
+}
+
+.branch-card__icon {
+  background-color: hsla(var(--_branch-card-bg) / 0.15);
+  border-radius: 50%;
+  padding: var(--size-1);
+  position: relative;
+  transform: rotate(45deg);
+
+  &::after {
+    content: ' ';
+    display: block;
+    block-size: 0.5rem;
+    aspect-ratio: 1;
+    position: absolute;
+    border-radius: 50%;
+    right: -0.25rem;
+    top: calc(50% - 0.25rem);
+    bottom: calc(50% - 0.25rem);
+    background-color: hsla(var(--_branch-status-color) / 1);
+  }
+
+  & :deep(.q-icon) {
+    transform: rotate(-45deg);
+    color: hsla(var(--_branch-card-bg) / 1);
+  }
+}
 </style>