From 18b7c5c5ab3a99cb6b7a77f8d8be85513443e56b Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 3 Jul 2024 14:12:51 +0700
Subject: [PATCH 001/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20?=
 =?UTF-8?q?=20ui=20=20=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=99=E0=B8=A7=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StatCardComponent.vue | 79 ++++++++++++----------------
 1 file changed, 33 insertions(+), 46 deletions(-)

diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index 2eb2e7c0..ac7f08a2 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import AppBox from 'components/app/AppBox.vue';
+import { vModelSelect } from 'vue';
 
 const props = withDefaults(
   defineProps<{
     branch: {
+      icon: string;
       count: number;
       label: string;
       color: 'pink' | 'purple' | 'green' | 'orange';
@@ -27,30 +29,32 @@ const props = withDefaults(
     <AppBox
       v-for="v in props.branch"
       :key="v.label"
-      class="bordered stat-card__wave"
+      class="col-12 no-padding"
       :class="{ [`stat-card__${v.color}`]: true }"
-      style="
-        padding: 12px 16px;
-        height: 75px;
-        min-width: 232px;
-        box-shadow: var(--shadow-2);
-      "
+      style="box-shadow: var(--shadow-2)"
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 1440 320"
-        style="width: 100%"
-      >
-        <path
-          class="box-path"
-          d="M0,256L40,245.3C80,235,160,213,240,202.7C320,192,400,192,480,170.7C560,149,640,107,720,106.7C800,107,880,149,960,154.7C1040,160,1120,128,1200,96C1280,64,1360,32,1400,16L1440,0L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"
-        ></path>
-      </svg>
+      <div class="stat-card__content row items-center q-pa-md">
+        <div class="col-4 text-center">
+          <q-avatar
+            size="lg"
+            style="background-color: hsla(0 0% 100% /0.15)"
+            text-color="white"
+            :icon="v.icon"
+          />
+        </div>
+        <div class="col-6 justify-center column">
+          <div class="col-6 ellipsis text-bold" style="width: 100%">
+            {{ labelI18n ? $t(v.label) : v.label }}
+            <q-tooltip
+              anchor="top middle"
+              self="bottom middle"
+              :offset="[10, 10]"
+            >
+              {{ labelI18n ? $t(v.label) : v.label }}
+            </q-tooltip>
+          </div>
 
-      <div class="stat-card__content">
-        <div class="text-h5 text-weight-bold">{{ v.count }}</div>
-        <div class="text-weight-bold text-no-wrap">
-          {{ labelI18n ? $t(v.label) : v.label }}
+          <div class="col-6">{{ v.count }}</div>
         </div>
       </div>
     </AppBox>
@@ -76,53 +80,36 @@ const props = withDefaults(
   }
 }
 
-.stat-card__wave {
-  position: relative;
-  display: flex;
-
-  & svg {
-    width: 200px;
-    position: absolute;
-    left: 0px;
-    bottom: 0;
-    opacity: 0.1;
-
-    & .box-path {
-      fill: var(--_color);
-      fill-opacity: 1;
-    }
-  }
-}
-
 .stat-card__content {
   z-index: 2;
-  color: var(--_color);
+  color: hsla(var(--gray-0-hsl) / 1);
+  background: hsla(var(--_color) / 1);
   height: 100%;
   width: 200px;
 }
 
 .stat-card__purple {
-  --_color: var(--violet-11);
+  --_color: var(--violet-11-hsl);
 }
 
 .stat-card__pink {
-  --_color: var(--pink-6);
+  --_color: var(--pink-6-hsl);
 }
 
 .stat-card__green {
-  --_color: var(--teal-10);
+  --_color: var(--teal-10-hsl);
 }
 
 .stat-card__orange {
-  --_color: var(--orange-5);
+  --_color: var(--orange-5-hsl);
 }
 
 .dark .stat-card__purple {
-  --_color: var(--purple-7);
+  --_color: var(--violet-10-hsl);
 }
 
 .dark .stat-card__green {
-  --_color: var(--teal-7);
+  --_color: var(--teal-8-hsl);
 }
 
 .dark .stat-card__orange {

From 6041ffd159bc75859a2f44e8b46a50c47c29829f Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 3 Jul 2024 14:13:01 +0700
Subject: [PATCH 002/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B5=20=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B8=95?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UsersDetailCardComponent.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/UsersDetailCardComponent.vue b/src/components/UsersDetailCardComponent.vue
index 8f138b1a..6d72df2b 100644
--- a/src/components/UsersDetailCardComponent.vue
+++ b/src/components/UsersDetailCardComponent.vue
@@ -315,11 +315,11 @@ defineEmits<{
     }
   }
   &.color__purple {
-    --_color: var(--purple-11-hsl);
+    --_color: var(--violet-11-hsl);
   }
 
   &.color__green {
-    --_color: var(--teal-9-hsl);
+    --_color: var(--teal-10-hsl);
   }
 }
 

From 12c17dfd06422c35fc05a0a29b06fbe49ff8bc58 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 3 Jul 2024 14:13:22 +0700
Subject: [PATCH 003/158] =?UTF-8?q?feat:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=E0=B8=A3=E0=B8=B9=E0=B8=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue   | 22 ++++++++++++++-----
 src/pages/03_customer-management/MainPage.vue |  4 ++--
 src/pages/04_product-service/MainPage.vue     | 14 ++++++++----
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 61a35296..e8a54d61 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -99,8 +99,18 @@ async function calculateStats() {
 
   if (_stats) {
     stats.value = [
-      { count: _stats.hq, label: 'branchHQLabel', color: 'pink' },
-      { count: _stats.br, label: 'branchLabel', color: 'purple' },
+      {
+        icon: 'mdi-home',
+        count: _stats.hq,
+        label: 'branchHQLabel',
+        color: 'pink',
+      },
+      {
+        icon: 'mdi-office-building',
+        count: _stats.br,
+        label: 'branchLabel',
+        color: 'purple',
+      },
     ];
   }
 }
@@ -140,9 +150,9 @@ const fieldSelectedBranch = ref<{
   value: 'branchHQLabel',
 });
 
-const stats = ref<{ count: number; label: string; color: 'pink' | 'purple' }[]>(
-  [],
-);
+const stats = ref<
+  { icon: string; count: number; label: string; color: 'pink' | 'purple' }[]
+>([]);
 
 const defaultFormData = {
   headOfficeId: null,
@@ -379,11 +389,13 @@ async function onSubmit() {
   if (_stats) {
     stats.value = [
       {
+        icon: 'mdi-home',
         count: _stats.hq,
         label: 'branchHQLabel',
         color: 'pink',
       },
       {
+        icon: 'mdi-domain',
         count: _stats.br,
         label: 'branchLabel',
         color: 'purple',
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 592e5dce..01b761a0 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1299,7 +1299,7 @@ watch([inputSearch, currentStatus], async () => {
     <q-fab-action
       v-if="selectorLabel === 'EMPLOYER' || !selectorLabel"
       id="add-customer-legal-entity"
-      style="color: white; background-color: hsla(var(--purple-11-hsl))"
+      style="color: white; background-color: hsla(var(--violet-11-hsl))"
       @click="triggerCreate('CORP')"
       padding="xs"
       icon="mdi-office-building"
@@ -1314,7 +1314,7 @@ watch([inputSearch, currentStatus], async () => {
       external-label
       label-position="left"
       @click="triggerCreate('PERS')"
-      style="color: white; background-color: hsla(var(--teal-9-hsl))"
+      style="color: white; background-color: hsla(var(--teal-10-hsl))"
       padding="xs"
       icon="mdi-account-plus"
     ></q-fab-action>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index ece57877..6ab97a91 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -93,15 +93,21 @@ const { workNameItems } = storeToRefs(productServiceStore);
 
 const stat = ref<
   {
+    icon: string;
     count: number;
     label: string;
     color: 'pink' | 'purple' | 'green' | 'orange';
   }[]
 >([
-  { count: 0, label: 'productAndService', color: 'pink' },
-  { count: 0, label: 'productAndServiceType', color: 'purple' },
-  { count: 0, label: 'service', color: 'orange' },
-  { count: 0, label: 'product', color: 'green' },
+  { icon: 'mdi-folder', count: 0, label: 'productAndService', color: 'pink' },
+  {
+    icon: 'mdi-folder',
+    count: 0,
+    label: 'productAndServiceType',
+    color: 'purple',
+  },
+  { icon: 'mdi-folder', count: 0, label: 'service', color: 'orange' },
+  { icon: 'mdi-folder', count: 0, label: 'product', color: 'green' },
 ]);
 
 const { t } = useI18n();

From 2539ad7cf5ad7eadf8f25bd74137f5a47d698318 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 3 Jul 2024 14:16:33 +0700
Subject: [PATCH 004/158] =?UTF-8?q?feat:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=E0=B9=80=E0=B8=87=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StatCardComponent.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index ac7f08a2..d105f236 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -29,9 +29,8 @@ const props = withDefaults(
     <AppBox
       v-for="v in props.branch"
       :key="v.label"
-      class="col-12 no-padding"
+      class="col-12 no-padding shadow-2"
       :class="{ [`stat-card__${v.color}`]: true }"
-      style="box-shadow: var(--shadow-2)"
     >
       <div class="stat-card__content row items-center q-pa-md">
         <div class="col-4 text-center">
@@ -85,7 +84,7 @@ const props = withDefaults(
   color: hsla(var(--gray-0-hsl) / 1);
   background: hsla(var(--_color) / 1);
   height: 100%;
-  width: 200px;
+  min-width: 200px;
 }
 
 .stat-card__purple {

From 9bc9e0f1d5642d9f3b32f0390548b28b54e530a2 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 11:00:03 +0700
Subject: [PATCH 005/158] refactor: move stat out

---
 src/components/StatCardComponent.vue        |  9 ++++-----
 src/pages/01_branch-management/MainPage.vue | 12 +++++++-----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index d105f236..95701e48 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import AppBox from 'components/app/AppBox.vue';
-import { vModelSelect } from 'vue';
 
 const props = withDefaults(
   defineProps<{
@@ -22,17 +21,17 @@ const props = withDefaults(
 
 <template>
   <div
-    class="row full-width"
+    class="row"
     style="gap: var(--size-4)"
     :class="{ dark, 'no-wrap': nowrap }"
   >
     <AppBox
       v-for="v in props.branch"
-      :key="v.label"
-      class="col-12 no-padding shadow-2"
+      class="no-padding shadow-2"
       :class="{ [`stat-card__${v.color}`]: true }"
+      :key="v.label"
     >
-      <div class="stat-card__content row items-center q-pa-md">
+      <div class="stat-card__content row items-center q-px-md q-py-sm">
         <div class="col-4 text-center">
           <q-avatar
             size="lg"
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index e8a54d61..8c23e2d1 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -436,11 +436,13 @@ watch(locale, () => {
 
 <template>
   <div class="column full-height no-wrap">
-    <div class="surface-1 bordered rounded q-mb-md scroll">
-      <div class="q-ma-md" style="display: inline-block">
-        <StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" nowrap />
-      </div>
-    </div>
+    <StatCard
+      class="q-pb-md"
+      label-i18n
+      :branch="stats"
+      :dark="$q.dark.isActive"
+      nowrap
+    />
 
     <div
       class="column col surface-1 bordered rounded scroll"

From 9126270de698b3753290b1b5cbd6c150771c7541 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 11:28:51 +0700
Subject: [PATCH 006/158] refactor: update drawer

---
 src/components/DrawerComponent.vue | 22 ++++++++--------------
 src/layouts/MainLayout.vue         | 12 ++++++------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 6eec764c..c2fc460a 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { Icon } from '@iconify/vue';
 
@@ -94,20 +94,14 @@ function navigateTo(label: string, destination: string) {
     v-model="leftDrawerOpen"
     side="left"
     :breakpoint="599"
-    :width="$q.screen.lt.md ? 200 : 300"
+    :width="$q.screen.lt.md ? 200 : 256"
   >
-    <div class="main-bar">
-      <div
-        class="column items-center justify-center q-pa-xl cursor-pointer"
-        @click="$router.push('/')"
-        id="btn-drawer-home"
-      >
-        <q-img src="/logo.png" style="width: 70%; height: 70%">
-          <template #error>
-            <img src="/logo.png" alt="" width="100%" />
-          </template>
-        </q-img>
-      </div>
+    <div
+      class="column items-center justify-center q-pa-xl cursor-pointer"
+      @click="$router.push('/')"
+      id="btn-drawer-home"
+    >
+      <q-img src="/logo.png" style="width: 80%; height: 70%" />
     </div>
 
     <div id="drawer-menu" class="q-pr-sm">
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 59098bc8..1f57612a 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -169,13 +169,13 @@ onMounted(async () => {
 
 <template>
   <q-layout view="lHh Lpr lFf">
-    <drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
+    <drawer-component v-model:left-drawer-open="leftDrawerOpen" />
 
-    <q-page-container class="surface-1 q-pa-md">
+    <q-page-container>
       <!-- drawer control -->
       <div
-        style="position: relative"
-        :style="$q.screen.gt.xs ? 'z-index: 1000' : 'z-index: 10'"
+        style="position: relative; z-index: 9999"
+        :hidden="$q.screen.lt.md && leftDrawerOpen"
       >
         <q-avatar
           size="36px"
@@ -209,8 +209,8 @@ onMounted(async () => {
       </div>
 
       <div
-        class="surface-3 bordered rounded q-pb-lg scroll column"
-        style="height: calc(100vh - 32px); flex-wrap: nowrap"
+        class="surface-3 rounded q-pb-lg scroll column"
+        style="height: 100vh; flex-wrap: nowrap"
       >
         <!-- header -->
         <div

From 16bd9d03c5f57fc2d1aa47f0e7f00887d617bc6b Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 13:14:21 +0700
Subject: [PATCH 007/158] refactor: change layout of stat card

---
 src/pages/01_branch-management/MainPage.vue   |   1 -
 .../02_personnel-management/MainPage.vue      | 331 ++++++++----------
 src/pages/03_customer-management/MainPage.vue |  11 +-
 src/pages/04_product-service/MainPage.vue     |   4 +-
 4 files changed, 158 insertions(+), 189 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 8c23e2d1..8f1b3685 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -441,7 +441,6 @@ watch(locale, () => {
       label-i18n
       :branch="stats"
       :dark="$q.dark.isActive"
-      nowrap
     />
 
     <div
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 07e925c4..bfd49313 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -533,190 +533,169 @@ watch(inputSearch, async () => await fetchUserList());
     ></q-fab-action>
   </ButtonAddComponent>
 
-  <div class="column full-height">
-    <div class="row full-width q-pb-md q-gutter-y-md">
-      <!-- selector -->
-      <div class="col-sm-5 col-md-3 col-12 q-mr-md">
-        <SelectorList :list="selectorList" v-model:selector="selectorLabel" />
+  <!-- stat -->
+  <div class="scroll q-mb-md">
+    <div style="display: inline-block">
+      <StatCardComponent
+        v-if="sortedUserStats"
+        :branch="
+          sortedUserStats.map((v) => ({
+            count: v.count,
+            label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+            icon: 'mdi-account',
+            color: v.isHeadOffice ? 'pink' : 'purple',
+          }))
+        "
+        :dark="$q.dark.isActive"
+      />
+    </div>
+  </div>
+  <!-- main -->
+  <div
+    class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
+  >
+    <div>
+      <div class="row q-mb-md justify-end" style="gap: var(--size-2)">
+        <q-input
+          for="input-search"
+          style="width: 250px"
+          outlined
+          dense
+          :label="$t('search')"
+          debounce="500"
+          v-model="inputSearch"
+        ></q-input>
+        <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>
       </div>
-
-      <!-- stat -->
-      <div class="col-12 col-sm bordered surface-1 rounded">
-        <div class="text-weight-bold text-subtitle1 q-pa-md">
-          {{ $t('personnelStatTitle') }}
-          {{ selectorLabel === '' ? '' : $t(selectorLabel) }}
-        </div>
-
-        <div class="scroll">
-          <div class="q-mx-md" style="display: inline-block">
-            <StatCardComponent
-              v-if="sortedUserStats"
-              :branch="
-                sortedUserStats.map((v) => ({
-                  count: v.count,
-                  label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
-                  color: v.isHeadOffice ? 'pink' : 'purple',
-                }))
-              "
-              :dark="$q.dark.isActive"
-              nowrap
-              class="q-mb-md"
+      <PersonCard
+        :list="
+          userData?.result
+            .filter((v) => {
+              if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
+                return false;
+              }
+              if (
+                statusFilter === 'statusINACTIVE' &&
+                v.status !== 'INACTIVE'
+              ) {
+                return false;
+              }
+              return true;
+            })
+            .map((v) => ({
+              id: v.id,
+              img: `${v.profileImageUrl}`,
+              name:
+                $i18n.locale === 'en-US'
+                  ? `${v.firstNameEN} ${v.lastNameEN}`
+                  : `${v.firstName} ${v.lastName}`,
+              male: v.gender === 'male',
+              female: v.gender === 'female',
+              detail: [
+                { label: $t('personnelCardUserType'), value: $t(v.userType) },
+                { label: $t('personnelCardTelephone'), value: v.telephoneNo },
+                {
+                  label: $t('personnelCardAge'),
+                  value: userStore.calculateAge(v.birthDate as Date) || '',
+                },
+              ],
+              badge: v.code,
+              disabled: v.status === 'INACTIVE',
+            })) || []
+        "
+        @update-card="openDialog"
+        @delete-card="onDelete"
+        @enter-card="openDialog"
+        @toggle-status="toggleStatus"
+      />
+      <template v-if="userData && userData.total === 0 && !inputSearch">
+        <div class="col-1 self-end">
+          <div class="row">
+            <TooltipComponent
+              title="personnelTooltipTitle"
+              caption="personnelTooltipCaption"
+              imgSrc="personnel-table-"
             />
           </div>
         </div>
+        <div
+          class="col self-center"
+          style="display: flex; flex-grow: 1; align-items: center"
+        >
+          <AddButton
+            :label="'personnelAdd'"
+            :cyanOn="true"
+            @trigger="openDialog('FORM')"
+          />
+        </div>
+      </template>
+
+      <div
+        v-if="userData?.total === 0 && !!inputSearch"
+        class="row full-width items-center justify-center"
+        style="min-height: 250px"
+      >
+        <NoData :not-found="!!inputSearch" />
       </div>
     </div>
 
-    <!-- main -->
-    <div
-      class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
-    >
-      <div>
-        <div class="row q-mb-md justify-between">
-          <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>
-          <q-input
-            for="input-search"
-            style="width: 250px"
-            outlined
-            dense
-            :label="$t('search')"
-            debounce="500"
-            v-model="inputSearch"
-          ></q-input>
-        </div>
-        <PersonCard
-          :list="
-            userData?.result
-              .filter((v) => {
-                if (
-                  statusFilter === 'statusACTIVE' &&
-                  v.status === 'INACTIVE'
-                ) {
-                  return false;
-                }
-                if (
-                  statusFilter === 'statusINACTIVE' &&
-                  v.status !== 'INACTIVE'
-                ) {
-                  return false;
-                }
-                return true;
-              })
-              .map((v) => ({
-                id: v.id,
-                img: `${v.profileImageUrl}`,
-                name:
-                  $i18n.locale === 'en-US'
-                    ? `${v.firstNameEN} ${v.lastNameEN}`
-                    : `${v.firstName} ${v.lastName}`,
-                male: v.gender === 'male',
-                female: v.gender === 'female',
-                detail: [
-                  { label: $t('personnelCardUserType'), value: $t(v.userType) },
-                  { label: $t('personnelCardTelephone'), value: v.telephoneNo },
-                  {
-                    label: $t('personnelCardAge'),
-                    value: userStore.calculateAge(v.birthDate as Date) || '',
-                  },
-                ],
-                badge: v.code,
-                disabled: v.status === 'INACTIVE',
-              })) || []
-          "
-          @update-card="openDialog"
-          @delete-card="onDelete"
-          @enter-card="openDialog"
-          @toggle-status="toggleStatus"
-        />
-        <template v-if="userData && userData.total === 0 && !inputSearch">
-          <div class="col-1 self-end">
-            <div class="row">
-              <TooltipComponent
-                title="personnelTooltipTitle"
-                caption="personnelTooltipCaption"
-                imgSrc="personnel-table-"
-              />
-            </div>
-          </div>
-          <div
-            class="col self-center"
-            style="display: flex; flex-grow: 1; align-items: center"
-          >
-            <AddButton
-              :label="'personnelAdd'"
-              :cyanOn="true"
-              @trigger="openDialog('FORM')"
-            />
-          </div>
-        </template>
-
-        <div
-          v-if="userData?.total === 0 && !!inputSearch"
-          class="row full-width items-center justify-center"
-          style="min-height: 250px"
-        >
-          <NoData :not-found="!!inputSearch" />
-        </div>
-      </div>
-
-      <div class="row justify-between q-pt-md" v-if="currentMaxPage > 0">
-        <div class="app-text-muted">
-          {{
-            $t('recordsPage', {
-              resultcurrentPage: userData?.result.length,
-              total: userData?.total,
-            })
-          }}
-        </div>
-        <PaginationComponent
-          v-model:current-page="currentPage"
-          v-model:max-page="currentMaxPage"
-          :fetch-data="async () => await fetchUserList()"
-        />
+    <div class="row justify-between q-pt-md" v-if="currentMaxPage > 0">
+      <div class="app-text-muted">
+        {{
+          $t('recordsPage', {
+            resultcurrentPage: userData?.result.length,
+            total: userData?.total,
+          })
+        }}
       </div>
+      <PaginationComponent
+        v-model:current-page="currentPage"
+        v-model:max-page="currentMaxPage"
+        :fetch-data="async () => await fetchUserList()"
+      />
     </div>
   </div>
 
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 01b761a0..17e170ba 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1332,16 +1332,7 @@ watch([inputSearch, currentStatus], async () => {
 
   <div class="column full-height no-wrap">
     <div v-if="isMainPage" class="column full-height">
-      <div class="row full-width q-pb-md q-gutter-y-md">
-        <div class="col-sm-5 col-md-3 col-12 q-mr-md">
-          <SelectorList
-            clickable
-            :list="selectorList"
-            v-model:selector="selectorLabel"
-            class="full-height"
-          />
-        </div>
-
+      <div class="row full-width">
         <!-- stat -->
         <div class="col-12 col-sm bordered surface-1 rounded">
           <div class="text-weight-bold text-subtitle1 q-pa-md">
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 6ab97a91..4cd81135 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1183,9 +1183,9 @@ watch(inputSearchProductAndService, async () => {
 
       <div
         v-if="productMode === 'group' || productMode === 'type'"
-        class="q-mb-md bordered rounded surface-1 scroll"
+        class="scroll q-mb-md"
       >
-        <div class="q-ma-md" style="display: inline-block">
+        <div style="display: inline-block">
           <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap />
         </div>
       </div>

From b4b6fc75c5a4b943671766b7e6e476a223f359fc Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 13:14:30 +0700
Subject: [PATCH 008/158] fix: type

---
 src/stores/branch/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/branch/types.ts b/src/stores/branch/types.ts
index 7cedf929..4e231fd1 100644
--- a/src/stores/branch/types.ts
+++ b/src/stores/branch/types.ts
@@ -64,6 +64,6 @@ export type BranchUserStats = {
   id: string;
   nameEN: string;
   name: string;
-  count: 0;
+  count: number;
   isHeadOffice: boolean;
 };

From d4a26ced4b18012980318c64179bddcc2e6919d1 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 13:16:19 +0700
Subject: [PATCH 009/158] refactor: change style

---
 src/components/StatCardComponent.vue | 34 ++++++----------------------
 1 file changed, 7 insertions(+), 27 deletions(-)

diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index 95701e48..d1f66f42 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import AppBox from 'components/app/AppBox.vue';
-
 const props = withDefaults(
   defineProps<{
     branch: {
@@ -11,7 +9,6 @@ const props = withDefaults(
     }[];
     dark?: boolean;
     labelI18n?: boolean;
-    nowrap?: boolean;
   }>(),
   {
     labelI18n: false,
@@ -20,18 +17,14 @@ const props = withDefaults(
 </script>
 
 <template>
-  <div
-    class="row"
-    style="gap: var(--size-4)"
-    :class="{ dark, 'no-wrap': nowrap }"
-  >
-    <AppBox
+  <div class="row" style="gap: var(--size-4)" :class="{ dark }">
+    <div
       v-for="v in props.branch"
-      class="no-padding shadow-2"
+      class="no-padding shadow-2 stat-card"
       :class="{ [`stat-card__${v.color}`]: true }"
       :key="v.label"
     >
-      <div class="stat-card__content row items-center q-px-md q-py-sm">
+      <div class="stat-card__content row items-center q-pa-sm">
         <div class="col-4 text-center">
           <q-avatar
             size="lg"
@@ -55,27 +48,14 @@ const props = withDefaults(
           <div class="col-6">{{ v.count }}</div>
         </div>
       </div>
-    </AppBox>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .stat-card {
-  --_color: var(--gray-6);
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-}
-
-@media screen and (min-width: 1024px) {
-  .stat-card {
-    display: flex;
-  }
-}
-
-@media screen and (min-width: 1920px) {
-  .stat-card {
-    display: flex;
-  }
+  border-radius: var(--radius-2);
+  overflow: hidden;
 }
 
 .stat-card__content {

From dd9429de0d99ccb9b89287269151ae89d301bca9 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 13:16:28 +0700
Subject: [PATCH 010/158] refactor: update style

---
 src/components/DrawerComponent.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index c2fc460a..bdafc8ca 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -94,7 +94,7 @@ function navigateTo(label: string, destination: string) {
     v-model="leftDrawerOpen"
     side="left"
     :breakpoint="599"
-    :width="$q.screen.lt.md ? 200 : 256"
+    :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256"
   >
     <div
       class="column items-center justify-center q-pa-xl cursor-pointer"
@@ -152,4 +152,16 @@ function navigateTo(label: string, destination: string) {
     }
   }
 }
+
+:deep(.q-drawer) {
+  background-color: transparent;
+  padding: var(--size-4);
+  padding-right: 0;
+}
+
+:deep(.q-drawer__content) {
+  border-radius: var(--radius-2);
+  background: var(--surface-1);
+  border: 1px solid var(--border-color);
+}
 </style>

From 6cb6caf3d990637e86392313362320a83fbc370a Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 13:16:38 +0700
Subject: [PATCH 011/158] refactor: change border color

---
 src/css/app.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 8b9903dc..a1ebf4ca 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -9,7 +9,7 @@ html {
 
   --brand-1: #035aa1;
   --brand-2: #f50000;
-  --border-color: var(--gray-4);
+  --border-color: var(--gray-3);
   --foreground: black;
   --background: var(--gray-1);
   --surface-0: var(--background);

From aa5adf57896b9166d7fcb9a03db00ab1cc1b79a4 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 13:33:31 +0700
Subject: [PATCH 012/158] fix: rebase fail

---
 src/pages/03_customer-management/MainPage.vue | 67 ++++++++-----------
 1 file changed, 28 insertions(+), 39 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 17e170ba..40d7f367 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1334,50 +1334,39 @@ watch([inputSearch, currentStatus], async () => {
     <div v-if="isMainPage" class="column full-height">
       <div class="row full-width">
         <!-- stat -->
-        <div class="col-12 col-sm bordered surface-1 rounded">
-          <div class="text-weight-bold text-subtitle1 q-pa-md">
-            {{
-              selectorLabel === 'EMPLOYER'
-                ? $t('customerEmployerStatTitle')
-                : $t('customerEmployeeStatTitle')
-            }}
-          </div>
-
-          <div class="q-px-md scroll">
+        <div class="col-12 q-mb-md">
+          <div class="scroll">
             <StatCardComponent
-              v-if="customerStats && selectorLabel === 'EMPLOYER'"
+              v-if="customerStats"
               labelI18n
               :branch="
-                customerStats.map((v) => ({
-                  count:
-                    v.name === 'CORP'
-                      ? statsCustomerType?.CORP ?? 0
-                      : statsCustomerType?.PERS ?? 0,
-                  label:
-                    v.name === 'CORP'
-                      ? 'customerLegalEntity'
-                      : 'customerNaturalPerson',
-                  color: v.name === 'CORP' ? 'purple' : 'green',
-                }))
+                customerStats &&
+                (selectorLabel === 'EMPLOYER'
+                  ? customerStats.map((v) => ({
+                      count:
+                        v.name === 'CORP'
+                          ? statsCustomerType?.CORP ?? 0
+                          : statsCustomerType?.PERS ?? 0,
+                      label:
+                        v.name === 'CORP'
+                          ? 'customerLegalEntity'
+                          : 'customerNaturalPerson',
+                      icon:
+                        v.name === 'CORP'
+                          ? 'mdi-office-building'
+                          : 'mdi-account',
+                      color: v.name === 'CORP' ? 'purple' : 'green',
+                    }))
+                  : [
+                      {
+                        label: 'EMPLOYEE',
+                        count: statsEmployee,
+                        icon: 'mdi-account',
+                        color: 'pink',
+                      },
+                    ])
               "
               :dark="$q.dark.isActive"
-              nowrap
-              class="q-mb-md"
-            />
-
-            <StatCardComponent
-              v-if="customerStats && selectorLabel === 'EMPLOYEE'"
-              labelI18n
-              :branch="[
-                {
-                  label: 'EMPLOYEE',
-                  count: statsEmployee,
-                  color: 'pink',
-                },
-              ]"
-              :dark="$q.dark.isActive"
-              nowrap
-              class="q-mb-md"
             />
           </div>
         </div>

From 1986ef593ab5ad89e732c0c2d7d7f2ad7b1dad1b Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 13:41:24 +0700
Subject: [PATCH 013/158] fix: wrapping

---
 .../01_branch-management/BranchCard.vue           | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index ace3c30e..d1cc03e4 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -69,7 +69,6 @@ defineProps<{
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  box-shadow: var(--shadow-2);
 
   & > .branch-card__row {
     display: flex;
@@ -81,20 +80,6 @@ defineProps<{
       flex-grow: 1;
     }
 
-    &:nth-child(2n + 1) {
-      background-color: hsla(var(--_branch-card-row-bg) / 0.1);
-    }
-
-    &.branch-card__header,
-    &.branch-card__footer {
-      color: hsl(var(--_branch-card-row-fg));
-      background-color: hsl(var(--_branch-card-row-bg));
-
-      &:deep(*) {
-        font-weight: 600;
-      }
-    }
-
     &.branch-card__header > * {
       display: flex;
       align-items: center;

From e931d3b60eb509cc76134eee91cd14982a2816b3 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:27:35 +0700
Subject: [PATCH 014/158] fix: wraping

---
 src/components/StatCardComponent.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index d1f66f42..c6d27e79 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -17,7 +17,7 @@ const props = withDefaults(
 </script>
 
 <template>
-  <div class="row" style="gap: var(--size-4)" :class="{ dark }">
+  <div class="row no-wrap" style="gap: var(--size-4)" :class="{ dark }">
     <div
       v-for="v in props.branch"
       class="no-padding shadow-2 stat-card"
@@ -28,7 +28,7 @@ const props = withDefaults(
         <div class="col-4 text-center">
           <q-avatar
             size="lg"
-            style="background-color: hsla(0 0% 100% /0.15)"
+            style="background-color: hsla(0 0% 100% /0.2)"
             text-color="white"
             :icon="v.icon"
           />

From ef9c99bac20a14589fdb340f866b27bed6df4572 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:27:45 +0700
Subject: [PATCH 015/158] refactor: branch card

---
 .../01_branch-management/BranchCard.vue       | 149 ++++++++++--------
 src/pages/01_branch-management/MainPage.vue   |   3 -
 2 files changed, 84 insertions(+), 68 deletions(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index d1cc03e4..d1023ff4 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -2,10 +2,20 @@
 defineProps<{
   inactive?: boolean;
   color?: 'none' | 'hq' | 'br';
-  data: Record<string, unknown>;
+  data: {
+    branchLabelCode: string;
+    branchLabelName: string;
+    branchLabelTel: string;
+    branchLabelAddress: string;
+    branchLabelType: string;
+  };
   metadata?: unknown;
   badgeField?: string[];
-  fieldSelected?: string[];
+  fieldSelected?: (
+    | 'branchLabelAddress'
+    | 'branchLabelTel'
+    | 'branchLabelType'
+  )[];
   footer?: boolean;
 }>();
 </script>
@@ -21,41 +31,46 @@ defineProps<{
       'branch-card__hq': color === 'hq',
       'branch-card__br': color === 'br',
     }"
+    @click="$emit('open')"
   >
-    <div
-      class="branch-card__row"
-      :class="{
-        'branch-card__header': i === 0,
-        'branch-card__footer': footer && i === Object.keys(data).length - 1,
-      }"
-      v-for="([k, v], i) in Object.entries(data).filter(
-        ([key], idx) =>
-          idx === 0 || (fieldSelected ? fieldSelected.includes(key) : true),
-      )"
-      :key="k"
-    >
-      <div class="branch-card__label">
-        <span>{{ $t(k) }}</span>
-      </div>
-      <div
-        class="branch-card__value"
-        :class="{ 'branch-card__badge': badgeField?.includes(k) }"
-        style="justify-content: space-between"
-      >
-        <span>{{ v }}</span>
-        <q-btn
-          :id="`${v}-view-detail`"
-          @click.stop="$emit('view-detail', metadata ?? data)"
-          :label="$t('viewDetail')"
-          rounded
-          outline
-          dense
-          style="text-wrap: nowrap; max-width: 80%"
-          no-caps
-          class="branch-card__view-detail q-px-md text-caption"
-          v-if="i === 0"
+    <div class="branch-card__header">
+      <div class="branch-card__icon">
+        <q-icon
+          size="md"
+          style="scale: 0.8"
+          name="mdi-office-building-outline"
         />
       </div>
+      <div class="branch-card__name">
+        <b>{{ data.branchLabelName }}</b>
+        <small class="branch-card__code">{{ data.branchLabelCode }}</small>
+      </div>
+
+      <div class="branch-card__action">
+        <q-btn icon="mdi-dots-vertical" size="sm" dense round flat @click.stop>
+          <slot name="action" />
+        </q-btn>
+      </div>
+    </div>
+    <div
+      style="
+        display: block;
+        width: 100%;
+        height: 1px;
+        background: hsla(0 0% 0% / 0.1);
+        margin-bottom: var(--size-2);
+      "
+    />
+    <div
+      v-for="key in fieldSelected || [
+        'branchLabelAddress',
+        'branchLabelTel',
+        'branchLabelType',
+      ]"
+      class="branch-card__data"
+    >
+      <div>{{ $t(key) }}</div>
+      <div>{{ data[key as keyof typeof data] }}</div>
     </div>
   </div>
 </template>
@@ -69,41 +84,45 @@ defineProps<{
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  padding: var(--size-3);
 
-  & > .branch-card__row {
+  & .branch-card__header {
+    display: flex;
+    margin-bottom: var(--size-2);
+
+    & .branch-card__icon {
+      background-color: hsla(var(--_branch-card-row-bg) / 0.1);
+      border-radius: 50%;
+      padding: var(--size-1);
+
+      & :deep(.q-icon) {
+        color: hsla(var(--_branch-card-row-bg) / 1);
+      }
+    }
+
+    & .branch-card__name {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      padding-inline: var(--size-2);
+
+      & .branch-card__code {
+        color: hsla(var(--text-mute) / 1);
+      }
+    }
+
+    & .branch-card__action {
+      margin-left: auto;
+    }
+  }
+  & .branch-card__data {
     display: flex;
-    flex-wrap: nowrap;
-    padding-inline: var(--size-4);
     padding-block: var(--size-2);
 
-    &:last-child {
-      flex-grow: 1;
-    }
-
-    &.branch-card__header > * {
-      display: flex;
-      align-items: center;
-    }
-
-    & > .branch-card__label {
-      min-width: 120px;
-      width: 30%;
-    }
-
-    &:not(.branch-card__header) .branch-card__label {
-      color: hsl(var(--stone-6-hsl));
-    }
-
-    & > .branch-card__value {
-      width: 70%;
-
-      &.branch-card__badge > span {
-        display: inline-block;
-        border-radius: 999rem;
-        padding-inline: var(--size-2);
-        color: hsl(var(--_branch-badge-fg));
-        background-color: hsla(var(--_branch-badge-bg) / 0.1);
-      }
+    & > :first-child {
+      color: hsla(var(--text-mute) / 1);
+      width: 0%;
+      min-width: 40%;
     }
   }
 
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 8f1b3685..d207eeba 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -135,11 +135,9 @@ const beforeBranch = ref<{ id: string; code: string }>({
 const inputSearch = ref<string>('');
 const fieldBranch = ref(['all', 'branchHQLabel', 'branchLabel']);
 const fieldDisplay = ref([
-  'branchLabelName',
   'branchLabelTel',
   'branchLabelAddress',
   'branchLabelType',
-  'branchLabelStatus',
 ]);
 const fieldSelected = ref<string[]>(fieldDisplay.value);
 const fieldSelectedBranch = ref<{
@@ -888,7 +886,6 @@ watch(locale, () => {
                   branchLabelType: $t(
                     item.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
                   ),
-                  branchLabelStatus: $t(`status${item.status}`),
                 }"
                 :field-selected="fieldSelected"
                 :badge-field="['branchLabelStatus']"

From a985d8be58a5f3d4f2dabd90cf37bfa9f5d3de0e Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:29:08 +0700
Subject: [PATCH 016/158] fix: ordering

---
 src/components/01_branch-management/BranchCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index d1023ff4..2de05a9b 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -62,7 +62,7 @@ defineProps<{
       "
     />
     <div
-      v-for="key in fieldSelected || [
+      v-for="key in fieldSelected?.sort() || [
         'branchLabelAddress',
         'branchLabelTel',
         'branchLabelType',

From ec57bae4915011b3bc2f6a426a95c8a803f8cc59 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:38:38 +0700
Subject: [PATCH 017/158] refacotr: styling

---
 .../01_branch-management/BranchCard.vue       | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index 2de05a9b..0dda583a 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -77,10 +77,9 @@ defineProps<{
 
 <style scoped>
 .branch-card {
-  --_branch-card-row-fg: 0 0% 100%;
-  --_branch-card-row-bg: var(--blue-5-hsl);
-  --_branch-badge-fg: var(--green-8-hsl);
-  --_branch-badge-bg: var(--green-6-hsl);
+  --_branch-card-fg: 0 0% 100%;
+  --_branch-card-bg: var(--blue-5-hsl);
+  --_branch-status-color: var(--green-6-hsl);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -91,12 +90,28 @@ defineProps<{
     margin-bottom: var(--size-2);
 
     & .branch-card__icon {
-      background-color: hsla(var(--_branch-card-row-bg) / 0.1);
+      background-color: hsla(var(--_branch-card-bg) / 0.1);
       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) {
-        color: hsla(var(--_branch-card-row-bg) / 1);
+        transform: rotate(-45deg);
+        color: hsla(var(--_branch-card-bg) / 1);
       }
     }
 
@@ -127,10 +142,10 @@ defineProps<{
   }
 
   &.branch-card__none {
-    --_branch-card-row-bg: var(--gray-3-hsl);
+    --_branch-card-bg: var(--gray-3-hsl);
 
     &.branch-card__dark {
-      --_branch-card-row-bg: var(--gray-9-hsl);
+      --_branch-card-bg: var(--gray-9-hsl);
     }
 
     &:not(.branch-card__dark) .branch-card__header {
@@ -143,18 +158,19 @@ defineProps<{
   }
 
   &.branch-card__hq {
-    --_branch-card-row-bg: var(--pink-6-hsl);
+    --_branch-card-bg: var(--pink-6-hsl);
   }
 
   &.branch-card__br {
-    --_branch-card-row-bg: var(--violet-11-hsl);
+    --_branch-card-bg: var(--violet-11-hsl);
   }
 
   &.branch-card__inactive {
-    --_branch-badge-fg: var(--red-4-hsl);
+    --_branch-status-color: var(--red-4-hsl);
     --_branch-badge-bg: var(--red-4-hsl);
-    filter: grayscale(40%);
-    opacity: 0.5;
+    filter: grayscale(1);
+    background-color: hsl(var(--gray-1-hsl) / 0.4);
+    opacity: 0.7;
   }
 }
 </style>

From 74ce38cf6e292de8776a5b3e148ad6c2c5719dde Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 4 Jul 2024 07:43:50 +0000
Subject: [PATCH 018/158] fix: drawer active and branch

---
 src/components/DrawerComponent.vue | 133 ++++++++++++++++++++---------
 src/css/app.scss                   |   2 +-
 2 files changed, 94 insertions(+), 41 deletions(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index bdafc8ca..03a1eec4 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -86,6 +86,8 @@ function navigateTo(label: string, destination: string) {
   currentRoute.value = label;
   router.push(`${destination}`);
 }
+
+function branchSetting() {}
 </script>
 
 <template>
@@ -95,33 +97,76 @@ function navigateTo(label: string, destination: string) {
     side="left"
     :breakpoint="599"
     :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256"
+    class="column justify-between no-wrap"
   >
-    <div
-      class="column items-center justify-center q-pa-xl cursor-pointer"
-      @click="$router.push('/')"
-      id="btn-drawer-home"
-    >
-      <q-img src="/logo.png" style="width: 80%; height: 70%" />
+    <div class="scroll">
+      <div
+        class="flex justify-center q-pa-xl cursor-pointer"
+        @click="$router.push('/')"
+        id="btn-drawer-home"
+      >
+        <q-img src="/logo.png" style="width: 80%; height: 70%" />
+      </div>
+
+      <div id="drawer-menu" class="q-pr-sm q-pl-md">
+        <q-item
+          v-for="v in labelMenu"
+          dense
+          :key="v.label"
+          clickable
+          :disable="!!v.disabled"
+          class="no-padding q-my-xs"
+          :class="{
+            active: currentPath === v.route,
+            'border-active': currentPath === v.route,
+            dark: $q.dark.isActive,
+          }"
+          @click="navigateTo(v.label, v.route)"
+        >
+          <q-item-section id="btn-drawer-back">
+            <q-item-label class="row items-center q-px-md">
+              <div class="box-border-left" />
+              <Icon :icon="v.icon" width="24px" class="q-mr-md" />
+              {{ $t(v.label) }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </div>
     </div>
 
-    <div id="drawer-menu" class="q-pr-sm">
-      <q-item
-        v-for="v in labelMenu"
-        :key="v.label"
-        clickable
-        :disable="!!v.disabled"
-        @click="navigateTo(v.label, v.route)"
-        class="no-padding"
-        :class="{ active: currentPath === v.route, dark: $q.dark.isActive }"
-      >
-        <q-item-section id="btn-drawer-back ">
-          <q-item-label class="q-pl-lg row items-center">
-            <div class="box-border-left" />
-            <Icon :icon="v.icon" width="24px" class="q-mr-md" />
-            {{ $t(v.label) }}
-          </q-item-label>
-        </q-item-section>
-      </q-item>
+    <div class="surface-2 q-px-md q-py-sm row justify-between items-center">
+      <div class="flex q-gutter-x-md items-center">
+        <q-avatar
+          text-color="white"
+          size="md"
+          style="background-color: var(--violet-1)"
+          class="relative-position"
+        >
+          <q-icon
+            name="mdi-home-group"
+            size="sm"
+            style="color: var(--violet-11)"
+          />
+          <div class="dot absolute-bottom-right" />
+        </q-avatar>
+
+        <div class="text-caption column">
+          <span class="text-weight-bold">
+            {{ 'ชื่อสาขาที่ 1' }}
+          </span>
+          <span>
+            {{ 'BR1001' }}
+          </span>
+        </div>
+      </div>
+      <q-btn
+        dense
+        flat
+        rounded
+        icon="mdi-cog-outline"
+        size="sm"
+        @click="branchSetting"
+      ></q-btn>
     </div>
   </q-drawer>
 </template>
@@ -129,28 +174,14 @@ function navigateTo(label: string, destination: string) {
 <style lang="scss" scoped>
 #drawer-menu :deep(.q-item) {
   color: var(--gray-6);
-  border-top-right-radius: 10px;
-  border-bottom-right-radius: 10px;
+  border-radius: var(--radius-2);
 }
 #drawer-menu :deep(.q-item.active) {
   --_drawer-item-background-color: var(--brand-1) !important;
   background-color: var(--_drawer-item-background-color);
   color: white;
-  border-left: 10px solid $secondary;
 
-  &.dark {
-    --_drawer-item-background-color: var(--gray-10) !important;
-    border: 1px solid var(--brand-1);
-    border-left: 10px solid $secondary;
-    .box-border-left {
-      position: absolute;
-      width: 10px;
-      background: $secondary;
-      height: 48.5px;
-      top: -1px;
-      left: -10px;
-    }
-  }
+  // border-left: 10px solid $secondary;
 }
 
 :deep(.q-drawer) {
@@ -164,4 +195,26 @@ function navigateTo(label: string, destination: string) {
   background: var(--surface-1);
   border: 1px solid var(--border-color);
 }
+
+#drawer-menu :deep(.q-item.active)::before {
+  display: block;
+  position: absolute;
+  content: ' ';
+  background: var(--brand-2);
+  border-radius: 99rem;
+  width: 6px;
+  left: -5%;
+  top: 18%;
+  bottom: 18%;
+  cursor: context-menu;
+}
+
+.dot {
+  height: 10px;
+  width: 10px;
+  background-color: var(--teal-6);
+  border-radius: 50%;
+  display: inline-block;
+  border: 1.5px solid white;
+}
 </style>
diff --git a/src/css/app.scss b/src/css/app.scss
index a1ebf4ca..7f4d40c6 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -46,7 +46,7 @@ html {
 }
 
 :where(.dark, .body--dark) {
-  --brand-1: var(--blue-5);
+  --brand-1: #035aa1;
   --brand-2: #f50000;
   --border-color: var(--gray-7);
   --foreground: white;

From d9b77ca357551033f4b62352d9a39937cc6fac99 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:42:55 +0700
Subject: [PATCH 019/158] fix: dark mode color

---
 src/components/01_branch-management/BranchCard.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index 0dda583a..1ec80708 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -90,7 +90,7 @@ defineProps<{
     margin-bottom: var(--size-2);
 
     & .branch-card__icon {
-      background-color: hsla(var(--_branch-card-bg) / 0.1);
+      background-color: hsla(var(--_branch-card-bg) / 0.15);
       border-radius: 50%;
       padding: var(--size-1);
       position: relative;
@@ -169,7 +169,7 @@ defineProps<{
     --_branch-status-color: var(--red-4-hsl);
     --_branch-badge-bg: var(--red-4-hsl);
     filter: grayscale(1);
-    background-color: hsl(var(--gray-1-hsl) / 0.4);
+    background-color: hsl(var(--gray-6-hsl) / 0.1);
     opacity: 0.7;
   }
 }

From 04b1ded194d681b3509c16f526a3bdb122d9a0d6 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:44:52 +0700
Subject: [PATCH 020/158] fix: shadow dark mode

---
 src/components/StatCardComponent.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index c6d27e79..d3cec44d 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -20,7 +20,7 @@ const props = withDefaults(
   <div class="row no-wrap" style="gap: var(--size-4)" :class="{ dark }">
     <div
       v-for="v in props.branch"
-      class="no-padding shadow-2 stat-card"
+      class="no-padding stat-card"
       :class="{ [`stat-card__${v.color}`]: true }"
       :key="v.label"
     >
@@ -56,6 +56,7 @@ const props = withDefaults(
 .stat-card {
   border-radius: var(--radius-2);
   overflow: hidden;
+  box-shadow: var(--shadow-2);
 }
 
 .stat-card__content {

From 69bca333076552ad893bd4c97aac71d19330275d Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:44:56 +0700
Subject: [PATCH 021/158] fix: icon

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

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index d207eeba..538a20f0 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -100,13 +100,13 @@ async function calculateStats() {
   if (_stats) {
     stats.value = [
       {
-        icon: 'mdi-home',
+        icon: 'mdi-office-building-outline',
         count: _stats.hq,
         label: 'branchHQLabel',
         color: 'pink',
       },
       {
-        icon: 'mdi-office-building',
+        icon: 'mdi-home-group',
         count: _stats.br,
         label: 'branchLabel',
         color: 'purple',

From a80f7739b96462938b5bff48fb8c1ff9f06429a3 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:46:45 +0700
Subject: [PATCH 022/158] fix: dark mode color

---
 src/components/DrawerComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 03a1eec4..0fed7cda 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -185,7 +185,7 @@ function branchSetting() {}
 }
 
 :deep(.q-drawer) {
-  background-color: transparent;
+  background-color: var(--surface-3);
   padding: var(--size-4);
   padding-right: 0;
 }

From f6745c0467d191e889bee1293ea524e38833e837 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:49:05 +0700
Subject: [PATCH 023/158] refactor: overall color dark mode

---
 src/css/app.scss              | 4 ++--
 src/css/quasar.variables.scss | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 7f4d40c6..1c474724 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -52,9 +52,9 @@ html {
   --foreground: white;
   --background: var(--gray-10);
   --surface-0: var(--background);
-  --surface-1: var(--gray-11);
+  --surface-1: var(--gray-9);
   --surface-2: var(--gray-10);
-  --surface-3: var(--gray-9);
+  --surface-3: var(--gray-11);
 
   --surface-tab: var(--gray-9);
 
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 32801cd1..ec01867f 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -6,8 +6,8 @@ $primary: var(--brand-1);
 $secondary: var(--brand-2);
 $accent: #9c27b0;
 
-$dark: var(--gray-11);
-$dark-page: var(--gray-10);
+$dark: var(--gray-10);
+$dark-page: var(--gray-11);
 
 $positive: #00bd9d;
 $negative: var(--red-9);

From 4cdbdc05c15665a734be07633fb7bad851045f2d Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:49:43 +0700
Subject: [PATCH 024/158] feat: add border to btn

---
 src/layouts/MainLayout.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 1f57612a..4313d78e 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -185,6 +185,7 @@ onMounted(async () => {
             left: -18px;
             background-color: var(--surface-1);
           "
+          class="bordered"
         >
           <q-btn
             flat

From be34861c05841df99fd3d63747bb9134cdcb5bf2 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:52:12 +0700
Subject: [PATCH 025/158] refactor: color

---
 src/css/app.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 1c474724..faf3f09b 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -52,8 +52,8 @@ html {
   --foreground: white;
   --background: var(--gray-10);
   --surface-0: var(--background);
-  --surface-1: var(--gray-9);
-  --surface-2: var(--gray-10);
+  --surface-1: var(--gray-10);
+  --surface-2: var(--gray-9);
   --surface-3: var(--gray-11);
 
   --surface-tab: var(--gray-9);

From 1137f47b44f9ff15cfa436c2fe5af85ecdbed4ef Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 4 Jul 2024 07:53:51 +0000
Subject: [PATCH 026/158] fix: remove gradient title

---
 src/layouts/MainLayout.vue | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 4313d78e..aec1fe36 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -220,7 +220,7 @@ onMounted(async () => {
         >
           <div class="column">
             <span
-              class="title-gradient text-weight-bold"
+              class="text-weight-bold"
               :class="{ 'text-h6': $q.screen.gt.xs }"
             >
               {{
@@ -502,14 +502,6 @@ onMounted(async () => {
   }
 }
 
-.title-gradient {
-  background: linear-gradient(to right, var(--brand-1), var(--brand-2));
-  background-clip: text; /* Standard property */
-  -webkit-background-clip: text; /* WebKit fallback */
-  -webkit-text-fill-color: transparent; /* WebKit fallback */
-  color: transparent; /* Fallback for browsers not supporting text-clip */
-}
-
 :deep(main.q-page) {
   min-height: 0 !important;
 }

From 02e89010d880ad1b61408204924e4e6a139367f8 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:24:56 +0700
Subject: [PATCH 027/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/en-US/index.ts | 2 ++
 src/i18n/th-th/index.ts | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 7ab6d47e..21506e34 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -59,6 +59,8 @@ export default {
   baseOnDevice: 'Base on Device',
   person: 'Person',
   recordsPage: 'Showing {resultcurrentPage} out of {total} records',
+  showing: 'Showing',
+
   ...status,
   ...main,
   ...address,
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
index 6602952e..65de771c 100644
--- a/src/i18n/th-th/index.ts
+++ b/src/i18n/th-th/index.ts
@@ -59,6 +59,7 @@ export default {
   baseOnDevice: 'สีตามอุปกรณ์',
   person: 'คน',
   recordsPage: 'แสดง {resultcurrentPage} รายการจาก {total} รายการ',
+  showing: 'แสดงทีละ',
   ...status,
   ...main,
   ...address,

From fa7e87d5374f43810be80755cfe5382f010ab0e2 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:25:24 +0700
Subject: [PATCH 028/158] =?UTF-8?q?refactor:=20=20=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=20=20ui=20=E0=B9=80=E0=B8=9B=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B8=AB=E0=B8=99=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02_personnel-management/MainPage.vue      | 52 +++++++++++++++----
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index bfd49313..fd993012 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -501,15 +501,15 @@ watch(
 );
 
 const currentPage = ref(1);
+const pageSize = ref(30);
 const currentMaxPage = computed(() =>
-  userData.value
-    ? Math.ceil(userData.value?.total / userData.value?.pageSize)
-    : 1,
+  userData.value ? Math.ceil(userData.value?.total / pageSize.value) : 1,
 );
 
 async function fetchUserList() {
   await userStore.fetchList({
     includeBranch: true,
+    pageSize: pageSize.value,
     page: currentPage.value,
     query: !!inputSearch.value ? inputSearch.value : undefined,
     userType: selectorLabel.value ?? undefined,
@@ -682,8 +682,38 @@ watch(inputSearch, async () => await fetchUserList());
       </div>
     </div>
 
-    <div class="row justify-between q-pt-md" v-if="currentMaxPage > 0">
-      <div class="app-text-muted">
+    <div
+      class="row justify-between items-center q-pt-md"
+      v-if="currentMaxPage > 0"
+    >
+      <div class="col-4">
+        <div class="row items-center">
+          <div style="width: 80px">{{ $t('showing') }}</div>
+          <div>
+            <q-btn-dropdown dense unelevated :label="pageSize">
+              <q-list>
+                <q-item
+                  v-for="v in [10, 30, 50, 100, 500, 1000]"
+                  clickable
+                  v-close-popup
+                  @click="
+                    async () => {
+                      pageSize = v;
+                      await fetchUserList();
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <q-item-label>{{ v }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-4 row justify-center app-text-muted">
         {{
           $t('recordsPage', {
             resultcurrentPage: userData?.result.length,
@@ -691,11 +721,13 @@ watch(inputSearch, async () => await fetchUserList());
           })
         }}
       </div>
-      <PaginationComponent
-        v-model:current-page="currentPage"
-        v-model:max-page="currentMaxPage"
-        :fetch-data="async () => await fetchUserList()"
-      />
+      <div class="col-4 row justify-end">
+        <PaginationComponent
+          v-model:current-page="currentPage"
+          v-model:max-page="currentMaxPage"
+          :fetch-data="async () => await fetchUserList()"
+        />
+      </div>
     </div>
   </div>
 

From 1d79d9e911353d88e896c96199b13f802569e100 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:35:19 +0700
Subject: [PATCH 029/158] =?UTF-8?q?refactor:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=20ui=20=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=20?=
 =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B8=87=20=E0=B8=99=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 51 +++++++++++++++----
 1 file changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 40d7f367..d56376aa 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1599,7 +1599,34 @@ watch([inputSearch, currentStatus], async () => {
             v-if="listCustomer.length !== 0"
             class="row justify-between q-pt-md"
           >
-            <div class="app-text-muted">
+            <div class="col-4">
+              <div class="row items-center">
+                <div style="width: 80px">{{ $t('showing') }}</div>
+                <div>
+                  <q-btn-dropdown dense unelevated :label="pageSize">
+                    <q-list>
+                      <q-item
+                        v-for="v in [10, 30, 50, 100, 500, 1000]"
+                        clickable
+                        v-close-popup
+                        @click="
+                          async () => {
+                            pageSize = v;
+                            await fetchListCustomer();
+                          }
+                        "
+                      >
+                        <q-item-section>
+                          <q-item-label>{{ v }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-btn-dropdown>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-4 row justify-center app-text-muted">
               {{
                 $t('recordsPage', {
                   resultcurrentPage: listCustomer.length,
@@ -1607,16 +1634,18 @@ watch([inputSearch, currentStatus], async () => {
                 })
               }}
             </div>
-            <PaginationComponent
-              v-model:current-page="currentPageCustomer"
-              v-model:max-page="maxPageCustomer"
-              :fetch-data="
-                async () => {
-                  await fetchListCustomer();
-                  flowStore.rotate();
-                }
-              "
-            />
+            <div class="col-4 row justify-end">
+              <PaginationComponent
+                v-model:current-page="currentPageCustomer"
+                v-model:max-page="maxPageCustomer"
+                :fetch-data="
+                  async () => {
+                    await fetchListCustomer();
+                    flowStore.rotate();
+                  }
+                "
+              />
+            </div>
           </div>
         </template>
 

From 979abe0bbb3b6f6f4d0664d0e4ef4d0e54fdb617 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:46:10 +0700
Subject: [PATCH 030/158] =?UTF-8?q?refactor:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=20ui=20=20=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 59 +++++++++++++++----
 1 file changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index d56376aa..5dd3695d 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1601,7 +1601,9 @@ watch([inputSearch, currentStatus], async () => {
           >
             <div class="col-4">
               <div class="row items-center">
-                <div style="width: 80px">{{ $t('showing') }}</div>
+                <div class="app-text-muted" style="width: 80px">
+                  {{ $t('showing') }}
+                </div>
                 <div>
                   <q-btn-dropdown dense unelevated :label="pageSize">
                     <q-list>
@@ -1696,8 +1698,37 @@ watch([inputSearch, currentStatus], async () => {
               @toggle-status="(id, status) => toggleStatusEmployee(id, status)"
             />
 
-            <div class="row justify-between q-pt-md">
-              <div class="app-text-muted">
+            <div class="col-4 row justify-center">
+              <div class="col-4">
+                <div class="row items-center">
+                  <div class="app-text-muted" style="width: 80px">
+                    {{ $t('showing') }}
+                  </div>
+                  <div>
+                    <q-btn-dropdown dense unelevated :label="pageSize">
+                      <q-list>
+                        <q-item
+                          v-for="v in [10, 30, 50, 100, 500, 1000]"
+                          clickable
+                          v-close-popup
+                          @click="
+                            async () => {
+                              pageSize = v;
+                              await fetchListEmployee();
+                            }
+                          "
+                        >
+                          <q-item-section>
+                            <q-item-label>{{ v }}</q-item-label>
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-btn-dropdown>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-4 row justify-center app-text-muted">
                 {{
                   $t('recordsPage', {
                     resultcurrentPage: listEmployee.length,
@@ -1705,16 +1736,18 @@ watch([inputSearch, currentStatus], async () => {
                   })
                 }}
               </div>
-              <PaginationComponent
-                v-model:current-page="currentPageEmployee"
-                v-model:max-page="maxPageEmployee"
-                :fetch-data="
-                  async () => {
-                    await fetchListEmployee();
-                    flowStore.rotate();
-                  }
-                "
-              />
+              <div class="col-4 row justify-end">
+                <PaginationComponent
+                  v-model:current-page="currentPageEmployee"
+                  v-model:max-page="maxPageEmployee"
+                  :fetch-data="
+                    async () => {
+                      await fetchListEmployee();
+                      flowStore.rotate();
+                    }
+                  "
+                />
+              </div>
             </div>
           </div>
         </template>

From 8316d61201ec72ed3edebbc3624ec0a7fd93ff73 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:46:53 +0700
Subject: [PATCH 031/158] refactor: class app-text-muted

---
 src/pages/02_personnel-management/MainPage.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index fd993012..116fe095 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -688,7 +688,9 @@ watch(inputSearch, async () => await fetchUserList());
     >
       <div class="col-4">
         <div class="row items-center">
-          <div style="width: 80px">{{ $t('showing') }}</div>
+          <div class="app-text-muted" style="width: 80px">
+            {{ $t('showing') }}
+          </div>
           <div>
             <q-btn-dropdown dense unelevated :label="pageSize">
               <q-list>

From 7fd7df5a1b2f0b7b640b93511acc1fe738ecabe1 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:55:09 +0700
Subject: [PATCH 032/158] =?UTF-8?q?refactor:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=20=20ui=20=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 166 +++++++++++++++++-----
 1 file changed, 132 insertions(+), 34 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 4cd81135..c4cf1bfe 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1403,9 +1403,38 @@ watch(inputSearchProductAndService, async () => {
         <template v-else>
           <div
             v-if="productMode === 'group'"
-            class="flex justify-between q-pt-xl"
+            class="flex items-center justify-between q-pt-xl"
           >
-            <div class="app-text-muted">
+            <div class="col-4">
+              <div class="row items-center">
+                <div class="app-text-muted" style="width: 80px">
+                  {{ $t('showing') }}
+                </div>
+                <div>
+                  <q-btn-dropdown dense unelevated :label="pageSizeGroup">
+                    <q-list>
+                      <q-item
+                        v-for="v in [10, 30, 50, 100, 500, 1000]"
+                        clickable
+                        v-close-popup
+                        @click="
+                          async () => {
+                            pageSizeGroup = v;
+                            await fetchListGroups();
+                          }
+                        "
+                      >
+                        <q-item-section>
+                          <q-item-label>{{ v }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-btn-dropdown>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-4 row justify-center app-text-muted">
               {{
                 $t('recordsPage', {
                   resultcurrentPage: productGroup?.length,
@@ -1413,23 +1442,55 @@ watch(inputSearchProductAndService, async () => {
                 })
               }}
             </div>
-            <PaginationComponent
-              v-model:current-page="currentPageGroup"
-              v-model:max-page="maxPageGroup"
-              :fetch-data="
-                async () => {
-                  await fetchListGroups();
-                  flowStore.rotate();
-                }
-              "
-            />
+
+            <div class="col-4 row justify-end">
+              <PaginationComponent
+                v-model:current-page="currentPageGroup"
+                v-model:max-page="maxPageGroup"
+                :fetch-data="
+                  async () => {
+                    await fetchListGroups();
+                    flowStore.rotate();
+                  }
+                "
+              />
+            </div>
           </div>
 
           <div
             v-if="productMode === 'type'"
             class="flex justify-between q-pt-xl"
           >
-            <div class="app-text-muted">
+            <div class="col-4">
+              <div class="row items-center">
+                <div class="app-text-muted" style="width: 80px">
+                  {{ $t('showing') }}
+                </div>
+                <div>
+                  <q-btn-dropdown dense unelevated :label="pageSizeType">
+                    <q-list>
+                      <q-item
+                        v-for="v in [10, 30, 50, 100, 500, 1000]"
+                        clickable
+                        v-close-popup
+                        @click="
+                          async () => {
+                            pageSizeType = v;
+                            await fetchListType();
+                          }
+                        "
+                      >
+                        <q-item-section>
+                          <q-item-label>{{ v }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-btn-dropdown>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-4 row justify-center app-text-muted">
               {{
                 $t('recordsPage', {
                   resultcurrentPage: productType?.length,
@@ -1437,16 +1498,18 @@ watch(inputSearchProductAndService, async () => {
                 })
               }}
             </div>
-            <PaginationComponent
-              v-model:current-page="currentPageType"
-              v-model:max-page="maxPageType"
-              :fetch-data="
-                async () => {
-                  await fetchListType();
-                  flowStore.rotate();
-                }
-              "
-            />
+            <div class="col-4 row justify-end">
+              <PaginationComponent
+                v-model:current-page="currentPageType"
+                v-model:max-page="maxPageType"
+                :fetch-data="
+                  async () => {
+                    await fetchListType();
+                    flowStore.rotate();
+                  }
+                "
+              />
+            </div>
           </div>
         </template>
       </div>
@@ -1706,7 +1769,40 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
         <div class="row justify-between q-pb-md q-px-lg">
-          <div class="app-text-muted">
+          <div class="col-4">
+            <div class="row items-center">
+              <div class="app-text-muted" style="width: 80px">
+                {{ $t('showing') }}
+              </div>
+              <div>
+                <q-btn-dropdown
+                  dense
+                  unelevated
+                  :label="pageSizeServiceAndProduct"
+                >
+                  <q-list>
+                    <q-item
+                      v-for="v in [10, 30, 50, 100, 500, 1000]"
+                      clickable
+                      v-close-popup
+                      @click="
+                        async () => {
+                          pageSizeServiceAndProduct = v;
+                          await fetchListOfProductAndService();
+                        }
+                      "
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ v }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-4 row justify-center app-text-muted">
             {{
               $t('recordsPage', {
                 resultcurrentPage:
@@ -1719,16 +1815,18 @@ watch(inputSearchProductAndService, async () => {
               })
             }}
           </div>
-          <PaginationComponent
-            v-model:current-page="currentPageServiceAndProduct"
-            v-model:max-page="maxPageServiceAndProduct"
-            :fetch-data="
-              async () => {
-                await alternativeFetch();
-                flowStore.rotate();
-              }
-            "
-          />
+          <div class="col-4 row justify-end">
+            <PaginationComponent
+              v-model:current-page="currentPageServiceAndProduct"
+              v-model:max-page="maxPageServiceAndProduct"
+              :fetch-data="
+                async () => {
+                  await alternativeFetch();
+                  flowStore.rotate();
+                }
+              "
+            />
+          </div>
         </div>
       </div>
     </div>

From 283ae2d1b05693af831f01faa8cd3bb9428fedfc Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 15:04:52 +0700
Subject: [PATCH 033/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20ty?=
 =?UTF-8?q?pe=20=20fieldSelected?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 538a20f0..a579e02e 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -134,12 +134,12 @@ const beforeBranch = ref<{ id: string; code: string }>({
 
 const inputSearch = ref<string>('');
 const fieldBranch = ref(['all', 'branchHQLabel', 'branchLabel']);
-const fieldDisplay = ref([
-  'branchLabelTel',
-  'branchLabelAddress',
-  'branchLabelType',
-]);
-const fieldSelected = ref<string[]>(fieldDisplay.value);
+const fieldDisplay = ref<
+  ('branchLabelAddress' | 'branchLabelTel' | 'branchLabelType')[]
+>(['branchLabelTel', 'branchLabelAddress', 'branchLabelType']);
+const fieldSelected = ref<
+  ('branchLabelAddress' | 'branchLabelTel' | 'branchLabelType')[]
+>(fieldDisplay.value);
 const fieldSelectedBranch = ref<{
   label: string;
   value: string;

From 8790ab68a54b1c761491c17dcb84471cc357f426 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 15:22:59 +0700
Subject: [PATCH 034/158] refactor: color

---
 src/components/DrawerComponent.vue   | 8 ++++++--
 src/components/StatCardComponent.vue | 2 +-
 src/css/app.scss                     | 4 ++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 0fed7cda..c2ebb7ea 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -105,7 +105,11 @@ function branchSetting() {}
         @click="$router.push('/')"
         id="btn-drawer-home"
       >
-        <q-img src="/logo.png" style="width: 80%; height: 70%" />
+        <q-img
+          src="/logo.png"
+          style="width: 80%; height: 70%"
+          :style="{ filter: `brightness(${$q.dark.isActive ? '1.3' : '1'})` }"
+        />
       </div>
 
       <div id="drawer-menu" class="q-pr-sm q-pl-md">
@@ -185,7 +189,7 @@ function branchSetting() {}
 }
 
 :deep(.q-drawer) {
-  background-color: var(--surface-3);
+  background-color: var(--surface-0);
   padding: var(--size-4);
   padding-right: 0;
 }
diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index d3cec44d..e2d20c30 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -92,6 +92,6 @@ const props = withDefaults(
 }
 
 .dark .stat-card__orange {
-  --_color: var(--orange-8);
+  --_color: var(--orange-6-hsl);
 }
 </style>
diff --git a/src/css/app.scss b/src/css/app.scss
index faf3f09b..33ab399f 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -11,7 +11,7 @@ html {
   --brand-2: #f50000;
   --border-color: var(--gray-3);
   --foreground: black;
-  --background: var(--gray-1);
+  --background: var(--gray-2);
   --surface-0: var(--background);
   --surface-1: white;
   --surface-2: var(--gray-0);
@@ -50,7 +50,7 @@ html {
   --brand-2: #f50000;
   --border-color: var(--gray-7);
   --foreground: white;
-  --background: var(--gray-10);
+  --background: var(--gray-11);
   --surface-0: var(--background);
   --surface-1: var(--gray-10);
   --surface-2: var(--gray-9);

From 9cce73338e0f8494af5c89f40b06564f249dcdb2 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 15:44:28 +0700
Subject: [PATCH 035/158] feat: remove border

---
 src/components/DrawerComponent.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index c2ebb7ea..4fcd3d10 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -197,7 +197,6 @@ function branchSetting() {}
 :deep(.q-drawer__content) {
   border-radius: var(--radius-2);
   background: var(--surface-1);
-  border: 1px solid var(--border-color);
 }
 
 #drawer-menu :deep(.q-item.active)::before {

From fe0ac5c4b051437ff56484781afc14cb77ffef84 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 15:45:09 +0700
Subject: [PATCH 036/158] refactor: color

---
 src/components/04_product-service/ProductCardComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/04_product-service/ProductCardComponent.vue b/src/components/04_product-service/ProductCardComponent.vue
index fa5c6fd6..93252422 100644
--- a/src/components/04_product-service/ProductCardComponent.vue
+++ b/src/components/04_product-service/ProductCardComponent.vue
@@ -37,7 +37,7 @@ withDefaults(
   >
     <div
       class="relative-position rounded q-pb-lg"
-      :style="`background-color:hsla(${color}/0.1)`"
+      :style="`background-color:hsla(${color}/.2)`"
     >
       <div class="row justify-between items-center">
         <q-avatar

From 1716d864675ef690d1e0b3af14a73553b04aa94f Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 15:45:20 +0700
Subject: [PATCH 037/158] refactor: style

---
 src/layouts/MainLayout.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index aec1fe36..f3c11022 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -185,7 +185,6 @@ onMounted(async () => {
             left: -18px;
             background-color: var(--surface-1);
           "
-          class="bordered"
         >
           <q-btn
             flat
@@ -210,18 +209,21 @@ onMounted(async () => {
       </div>
 
       <div
-        class="surface-3 rounded q-pb-lg scroll column"
+        class="surface-0 q-pb-lg scroll column"
         style="height: 100vh; flex-wrap: nowrap"
       >
         <!-- header -->
         <div
-          class="q-px-lg row items-center justify-between q-pb-md surface-3 q-pt-lg"
+          class="q-px-lg surface-0 row items-center justify-between q-pb-md q-pt-lg"
           style="position: sticky; top: 0; z-index: 8"
         >
           <div class="column">
             <span
               class="text-weight-bold"
               :class="{ 'text-h6': $q.screen.gt.xs }"
+              :style="{
+                filter: `brightness(${$q.dark.isActive ? '2' : '1'})`,
+              }"
             >
               {{
                 utilsStore.currentTitle?.title

From cccea1f42322162afc5288955bd39845abb1eaca Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 15:45:28 +0700
Subject: [PATCH 038/158] refactor: color

---
 src/components/01_branch-management/BranchCard.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index 1ec80708..bcf8592d 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -163,6 +163,10 @@ defineProps<{
 
   &.branch-card__br {
     --_branch-card-bg: var(--violet-11-hsl);
+
+    &.branch-card__dark {
+      --_branch-card-bg: var(--violet-10-hsl);
+    }
   }
 
   &.branch-card__inactive {
@@ -170,7 +174,7 @@ defineProps<{
     --_branch-badge-bg: var(--red-4-hsl);
     filter: grayscale(1);
     background-color: hsl(var(--gray-6-hsl) / 0.1);
-    opacity: 0.7;
+    opacity: 0.5;
   }
 }
 </style>

From 4f240a3f20ce3bb1882c9c742f99786e4b00c37f Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 15:53:45 +0700
Subject: [PATCH 039/158] Revert "fix: remove gradient title"

This reverts commit 1137f47b44f9ff15cfa436c2fe5af85ecdbed4ef.
---
 src/layouts/MainLayout.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index f3c11022..975dc3ab 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -219,7 +219,7 @@ onMounted(async () => {
         >
           <div class="column">
             <span
-              class="text-weight-bold"
+              class="title-gradient text-weight-bold"
               :class="{ 'text-h6': $q.screen.gt.xs }"
               :style="{
                 filter: `brightness(${$q.dark.isActive ? '2' : '1'})`,
@@ -504,6 +504,14 @@ onMounted(async () => {
   }
 }
 
+.title-gradient {
+  background: linear-gradient(to right, var(--brand-1), var(--brand-2));
+  background-clip: text; /* Standard property */
+  -webkit-background-clip: text; /* WebKit fallback */
+  -webkit-text-fill-color: transparent; /* WebKit fallback */
+  color: transparent; /* Fallback for browsers not supporting text-clip */
+}
+
 :deep(main.q-page) {
   min-height: 0 !important;
 }

From bfec8255ff06e5f8d0fec421f135bacae17456f9 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 4 Jul 2024 09:53:16 +0000
Subject: [PATCH 040/158] feat: mini-drawer

---
 src/components/DrawerComponent.vue | 125 +++++++++++++++++------------
 src/layouts/MainLayout.vue         |  13 +--
 2 files changed, 81 insertions(+), 57 deletions(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 4fcd3d10..c010d1af 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -3,6 +3,10 @@ import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { Icon } from '@iconify/vue';
 
+defineProps<{
+  mini?: boolean;
+}>();
+
 const router = useRouter();
 
 const currentRoute = ref<string>('');
@@ -79,7 +83,7 @@ const labelMenu = ref<
 ]);
 
 const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
-  default: false,
+  default: true,
 });
 
 function navigateTo(label: string, destination: string) {
@@ -96,30 +100,33 @@ function branchSetting() {}
     v-model="leftDrawerOpen"
     side="left"
     :breakpoint="599"
-    :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256"
     class="column justify-between no-wrap"
+    :width="mini ? 110 : 256"
   >
-    <div class="scroll">
+    <!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
+    <div class="scroll" style="overflow-x: hidden">
       <div
-        class="flex justify-center q-pa-xl cursor-pointer"
+        class="flex justify-center items-center q-pa-md cursor-pointer"
         @click="$router.push('/')"
         id="btn-drawer-home"
+        style="height: 128px"
       >
         <q-img
-          src="/logo.png"
-          style="width: 80%; height: 70%"
+          fit="contain"
+          :src="mini ? 'logo_jws.png' : '/logo.png'"
           :style="{ filter: `brightness(${$q.dark.isActive ? '1.3' : '1'})` }"
+          style="height: 64px"
         />
       </div>
 
-      <div id="drawer-menu" class="q-pr-sm q-pl-md">
+      <div id="drawer-menu" class="q-px-md">
         <q-item
           v-for="v in labelMenu"
           dense
-          :key="v.label"
           clickable
+          class="row items-center q-my-xs"
+          :key="v.label"
           :disable="!!v.disabled"
-          class="no-padding q-my-xs"
           :class="{
             active: currentPath === v.route,
             'border-active': currentPath === v.route,
@@ -127,50 +134,62 @@ function branchSetting() {}
           }"
           @click="navigateTo(v.label, v.route)"
         >
-          <q-item-section id="btn-drawer-back">
-            <q-item-label class="row items-center q-px-md">
-              <div class="box-border-left" />
-              <Icon :icon="v.icon" width="24px" class="q-mr-md" />
+          <div class="row justify-center items-center">
+            <Icon :icon="v.icon" width="24px" />
+            <q-tooltip v-if="mini">
               {{ $t(v.label) }}
-            </q-item-label>
-          </q-item-section>
+            </q-tooltip>
+          </div>
+
+          <div v-if="!mini" class="q-ml-md" style="white-space: nowrap">
+            {{ $t(v.label) }}
+          </div>
         </q-item>
       </div>
     </div>
 
-    <div class="surface-2 q-px-md q-py-sm row justify-between items-center">
-      <div class="flex q-gutter-x-md items-center">
-        <q-avatar
-          text-color="white"
-          size="md"
-          style="background-color: var(--violet-1)"
-          class="relative-position"
-        >
-          <q-icon
-            name="mdi-home-group"
-            size="sm"
-            style="color: var(--violet-11)"
-          />
-          <div class="dot absolute-bottom-right" />
-        </q-avatar>
+    <div
+      class="surface-2 q-px-md q-py-sm row items-center no-wrap justify-start"
+      :class="{ 'justify-center': mini }"
+      style="min-height: 56px; overflow-x: hidden"
+    >
+      <q-avatar
+        text-color="white"
+        size="md"
+        :style="`background-color: hsla(var(--violet-${$q.dark.isActive ? '10' : '11'}-hsl)/0.15)`"
+        class="relative-position"
+      >
+        <q-icon
+          name="mdi-home-group"
+          size="sm"
+          :style="`color: var(--violet-${$q.dark.isActive ? '10' : '11'})`"
+        />
+        <div class="dot absolute-bottom-right" />
+      </q-avatar>
 
-        <div class="text-caption column">
-          <span class="text-weight-bold">
-            {{ 'ชื่อสาขาที่ 1' }}
-          </span>
-          <span>
-            {{ 'BR1001' }}
-          </span>
-        </div>
+      <div
+        v-if="!mini"
+        class="text-caption column q-ml-sm"
+        style="white-space: nowrap"
+      >
+        <span class="text-weight-bold">
+          {{ 'ชื่อสาขาที่ 1' }}
+        </span>
+        <span>
+          {{ 'BR1001' }}
+        </span>
       </div>
+
       <q-btn
+        v-if="!mini"
         dense
         flat
         rounded
         icon="mdi-cog-outline"
         size="sm"
         @click="branchSetting"
-      ></q-btn>
+        style="margin-left: auto"
+      />
     </div>
   </q-drawer>
 </template>
@@ -188,7 +207,22 @@ function branchSetting() {}
   // border-left: 10px solid $secondary;
 }
 
+#drawer-menu :deep(.q-item.active)::before {
+  display: block;
+  position: absolute;
+  content: ' ';
+  background: var(--brand-2);
+  border-radius: 99rem;
+  width: 6px;
+  left: -0.6rem;
+  top: 18%;
+  bottom: 18%;
+  cursor: context-menu;
+}
+
 :deep(.q-drawer) {
+  transition: 0.1s width ease-in-out;
+
   background-color: var(--surface-0);
   padding: var(--size-4);
   padding-right: 0;
@@ -199,19 +233,6 @@ function branchSetting() {}
   background: var(--surface-1);
 }
 
-#drawer-menu :deep(.q-item.active)::before {
-  display: block;
-  position: absolute;
-  content: ' ';
-  background: var(--brand-2);
-  border-radius: 99rem;
-  width: 6px;
-  left: -5%;
-  top: 18%;
-  bottom: 18%;
-  cursor: context-menu;
-}
-
 .dot {
   height: 10px;
   width: 10px;
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 975dc3ab..41b07557 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -169,22 +169,25 @@ onMounted(async () => {
 
 <template>
   <q-layout view="lHh Lpr lFf">
-    <drawer-component v-model:left-drawer-open="leftDrawerOpen" />
+    <drawer-component :mini="!leftDrawerOpen" />
 
     <q-page-container>
       <!-- drawer control -->
       <div
-        style="position: relative; z-index: 9999"
+        style="position: relative; z-index: 1000"
         :hidden="$q.screen.lt.md && leftDrawerOpen"
       >
-        <q-avatar
+        <div
           size="36px"
           style="
             position: absolute;
+            border-radius: 50%;
             top: 28px;
-            left: -18px;
+            left: -22px;
             background-color: var(--surface-1);
+            border: 4px solid var(--surface-1);
           "
+          class="flex items-center justify-center"
         >
           <q-btn
             flat
@@ -205,7 +208,7 @@ onMounted(async () => {
               style="color: hsl(var(--negative-bg))"
             />
           </q-btn>
-        </q-avatar>
+        </div>
       </div>
 
       <div

From 2fd21a5ac7c67b3a6d3129bc254fefef9ee81929 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 4 Jul 2024 09:53:33 +0000
Subject: [PATCH 041/158] fix: 02-personnel layout

---
 .../02_personnel-management/MainPage.vue      | 369 +++++++++---------
 1 file changed, 188 insertions(+), 181 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 116fe095..5a06daf7 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -534,201 +534,208 @@ watch(inputSearch, async () => await fetchUserList());
   </ButtonAddComponent>
 
   <!-- stat -->
-  <div class="scroll q-mb-md">
-    <div style="display: inline-block">
-      <StatCardComponent
-        v-if="sortedUserStats"
-        :branch="
-          sortedUserStats.map((v) => ({
-            count: v.count,
-            label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
-            icon: 'mdi-account',
-            color: v.isHeadOffice ? 'pink' : 'purple',
-          }))
-        "
-        :dark="$q.dark.isActive"
-      />
-    </div>
-  </div>
-  <!-- main -->
-  <div
-    class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
-  >
-    <div>
-      <div class="row q-mb-md justify-end" style="gap: var(--size-2)">
-        <q-input
-          for="input-search"
-          style="width: 250px"
-          outlined
-          dense
-          :label="$t('search')"
-          debounce="500"
-          v-model="inputSearch"
-        ></q-input>
-        <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>
-      </div>
-      <PersonCard
-        :list="
-          userData?.result
-            .filter((v) => {
-              if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
-                return false;
-              }
-              if (
-                statusFilter === 'statusINACTIVE' &&
-                v.status !== 'INACTIVE'
-              ) {
-                return false;
-              }
-              return true;
-            })
-            .map((v) => ({
-              id: v.id,
-              img: `${v.profileImageUrl}`,
-              name:
-                $i18n.locale === 'en-US'
-                  ? `${v.firstNameEN} ${v.lastNameEN}`
-                  : `${v.firstName} ${v.lastName}`,
-              male: v.gender === 'male',
-              female: v.gender === 'female',
-              detail: [
-                { label: $t('personnelCardUserType'), value: $t(v.userType) },
-                { label: $t('personnelCardTelephone'), value: v.telephoneNo },
-                {
-                  label: $t('personnelCardAge'),
-                  value: userStore.calculateAge(v.birthDate as Date) || '',
-                },
-              ],
-              badge: v.code,
-              disabled: v.status === 'INACTIVE',
-            })) || []
-        "
-        @update-card="openDialog"
-        @delete-card="onDelete"
-        @enter-card="openDialog"
-        @toggle-status="toggleStatus"
-      />
-      <template v-if="userData && userData.total === 0 && !inputSearch">
-        <div class="col-1 self-end">
-          <div class="row">
-            <TooltipComponent
-              title="personnelTooltipTitle"
-              caption="personnelTooltipCaption"
-              imgSrc="personnel-table-"
-            />
-          </div>
-        </div>
-        <div
-          class="col self-center"
-          style="display: flex; flex-grow: 1; align-items: center"
-        >
-          <AddButton
-            :label="'personnelAdd'"
-            :cyanOn="true"
-            @trigger="openDialog('FORM')"
-          />
-        </div>
-      </template>
-
-      <div
-        v-if="userData?.total === 0 && !!inputSearch"
-        class="row full-width items-center justify-center"
-        style="min-height: 250px"
-      >
-        <NoData :not-found="!!inputSearch" />
+  <div class="column full-height no-wrap">
+    <div class="scroll q-mb-md">
+      <div style="display: inline-block">
+        <StatCardComponent
+          v-if="sortedUserStats"
+          :branch="
+            sortedUserStats.map((v) => ({
+              count: v.count,
+              label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+              icon: 'mdi-account',
+              color: v.isHeadOffice ? 'pink' : 'purple',
+            }))
+          "
+          :dark="$q.dark.isActive"
+        />
       </div>
     </div>
 
+    <!-- main -->
     <div
-      class="row justify-between items-center q-pt-md"
-      v-if="currentMaxPage > 0"
+      class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
     >
-      <div class="col-4">
-        <div class="row items-center">
-          <div class="app-text-muted" style="width: 80px">
-            {{ $t('showing') }}
-          </div>
-          <div>
-            <q-btn-dropdown dense unelevated :label="pageSize">
-              <q-list>
+      <div>
+        <div class="row q-mb-md justify-end" style="gap: var(--size-2)">
+          <q-input
+            for="input-search"
+            style="width: 250px"
+            outlined
+            dense
+            :label="$t('search')"
+            debounce="500"
+            v-model="inputSearch"
+          ></q-input>
+          <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
-                  v-for="v in [10, 30, 50, 100, 500, 1000]"
+                  id="btn-filter-all"
                   clickable
-                  v-close-popup
-                  @click="
-                    async () => {
-                      pageSize = v;
-                      await fetchUserList();
-                    }
-                  "
+                  class="flex items-center"
+                  :class="{ 'app-text-info': statusFilter === 'all' }"
+                  @click="statusFilter = 'all'"
                 >
-                  <q-item-section>
-                    <q-item-label>{{ v }}</q-item-label>
-                  </q-item-section>
+                  {{ $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-btn-dropdown>
+            </q-menu>
+          </q-btn>
+        </div>
+        <PersonCard
+          :list="
+            userData?.result
+              .filter((v) => {
+                if (
+                  statusFilter === 'statusACTIVE' &&
+                  v.status === 'INACTIVE'
+                ) {
+                  return false;
+                }
+                if (
+                  statusFilter === 'statusINACTIVE' &&
+                  v.status !== 'INACTIVE'
+                ) {
+                  return false;
+                }
+                return true;
+              })
+              .map((v) => ({
+                id: v.id,
+                img: `${v.profileImageUrl}`,
+                name:
+                  $i18n.locale === 'en-US'
+                    ? `${v.firstNameEN} ${v.lastNameEN}`
+                    : `${v.firstName} ${v.lastName}`,
+                male: v.gender === 'male',
+                female: v.gender === 'female',
+                detail: [
+                  { label: $t('personnelCardUserType'), value: $t(v.userType) },
+                  { label: $t('personnelCardTelephone'), value: v.telephoneNo },
+                  {
+                    label: $t('personnelCardAge'),
+                    value: userStore.calculateAge(v.birthDate as Date) || '',
+                  },
+                ],
+                badge: v.code,
+                disabled: v.status === 'INACTIVE',
+              })) || []
+          "
+          @update-card="openDialog"
+          @delete-card="onDelete"
+          @enter-card="openDialog"
+          @toggle-status="toggleStatus"
+        />
+        <template v-if="userData && userData.total === 0 && !inputSearch">
+          <div class="col-1 self-end">
+            <div class="row">
+              <TooltipComponent
+                title="personnelTooltipTitle"
+                caption="personnelTooltipCaption"
+                imgSrc="personnel-table-"
+              />
+            </div>
           </div>
+          <div
+            class="col self-center"
+            style="display: flex; flex-grow: 1; align-items: center"
+          >
+            <AddButton
+              :label="'personnelAdd'"
+              :cyanOn="true"
+              @trigger="openDialog('FORM')"
+            />
+          </div>
+        </template>
+
+        <div
+          v-if="userData?.total === 0 && !!inputSearch"
+          class="row full-width items-center justify-center"
+          style="min-height: 250px"
+        >
+          <NoData :not-found="!!inputSearch" />
         </div>
       </div>
 
-      <div class="col-4 row justify-center app-text-muted">
-        {{
-          $t('recordsPage', {
-            resultcurrentPage: userData?.result.length,
-            total: userData?.total,
-          })
-        }}
-      </div>
-      <div class="col-4 row justify-end">
-        <PaginationComponent
-          v-model:current-page="currentPage"
-          v-model:max-page="currentMaxPage"
-          :fetch-data="async () => await fetchUserList()"
-        />
+      <div
+        class="row justify-between items-center q-pt-md"
+        v-if="currentMaxPage > 0"
+      >
+        <div class="col-4">
+          <div class="row items-center">
+            <div class="app-text-muted" style="width: 80px">
+              {{ $t('showing') }}
+            </div>
+            <div>
+              <q-btn-dropdown dense unelevated :label="pageSize">
+                <q-list>
+                  <q-item
+                    v-for="v in [10, 30, 50, 100, 500, 1000]"
+                    :key="v"
+                    clickable
+                    v-close-popup
+                    @click="
+                      async () => {
+                        pageSize = v;
+                        await fetchUserList();
+                      }
+                    "
+                  >
+                    <q-item-section>
+                      <q-item-label>{{ v }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-4 row justify-center app-text-muted">
+          {{
+            $t('recordsPage', {
+              resultcurrentPage: userData?.result.length,
+              total: userData?.total,
+            })
+          }}
+        </div>
+        <div class="col-4 row justify-end">
+          <PaginationComponent
+            v-model:current-page="currentPage"
+            v-model:max-page="currentMaxPage"
+            :fetch-data="async () => await fetchUserList()"
+          />
+        </div>
       </div>
     </div>
   </div>

From 6c170436c226d52284ec5e938943cf0ef2891cdf Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 4 Jul 2024 10:39:54 +0000
Subject: [PATCH 042/158] fix: left drawer responsive

---
 src/components/DrawerComponent.vue |  4 ++--
 src/layouts/MainLayout.vue         | 35 ++++++++++++++++++++++--------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index c010d1af..36001796 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -97,6 +97,7 @@ function branchSetting() {}
 <template>
   <!-- Drawer -->
   <q-drawer
+    no-swipe-open
     v-model="leftDrawerOpen"
     side="left"
     :breakpoint="599"
@@ -222,8 +223,7 @@ function branchSetting() {}
 
 :deep(.q-drawer) {
   transition: 0.1s width ease-in-out;
-
-  background-color: var(--surface-0);
+  background-color: transparent;
   padding: var(--size-4);
   padding-right: 0;
 }
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 41b07557..0659200b 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -41,7 +41,10 @@ const userStore = useUserStore();
 
 const rawOption = ref();
 const canvasModal = ref(false);
+
 const leftDrawerOpen = ref(true);
+const leftDrawerMini = ref(false);
+
 const filterUnread = ref(false);
 const unread = ref<number>(1);
 // const filterRole = ref<string[]>();
@@ -169,14 +172,14 @@ onMounted(async () => {
 
 <template>
   <q-layout view="lHh Lpr lFf">
-    <drawer-component :mini="!leftDrawerOpen" />
+    <drawer-component
+      :mini="leftDrawerMini"
+      v-model:left-drawer-open="leftDrawerOpen"
+    />
 
     <q-page-container>
       <!-- drawer control -->
-      <div
-        style="position: relative; z-index: 1000"
-        :hidden="$q.screen.lt.md && leftDrawerOpen"
-      >
+      <div style="position: relative; z-index: 1000" :hidden="$q.screen.lt.sm">
         <div
           size="36px"
           style="
@@ -200,10 +203,10 @@ onMounted(async () => {
               background-color: hsl(var(--negative-bg) / 0.1);
               overflow: hidden;
             "
-            @click="leftDrawerOpen = !leftDrawerOpen"
+            @click="leftDrawerMini = !leftDrawerMini"
           >
             <q-icon
-              :name="leftDrawerOpen ? 'mdi-backburger' : 'mdi-forwardburger'"
+              :name="!leftDrawerMini ? 'mdi-backburger' : 'mdi-forwardburger'"
               size="16px"
               style="color: hsl(var(--negative-bg))"
             />
@@ -217,9 +220,23 @@ onMounted(async () => {
       >
         <!-- header -->
         <div
-          class="q-px-lg surface-0 row items-center justify-between q-pb-md q-pt-lg"
+          class="q-px-lg surface-0 row items-center justify-start q-pb-md q-pt-lg"
           style="position: sticky; top: 0; z-index: 8"
         >
+          <q-btn
+            v-if="$q.screen.lt.sm"
+            icon="mdi-menu"
+            flat
+            dense
+            rounded
+            class="q-mr-md"
+            @click="
+              () => {
+                leftDrawerMini = false;
+                leftDrawerOpen = !leftDrawerOpen;
+              }
+            "
+          />
           <div class="column">
             <span
               class="title-gradient text-weight-bold"
@@ -245,7 +262,7 @@ onMounted(async () => {
             </span>
           </div>
 
-          <div class="row q-gutter-x-md items-center">
+          <div class="row q-gutter-x-md items-center" style="margin-left: auto">
             <!-- notification -->
             <q-btn
               round

From 4f7e76325b40a4734c0c9c748be1fab5a50e2549 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 17:55:44 +0700
Subject: [PATCH 043/158] =?UTF-8?q?feat:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/en-US/branch.ts | 1 +
 src/i18n/th-th/branch.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/i18n/en-US/branch.ts b/src/i18n/en-US/branch.ts
index 95902606..f7c6f7dc 100644
--- a/src/i18n/en-US/branch.ts
+++ b/src/i18n/en-US/branch.ts
@@ -2,6 +2,7 @@ export default {
   branchManagementCaption: 'Manage All Branch',
   branchInHQ: 'Branch within the main office',
 
+  office: 'Office',
   branchLabel: 'Branch',
   branchHQLabel: 'Headquarters',
   branchName: 'Branch Name',
diff --git a/src/i18n/th-th/branch.ts b/src/i18n/th-th/branch.ts
index 36782675..d8cb8fea 100644
--- a/src/i18n/th-th/branch.ts
+++ b/src/i18n/th-th/branch.ts
@@ -2,6 +2,7 @@ export default {
   branchManagementCaption: 'จัดการสาขาทั้งหมด',
   branchInHQ: 'สาขาภายในสำนักงานใหญ่',
 
+  office: 'สำนักงาน',
   branchLabel: 'สาขา',
   branchHQLabel: 'สำนักงานใหญ่',
   branchName: 'ชื่อสาขา',

From aefb42717d2761432585137e0db501b9283c09d8 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 17:55:57 +0700
Subject: [PATCH 044/158] =?UTF-8?q?refactor:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=20=E0=B8=AA=E0=B8=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/app.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 33ab399f..6b9f7e27 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -9,7 +9,7 @@ html {
 
   --brand-1: #035aa1;
   --brand-2: #f50000;
-  --border-color: var(--gray-3);
+  --border-color: var(--gray-2);
   --foreground: black;
   --background: var(--gray-2);
   --surface-0: var(--background);

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 045/158] =?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>

From 1aeb48e9d70b80b9a17ff51a316721cd8c54305a Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 09:23:45 +0700
Subject: [PATCH 046/158] fix: color dark mode

---
 src/pages/01_branch-management/MainPage.vue | 55 +++++++++++----------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 4ef1d80b..788a155e 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -507,36 +507,38 @@ watch(locale, () => {
             <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"
+                  class="row bordered-b q-pl-sm text-weight-bold surface-2 items-center"
+                  style="height: 50px"
                 >
                   <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,
-                              );
-                            }
+                  <q-btn
+                    round
+                    flat
+                    size="md"
+                    dense
+                    id="hq-add-btn"
+                    class="q-mr-sm"
+                  >
+                    <Icon
+                      icon="pixelarticons:plus"
+                      class="cursor-pointer"
+                      style="color: var(--foreground); scale: 1.5"
+                      @click="
+                        () => {
+                          if (!currentHq.id) {
+                            triggerCreate('headOffice');
+                          } else {
+                            triggerCreate(
+                              'subBranch',
+                              currentHq.id,
+                              currentHq.code,
+                            );
                           }
-                        "
-                      />
-                    </button>
-                  </div>
+                        }
+                      "
+                    />
+                  </q-btn>
                 </div>
 
                 <q-tree
@@ -544,6 +546,7 @@ watch(locale, () => {
                   node-key="id"
                   label-key="name"
                   children-key="branch"
+                  style="color: var(--foreground)"
                 >
                   <template #default-header="{ node }">
                     <div

From 47c6a7dc2ddcf3112a5562f4dcf85380fcb6c2ac Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 09:34:07 +0700
Subject: [PATCH 047/158] =?UTF-8?q?fix:=20=E0=B8=AA=E0=B8=B2=E0=B8=82?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=A5=E0=B8=87=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B9=84?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=88=20=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 5dd3695d..05b8a783 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1800,7 +1800,7 @@ watch([inputSearch, currentStatus], async () => {
         "
         @dialog="dialogInputCustomerBranchForm = true"
         @viewDetail="
-          (v) => {
+          async (v) => {
             currentBranchId = v[0].id;
 
             statusToggle = v[0].status === 'INACTIVE' ? false : true;
@@ -1812,6 +1812,8 @@ watch([inputSearch, currentStatus], async () => {
 
             if (currentCustomer) assignFormData(currentCustomer.id);
 
+            await fetchListOfOptionBranch();
+
             infoDrawerBranch = true;
           }
         "
@@ -2697,6 +2699,8 @@ watch([inputSearch, currentStatus], async () => {
             separator
             :readonly="true"
             :type-customer="customerType"
+            :options-branch="branchOption"
+            v-model:registered-branch-id="formData.registeredBranchId"
             v-model:customer-name="formData.customerName"
             v-model:customer-name-en="formData.customerNameEN"
             v-model:person-name="formData.personName"

From f8ec82626c88fbe7827a4834b9710ea6b2cb998f Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 09:34:17 +0700
Subject: [PATCH 048/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B9=84=E0=B8=82=E0=B8=AA=E0=B8=B2=E0=B8=82=E0=B8=B2=E0=B9=84?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=88=E0=B9=84=E0=B8=94=E0=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/customer/index.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/stores/customer/index.ts b/src/stores/customer/index.ts
index f02c67e5..74522134 100644
--- a/src/stores/customer/index.ts
+++ b/src/stores/customer/index.ts
@@ -336,11 +336,13 @@ const useCustomerStore = defineStore('api-customer', () => {
       transactionId?: string;
     },
   ) {
+    const { code, branchNo, ...playload } = data;
+
     const res = await api.put<
       Customer & {
         branch: CustomerBranch[];
       }
-    >(`/customer-branch/${id}`, data, {
+    >(`/customer-branch/${id}`, playload, {
       headers: {
         'X-Session-Id': flow?.sessionId,
         'X-Rtid': flow?.refTransactionId || flowStore.rtid,

From fabadd5b8e2ff650af59140634329ed48e7608bd Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 09:39:10 +0700
Subject: [PATCH 049/158] refactor: move event handler to its parent

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

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 788a155e..d31a12aa 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -519,24 +519,24 @@ watch(locale, () => {
                     dense
                     id="hq-add-btn"
                     class="q-mr-sm"
+                    @click="
+                      () => {
+                        if (!currentHq.id) {
+                          triggerCreate('headOffice');
+                        } else {
+                          triggerCreate(
+                            'subBranch',
+                            currentHq.id,
+                            currentHq.code,
+                          );
+                        }
+                      }
+                    "
                   >
                     <Icon
                       icon="pixelarticons:plus"
                       class="cursor-pointer"
                       style="color: var(--foreground); scale: 1.5"
-                      @click="
-                        () => {
-                          if (!currentHq.id) {
-                            triggerCreate('headOffice');
-                          } else {
-                            triggerCreate(
-                              'subBranch',
-                              currentHq.id,
-                              currentHq.code,
-                            );
-                          }
-                        }
-                      "
                     />
                   </q-btn>
                 </div>

From ad6f5a3b75d6947687708807783893621e6085e5 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Jul 2024 02:42:09 +0000
Subject: [PATCH 050/158] fix: add key on page size btn

---
 src/pages/03_customer-management/MainPage.vue | 2 ++
 src/pages/04_product-service/MainPage.vue     | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 05b8a783..b8265469 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1609,6 +1609,7 @@ watch([inputSearch, currentStatus], async () => {
                     <q-list>
                       <q-item
                         v-for="v in [10, 30, 50, 100, 500, 1000]"
+                        :key="v"
                         clickable
                         v-close-popup
                         @click="
@@ -1709,6 +1710,7 @@ watch([inputSearch, currentStatus], async () => {
                       <q-list>
                         <q-item
                           v-for="v in [10, 30, 50, 100, 500, 1000]"
+                          :key="v"
                           clickable
                           v-close-popup
                           @click="
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index c4cf1bfe..fa201762 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1415,6 +1415,7 @@ watch(inputSearchProductAndService, async () => {
                     <q-list>
                       <q-item
                         v-for="v in [10, 30, 50, 100, 500, 1000]"
+                        :key="v"
                         clickable
                         v-close-popup
                         @click="
@@ -1471,6 +1472,7 @@ watch(inputSearchProductAndService, async () => {
                     <q-list>
                       <q-item
                         v-for="v in [10, 30, 50, 100, 500, 1000]"
+                        :key="v"
                         clickable
                         v-close-popup
                         @click="
@@ -1783,6 +1785,7 @@ watch(inputSearchProductAndService, async () => {
                   <q-list>
                     <q-item
                       v-for="v in [10, 30, 50, 100, 500, 1000]"
+                      :key="v"
                       clickable
                       v-close-popup
                       @click="

From f39840fb2f76eb2be00ddc24eb72b4f43dfc0873 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 09:53:17 +0700
Subject: [PATCH 051/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20mo?=
 =?UTF-8?q?de=20dark=20=20=E0=B8=AA=E0=B8=B5=20=E0=B8=82=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=20=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1=E0=B9=84=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=95=E0=B8=A3=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue | 29 +++++++++++++++------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index d31a12aa..e61dfcb8 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -714,9 +714,10 @@ watch(locale, () => {
                 >
                   <div class="col-6">
                     <q-input
-                      bg-color="white"
+                      :bg-color="$q.dark.isActive ? '' : 'white'"
                       for="input-Search"
                       style="width: 250px"
+                      :label-color="$q.dark.isActive ? 'white' : 'grey-10'"
                       outlined
                       dense
                       label="ค้นหา"
@@ -728,8 +729,8 @@ watch(locale, () => {
                   <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"
+                      :color="$q.dark.isActive ? '' : 'white'"
+                      :text-color="$q.dark.isActive ? '' : 'grey-10'"
                       dense
                       unelevated
                       :label="labelBtnStatus"
@@ -787,8 +788,8 @@ watch(locale, () => {
                     </q-btn-dropdown>
 
                     <q-btn
-                      color="white"
-                      text-color="grey-10"
+                      :color="$q.dark.isActive ? '' : 'white'"
+                      :text-color="$q.dark.isActive ? '' : 'grey-10'"
                       id="btn-filter"
                       icon="mdi-tune-vertical-variant"
                       size="sm"
@@ -841,7 +842,7 @@ watch(locale, () => {
                       id="btn-mode"
                       dense
                       class="no-shadow"
-                      toggle-color="white"
+                      :toggle-color="$q.dark.isActive ? 'grey-9' : 'white'"
                       size="xs"
                       :options="[
                         { value: true, slot: 'folder' },
@@ -854,7 +855,13 @@ watch(locale, () => {
                           size="16px"
                           class="q-px-sm q-py-xs rounded"
                           :style="{
-                            color: modeView ? '#787B7C' : '#C9D3DB',
+                            color: $q.dark.isActive
+                              ? modeView
+                                ? '#C9D3DB '
+                                : '#787B7C'
+                              : modeView
+                                ? '#787B7C'
+                                : '#C9D3DB',
                           }"
                         />
                       </template>
@@ -864,7 +871,13 @@ watch(locale, () => {
                           class="q-px-sm q-py-xs rounded"
                           size="16px"
                           :style="{
-                            color: modeView === false ? '#787B7C' : '#C9D3DB',
+                            color: $q.dark.isActive
+                              ? modeView === false
+                                ? '#C9D3DB'
+                                : '#787B7C'
+                              : modeView === false
+                                ? '#787B7C'
+                                : '#C9D3DB',
                           }"
                         />
                       </template>

From 64f64cb52527ca4e9032e6af2a01f7a93c71fa35 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 09:57:33 +0700
Subject: [PATCH 052/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=20bordered=20rounded=20=E0=B9=83=E0=B8=AB?=
 =?UTF-8?q?=E0=B9=89=20=20btn-toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index e61dfcb8..b6b8d545 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -841,7 +841,7 @@ watch(locale, () => {
                       v-model="modeView"
                       id="btn-mode"
                       dense
-                      class="no-shadow"
+                      class="no-shadow bordered rounded"
                       :toggle-color="$q.dark.isActive ? 'grey-9' : 'white'"
                       size="xs"
                       :options="[

From a55281ebba449a294ee0742b0ebdc32b8fdb44a1 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Jul 2024 03:29:33 +0000
Subject: [PATCH 053/158] feat: hide stat 02-personnel

---
 .../02_personnel-management/MainPage.vue      | 63 ++++++++++++++-----
 1 file changed, 48 insertions(+), 15 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 5a06daf7..6b85996b 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -76,6 +76,7 @@ const defaultFormData = {
   checkpointEN: null,
 };
 
+const hideStat = ref(false);
 const userCode = ref<string>();
 const currentUser = ref<User>();
 const infoDrawerEdit = ref(false);
@@ -535,23 +536,41 @@ watch(inputSearch, async () => await fetchUserList());
 
   <!-- stat -->
   <div class="column full-height no-wrap">
-    <div class="scroll q-mb-md">
-      <div style="display: inline-block">
-        <StatCardComponent
-          v-if="sortedUserStats"
-          :branch="
-            sortedUserStats.map((v) => ({
-              count: v.count,
-              label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
-              icon: 'mdi-account',
-              color: v.isHeadOffice ? 'pink' : 'purple',
-            }))
-          "
-          :dark="$q.dark.isActive"
-        />
-      </div>
+    <div class="text-body-2 q-mb-xs flex items-center">
+      {{ $t('personnelStatTitle') }}
+      <q-btn
+        class="q-ml-xs"
+        icon="mdi-pin"
+        color="primary"
+        size="sm"
+        flat
+        dense
+        rounded
+        @click="hideStat = !hideStat"
+        :style="hideStat ? 'rotate: 90deg' : ''"
+        style="transition: 0.1s ease-in-out"
+      />
     </div>
 
+    <transition name="slide">
+      <div v-if="!hideStat" class="scroll q-mb-md">
+        <div style="display: inline-block">
+          <StatCardComponent
+            v-if="sortedUserStats"
+            :branch="
+              sortedUserStats.map((v) => ({
+                count: v.count,
+                label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+                icon: 'mdi-account',
+                color: v.isHeadOffice ? 'pink' : 'purple',
+              }))
+            "
+            :dark="$q.dark.isActive"
+          />
+        </div>
+      </div>
+    </transition>
+
     <!-- main -->
     <div
       class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
@@ -968,4 +987,18 @@ watch(inputSearch, async () => await fetchUserList());
   background-color: hsl(var(--positive-bg));
   border-radius: var(--radius-2);
 }
+
+.slide-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-leave-active {
+  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
+}
 </style>

From bb58273d74fb0b2f5cd5f4f263883b4a360b4cb5 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Jul 2024 03:39:41 +0000
Subject: [PATCH 054/158] feat: hide stat 03-branch

---
 src/i18n/en-US/branch.ts                    |  2 +
 src/i18n/en-US/personnel-main-page.ts       |  2 +-
 src/i18n/th-th/branch.ts                    |  2 +
 src/pages/01_branch-management/MainPage.vue | 46 ++++++++++++++++++---
 4 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/i18n/en-US/branch.ts b/src/i18n/en-US/branch.ts
index f7c6f7dc..a20fd6e0 100644
--- a/src/i18n/en-US/branch.ts
+++ b/src/i18n/en-US/branch.ts
@@ -21,4 +21,6 @@ export default {
   branchLabelStatus: 'Branch Status',
 
   registeredBranch: 'Registered Branch',
+
+  branchStatTitle: 'Summary data of branch',
 };
diff --git a/src/i18n/en-US/personnel-main-page.ts b/src/i18n/en-US/personnel-main-page.ts
index 11362552..af903d4b 100644
--- a/src/i18n/en-US/personnel-main-page.ts
+++ b/src/i18n/en-US/personnel-main-page.ts
@@ -12,7 +12,7 @@ export default {
   DELEGATE: 'Delegate',
   AGENCY: 'Agency',
 
-  personnelStatTitle: 'Summary data of ',
+  personnelStatTitle: 'Summary data',
 
   personnelCardUserType: 'Type',
   personnelCardTelephone: 'Telephone',
diff --git a/src/i18n/th-th/branch.ts b/src/i18n/th-th/branch.ts
index d8cb8fea..35a7737f 100644
--- a/src/i18n/th-th/branch.ts
+++ b/src/i18n/th-th/branch.ts
@@ -21,4 +21,6 @@ export default {
   branchLabelStatus: 'สถานะสาขา',
 
   registeredBranch: 'สาขาที่ลงทะเบียน',
+
+  branchStatTitle: 'สรุปจัดการสาขา',
 };
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index b6b8d545..ba1ccb2e 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -62,6 +62,7 @@ const columns = [
 ] satisfies QTableProps['columns'];
 
 const modal = ref<boolean>(false);
+const hideStat = ref(false);
 
 const profileFileImg = ref<File | undefined>(undefined);
 const imageUrl = ref<string | null>('');
@@ -471,12 +472,31 @@ watch(locale, () => {
 
 <template>
   <div class="column full-height no-wrap">
-    <StatCard
-      class="q-pb-md"
-      label-i18n
-      :branch="stats"
-      :dark="$q.dark.isActive"
-    />
+    <div class="text-body-2 q-mb-xs flex items-center">
+      {{ $t('branchStatTitle') }}
+      <q-btn
+        class="q-ml-xs"
+        icon="mdi-pin"
+        color="primary"
+        size="sm"
+        flat
+        dense
+        rounded
+        @click="hideStat = !hideStat"
+        :style="hideStat ? 'rotate: 90deg' : ''"
+        style="transition: 0.1s ease-in-out"
+      />
+    </div>
+
+    <transition name="slide">
+      <StatCard
+        v-if="!hideStat"
+        class="q-pb-md"
+        label-i18n
+        :branch="stats"
+        :dark="$q.dark.isActive"
+      />
+    </transition>
 
     <div
       class="column col surface-1 rounded scroll"
@@ -1460,4 +1480,18 @@ watch(locale, () => {
     color: hsla(var(--_branch-card-bg) / 1);
   }
 }
+
+.slide-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-leave-active {
+  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
+}
 </style>

From aa5fbb4fa8ede63394c6d297c7bcc4e2132d82ff Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Jul 2024 03:53:08 +0000
Subject: [PATCH 055/158] feat: hide stat 03 customer

---
 src/i18n/en-US/index.ts                       |   2 +-
 src/i18n/th-th/index.ts                       |   1 +
 src/pages/03_customer-management/MainPage.vue | 103 ++++++++++++------
 3 files changed, 70 insertions(+), 36 deletions(-)

diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 21506e34..c775372d 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -60,7 +60,7 @@ export default {
   person: 'Person',
   recordsPage: 'Showing {resultcurrentPage} out of {total} records',
   showing: 'Showing',
-
+  dataSum: 'Data Summaries',
   ...status,
   ...main,
   ...address,
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
index 65de771c..d1591d49 100644
--- a/src/i18n/th-th/index.ts
+++ b/src/i18n/th-th/index.ts
@@ -60,6 +60,7 @@ export default {
   person: 'คน',
   recordsPage: 'แสดง {resultcurrentPage} รายการจาก {total} รายการ',
   showing: 'แสดงทีละ',
+  dataSum: 'สรุปจำนวนข้อมูล',
   ...status,
   ...main,
   ...address,
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index b8265469..ccf43046 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -242,6 +242,7 @@ const formDataEmployee = ref<EmployeeCreate>({
   },
 });
 
+const hideStat = ref(false);
 const branchOption = ref<{ id: string; name: string }[]>();
 const indexTab = ref<number>(0);
 const statusToggle = ref<boolean>(false);
@@ -1332,44 +1333,62 @@ watch([inputSearch, currentStatus], async () => {
 
   <div class="column full-height no-wrap">
     <div v-if="isMainPage" class="column full-height">
+      <div class="text-body-2 q-mb-xs flex items-center">
+        {{ $t('dataSum') }}
+        <q-btn
+          class="q-ml-xs"
+          icon="mdi-pin"
+          color="primary"
+          size="sm"
+          flat
+          dense
+          rounded
+          @click="hideStat = !hideStat"
+          :style="hideStat ? 'rotate: 90deg' : ''"
+          style="transition: 0.1s ease-in-out"
+        />
+      </div>
+
       <div class="row full-width">
         <!-- stat -->
-        <div class="col-12 q-mb-md">
-          <div class="scroll">
-            <StatCardComponent
-              v-if="customerStats"
-              labelI18n
-              :branch="
-                customerStats &&
-                (selectorLabel === 'EMPLOYER'
-                  ? customerStats.map((v) => ({
-                      count:
-                        v.name === 'CORP'
-                          ? statsCustomerType?.CORP ?? 0
-                          : statsCustomerType?.PERS ?? 0,
-                      label:
-                        v.name === 'CORP'
-                          ? 'customerLegalEntity'
-                          : 'customerNaturalPerson',
-                      icon:
-                        v.name === 'CORP'
-                          ? 'mdi-office-building'
-                          : 'mdi-account',
-                      color: v.name === 'CORP' ? 'purple' : 'green',
-                    }))
-                  : [
-                      {
-                        label: 'EMPLOYEE',
-                        count: statsEmployee,
-                        icon: 'mdi-account',
-                        color: 'pink',
-                      },
-                    ])
-              "
-              :dark="$q.dark.isActive"
-            />
+        <transition name="slide">
+          <div v-if="!hideStat" class="col-12 q-mb-md">
+            <div class="scroll">
+              <StatCardComponent
+                v-if="customerStats"
+                labelI18n
+                :branch="
+                  customerStats &&
+                  (selectorLabel === 'EMPLOYER'
+                    ? customerStats.map((v) => ({
+                        count:
+                          v.name === 'CORP'
+                            ? statsCustomerType?.CORP ?? 0
+                            : statsCustomerType?.PERS ?? 0,
+                        label:
+                          v.name === 'CORP'
+                            ? 'customerLegalEntity'
+                            : 'customerNaturalPerson',
+                        icon:
+                          v.name === 'CORP'
+                            ? 'mdi-office-building'
+                            : 'mdi-account',
+                        color: v.name === 'CORP' ? 'purple' : 'green',
+                      }))
+                    : [
+                        {
+                          label: 'EMPLOYEE',
+                          count: statsEmployee,
+                          icon: 'mdi-account',
+                          color: 'pink',
+                        },
+                      ])
+                "
+                :dark="$q.dark.isActive"
+              />
+            </div>
           </div>
-        </div>
+        </transition>
       </div>
 
       <!-- main -->
@@ -3050,4 +3069,18 @@ watch([inputSearch, currentStatus], async () => {
   border-radius: 10px;
   box-shadow: var(--shadow-3);
 }
+
+.slide-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-leave-active {
+  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
+}
 </style>

From 965b268c44b4de404999b56df8d42dbd1d66e4e1 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Jul 2024 03:57:43 +0000
Subject: [PATCH 056/158] feat: hide stat 04 product service

---
 src/pages/04_product-service/MainPage.vue | 38 ++++++++++++++++++++---
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index fa201762..c78d11d6 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -198,6 +198,7 @@ const serviceTab = [
     label: 'workInformation',
   },
 ];
+const hideStat = ref(false);
 
 const workItems = ref<WorkItems[]>([]);
 const workNameRef = ref();
@@ -1183,13 +1184,42 @@ watch(inputSearchProductAndService, async () => {
 
       <div
         v-if="productMode === 'group' || productMode === 'type'"
-        class="scroll q-mb-md"
+        class="text-body-2 q-mb-xs flex items-center"
       >
-        <div style="display: inline-block">
-          <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap />
-        </div>
+        {{ $t('dataSum') }}
+        <q-btn
+          class="q-ml-xs"
+          icon="mdi-pin"
+          color="primary"
+          size="sm"
+          flat
+          dense
+          rounded
+          @click="hideStat = !hideStat"
+          :style="hideStat ? 'rotate: 90deg' : ''"
+          style="transition: 0.1s ease-in-out"
+        />
       </div>
 
+      <transition name="slide">
+        <div
+          v-if="
+            (productMode === 'group' && !hideStat) ||
+            (productMode === 'type' && !hideStat)
+          "
+          class="scroll q-mb-md"
+        >
+          <div style="display: inline-block">
+            <StatCard
+              label-i18n
+              :branch="stat"
+              :dark="$q.dark.isActive"
+              nowrap
+            />
+          </div>
+        </div>
+      </transition>
+
       <div
         v-if="productMode === 'group' || productMode === 'type'"
         class="surface-1 col bordered rounded q-pa-md scroll"

From c58c225a137e7d18bfcae21b6cc633dbdc342c51 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:08:37 +0700
Subject: [PATCH 057/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20fetchListMyBranch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/my-branch/index.ts | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/stores/my-branch/index.ts b/src/stores/my-branch/index.ts
index 97c11466..11d055da 100644
--- a/src/stores/my-branch/index.ts
+++ b/src/stores/my-branch/index.ts
@@ -8,6 +8,9 @@ import { Branch } from '../branch/types';
 import useFlowStore from '../flow';
 
 const useMyBranch = defineStore('useMyBranchStore', () => {
+  const myBranch = ref<Branch[]>();
+  const currentMyBranch = ref<Branch>();
+
   const flowStore = useFlowStore();
   async function fetchListOptionBranch<
     Options extends {
@@ -52,8 +55,37 @@ const useMyBranch = defineStore('useMyBranchStore', () => {
     return false;
   }
 
+  async function fetchListMyBranch(
+    userId: string,
+    flow?: {
+      sessionId?: string;
+      refTransactionId?: string;
+      transactionId?: string;
+    },
+  ) {
+    const res = await api.get<Pagination<Branch[]>>(`/user/${userId}/branch`, {
+      headers: {
+        'X-Session-Id': flow?.sessionId,
+        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
+        'X-Tid': flow?.transactionId,
+      },
+    });
+
+    if (!res) return false;
+    if (res.status === 200) {
+      myBranch.value = res.data.result;
+      return res.data;
+    }
+
+    return false;
+  }
+
   return {
+    myBranch,
+    currentMyBranch,
+
     fetchListOptionBranch,
+    fetchListMyBranch,
   };
 });
 

From d26c2df7932a9bec37f84a9683e3508b3df5cbdb Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:08:59 +0700
Subject: [PATCH 058/158] refactor: query registeredBranchId

---
 src/stores/product-service/index.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/stores/product-service/index.ts b/src/stores/product-service/index.ts
index 59badc61..6e81a2c9 100644
--- a/src/stores/product-service/index.ts
+++ b/src/stores/product-service/index.ts
@@ -23,7 +23,11 @@ import {
 import { ref } from 'vue';
 import useFlowStore from '../flow';
 
+import useMyBranchStore from 'src/stores/my-branch';
+
 const useProductServiceStore = defineStore('api-product-service', () => {
+  const useMyBranch = useMyBranchStore();
+
   // Product Type
   const flowStore = useFlowStore();
 
@@ -301,6 +305,10 @@ const useProductServiceStore = defineStore('api-product-service', () => {
       v !== undefined && params.append(k, v.toString());
     }
 
+    if (useMyBranch.myBranch?.length !== 0 && useMyBranch.myBranch) {
+      params.append('registeredBranchId', useMyBranch.myBranch[0].id);
+    }
+
     const query = params.toString();
 
     const res = await api.get<Pagination<ProductList[]>>(
@@ -429,6 +437,10 @@ const useProductServiceStore = defineStore('api-product-service', () => {
       v !== undefined && params.append(k, v.toString());
     }
 
+    if (useMyBranch.myBranch?.length !== 0 && useMyBranch.myBranch) {
+      params.append('registeredBranchId', useMyBranch.myBranch[0].id);
+    }
+
     const query = params.toString();
 
     const res = await api.get<Pagination<Service[]>>(
@@ -733,6 +745,10 @@ const useProductServiceStore = defineStore('api-product-service', () => {
       v !== undefined && params.append(k, v.toString());
     }
 
+    if (useMyBranch.myBranch?.length !== 0 && useMyBranch.myBranch) {
+      params.append('registeredBranchId', useMyBranch.myBranch[0].id);
+    }
+
     const query = params.toString();
 
     const res = await api.get<Pagination<ServiceAndProduct[]>>(

From 9e9e15642850705e6a52750708ce3b426b62be30 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:09:22 +0700
Subject: [PATCH 059/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=20?=
 =?UTF-8?q?=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index c78d11d6..eef58237 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1734,11 +1734,7 @@ watch(inputSearchProductAndService, async () => {
           <NoData :not-found="!!inputSearchProductAndService" />
         </div>
 
-        <div
-          v-if="productAndService && productAndService.length > 0"
-          class="row q-col-gutter-lg flex"
-          style="padding: 20px"
-        >
+        <div class="row q-col-gutter-lg flex" style="padding: 20px">
           <div
             :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
             v-for="i in productAndServiceTab === 'all'

From d3c2412a0a4cb79be514d6243cac4efdf8267baf Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:10:00 +0700
Subject: [PATCH 060/158] =?UTF-8?q?refactor:=20=E0=B8=A2=E0=B8=B4=E0=B8=87?=
 =?UTF-8?q?=20=20api=20myBranch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/MainLayout.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 0659200b..7fa2b864 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -16,6 +16,10 @@ import useOptionStore from 'src/stores/options';
 import { dialog } from 'src/stores/utils';
 import { setLocale } from 'src/utils/datetime';
 import useUtilsStore from 'src/stores/utils';
+import useMyBranchStore from 'src/stores/my-branch';
+
+const useMyBranch = useMyBranchStore();
+const { fetchListMyBranch } = useMyBranch;
 
 interface NotificationButton {
   item: string;
@@ -138,6 +142,8 @@ watch(
 );
 
 onMounted(async () => {
+  await fetchListMyBranch(getUserId() ?? '');
+
   const getCurLang = localStorage.getItem('currentLanguage');
   if (getCurLang) currentLanguage.value = getCurLang;
   if (currentLanguage.value === 'English') {

From ab82157a64b50adc701c658fa07abb0d6ac54530 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:10:16 +0700
Subject: [PATCH 061/158] feat: scroll inside

---
 src/pages/02_personnel-management/MainPage.vue | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 6b85996b..1485532e 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -573,10 +573,11 @@ watch(inputSearch, async () => await fetchUserList());
 
     <!-- main -->
     <div
-      class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
+      class="col surface-1 rounded justify-between column no-wrap"
+      style="overflow: hidden"
     >
-      <div>
-        <div class="row q-mb-md justify-end" style="gap: var(--size-2)">
+      <div class="surface-2 bordered-b q-px-md q-py-sm">
+        <div class="row justify-end" style="gap: var(--size-2)">
           <q-input
             for="input-search"
             style="width: 250px"
@@ -631,6 +632,8 @@ watch(inputSearch, async () => await fetchUserList());
             </q-menu>
           </q-btn>
         </div>
+      </div>
+      <div class="col column scroll q-pa-md">
         <PersonCard
           :list="
             userData?.result
@@ -707,7 +710,7 @@ watch(inputSearch, async () => await fetchUserList());
       </div>
 
       <div
-        class="row justify-between items-center q-pt-md"
+        class="row justify-between items-center q-px-md q-py-sm"
         v-if="currentMaxPage > 0"
       >
         <div class="col-4">
@@ -716,7 +719,12 @@ watch(inputSearch, async () => await fetchUserList());
               {{ $t('showing') }}
             </div>
             <div>
-              <q-btn-dropdown dense unelevated :label="pageSize">
+              <q-btn-dropdown
+                dense
+                unelevated
+                :label="pageSize"
+                class="bordered q-pl-md"
+              >
                 <q-list>
                   <q-item
                     v-for="v in [10, 30, 50, 100, 500, 1000]"

From 29466655f85d8f149d6bfb9c21443b231d92cfa2 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:16:52 +0700
Subject: [PATCH 062/158] feat: change input background based on mode

---
 src/css/quasar.variables.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index ec01867f..2ad828be 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -24,6 +24,7 @@ $separator-dark-color: var(--border-color);
 }
 
 .q-field__control {
+  background: var(--surface-1);
   color: $primary;
 }
 

From 0acf51b2d1e39018036ae4e83779963039fda4b7 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:29:51 +0700
Subject: [PATCH 063/158] refactor: adjust postion

---
 src/components/ButtonAddCompoent.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ButtonAddCompoent.vue b/src/components/ButtonAddCompoent.vue
index d0d2bee5..46113c7a 100644
--- a/src/components/ButtonAddCompoent.vue
+++ b/src/components/ButtonAddCompoent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <q-page-sticky position="bottom-right" :offset="[30, 18]">
+  <q-page-sticky position="bottom-right" :offset="[8, 8]">
     <q-fab
       id="btn-add"
       padding="xs"
@@ -9,9 +9,9 @@
       direction="up"
       color="primary"
     >
-      <slot />
-
-      <!-- <q-fab-action padding="xs" color="primary" icon="mdi-account-plus" /> -->
+      <slot>
+        <q-fab-action padding="xs" color="primary" icon="mdi-account-plus" />
+      </slot>
     </q-fab>
   </q-page-sticky>
 </template>

From 8ec62f526467308c108b2d439644eced411df8d2 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:36:46 +0700
Subject: [PATCH 064/158] fix: color

---
 src/pages/01_branch-management/MainPage.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index ba1ccb2e..616f96db 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -748,9 +748,7 @@ watch(locale, () => {
 
                   <div class="col-6 row q-gutter-x-sm justify-end text-right">
                     <q-btn-dropdown
-                      class="bordered rounded"
-                      :color="$q.dark.isActive ? '' : 'white'"
-                      :text-color="$q.dark.isActive ? '' : 'grey-10'"
+                      class="bordered rounded surface-1 q-pl-md"
                       dense
                       unelevated
                       :label="labelBtnStatus"
@@ -808,12 +806,10 @@ watch(locale, () => {
                     </q-btn-dropdown>
 
                     <q-btn
-                      :color="$q.dark.isActive ? '' : 'white'"
-                      :text-color="$q.dark.isActive ? '' : 'grey-10'"
                       id="btn-filter"
                       icon="mdi-tune-vertical-variant"
                       size="sm"
-                      class="bordered rounded"
+                      class="bordered rounded surface-1"
                       :class="{ 'app-text-info': statusFilter !== 'all' }"
                       unelevated
                     >

From 15e998ab207b30aef7c7de3702ae539d78f2c7a9 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:37:23 +0700
Subject: [PATCH 065/158] fix: color

---
 src/pages/02_personnel-management/MainPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 1485532e..c3ffdc0a 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -591,7 +591,7 @@ watch(inputSearch, async () => await fetchUserList());
             id="btn-filter"
             icon="mdi-tune-vertical-variant"
             size="sm"
-            class="bordered rounded"
+            class="bordered rounded surface-1"
             :class="{ 'app-text-info': statusFilter !== 'all' }"
             unelevated
           >

From 0107c3d3af4874a6e924a6398e9e785472025147 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:44:44 +0700
Subject: [PATCH 066/158] refactor: action btn size and spacing

---
 src/pages/01_branch-management/MainPage.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 616f96db..586ed370 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -573,7 +573,10 @@ watch(locale, () => {
                       class="row items-center justify-between full-width no-wrap"
                     >
                       <span>{{ node.name }}</span>
-                      <div class="q-gutter-xs flex no-wrap" @click.stop>
+                      <div
+                        class="row q-gutter-xs items-center no-wrap"
+                        @click.stop
+                      >
                         <q-btn
                           v-if="node.isHeadOffice"
                           :id="`create-sub-branch-btn-${node.name}`"
@@ -581,15 +584,18 @@ watch(locale, () => {
                             triggerCreate('subBranch', node.id, node.code)
                           "
                           icon="mdi-file-plus-outline"
-                          fab-mini
-                          unelevated
+                          size="sm"
+                          dense
+                          round
+                          flat
                         />
 
                         <q-btn
                           :id="`view-detail-btn-${node.name}`"
                           icon="mdi-dots-vertical"
-                          fab-mini
-                          unelevated
+                          size="sm"
+                          dense
+                          round
                           flat
                         >
                           <q-menu class="bordered">

From bcf6a4ceb6b4e7514597763c62f60024d8a4d7bf Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:43:07 +0700
Subject: [PATCH 067/158] =?UTF-8?q?refactor:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=20=E0=B8=AA=E0=B8=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 586ed370..74791a1f 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -50,7 +50,7 @@ const columns = [
   {
     name: 'telephoneNo',
     align: 'left',
-    label: 'formDialogTelephone',
+    label: 'formDialogInputTelephone',
     field: 'telephoneNo',
   },
   {
@@ -740,7 +740,6 @@ watch(locale, () => {
                 >
                   <div class="col-6">
                     <q-input
-                      :bg-color="$q.dark.isActive ? '' : 'white'"
                       for="input-Search"
                       style="width: 250px"
                       :label-color="$q.dark.isActive ? 'white' : 'grey-10'"
@@ -754,7 +753,7 @@ watch(locale, () => {
 
                   <div class="col-6 row q-gutter-x-sm justify-end text-right">
                     <q-btn-dropdown
-                      class="bordered rounded surface-1 q-pl-md"
+                      class="bordered rounded surface-1"
                       dense
                       unelevated
                       :label="labelBtnStatus"
@@ -863,8 +862,8 @@ watch(locale, () => {
                       v-model="modeView"
                       id="btn-mode"
                       dense
-                      class="no-shadow bordered rounded"
-                      :toggle-color="$q.dark.isActive ? 'grey-9' : 'white'"
+                      class="no-shadow bordered rounded surface-1"
+                      :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
                       size="xs"
                       :options="[
                         { value: true, slot: 'folder' },

From 4511137cc7e74388caddda692b112ac9350edca6 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 11:46:50 +0700
Subject: [PATCH 068/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20filter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue | 54 ++++++++++++++++++++-
 1 file changed, 53 insertions(+), 1 deletion(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 74791a1f..21b3bc20 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -909,7 +909,43 @@ watch(locale, () => {
                   <q-table
                     flat
                     bordered
-                    :rows="treeData"
+                    :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;
+
+                          return false;
+                        })
+                    "
                     :columns="columns"
                     :grid="modeView"
                     card-container-class="row q-col-gutter-md"
@@ -935,6 +971,22 @@ watch(locale, () => {
                           'app-text-muted': props.row.status === 'INACTIVE',
                         }"
                         :props="props"
+                        @click="
+                          () => {
+                            if (props.row.isHeadOffice) {
+                              fieldSelectedBranch.value = '';
+                              inputSearch = '';
+                              currentHq = {
+                                id: props.row.id,
+                                code: props.row.code,
+                              };
+                              beforeBranch = {
+                                id: '',
+                                code: '',
+                              };
+                            }
+                          }
+                        "
                       >
                         <q-td>
                           <div class="row items-center">

From a934f6cd83a7200f3f64ebc657ee16eaccdaaf15 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 12:09:45 +0700
Subject: [PATCH 069/158] refactor: scroll inside

---
 src/pages/01_branch-management/MainPage.vue | 393 ++++++++++----------
 1 file changed, 198 insertions(+), 195 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 21b3bc20..25e6805c 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -498,10 +498,7 @@ watch(locale, () => {
       />
     </transition>
 
-    <div
-      class="column col surface-1 rounded scroll"
-      :no-padding="!!branchData.total"
-    >
+    <div class="column col surface-1 rounded" :no-padding="!!branchData.total">
       <template v-if="!branchData.total">
         <TooltipComponent
           class="self-end"
@@ -525,7 +522,7 @@ watch(locale, () => {
             style="width: 100%"
           >
             <template v-slot:before>
-              <div class="rounded surface-1 full-height">
+              <div class="rounded surface-1 scroll">
                 <div
                   class="row bordered-b q-pl-sm text-weight-bold surface-2 items-center"
                   style="height: 50px"
@@ -733,7 +730,7 @@ watch(locale, () => {
             </template>
 
             <template v-slot:after>
-              <div class="full-width">
+              <div class="column" style="height: 100%">
                 <div
                   class="row justify-between q-pl-md items-center surface-2 bordered-b q-pr-md"
                   style="height: 50px"
@@ -905,160 +902,77 @@ watch(locale, () => {
                     </q-btn-toggle>
                   </div>
                 </div>
-                <div class="q-pa-md">
-                  <q-table
-                    flat
-                    bordered
-                    :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;
-
-                          return false;
-                        })
-                    "
-                    :columns="columns"
-                    :grid="modeView"
-                    card-container-class="row q-col-gutter-md"
-                    row-key="name"
-                    hide-pagination
+                <div style="position: relative; flex: 1">
+                  <div
+                    style="position: absolute; inset: 0"
+                    class="scroll q-pa-md"
                   >
-                    <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"
-                        @click="
-                          () => {
-                            if (props.row.isHeadOffice) {
-                              fieldSelectedBranch.value = '';
-                              inputSearch = '';
-                              currentHq = {
-                                id: props.row.id,
-                                code: props.row.code,
-                              };
-                              beforeBranch = {
-                                id: '',
-                                code: '',
-                              };
+                    <q-table
+                      flat
+                      bordered
+                      :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;
                             }
-                          }
-                        "
-                      >
-                        <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}`"
+                            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
+                    >
+                      <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"
                           @click="
                             () => {
                               if (props.row.isHeadOffice) {
@@ -1075,45 +989,134 @@ watch(locale, () => {
                               }
                             }
                           "
-                          :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(
+                        >
+                          <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
-                                ? '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>
+                                ? $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>
+                  </div>
 
                   <!-- <BranchCard
                     class="col-6"

From 52f37e168d57e7b82f2ec31d09a06e44b7c94806 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 13:08:07 +0700
Subject: [PATCH 070/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=E0=B8=82=E0=B8=AD=E0=B8=87=20=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_branch-management/BranchCard.vue       |  1 +
 src/pages/01_branch-management/MainPage.vue   | 65 +++++++++++++++----
 2 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index bcf8592d..180ac7e0 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -12,6 +12,7 @@ defineProps<{
   metadata?: unknown;
   badgeField?: string[];
   fieldSelected?: (
+    | 'branchLabelName'
     | 'branchLabelAddress'
     | 'branchLabelTel'
     | 'branchLabelType'
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 25e6805c..15a6d792 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -34,27 +34,27 @@ const labelBtnStatus = ref<string>(t('all'));
 
 const columns = [
   {
-    name: 'name',
+    name: 'branchLabelName',
     align: 'left',
     label: 'office',
     field: 'name',
     sortable: true,
   },
   {
-    name: 'address',
+    name: 'branchLabelAddress',
     align: 'left',
     label: 'address',
     field: 'address',
     sortable: true,
   },
   {
-    name: 'telephoneNo',
+    name: 'branchLabelTel',
     align: 'left',
     label: 'formDialogInputTelephone',
     field: 'telephoneNo',
   },
   {
-    name: 'isHeadOffice',
+    name: 'branchLabelType',
     align: 'left',
     label: 'type',
     field: 'isHeadOffice',
@@ -169,10 +169,25 @@ const beforeBranch = ref<{ id: string; code: string }>({
 const inputSearch = ref<string>('');
 const fieldBranch = ref(['all', 'branchHQLabel', 'branchLabel']);
 const fieldDisplay = ref<
-  ('branchLabelAddress' | 'branchLabelTel' | 'branchLabelType')[]
->(['branchLabelTel', 'branchLabelAddress', 'branchLabelType']);
+  (
+    | 'branchLabelName'
+    | 'branchLabelAddress'
+    | 'branchLabelTel'
+    | 'branchLabelType'
+  )[]
+>([
+  'branchLabelName',
+  'branchLabelTel',
+  'branchLabelAddress',
+  'branchLabelType',
+]);
 const fieldSelected = ref<
-  ('branchLabelAddress' | 'branchLabelTel' | 'branchLabelType')[]
+  (
+    | 'branchLabelName'
+    | 'branchLabelAddress'
+    | 'branchLabelTel'
+    | 'branchLabelType'
+  )[]
 >(fieldDisplay.value);
 const fieldSelectedBranch = ref<{
   label: string;
@@ -807,7 +822,24 @@ watch(locale, () => {
                       </q-list>
                     </q-btn-dropdown>
 
-                    <q-btn
+                    <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
+                    />
+
+                    <!-- <q-btn
                       id="btn-filter"
                       icon="mdi-tune-vertical-variant"
                       size="sm"
@@ -853,7 +885,7 @@ watch(locale, () => {
                           </q-item>
                         </q-list>
                       </q-menu>
-                    </q-btn>
+                    </q-btn> -->
 
                     <q-btn-toggle
                       v-model="modeView"
@@ -953,6 +985,7 @@ watch(locale, () => {
                       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">
@@ -990,7 +1023,9 @@ watch(locale, () => {
                             }
                           "
                         >
-                          <q-td>
+                          <q-td
+                            v-if="fieldSelected.includes('branchLabelName')"
+                          >
                             <div class="row items-center">
                               <div
                                 :class="{
@@ -1023,13 +1058,17 @@ watch(locale, () => {
                               </div>
                             </div>
                           </q-td>
-                          <q-td>
+                          <q-td
+                            v-if="fieldSelected.includes('branchLabelAddress')"
+                          >
                             {{ props.row.address }}
                           </q-td>
-                          <q-td>
+                          <q-td v-if="fieldSelected.includes('branchLabelTel')">
                             {{ props.row.contact[0].telephoneNo }}
                           </q-td>
-                          <q-td>
+                          <q-td
+                            v-if="fieldSelected.includes('branchLabelType')"
+                          >
                             {{
                               props.row.isHeadOffice
                                 ? $t('branchHQLabel')

From d64421f48bcdd24b48c44cee3a9a2c439164ea84 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 13:10:37 +0700
Subject: [PATCH 071/158] feat: scroll inside

---
 src/pages/01_branch-management/MainPage.vue | 349 +++++++++++---------
 1 file changed, 184 insertions(+), 165 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 15a6d792..f17ef2d4 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -537,7 +537,7 @@ watch(locale, () => {
             style="width: 100%"
           >
             <template v-slot:before>
-              <div class="rounded surface-1 scroll">
+              <div class="rounded surface-1 column" style="height: 100%">
                 <div
                   class="row bordered-b q-pl-sm text-weight-bold surface-2 items-center"
                   style="height: 50px"
@@ -573,174 +573,193 @@ watch(locale, () => {
                   </q-btn>
                 </div>
 
-                <q-tree
-                  :nodes="treeData"
-                  node-key="id"
-                  label-key="name"
-                  children-key="branch"
-                  style="color: var(--foreground)"
-                >
-                  <template #default-header="{ node }">
-                    <div
-                      class="row items-center justify-between full-width no-wrap"
+                <div class="col" style="position: relative">
+                  <div class="scroll" style="position: absolute; inset: 0">
+                    <q-tree
+                      :nodes="treeData"
+                      node-key="id"
+                      label-key="name"
+                      children-key="branch"
+                      style="color: var(--foreground)"
                     >
-                      <span>{{ node.name }}</span>
-                      <div
-                        class="row q-gutter-xs items-center 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"
-                          size="sm"
-                          dense
-                          round
-                          flat
-                        />
-
-                        <q-btn
-                          :id="`view-detail-btn-${node.name}`"
-                          icon="mdi-dots-vertical"
-                          size="sm"
-                          dense
-                          round
-                          flat
+                      <template #default-header="{ node }">
+                        <div
+                          class="row items-center justify-between full-width no-wrap"
                         >
-                          <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>
+                          <span>{{ node.name }}</span>
+                          <div
+                            class="row q-gutter-xs items-center 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"
+                              size="sm"
+                              dense
+                              round
+                              flat
+                            />
 
-                              <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'
-                                      "
+                            <q-btn
+                              :id="`view-detail-btn-${node.name}`"
+                              icon="mdi-dots-vertical"
+                              size="sm"
+                              dense
+                              round
+                              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))"
                                     />
-                                  </div>
-                                </q-item-section>
-                              </q-item>
-                            </q-list>
-                          </q-menu>
-                        </q-btn>
-                      </div>
-                    </div>
-                  </template>
-                </q-tree>
+                                    <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>
             </template>
 

From 56c226164d5519913baf605887d0611b883fd287 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Jul 2024 06:13:55 +0000
Subject: [PATCH 072/158] fix: product & service scroll

---
 .../TotalProductCardComponent.vue             |   2 +-
 src/pages/04_product-service/MainPage.vue     | 112 ++++++++++--------
 2 files changed, 65 insertions(+), 49 deletions(-)

diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 1aef4745..c38862f3 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -43,7 +43,7 @@ withDefaults(
     bordered
     :class="{ 'is-add-product': isAddProduct }"
     class="column bordered rounded q-pa-sm no-wrap"
-    style="box-shadow: var(--shadow-3); height: 20rem"
+    style="height: 20rem"
     @click="$emit('select', data)"
   >
     <div class="row flex justify-between text-bold">
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index eef58237..088063ad 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1142,6 +1142,48 @@ watch(inputSearchProductAndService, async () => {
     </div>
 
     <div v-if="stat[0].count !== 0" class="column full-height no-wrap">
+      <div
+        v-if="productMode === 'group' || productMode === 'type'"
+        class="text-body-2 q-mb-xs flex items-center"
+      >
+        {{ $t('dataSum') }}
+        <q-btn
+          class="q-ml-xs"
+          icon="mdi-pin"
+          color="primary"
+          size="sm"
+          flat
+          dense
+          rounded
+          @click="hideStat = !hideStat"
+          :style="hideStat ? 'rotate: 90deg' : ''"
+          style="transition: 0.1s ease-in-out"
+        />
+      </div>
+
+      <transition
+        v-if="productMode === 'group' || productMode === 'type'"
+        name="slide"
+      >
+        <div
+          v-if="
+            (productMode === 'group' && !hideStat) ||
+            (productMode === 'type' && !hideStat)
+          "
+          class="scroll q-mb-md"
+        >
+          <div style="display: inline-block">
+            <StatCard
+              label-i18n
+              :branch="stat"
+              :dark="$q.dark.isActive"
+              nowrap
+            />
+          </div>
+        </div>
+      </transition>
+
+      <!-- title type/service -->
       <div
         class="row items-center q-mb-md"
         v-if="productMode === 'service' || productMode === 'type'"
@@ -1182,47 +1224,10 @@ watch(inputSearchProductAndService, async () => {
         </div>
       </div>
 
+      <!-- group/type -->
       <div
         v-if="productMode === 'group' || productMode === 'type'"
-        class="text-body-2 q-mb-xs flex items-center"
-      >
-        {{ $t('dataSum') }}
-        <q-btn
-          class="q-ml-xs"
-          icon="mdi-pin"
-          color="primary"
-          size="sm"
-          flat
-          dense
-          rounded
-          @click="hideStat = !hideStat"
-          :style="hideStat ? 'rotate: 90deg' : ''"
-          style="transition: 0.1s ease-in-out"
-        />
-      </div>
-
-      <transition name="slide">
-        <div
-          v-if="
-            (productMode === 'group' && !hideStat) ||
-            (productMode === 'type' && !hideStat)
-          "
-          class="scroll q-mb-md"
-        >
-          <div style="display: inline-block">
-            <StatCard
-              label-i18n
-              :branch="stat"
-              :dark="$q.dark.isActive"
-              nowrap
-            />
-          </div>
-        </div>
-      </transition>
-
-      <div
-        v-if="productMode === 'group' || productMode === 'type'"
-        class="surface-1 col bordered rounded q-pa-md scroll"
+        class="surface-1 col bordered rounded q-pa-md scroll column"
       >
         <div class="row justify-between">
           <div
@@ -1304,7 +1309,7 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-        <div class="row q-col-gutter-lg">
+        <div class="row q-col-gutter-md col scroll">
           <div
             :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
             v-for="(v, i) in productMode === 'type'
@@ -1433,7 +1438,7 @@ watch(inputSearchProductAndService, async () => {
         <template v-else>
           <div
             v-if="productMode === 'group'"
-            class="flex items-center justify-between q-pt-xl"
+            class="flex items-center justify-between"
           >
             <div class="col-4">
               <div class="row items-center">
@@ -1490,7 +1495,7 @@ watch(inputSearchProductAndService, async () => {
 
           <div
             v-if="productMode === 'type'"
-            class="flex justify-between q-pt-xl"
+            class="flex justify-between items-center"
           >
             <div class="col-4">
               <div class="row items-center">
@@ -1545,11 +1550,16 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </template>
       </div>
+
+      <!-- product/service -->
       <div
         v-else-if="productMode === 'service'"
-        class="surface-1 col bordered rounded scroll"
+        class="surface-1 col bordered rounded column"
       >
-        <div class="row justify-between q-px-md">
+        <div
+          class="row justify-between items-center surface-1 rounded"
+          style="z-index: 1"
+        >
           <q-tabs v-model="productAndServiceTab" dense>
             <q-tab
               name="all"
@@ -1652,7 +1662,7 @@ watch(inputSearchProductAndService, async () => {
             </q-tab>
           </q-tabs>
 
-          <div class="row q-pt-sm q-mb-sm">
+          <div class="row">
             <q-input
               style="width: 300px"
               outlined
@@ -1734,9 +1744,13 @@ watch(inputSearchProductAndService, async () => {
           <NoData :not-found="!!inputSearchProductAndService" />
         </div>
 
-        <div class="row q-col-gutter-lg flex" style="padding: 20px">
+        <!-- tab -->
+        <div
+          v-if="productAndService && productAndService.length > 0"
+          class="row flex q-pa-md q-col-gutter-md col scroll"
+        >
           <div
-            :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
+            class="col-md-3 col-sm-6 col-12"
             v-for="i in productAndServiceTab === 'all'
               ? productAndService
               : productAndServiceTab === 'product'
@@ -1796,7 +1810,9 @@ watch(inputSearchProductAndService, async () => {
             />
           </div>
         </div>
-        <div class="row justify-between q-pb-md q-px-lg">
+
+        <!-- footer -->
+        <div class="flex items-center justify-between q-pb-md q-px-md">
           <div class="col-4">
             <div class="row items-center">
               <div class="app-text-muted" style="width: 80px">

From 987155b2d910509cdfffa8cb529e3b451c1a1d11 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Jul 2024 06:26:24 +0000
Subject: [PATCH 073/158] fix: product & service tab

---
 src/pages/04_product-service/MainPage.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 088063ad..7a9cf0e4 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1560,7 +1560,11 @@ watch(inputSearchProductAndService, async () => {
           class="row justify-between items-center surface-1 rounded"
           style="z-index: 1"
         >
-          <q-tabs v-model="productAndServiceTab" dense>
+          <q-tabs
+            v-model="productAndServiceTab"
+            class="full-height"
+            style="border-top-left-radius: var(--radius-2)"
+          >
             <q-tab
               name="all"
               @click="
@@ -1662,7 +1666,7 @@ watch(inputSearchProductAndService, async () => {
             </q-tab>
           </q-tabs>
 
-          <div class="row">
+          <div class="row q-py-sm q-pr-md">
             <q-input
               style="width: 300px"
               outlined

From 33bab7efb1f3373db958e7eb21a6bbe6cb87a4d7 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Jul 2024 07:48:02 +0000
Subject: [PATCH 074/158] fix: pagination on 04

---
 src/pages/04_product-service/MainPage.vue | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 7a9cf0e4..7b7cdc3b 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1227,7 +1227,7 @@ watch(inputSearchProductAndService, async () => {
       <!-- group/type -->
       <div
         v-if="productMode === 'group' || productMode === 'type'"
-        class="surface-1 col bordered rounded q-pa-md scroll column"
+        class="surface-1 col bordered rounded q-px-md q-pt-md scroll column"
       >
         <div class="row justify-between">
           <div
@@ -1438,7 +1438,7 @@ watch(inputSearchProductAndService, async () => {
         <template v-else>
           <div
             v-if="productMode === 'group'"
-            class="flex items-center justify-between"
+            class="row items-center justify-between"
           >
             <div class="col-4">
               <div class="row items-center">
@@ -1446,7 +1446,12 @@ watch(inputSearchProductAndService, async () => {
                   {{ $t('showing') }}
                 </div>
                 <div>
-                  <q-btn-dropdown dense unelevated :label="pageSizeGroup">
+                  <q-btn-dropdown
+                    dense
+                    unelevated
+                    :label="pageSizeGroup"
+                    class="bordered q-pl-md"
+                  >
                     <q-list>
                       <q-item
                         v-for="v in [10, 30, 50, 100, 500, 1000]"
@@ -1495,7 +1500,7 @@ watch(inputSearchProductAndService, async () => {
 
           <div
             v-if="productMode === 'type'"
-            class="flex justify-between items-center"
+            class="row justify-between items-center"
           >
             <div class="col-4">
               <div class="row items-center">
@@ -1503,7 +1508,12 @@ watch(inputSearchProductAndService, async () => {
                   {{ $t('showing') }}
                 </div>
                 <div>
-                  <q-btn-dropdown dense unelevated :label="pageSizeType">
+                  <q-btn-dropdown
+                    dense
+                    unelevated
+                    :label="pageSizeType"
+                    class="bordered q-pl-md"
+                  >
                     <q-list>
                       <q-item
                         v-for="v in [10, 30, 50, 100, 500, 1000]"
@@ -1816,7 +1826,7 @@ watch(inputSearchProductAndService, async () => {
         </div>
 
         <!-- footer -->
-        <div class="flex items-center justify-between q-pb-md q-px-md">
+        <div class="row items-center justify-between q-px-md">
           <div class="col-4">
             <div class="row items-center">
               <div class="app-text-muted" style="width: 80px">
@@ -1827,6 +1837,7 @@ watch(inputSearchProductAndService, async () => {
                   dense
                   unelevated
                   :label="pageSizeServiceAndProduct"
+                  class="bordered q-pl-md"
                 >
                   <q-list>
                     <q-item

From a600e52b08bdac4749837d9ee7206fa0ed54c2ca Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 13:17:59 +0700
Subject: [PATCH 075/158] =?UTF-8?q?refactor:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=20=20i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TabComponent.vue | 4 +++-
 src/stores/customer/types.ts    | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/TabComponent.vue b/src/components/TabComponent.vue
index ee9a4665..79bcfb34 100644
--- a/src/components/TabComponent.vue
+++ b/src/components/TabComponent.vue
@@ -17,6 +17,8 @@ const index = ref<number>(0);
 function addData() {
   index.value++;
   customerBranch.value.push({
+    code: '',
+    branchNo: undefined,
     address: '',
     addressEN: '',
     provinceId: '',
@@ -91,7 +93,7 @@ function close(index: number) {
         v-for="(v, index) in customerBranch"
         :key="index"
         :name="index"
-        :label="`${$t('customerBranchFormTab')} ${index + 1}`"
+        :label="`${$t('customerBranchFormTab')} `"
         @click="tab = index"
         no-caps
         :class="tab === index ? '' : 'bordered-b bordered-r'"
diff --git a/src/stores/customer/types.ts b/src/stores/customer/types.ts
index 816d7156..bbc1ec58 100644
--- a/src/stores/customer/types.ts
+++ b/src/stores/customer/types.ts
@@ -63,7 +63,7 @@ export type CustomerBranch = {
 
 export type CustomerBranchCreate = {
   code?: string;
-  branchNo: number;
+  branchNo?: number;
   address: string;
   addressEN: string;
   provinceId?: string | null;

From 2296a65c80e974f55621ec940d7648354f17e69a Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 15:13:23 +0700
Subject: [PATCH 076/158] =?UTF-8?q?refactor:=20=E0=B9=83=E0=B8=AB=E0=B9=89?=
 =?UTF-8?q?=20=E0=B8=AA=E0=B9=88=E0=B8=87=20index=20=E0=B8=94=E0=B9=89?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03_customer-management/CustomerInfoComponent.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/03_customer-management/CustomerInfoComponent.vue b/src/components/03_customer-management/CustomerInfoComponent.vue
index cd6c19c4..7189be2c 100644
--- a/src/components/03_customer-management/CustomerInfoComponent.vue
+++ b/src/components/03_customer-management/CustomerInfoComponent.vue
@@ -47,7 +47,7 @@ const prop = withDefaults(
 
 const emit = defineEmits<{
   (e: 'back'): void;
-  (e: 'viewDetail', branch: CustomerBranch[]): void;
+  (e: 'viewDetail', branch: CustomerBranch, index: number): void;
   (e: 'dialog'): void;
 }>();
 
@@ -209,7 +209,7 @@ watch(currentStatus, async () => {
             status: 'ดำเนินการอยู่',
             totalEmployee: br._count?.employee,
           }"
-          @view-detail="emit('viewDetail', [br])"
+          @view-detail="emit('viewDetail', br, i)"
         />
       </div>
     </div>

From ea4234a313438fe60e4a3ecf5a70bcb29c927710 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 15:13:39 +0700
Subject: [PATCH 077/158] =?UTF-8?q?refactor:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B9=80=E0=B8=87=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=99=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TabComponent.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/TabComponent.vue b/src/components/TabComponent.vue
index 79bcfb34..f4f74557 100644
--- a/src/components/TabComponent.vue
+++ b/src/components/TabComponent.vue
@@ -4,6 +4,7 @@ import { CustomerBranchCreate } from 'stores/customer/types';
 
 defineProps<{
   readonly?: boolean;
+  edit?: boolean;
 }>();
 
 const customerBranch = defineModel<CustomerBranchCreate[]>('customerBranch', {
@@ -94,6 +95,7 @@ function close(index: number) {
         :key="index"
         :name="index"
         :label="`${$t('customerBranchFormTab')} `"
+        :disable="tab !== index && edit"
         @click="tab = index"
         no-caps
         :class="tab === index ? '' : 'bordered-b bordered-r'"
@@ -116,7 +118,9 @@ function close(index: number) {
     <q-tab-panels v-model="tab" class="rounded-borders">
       <q-tab-panel
         :id="`tab-branch-${index}`"
-        v-for="(v, index) in customerBranch"
+        v-for="(v, index) in customerBranch.sort(
+          (a, b) => (a.branchNo ?? 0) - (b.branchNo ?? 0),
+        )"
         :key="index"
         :name="index"
       >

From a0a14ca0095222d48867d7588b23afb6533e4255 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 15:13:55 +0700
Subject: [PATCH 078/158] =?UTF-8?q?refactor:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=20=E0=B8=81=E0=B8=94=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=84=E0=B8=94=E0=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 40 ++++++++++++-------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index ccf43046..9d213f3b 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -838,15 +838,15 @@ async function onDelete(id: string) {
 }
 
 async function submitBranch() {
-  if (formData.value.customerBranch?.[0]) {
-    delete formData.value.customerBranch[0]['id'];
+  if (formData.value.customerBranch?.[indexTab.value]) {
+    delete formData.value.customerBranch[indexTab.value]['id'];
 
-    formData.value.customerBranch[0].status = statusToggle.value
+    formData.value.customerBranch[indexTab.value].status = statusToggle.value
       ? 'ACTIVE'
       : 'INACTIVE';
 
     await editBranchById(currentBranchId.value, {
-      ...formData.value.customerBranch[0],
+      ...formData.value.customerBranch[indexTab.value],
       customerId: currentCustomerId.value,
     });
 
@@ -903,7 +903,7 @@ const prevCustomer = ref<CustomerCreate>({
   registeredBranchId: '',
 });
 
-async function assignFormData(customerId: string) {
+async function assignFormData(customerId: string, branch?: CustomerBranch) {
   let data;
   const res = await fetchListById(customerId);
   if (res) {
@@ -965,8 +965,6 @@ function cloneData() {
     ...prevCustomer.value,
     customerBranch: structuredClone(toRaw(prevCustomer.value.customerBranch)),
   };
-
-  console.log(formData.value);
 }
 
 async function assignFormDataEmployee(id: string) {
@@ -1819,19 +1817,25 @@ watch([inputSearch, currentStatus], async () => {
             clearForm();
           }
         "
-        @dialog="dialogInputCustomerBranchForm = true"
+        @dialog="
+          () => {
+            indexTab = 0;
+            dialogInputCustomerBranchForm = true;
+          }
+        "
         @viewDetail="
-          async (v) => {
-            currentBranchId = v[0].id;
+          async (v, i) => {
+            currentBranchId = v.id;
+            indexTab = i;
 
-            statusToggle = v[0].status === 'INACTIVE' ? false : true;
+            statusToggle = v.status === 'INACTIVE' ? false : true;
 
             currentBranch = {
-              name: v[0].name,
-              code: v[0].code,
+              name: v.name,
+              code: v.code,
             };
 
-            if (currentCustomer) assignFormData(currentCustomer.id);
+            if (currentCustomer) assignFormData(currentCustomer.id, v);
 
             await fetchListOfOptionBranch();
 
@@ -2452,7 +2456,11 @@ watch([inputSearch, currentStatus], async () => {
     :isEdit="infoDrawerEdit"
     :close="() => onClose()"
     :editData="() => (infoDrawerEdit = true)"
-    :submit="() => onSubmitEdit(currentCustomerId)"
+    :submit="
+      () => () => {
+        onSubmitEdit(currentCustomerId);
+      }
+    "
     :deleteData="
       () => {
         deleteCustomerById(currentCustomerId);
@@ -2667,6 +2675,7 @@ watch([inputSearch, currentStatus], async () => {
     :deleteData="() => deleteBranchId(currentBranchId)"
     :submit="
       () => {
+        console.log(formData.customerBranch?.[indexTab]);
         submitBranch();
       }
     "
@@ -2736,6 +2745,7 @@ watch([inputSearch, currentStatus], async () => {
 
           <div class="col-12 row bordered q-pt-none rounded">
             <TabComponent
+              :edit="true"
               :readonly="true"
               v-model:customer-branch="formData.customerBranch"
               v-model:tab-index="indexTab"

From 27ccda97f11b297c7c0cec956a85b17854a8417a Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 15:46:47 +0700
Subject: [PATCH 079/158] =?UTF-8?q?refactor:=20=E0=B8=95=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=20=20function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue | 358 +++++++++++++++++---
 1 file changed, 307 insertions(+), 51 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index f17ef2d4..d0b93aa8 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -858,54 +858,6 @@ watch(locale, () => {
                       dense
                     />
 
-                    <!-- <q-btn
-                      id="btn-filter"
-                      icon="mdi-tune-vertical-variant"
-                      size="sm"
-                      class="bordered rounded surface-1"
-                      :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"
@@ -1101,8 +1053,20 @@ watch(locale, () => {
                               dense
                               round
                               flat
-                              @click.stop
+                              @click.stop="
+                                () => {
+                                  triggerEdit(
+                                    'drawer',
+                                    props.row.id,
+                                    props.row.isHeadOffice
+                                      ? 'headOffice'
+                                      : 'subBranch',
+                                    props.row.code,
+                                  );
+                                }
+                              "
                             />
+
                             <q-btn
                               icon="mdi-dots-vertical"
                               size="sm"
@@ -1110,7 +1074,152 @@ watch(locale, () => {
                               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>
@@ -1170,7 +1279,154 @@ watch(locale, () => {
                                 );
                               }
                             "
-                          />
+                          >
+                            <template v-slot:action>
+                              <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>
+                            </template>
+                          </BranchCard>
                         </div>
                       </template>
                     </q-table>

From 59d56329b63ddf395b4ddbb9e0d6705c8fbb8395 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 15:47:36 +0700
Subject: [PATCH 080/158] =?UTF-8?q?refactor:=20=E0=B8=A5=E0=B8=9A=E0=B9=82?=
 =?UTF-8?q?=E0=B8=84=E0=B9=89=E0=B8=84=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=84?=
 =?UTF-8?q?=E0=B8=94=E0=B9=89=E0=B9=83=E0=B8=8A=E0=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue | 142 --------------------
 1 file changed, 142 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index d0b93aa8..8a92815e 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1431,152 +1431,10 @@ watch(locale, () => {
                       </template>
                     </q-table>
                   </div>
-
-                  <!-- <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"
-                :class="{ 'cursor-pointer': !!currentHq.id }"
-                id="br-prev"
-              >
-                <Icon
-                  icon="ep:arrow-left-bold"
-                  width="21px"
-                  :class="{ 'app-text-muted': !currentHq.id }"
-                  @click="
-                    () => {
-                      if (currentHq.id) {
-                        beforeBranch = currentHq;
-                        currentHq = { id: '', code: '' };
-                        fieldSelectedBranch = {
-                          label: $t('branchHQLabel'),
-                          value: 'branchHQLabel',
-                        };
-                      }
-                    }
-                  "
-                />
-              </button>
-
-              <button
-                style="border: none; background: transparent; padding: 0"
-                :class="{ 'cursor-pointer': !!beforeBranch.id }"
-                id="br-next"
-              >
-                <Icon
-                  icon="ep:arrow-right-bold"
-                  width="21px"
-                  :class="{
-                    'app-text-muted': !beforeBranch.id,
-                  }"
-                  @click="
-                    () => {
-                      if (beforeBranch.id) {
-                        currentHq = beforeBranch;
-                        beforeBranch = { id: '', code: '' };
-                        fieldSelectedBranch = {
-                          label: '',
-                          value: '',
-                        };
-                      }
-                    }
-                  "
-                />
-              </button>
-
-              <q-space />
-            </div>
-          </div> -->
-          <!-- ssssssssssssssssssss -->
-
-          <!-- ---- -->
         </div>
       </template>
     </div>

From bebee654a52db9d1b811a8987b2bf5b2092ad9fa Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Jul 2024 16:19:47 +0700
Subject: [PATCH 081/158] =?UTF-8?q?refactor:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=20i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/en-US/object.ts | 75 ++++++++++++++++++++++++++++++++++++++++
 src/i18n/th-th/object.ts | 75 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 src/i18n/en-US/object.ts
 create mode 100644 src/i18n/th-th/object.ts

diff --git a/src/i18n/en-US/object.ts b/src/i18n/en-US/object.ts
new file mode 100644
index 00000000..b01a3a62
--- /dev/null
+++ b/src/i18n/en-US/object.ts
@@ -0,0 +1,75 @@
+export default {
+  branchManagement: {
+    label: {
+      branchManagementCaption: 'Manage All Branch',
+      branchLabel: 'Branch',
+      branchHQLabel: 'Headquarters',
+    },
+
+    table: {
+      title: {
+        office: 'Office',
+        ddress: 'Address',
+        //   formDialogInputTelephone: 'Telephone Number',
+        telephone: 'Telephone Number',
+        type: 'Type',
+      },
+    },
+
+    input: {
+      label: {
+        search: 'Search',
+      },
+    },
+
+    manu: {
+      branchName: 'Branch Name',
+      branchLabelTel: 'Branch Telephone No',
+      branchLabelAddress: 'Branch Address',
+      branchLabelType: 'Branch Type',
+      viewDetail: 'View Detail',
+      edit: 'Edit',
+      delete: 'Delete',
+      switchOnLabel: 'Open',
+      switchOffLabel: 'Close',
+    },
+  },
+
+  formDialog: {
+    section: {
+      formDialogTitleInformation: 'Basic Information',
+      formDialogTitleContact: 'Contact Information',
+      formDialogTitleAddress: ' Head office address information',
+      formDialogTitleLocation: 'Head Office Location',
+      formDialogTitleImg: 'Office Image',
+      subtopic: {
+        formDialogAddress: 'Address in Thai',
+        formDialogAddressEN: 'Address in English',
+      },
+    },
+    input: {
+      formDialogInputCode: 'Head Office Code',
+      formDialogInputBrId: 'Branch Code',
+      formDialogInputTaxNo: 'Tax Identification Number',
+      formDialogInputNameSubBranch: 'Branch Name',
+      formDialogInputNameSubBranchEn: 'Branch Name (English)',
+      formDialogInputEmailSubBranch: 'Branch Contact Email',
+      formDialogInputTelephoneSubBranch: 'Branch Telephone Number',
+      formDialogInputContactName: 'Contact',
+      formDialogInputTelephoneContact: 'Contact Telephone Number',
+      address: 'Address',
+      province: 'Province',
+      district: 'District',
+      subDistrict: 'Sub-district',
+      zipCode: 'Zip Code',
+    },
+
+    button: {
+      formDialogUploadQrCode: 'Upload QR Code',
+      formDialogBtnLocation: 'Start sharing location',
+      formDialogBtnImg: 'Add Office Image',
+      agree: 'Ok',
+      cancel: 'Cancel',
+    },
+  },
+};
diff --git a/src/i18n/th-th/object.ts b/src/i18n/th-th/object.ts
new file mode 100644
index 00000000..68fbf820
--- /dev/null
+++ b/src/i18n/th-th/object.ts
@@ -0,0 +1,75 @@
+export default {
+  branchManagement: {
+    label: {
+      branchManagementCaption: 'จัดการทุกสาขา',
+      branchLabel: 'สาขา',
+      branchHQLabel: 'สำนักงานใหญ่',
+    },
+
+    table: {
+      title: {
+        office: 'สำนักงาน',
+        address: 'ที่อยู่',
+        //   formDialogInputTelephone: 'เบอร์โทรศัพท์',
+        telephone: 'เบอร์โทรศัพท์',
+        type: 'ประเภท',
+      },
+    },
+
+    input: {
+      label: {
+        search: 'ค้นหา',
+      },
+    },
+
+    manu: {
+      branchName: 'ชื่อสาขา',
+      branchLabelTel: 'เบอร์โทรศัพท์สาขา',
+      branchLabelAddress: 'ที่อยู่สาขา',
+      branchLabelType: 'ประเภทสาขา',
+      viewDetail: 'ดูรายละเอียด',
+      edit: 'แก้ไข',
+      delete: 'ลบ',
+      switchOnLabel: 'เปิด',
+      switchOffLabel: 'ปิด',
+    },
+  },
+
+  formDialog: {
+    section: {
+      formDialogTitleInformation: 'ข้อมูลพื้นฐาน',
+      formDialogTitleContact: 'ข้อมูลติดต่อ',
+      formDialogTitleAddress: 'ข้อมูลที่อยู่สำนักงานใหญ่',
+      formDialogTitleLocation: 'ตำแหน่งที่ตั้งสำนักงานใหญ่',
+      formDialogTitleImg: 'ภาพสำนักงาน',
+      subtopic: {
+        formDialogAddress: 'ที่อยู่ภาษาไทย',
+        formDialogAddressEN: 'ที่อยู่ภาษาอังกฤษ',
+      },
+    },
+    input: {
+      formDialogInputCode: 'รหัสสำนักงานใหญ่',
+      formDialogInputBrId: 'รหัสสาขา',
+      formDialogInputTaxNo: 'เลขประจำตัวผู้เสียภาษี',
+      formDialogInputNameSubBranch: 'ชื่อสาขา',
+      formDialogInputNameSubBranchEn: 'ชื่อสาขา (ภาษาอังกฤษ)',
+      formDialogInputEmailSubBranch: 'อีเมลติดต่อสาขา',
+      formDialogInputTelephoneSubBranch: 'เบอร์โทรศัพท์สาขา',
+      formDialogInputContactName: 'ชื่อผู้ติดต่อ',
+      formDialogInputTelephoneContact: 'เบอร์โทรศัพท์ผู้ติดต่อ',
+      address: 'ที่อยู่',
+      province: 'จังหวัด',
+      district: 'อำเภอ',
+      subDistrict: 'ตำบล',
+      zipCode: 'รหัสไปรษณีย์',
+    },
+
+    button: {
+      formDialogUploadQrCode: 'อัปโหลด QR Code',
+      formDialogBtnLocation: 'เริ่มแชร์ตำแหน่งที่ตั้ง',
+      formDialogBtnImg: 'เพิ่มภาพสำนักงาน',
+      agree: 'ตกลง',
+      cancel: 'ยกเลิก',
+    },
+  },
+};

From e1e7eb4719b9315c727533accdf2cba4d518f857 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Jul 2024 09:29:46 +0000
Subject: [PATCH 082/158] fix: new 03 ui & layout

---
 src/pages/03_customer-management/MainPage.vue | 933 ++++++++++--------
 1 file changed, 540 insertions(+), 393 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 9d213f3b..7ef61706 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -81,6 +81,7 @@ const {
 const flowStore = useFlowStore();
 const employeeStore = useEmployeeStore();
 const optionStore = useOptionStore();
+const currentTab = ref('employer');
 const formData = ref<CustomerCreate>({
   status: 'CREATED',
   personName: '',
@@ -129,6 +130,10 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
   value: 'all',
 });
 
+const fieldSelected = ref();
+const fieldDisplay = ref();
+const splitterModel = ref(15);
+const modeView = ref(true);
 const currentEmployee = ref<Employee | undefined>();
 const currentEmployeeCode = ref('');
 const isEmployeeEdit = ref(false);
@@ -1216,6 +1221,7 @@ watch(locale, () => {
 
 watch(fieldSelectedCustomer, async () => {
   let resultList;
+  console.log('asd');
 
   if (fieldSelectedCustomer.value.value === 'all') {
     resultList = await fetchList({ includeBranch: true });
@@ -1278,6 +1284,12 @@ watch(genderSelector, async () => {
 
 watch(selectorLabel, async () => {
   if (inputSearch.value) inputSearch.value = undefined;
+  if (selectorLabel.value === 'EMPLOYEE') {
+    await fetchListEmployee();
+    await fetchListStatsEmployeeGender();
+  } else {
+    await fetchListCustomer();
+  }
 });
 
 watch([inputSearch, currentStatus], async () => {
@@ -1331,10 +1343,25 @@ watch([inputSearch, currentStatus], async () => {
 
   <div class="column full-height no-wrap">
     <div v-if="isMainPage" class="column full-height">
-      <div class="text-body-2 q-mb-xs flex items-center">
+      <div class="text-body-2 text-weight-medium q-mb-xs flex items-center">
         {{ $t('dataSum') }}
+        <q-badge
+          v-if="listCustomer"
+          rounded
+          class="q-ml-sm"
+          style="
+            background-color: hsla(var(--info-bg) / 0.15);
+            color: hsl(var(--info-bg));
+          "
+        >
+          {{
+            selectorLabel === 'EMPLOYER'
+              ? listCustomer?.length
+              : listEmployee.length
+          }}
+        </q-badge>
         <q-btn
-          class="q-ml-xs"
+          class="q-ml-lg"
           icon="mdi-pin"
           color="primary"
           size="sm"
@@ -1390,420 +1417,535 @@ watch([inputSearch, currentStatus], async () => {
       </div>
 
       <!-- main -->
-      <div class="surface-1 bordered rounded q-pa-md scroll col">
-        <div class="row q-pb-md">
-          <div class="col">
-            <q-select
-              id="select-userType"
-              for="select-userType"
-              v-if="selectorLabel === 'EMPLOYER'"
-              v-model="fieldSelectedCustomer"
-              style="width: 150px"
-              outlined
-              :options="fieldCustomer.map((v) => ({ label: $t(v), value: v }))"
-              :label="$t('customerCardUserType')"
-              dense
-            />
-            <q-btn-toggle
-              v-else
-              v-model="genderSelector"
-              id="btn-mode"
-              class="no-shadow"
-              padding="0px"
-              toggle-color="grey-3"
-              size="xs"
-              :options="[
-                { value: 'female', slot: 'female' },
-                { value: 'male', slot: 'male' },
-              ]"
-            >
-              <template v-slot:female>
-                <div
-                  class="bordered-t bordered-l bordered-b q-px-md q-py-sm app-text-female text-weight-medium text-body2 row items-center"
-                  @click="
-                    async () => {
-                      if (genderSelector === 'female') {
-                        await fetchListEmployee();
-                        genderSelector = '';
-                      }
-                    }
-                  "
-                >
-                  <q-icon
-                    name="mdi-gender-female"
-                    class="q-mr-sm"
-                    size="18px"
-                  />
-                  <div v-if="statsEmployeeGender">
-                    {{ statsEmployeeGender.female ?? 0 }} {{ $t('person') }}
-                  </div>
-                </div>
-              </template>
-
-              <template v-slot:male>
-                <div
-                  class="bordered q-px-md q-py-sm app-text-male text-weight-medium text-body2 row items-center"
-                  @click="
-                    async () => {
-                      if (genderSelector === 'male') {
-                        await fetchListEmployee();
-                        genderSelector = '';
-                      }
-                    }
-                  "
-                >
-                  <q-icon name="mdi-gender-male" class="q-mr-sm" size="18px" />
-                  <div v-if="statsEmployeeGender">
-                    {{ statsEmployeeGender.male ?? 0 }} {{ $t('person') }}
-                  </div>
-                </div>
-              </template>
-            </q-btn-toggle>
-          </div>
-
-          <q-input
-            for="input-search"
-            outlined
-            dense
-            style="width: 250px"
-            :label="$t('search')"
-            class="q-mr-lg"
-            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-            v-model="inputSearch"
-            debounce="200"
-          />
-
-          <q-btn
-            id="btn-status"
-            icon="mdi-tune-vertical-variant"
-            size="sm"
-            :color="$q.dark.isActive ? 'dark' : 'white'"
-            :text-color="$q.dark.isActive ? 'white' : 'dark'"
-            class="bordered rounded"
-            unelevated
-          >
-            <q-menu class="bordered">
-              <q-list v-close-popup dense>
-                <q-item
-                  id="btn-status-all"
-                  clickable
-                  class="flex items-center"
-                  @click="currentStatus = 'All'"
-                >
-                  {{ $t('all') }}
-                </q-item>
-                <q-item
-                  id="btn-status-active"
-                  clickable
-                  class="flex items-center"
-                  @click="currentStatus = 'ACTIVE'"
-                >
-                  {{ $t('statusACTIVE') }}
-                </q-item>
-                <q-item
-                  id="btn-status-inactive"
-                  clickable
-                  class="flex items-center"
-                  @click="currentStatus = 'INACTIVE'"
-                >
-                  {{ $t('statusINACTIVE') }}
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </div>
-        <template
-          v-if="
-            listCustomer &&
-            statsCustomerType.PERS + statsCustomerType.CORP > 0 &&
-            selectorLabel === 'EMPLOYER'
-          "
-        >
+      <div class="surface-1 bordered rounded col column">
+        <!-- tabs -->
+        <div class="column">
           <div
-            v-if="listCustomer.length === 0"
-            class="row full-width items-center justify-center"
-            style="min-height: 250px"
+            class="row surface-3 bordered-b justify-between full-width items-center surface-1"
+            style="z-index: 1"
           >
-            <NoData :not-found="!!inputSearch" />
-          </div>
-          <div
-            v-if="listCustomer.length !== 0"
-            class="row full-width customer-row"
-            :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '2' : $q.screen.lt.md ? '3' : $q.screen.lt.lg ? '5' : '6'}, 1fr)`"
-            style="min-height: 250px"
-          >
-            <UsersDetailCardComponent
-              v-for="i in listCustomer"
-              :key="i.id"
-              class="hover-card"
-              :color="i.customerType === 'CORP' ? 'purple' : 'green'"
-              :metadata="{
-                id: i.id,
-                disabled: i.status === 'ACTIVE' || i.status === 'CREATED',
-              }"
-              :badge="i.branch"
-              :list="{
-                id: i.id,
-                imageUrl: i.imageUrl,
-                type: i.customerType,
-                name: i.customerName === '' ? '-' : i.customerName,
-                code: i.code,
-                status: i.status,
+            <div class="row q-py-sm q-px-md justify-between full-width">
+              <q-input
+                for="input-search"
+                outlined
+                dense
+                style="width: 250px"
+                :label="$t('search')"
+                class="q-mr-md"
+                :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+                v-model="inputSearch"
+                debounce="200"
+              >
+                <template #prepend>
+                  <q-icon name="mdi-magnify" />
+                </template>
+              </q-input>
 
-                detail: [
-                  {
-                    label: 'customerNameTh',
-                    value: i.customerName,
-                  },
-                  {
-                    label: 'customerNameEn',
-                    value: i.customerNameEN,
-                  },
-                ],
-              }"
-              @enter-card="
-                () => {
-                  currentCustomerName = i.customerName;
-                  customerType = i.customerType;
-                  currentCustomerUrlImage = i.imageUrl;
-                  currentCustomerId = i.id;
+              <div class="row">
+                <q-select
+                  v-model="currentStatus"
+                  outlined
+                  dense
+                  option-value="value"
+                  option-label="label"
+                  class="q-pr-md"
+                  map-options
+                  emit-value
+                  :options="[
+                    { label: $t('all'), value: 'All' },
+                    { label: $t('statusACTIVE'), value: 'ACTIVE' },
+                    { label: $t('statusINACTIVE'), value: 'INACTIVE' },
+                  ]"
+                ></q-select>
 
-                  const { branch, ...payload } = i;
-                  currentCustomer = payload;
-                  isMainPage = false;
-                }
-              "
-              @update-card="
-                () => {
-                  if (!listCustomer) return;
+                <q-select
+                  id="select-field"
+                  for="select-field"
+                  :options="[
+                    { label: 'กันว่าง 1', value: 'กันว่าง 1' },
+                    { label: 'กันว่าง 2', value: 'กันว่าง 2' },
+                  ]"
+                  :display-value="$t('displayField')"
+                  v-model="fieldSelected"
+                  option-label="label"
+                  option-value="value"
+                  map-options
+                  emit-value
+                  outlined
+                  multiple
+                  dense
+                />
 
-                  customerType = i.customerType;
-                  const { branch, ...payload } = i;
-                  currentCustomer = payload;
-
-                  currentCustomerId = i.id;
-
-                  assignFormData(i.id);
-
-                  infoDrawerEdit = true;
-                  openDialogInputForm('INFO', i.id);
-                }
-              "
-              @view-card="
-                () => {
-                  const { branch, ...payload } = i;
-                  currentCustomer = payload;
-
-                  currentCustomerId = i.id;
-                  customerType = i.customerType;
-                  assignFormData(i.id);
-                  openDialogInputForm('INFO', i.id);
-                }
-              "
-              @delete-card="deleteCustomerById(i.id)"
-              @toggle-status="
-                () => {
-                  toggleStatusCustomer(
-                    i.id,
-                    i.status === 'ACTIVE' ? true : false,
-                  );
-                }
-              "
-            />
-          </div>
-
-          <div
-            v-if="listCustomer.length !== 0"
-            class="row justify-between q-pt-md"
-          >
-            <div class="col-4">
-              <div class="row items-center">
-                <div class="app-text-muted" style="width: 80px">
-                  {{ $t('showing') }}
-                </div>
-                <div>
-                  <q-btn-dropdown dense unelevated :label="pageSize">
-                    <q-list>
-                      <q-item
-                        v-for="v in [10, 30, 50, 100, 500, 1000]"
-                        :key="v"
-                        clickable
-                        v-close-popup
-                        @click="
-                          async () => {
-                            pageSize = v;
-                            await fetchListCustomer();
-                          }
-                        "
-                      >
-                        <q-item-section>
-                          <q-item-label>{{ v }}</q-item-label>
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-btn-dropdown>
-                </div>
+                <q-btn-toggle
+                  id="btn-mode"
+                  v-model="modeView"
+                  dense
+                  class="no-shadow bordered rounded surface-1 q-ml-md"
+                  :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+                  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: $q.dark.isActive
+                          ? modeView
+                            ? '#C9D3DB '
+                            : '#787B7C'
+                          : 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: $q.dark.isActive
+                          ? modeView === false
+                            ? '#C9D3DB'
+                            : '#787B7C'
+                          : modeView === false
+                            ? '#787B7C'
+                            : '#C9D3DB',
+                      }"
+                    />
+                  </template>
+                </q-btn-toggle>
               </div>
             </div>
+          </div>
 
-            <div class="col-4 row justify-center app-text-muted">
-              {{
-                $t('recordsPage', {
-                  resultcurrentPage: listCustomer.length,
-                  total: statsCustomerType.PERS + statsCustomerType.CORP,
-                })
-              }}
-            </div>
-            <div class="col-4 row justify-end">
-              <PaginationComponent
-                v-model:current-page="currentPageCustomer"
-                v-model:max-page="maxPageCustomer"
-                :fetch-data="
+          <div class="surface-2 bordered-b q-px-md">
+            <q-tabs
+              dense
+              v-model="currentTab"
+              align="left"
+              class="full-height"
+              active-color="info"
+            >
+              <q-tab
+                name="employer"
+                @click="
                   async () => {
-                    await fetchListCustomer();
+                    selectorLabel = 'EMPLOYER';
+                    currentPageCustomer = 1;
+                    inputSearch = '';
+                    currentStatus = 'All';
                     flowStore.rotate();
                   }
                 "
-              />
-            </div>
+              >
+                <div
+                  class="row"
+                  :class="
+                    currentTab === 'employer' ? 'text-bold' : 'app-text-muted'
+                  "
+                >
+                  {{ $t('EMPLOYER') }}
+                </div>
+              </q-tab>
+              <q-tab
+                name="employee"
+                @click="
+                  async () => {
+                    selectorLabel = 'EMPLOYEE';
+                    currentPageEmployee = 1;
+                    inputSearch = '';
+                    currentStatus = 'All';
+                    flowStore.rotate();
+                  }
+                "
+              >
+                <div
+                  class="row"
+                  :class="
+                    currentTab === 'employee' ? 'text-bold' : 'app-text-muted'
+                  "
+                >
+                  {{ $t('EMPLOYEE') }}
+                </div>
+              </q-tab>
+            </q-tabs>
           </div>
-        </template>
+        </div>
 
-        <template
-          v-if="
-            listEmployee && statsEmployee > 0 && selectorLabel === 'EMPLOYEE'
-          "
+        <!-- body -->
+        <q-splitter
+          v-model="splitterModel"
+          :limits="[15, 80]"
+          style="width: 100%"
+          class="col"
         >
-          <div
-            v-if="listEmployee.length === 0"
-            class="row full-width items-center justify-center"
-            style="min-height: 250px"
-          >
-            <NoData :not-found="!!inputSearch" />
-          </div>
+          <template v-slot:before>
+            <div class="column q-pa-md q-gutter-y-sm">
+              <div v-if="selectorLabel === 'EMPLOYER'">
+                <q-item
+                  v-for="v in fieldCustomer"
+                  :key="v"
+                  clickable
+                  dense
+                  class="no-padding flex items-center rounded"
+                  active-class="employer-active"
+                  :active="fieldSelectedCustomer.value === v"
+                  @click="fieldSelectedCustomer = { label: v, value: v }"
+                >
+                  <span class="q-px-md">
+                    {{ $t(v) }}
+                  </span>
+                </q-item>
+              </div>
+              <div v-else>
+                <q-item
+                  active
+                  dense
+                  clickable
+                  active-class="employer-active"
+                  class="no-padding flex items-center rounded"
+                >
+                  <span class="q-px-md">
+                    {{ $t('totalEmployee') }}
+                  </span>
+                </q-item>
+              </div>
+            </div>
+          </template>
 
-          <div v-if="listEmployee.length !== 0">
-            <PersonCard
-              history
-              :list="
-                listEmployee.map((v: Employee) => ({
-                  disabled: v.status === 'INACTIVE',
-                  img: v.profileImageUrl,
-                  id: v.id,
-                  name:
-                    $i18n.locale === 'en-US'
-                      ? `${v.firstNameEN} ${v.lastNameEN}`
-                      : `${v.firstName} ${v.lastName}`,
-                  male: v.gender === 'male',
-                  female: v.gender === 'female',
-                  badge: v.code,
-                  detail: [
-                    {
-                      label: $t('personnelCardNationality'),
-                      value: v.nationality,
-                    },
-                    {
-                      label: $t('personnelCardAge'),
-                      value: calculateAge(v.dateOfBirth),
-                    },
-                  ],
-                }))
-              "
-              @history="openHistory"
-              @update-card="openDialogInputForm"
-              @enter-card="openDialogInputForm"
-              @delete-card="onDelete"
-              @toggle-status="(id, status) => toggleStatusEmployee(id, status)"
-            />
+          <template v-slot:after>
+            <div class="column full-height surface-2">
+              <!-- employer -->
+              <template
+                v-if="
+                  listCustomer &&
+                  statsCustomerType.PERS + statsCustomerType.CORP > 0 &&
+                  selectorLabel === 'EMPLOYER'
+                "
+              >
+                <div
+                  v-if="listCustomer.length === 0"
+                  class="row col full-width items-center justify-center"
+                  style="min-height: 250px"
+                >
+                  <NoData :not-found="!!inputSearch" />
+                </div>
+                <div
+                  v-if="listCustomer.length !== 0"
+                  class="col q-pa-md scroll"
+                >
+                  <div
+                    class="row full-width customer-row"
+                    :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '2' : $q.screen.lt.md ? '3' : $q.screen.lt.lg ? '5' : '6'}, 1fr)`"
+                    style="min-height: 250px"
+                  >
+                    <UsersDetailCardComponent
+                      v-for="i in listCustomer"
+                      :key="i.id"
+                      class="hover-card"
+                      :color="i.customerType === 'CORP' ? 'purple' : 'green'"
+                      :metadata="{
+                        id: i.id,
+                        disabled:
+                          i.status === 'ACTIVE' || i.status === 'CREATED',
+                      }"
+                      :badge="i.branch"
+                      :list="{
+                        id: i.id,
+                        imageUrl: i.imageUrl,
+                        type: i.customerType,
+                        name: i.customerName === '' ? '-' : i.customerName,
+                        code: i.code,
+                        status: i.status,
 
-            <div class="col-4 row justify-center">
-              <div class="col-4">
-                <div class="row items-center">
-                  <div class="app-text-muted" style="width: 80px">
-                    {{ $t('showing') }}
-                  </div>
-                  <div>
-                    <q-btn-dropdown dense unelevated :label="pageSize">
-                      <q-list>
-                        <q-item
-                          v-for="v in [10, 30, 50, 100, 500, 1000]"
-                          :key="v"
-                          clickable
-                          v-close-popup
-                          @click="
-                            async () => {
-                              pageSize = v;
-                              await fetchListEmployee();
-                            }
-                          "
-                        >
-                          <q-item-section>
-                            <q-item-label>{{ v }}</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-btn-dropdown>
+                        detail: [
+                          {
+                            label: 'customerNameTh',
+                            value: i.customerName,
+                          },
+                          {
+                            label: 'customerNameEn',
+                            value: i.customerNameEN,
+                          },
+                        ],
+                      }"
+                      @enter-card="
+                        () => {
+                          currentCustomerName = i.customerName;
+                          customerType = i.customerType;
+                          currentCustomerUrlImage = i.imageUrl;
+                          currentCustomerId = i.id;
+
+                          const { branch, ...payload } = i;
+                          currentCustomer = payload;
+                          isMainPage = false;
+                        }
+                      "
+                      @update-card="
+                        () => {
+                          if (!listCustomer) return;
+
+                          customerType = i.customerType;
+                          const { branch, ...payload } = i;
+                          currentCustomer = payload;
+
+                          currentCustomerId = i.id;
+
+                          assignFormData(i.id);
+
+                          infoDrawerEdit = true;
+                          openDialogInputForm('INFO', i.id);
+                        }
+                      "
+                      @view-card="
+                        () => {
+                          const { branch, ...payload } = i;
+                          currentCustomer = payload;
+
+                          currentCustomerId = i.id;
+                          customerType = i.customerType;
+                          assignFormData(i.id);
+                          openDialogInputForm('INFO', i.id);
+                        }
+                      "
+                      @delete-card="deleteCustomerById(i.id)"
+                      @toggle-status="
+                        () => {
+                          toggleStatusCustomer(
+                            i.id,
+                            i.status === 'ACTIVE' ? true : false,
+                          );
+                        }
+                      "
+                    />
                   </div>
                 </div>
-              </div>
 
-              <div class="col-4 row justify-center app-text-muted">
-                {{
-                  $t('recordsPage', {
-                    resultcurrentPage: listEmployee.length,
-                    total: statsEmployee,
-                  })
-                }}
-              </div>
-              <div class="col-4 row justify-end">
-                <PaginationComponent
-                  v-model:current-page="currentPageEmployee"
-                  v-model:max-page="maxPageEmployee"
-                  :fetch-data="
-                    async () => {
-                      await fetchListEmployee();
-                      flowStore.rotate();
-                    }
+                <div
+                  v-if="listCustomer.length !== 0"
+                  class="row justify-between items-center q-px-md"
+                >
+                  <div class="row col-4 items-center">
+                    <div class="app-text-muted" style="width: 80px">
+                      {{ $t('showing') }}
+                    </div>
+                    <div>
+                      <q-btn-dropdown
+                        dense
+                        unelevated
+                        class="bordered q-pl-md rounded"
+                        :label="pageSize"
+                        style="background-color: var(--surface-1)"
+                      >
+                        <q-list>
+                          <q-item
+                            v-for="v in [10, 30, 50, 100, 500, 1000]"
+                            :key="v"
+                            clickable
+                            v-close-popup
+                            @click="
+                              async () => {
+                                pageSize = v;
+                                await fetchListCustomer();
+                              }
+                            "
+                          >
+                            <q-item-section>
+                              <q-item-label>{{ v }}</q-item-label>
+                            </q-item-section>
+                          </q-item>
+                        </q-list>
+                      </q-btn-dropdown>
+                    </div>
+                  </div>
+
+                  <div class="col-4 flex justify-center app-text-muted">
+                    {{
+                      $t('recordsPage', {
+                        resultcurrentPage: listCustomer.length,
+                        total: statsCustomerType.PERS + statsCustomerType.CORP,
+                      })
+                    }}
+                  </div>
+
+                  <div class="col-4 flex justify-end">
+                    <PaginationComponent
+                      v-model:current-page="currentPageCustomer"
+                      v-model:max-page="maxPageCustomer"
+                      :fetch-data="
+                        async () => {
+                          await fetchListCustomer();
+                          flowStore.rotate();
+                        }
+                      "
+                    />
+                  </div>
+                </div>
+              </template>
+
+              <!-- employee -->
+              <template
+                v-if="
+                  listEmployee &&
+                  statsEmployee > 0 &&
+                  selectorLabel === 'EMPLOYEE'
+                "
+              >
+                <div
+                  v-if="listEmployee.length === 0"
+                  class="row full-width items-center justify-center col"
+                  style="min-height: 250px"
+                >
+                  <NoData :not-found="!!inputSearch" />
+                </div>
+
+                <div
+                  class="col column justify-between q-px-md q-pt-md scroll"
+                  v-if="listEmployee.length !== 0"
+                >
+                  <PersonCard
+                    history
+                    :list="
+                      listEmployee.map((v: Employee) => ({
+                        disabled: v.status === 'INACTIVE',
+                        img: v.profileImageUrl,
+                        id: v.id,
+                        name:
+                          $i18n.locale === 'en-US'
+                            ? `${v.firstNameEN} ${v.lastNameEN}`
+                            : `${v.firstName} ${v.lastName}`,
+                        male: v.gender === 'male',
+                        female: v.gender === 'female',
+                        badge: v.code,
+                        detail: [
+                          {
+                            label: $t('personnelCardNationality'),
+                            value: v.nationality,
+                          },
+                          {
+                            label: $t('personnelCardAge'),
+                            value: calculateAge(v.dateOfBirth),
+                          },
+                        ],
+                      }))
+                    "
+                    @history="openHistory"
+                    @update-card="openDialogInputForm"
+                    @enter-card="openDialogInputForm"
+                    @delete-card="onDelete"
+                    @toggle-status="
+                      (id, status) => toggleStatusEmployee(id, status)
+                    "
+                  />
+                </div>
+                <div
+                  v-if="listEmployee.length !== 0"
+                  class="row justify-between items-center q-px-md"
+                >
+                  <div class="row col-4 items-center">
+                    <div class="app-text-muted" style="width: 80px">
+                      {{ $t('showing') }}
+                    </div>
+                    <div>
+                      <q-btn-dropdown
+                        dense
+                        unelevated
+                        :label="pageSize"
+                        class="bordered q-pl-md"
+                        style="background-color: var(--surface-1)"
+                      >
+                        <q-list>
+                          <q-item
+                            v-for="v in [10, 30, 50, 100, 500, 1000]"
+                            :key="v"
+                            clickable
+                            v-close-popup
+                            @click="
+                              async () => {
+                                pageSize = v;
+                                await fetchListEmployee();
+                              }
+                            "
+                          >
+                            <q-item-section>
+                              <q-item-label>{{ v }}</q-item-label>
+                            </q-item-section>
+                          </q-item>
+                        </q-list>
+                      </q-btn-dropdown>
+                    </div>
+                  </div>
+
+                  <div class="col-4 flex justify-center app-text-muted">
+                    {{
+                      $t('recordsPage', {
+                        resultcurrentPage: listEmployee.length,
+                        total: statsEmployee,
+                      })
+                    }}
+                  </div>
+
+                  <div class="col-4 flex justify-end">
+                    <PaginationComponent
+                      v-model:current-page="currentPageEmployee"
+                      v-model:max-page="maxPageEmployee"
+                      :fetch-data="
+                        async () => {
+                          await fetchListEmployee();
+                          flowStore.rotate();
+                        }
+                      "
+                    />
+                  </div>
+                </div>
+              </template>
+
+              <template
+                v-if="
+                  (statsCustomerType.CORP + statsCustomerType.PERS === 0 &&
+                    selectorLabel === 'EMPLOYER') ||
+                  (statsEmployee === 0 && selectorLabel === 'EMPLOYEE')
+                "
+              >
+                <TooltipComponent
+                  class="self-end"
+                  :title="
+                    selectorLabel === 'EMPLOYER'
+                      ? 'customerEmployerTooltipTitle'
+                      : 'customerEmployeeTooltipTitle'
                   "
+                  :caption="
+                    selectorLabel === 'EMPLOYER'
+                      ? 'customerEmployerTooltipCaption'
+                      : 'customerEmployeeTooltipCaption'
+                  "
+                  imgSrc="personnel-table-"
                 />
-              </div>
+
+                <div
+                  class="row items-center justify-center"
+                  style="flex-grow: 1"
+                >
+                  <AddButton
+                    :label="
+                      selectorLabel === 'EMPLOYER'
+                        ? 'customerEmployerAdd'
+                        : 'customerEmployeeAdd'
+                    "
+                    @trigger="() => openDialogCustomerType()"
+                  />
+                </div>
+              </template>
             </div>
-          </div>
-        </template>
-
-        <template
-          v-if="
-            (statsCustomerType.CORP + statsCustomerType.PERS === 0 &&
-              selectorLabel === 'EMPLOYER') ||
-            (statsEmployee === 0 && selectorLabel === 'EMPLOYEE')
-          "
-        >
-          <TooltipComponent
-            class="self-end"
-            :title="
-              selectorLabel === 'EMPLOYER'
-                ? 'customerEmployerTooltipTitle'
-                : 'customerEmployeeTooltipTitle'
-            "
-            :caption="
-              selectorLabel === 'EMPLOYER'
-                ? 'customerEmployerTooltipCaption'
-                : 'customerEmployeeTooltipCaption'
-            "
-            imgSrc="personnel-table-"
-          />
-
-          <div class="row items-center justify-center" style="flex-grow: 1">
-            <AddButton
-              :label="
-                selectorLabel === 'EMPLOYER'
-                  ? 'customerEmployerAdd'
-                  : 'customerEmployeeAdd'
-              "
-              @trigger="() => openDialogCustomerType()"
-            />
-          </div>
-        </template>
+          </template>
+        </q-splitter>
       </div>
     </div>
     <div v-else>
@@ -3093,4 +3235,9 @@ watch([inputSearch, currentStatus], async () => {
   transform: translateY(-20px);
   opacity: 0;
 }
+
+.employer-active {
+  background-color: hsla(var(--info-bg) / 0.1);
+  color: hsl(var(--info-bg));
+}
 </style>

From 4bfe1ccd3442e71d3e2f8d2a9d096b4a8761b66c Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 16:29:06 +0700
Subject: [PATCH 083/158] feat: update Person Card

---
 src/components/DrawerComponent.vue            |  10 +-
 src/components/StatCardComponent.vue          |  30 +-
 src/components/home/PersonCard.vue            | 543 +++++++++---------
 .../02_personnel-management/MainPage.vue      | 145 +++--
 4 files changed, 391 insertions(+), 337 deletions(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 36001796..5795ffec 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -102,12 +102,12 @@ function branchSetting() {}
     side="left"
     :breakpoint="599"
     class="column justify-between no-wrap"
-    :width="mini ? 110 : 256"
+    :width="mini ? 80 : 256"
   >
     <!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
-    <div class="scroll" style="overflow-x: hidden">
+    <div class="scroll" style="overflow-x: hidden; scrollbar-gutter: stable">
       <div
-        class="flex justify-center items-center q-pa-md cursor-pointer"
+        class="flex justify-center items-center q-pl-sm cursor-pointer"
         @click="$router.push('/')"
         id="btn-drawer-home"
         style="height: 128px"
@@ -120,12 +120,12 @@ function branchSetting() {}
         />
       </div>
 
-      <div id="drawer-menu" class="q-px-md">
+      <div id="drawer-menu" class="q-pl-md q-mr-xs">
         <q-item
           v-for="v in labelMenu"
           dense
           clickable
-          class="row items-center q-my-xs"
+          class="row items-center q-my-xs q-px-xs"
           :key="v.label"
           :disable="!!v.disabled"
           :class="{
diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index e2d20c30..b5ddd3ef 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -5,7 +5,15 @@ const props = withDefaults(
       icon: string;
       count: number;
       label: string;
-      color: 'pink' | 'purple' | 'green' | 'orange';
+      color:
+        | 'pink'
+        | 'purple'
+        | 'green'
+        | 'orange'
+        | 'cyan'
+        | 'yellow'
+        | 'red'
+        | 'magenta';
     }[];
     dark?: boolean;
     labelI18n?: boolean;
@@ -79,10 +87,26 @@ const props = withDefaults(
   --_color: var(--teal-10-hsl);
 }
 
+.stat-card__cyan {
+  --_color: var(--cyan-7-hsl);
+}
+
+.stat-card__red {
+  --_color: var(--red-6-hsl);
+}
+
+.stat-card__yellow {
+  --_color: var(--orange-4-hsl);
+}
+
 .stat-card__orange {
   --_color: var(--orange-5-hsl);
 }
 
+.stat-card__magenta {
+  --_color: var(--pink-8-hsl);
+}
+
 .dark .stat-card__purple {
   --_color: var(--violet-10-hsl);
 }
@@ -94,4 +118,8 @@ const props = withDefaults(
 .dark .stat-card__orange {
   --_color: var(--orange-6-hsl);
 }
+
+.dark .stat-card__magenta {
+  --_color: var(--pink-7-hsl);
+}
 </style>
diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index df3e3813..6983b07e 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -5,264 +5,222 @@ import AppBox from 'components/app/AppBox.vue';
 import AppCircle from 'components/app/AppCircle.vue';
 
 defineProps<{
-  list: {
-    id: string;
+  data: {
     name: string;
-    detail?: { label: string; value: string }[];
+    code: string;
     male?: boolean;
     female?: boolean;
-    disabled?: boolean;
-    badge?: string;
     img?: string;
-  }[];
-  gridColumns?: number;
+    detail?: { icon: string; value: string }[];
+  };
+  tag?: [{ color: string; value: string }];
+  disabled?: boolean;
   noHover?: boolean;
   noAction?: boolean;
-  noDetail?: boolean;
   noBg?: boolean;
-  detailColumnCount?: number;
-  canEditProfile?: boolean;
   history?: boolean;
 }>();
 
 defineEmits<{
   (e: 'editProfile'): void;
-  (e: 'history', id: string): void;
-  (e: 'deleteCard', id: string): void;
-  (
-    e: 'updateCard',
-    action: 'FORM' | 'INFO',
-    id: string,
-    isEdit?: boolean,
-  ): void;
-  (e: 'enterCard', action: 'FORM' | 'INFO', id: string): void;
-  (e: 'toggleStatus', id: string, status: boolean): void;
+  (e: 'history'): void;
+  (e: 'deleteCard'): void;
+  (e: 'updateCard', action: 'FORM' | 'INFO', isEdit?: boolean): void;
+  (e: 'enterCard', action: 'FORM' | 'INFO'): void;
+  (e: 'toggleStatus', status: boolean): void;
 }>();
 </script>
 
 <template>
-  <div
-    class="person-container"
-    :style="`grid-template-columns: repeat( ${
-      gridColumns
-        ? `${gridColumns}, 1fr`
-        : $q.screen.gt.sm
-          ? '4, 1fr'
-          : $q.screen.gt.xs
-            ? '2, 1fr'
-            : '1, 1fr'
-    })`"
+  <AppBox
+    bordered
+    no-padding
+    class="column person-box"
+    :class="{
+      'person-box__disabled': disabled,
+      'person-box__no-hover': noHover,
+      'person-box__no-detail': !data.detail,
+      'person-box__no-bg': noBg,
+    }"
+    @click="$emit('enterCard', 'INFO')"
   >
-    <AppBox
-      bordered
-      class="column person-box"
-      :class="{
-        'person-box__disabled': v.disabled,
-        'person-box__no-hover': noHover,
-        'person-box__no-detail': noDetail,
-        'person-box__no-bg': noBg,
-      }"
-      @click="$emit('enterCard', 'INFO', v.id)"
-      v-for="(v, i) in list"
-      :key="i"
-    >
-      <div class="q-pa-sm column items-center">
-        <!-- kebab menu -->
-        <div class="full-width text-right" v-if="!noAction">
-          <q-btn
-            v-if="history"
-            flat
-            round
-            class="app-text-muted-2"
-            padding="xs"
-            icon="mdi-history"
-            size="sm"
-            @click.stop="$emit('history', v.id)"
-          />
-
-          <q-btn
-            flat
-            round
-            padding="xs"
-            class="app-text-muted-2"
-            icon="mdi-dots-vertical"
-            size="sm"
-            @click.stop
+    <div class="column items-center">
+      <!-- kebab menu -->
+      <div class="full-width flex" v-if="!noAction">
+        <div style="margin-right: auto">
+          <span
+            class="tags"
+            v-for="v in tag"
+            :class="{ [`tags__${v.color}`]: true }"
           >
-            <q-menu class="bordered">
-              <q-list v-close-popup>
-                <q-item
-                  clickable
-                  dense
-                  class="row q-py-sm"
-                  style="white-space: nowrap"
-                  @click="$emit('enterCard', 'INFO', v.id)"
-                >
-                  <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
-                  dense
-                  clickable
-                  class="row q-py-sm"
-                  style="white-space: nowrap"
-                  @click="$emit('updateCard', 'INFO', v.id, true)"
-                  v-close-popup
-                >
-                  <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
-                  dense
-                  clickable
-                  @click="$emit('deleteCard', v.id)"
-                  v-close-popup
-                >
-                  <q-icon
-                    name="mdi-trash-can-outline"
-                    size="xs"
-                    class="col-3 app-text-negative"
-                  />
-                  <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
-                        dense
-                        size="sm"
-                        @click="
-                          $emit('toggleStatus', v.id, v.disabled === false)
-                        "
-                        :model-value="!v.disabled"
-                        val="xs"
-                        padding="none"
-                      >
-                        <div class="q-ml-xs">
-                          {{
-                            !v.disabled
-                              ? $t('switchOnLabel')
-                              : $t('switchOffLabel')
-                          }}
-                        </div>
-                      </q-toggle>
-                    </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </div>
-
-        <!-- profile -->
-        <div style="position: relative">
-          <AppCircle
-            bordered
-            class="avatar"
-            style="border: 2px solid var(--border-color)"
-            :class="{ 'edit-profile': canEditProfile }"
-            @click="
-              () => {
-                if (canEditProfile) $emit('editProfile');
-              }
-            "
-          >
-            <q-img
-              :src="v.img"
-              style="object-fit: cover; width: 100%; height: 100%"
-            />
-            <div class="status-circle">
-              <q-icon
-                :name="`mdi-${v.disabled ? 'close' : 'check'}`"
-                :style="`color:${v.disabled ? 'var(--gray-6)' : 'white'}`"
-              />
-            </div>
-          </AppCircle>
-        </div>
-
-        <!-- name symbol -->
-        <span class="items-center row q-my-sm">
-          {{ v.name }}
-          <Icon
-            class="q-pl-sm"
-            :class="{
-              'symbol-gender': v.male || v.female,
-              'symbol-gender__male': !v.disabled && v.male,
-              'symbol-gender__female': !v.disabled && v.female,
-              'symbol-gender__disable': v.disabled,
-            }"
-            :icon="`material-symbols:${v.male ? 'male' : 'female'}`"
-            width="24px"
-          />
-          <!-- <Icon class="locale q-pl-sm" icon="circle-flags:th" width="24px" /> -->
-        </span>
-        <span
-          v-if="v.badge"
-          class="badge q-px-sm"
-          :class="{
-            'bg-gender': v.male || v.female,
-            'bg-gender__male': !v.disabled && v.male,
-            'bg-gender__female': !v.disabled && v.female,
-            'bg-gender__disable': v.disabled,
-            empty: !v.male && !v.female,
-          }"
-        >
-          {{ v.badge }}
-        </span>
-      </div>
-
-      <!-- detail -->
-      <q-separator v-if="!noDetail" />
-      <div
-        v-if="!noDetail"
-        class="q-pt-sm q-px-md q-pb-md person-detail rounded-b full-width"
-        :class="{
-          'bg-gender': v.male || v.female,
-          'bg-gender__light':
-            (!v.disabled && v.male) || (!v.disabled && v.female),
-          'bg-gender__male': !v.disabled && v.male,
-          'bg-gender__female': !v.disabled && v.female,
-          'bg-gender__disable': v.disabled,
-        }"
-        :style="
-          (detailColumnCount &&
-            `grid-template-columns: repeat(${detailColumnCount}, 1fr);`) ||
-          ''
-        "
-      >
-        <div v-for="(d, j) in v.detail" :key="j">
-          <span class="app-text-muted-2">
-            {{ d.label }}
+            {{ v.value }}
           </span>
-          <span>{{ d.value || '-' }}</span>
+        </div>
+        <q-btn
+          v-if="history"
+          flat
+          round
+          class="app-text-muted-2"
+          padding="xs"
+          icon="mdi-history"
+          size="sm"
+          @click.stop="$emit('history')"
+        />
+
+        <q-btn
+          flat
+          round
+          padding="xs"
+          class="app-text-muted-2"
+          icon="mdi-dots-vertical"
+          size="sm"
+          @click.stop
+        >
+          <q-menu class="bordered">
+            <q-list v-close-popup>
+              <q-item
+                clickable
+                dense
+                class="row q-py-sm"
+                style="white-space: nowrap"
+                @click="$emit('enterCard', 'INFO')"
+              >
+                <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
+                dense
+                clickable
+                class="row q-py-sm"
+                style="white-space: nowrap"
+                @click="$emit('updateCard', 'INFO', true)"
+                v-close-popup
+              >
+                <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
+                dense
+                clickable
+                @click="$emit('deleteCard')"
+                v-close-popup
+              >
+                <q-icon
+                  name="mdi-trash-can-outline"
+                  size="xs"
+                  class="col-3 app-text-negative"
+                />
+                <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
+                      dense
+                      size="sm"
+                      @click="$emit('toggleStatus', disabled === false)"
+                      :model-value="!disabled"
+                      val="xs"
+                      padding="none"
+                    >
+                      <div class="q-ml-xs">
+                        {{
+                          !disabled ? $t('switchOnLabel') : $t('switchOffLabel')
+                        }}
+                      </div>
+                    </q-toggle>
+                  </div>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+      </div>
+
+      <!-- profile -->
+      <AppCircle
+        bordered
+        class="avatar"
+        style="border: 2px solid var(--border-color); overflow: visible"
+        @click="$emit('editProfile')"
+      >
+        <q-img
+          :src="data.img"
+          style="
+            object-fit: cover;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+          "
+        />
+        <div class="avatar__status"></div>
+      </AppCircle>
+
+      <!-- name symbol -->
+      <span class="items-center row">
+        {{ data.name }}
+        <Icon
+          class="q-pl-xs"
+          :class="{
+            'symbol-gender': data.male || data.female,
+            'symbol-gender__male': !disabled && data.male,
+            'symbol-gender__female': !disabled && data.female,
+            'symbol-gender__disable': disabled,
+          }"
+          :icon="`material-symbols:${data.male ? 'male' : 'female'}`"
+          width="24px"
+        />
+      </span>
+      <span style="color: hsl(var(--text-mute)); scale: 0.9">
+        {{ data.code || '-' }}
+      </span>
+    </div>
+
+    <!-- detail -->
+    <q-separator v-if="data.detail" class="q-my-sm q-mx-md" />
+
+    <div class="row" v-for="v in data.detail" :key="v.value" v-if="data.detail">
+      <div class="column items-center" style="width: min-content">
+        <div class="detail-icon">
+          <q-icon size="md" style="scale: 0.5" :name="v.icon" />
         </div>
       </div>
-    </AppBox>
-  </div>
+      <div class="col row items-center full-width">
+        <span class="ellipsis">{{ v.value || '-' }}</span>
+        <q-tooltip
+          anchor="bottom left"
+          self="bottom left"
+          :offset="[10, 20]"
+          :delay="500"
+        >
+          {{ v.value || '-' }}
+        </q-tooltip>
+      </div>
+    </div>
+  </AppBox>
 </template>
 
 <style scoped>
 .person-box {
-  background-color: var(--surface-2);
-  border-radius: var(--radius-2) !important;
+  background-color: var(--surface-1);
   transition: 100ms ease-in-out;
-  padding: 0;
+  padding: var(--size-2);
 
   &.person-box__disabled {
     opacity: 0.4;
@@ -284,6 +242,13 @@ defineEmits<{
     background-color: transparent;
   }
 
+  & .detail-icon {
+    color: hsl(var(--text-mute-2));
+    background-color: hsla(var(--stone-6-hsl) / 0.15);
+    border-radius: 50%;
+    scale: 0.8;
+  }
+
   & .bg-gender {
     color: hsla(var(--_fg));
     background-color: hsl(var(--_bg));
@@ -297,16 +262,6 @@ defineEmits<{
       color: unset;
       background-color: hsla(var(--_bg) / 0.1);
     }
-
-    &.bg-gender__male {
-      --_fg: 0 100 100%;
-      --_bg: var(--gender-male);
-    }
-
-    &.bg-gender__female {
-      --_fg: 0 100 100%;
-      --_bg: var(--gender-female);
-    }
   }
 
   & .symbol-gender {
@@ -325,23 +280,6 @@ defineEmits<{
     }
   }
 
-  & .person-detail {
-    display: grid;
-    flex-grow: 1;
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--size-2);
-    overflow-x: scroll;
-
-    & > * {
-      display: flex;
-      flex-direction: column;
-
-      & > :first-child {
-        font-size: var(--font-size-0);
-      }
-    }
-  }
-
   & .status-circle {
     width: 18px;
     height: 18px;
@@ -360,11 +298,6 @@ defineEmits<{
     --_hover: hsl(var(--gender-male));
     cursor: pointer;
     box-shadow: var(--shadow-2);
-
-    & .person-detail {
-      --_hover: hsl(var(--_bg));
-      box-shadow: inset 0em -5px hsl(var(--_bg));
-    }
   }
 }
 
@@ -374,17 +307,25 @@ defineEmits<{
 }
 
 .avatar {
-  block-size: 7rem;
-}
+  block-size: 5rem;
+  transform: rotate(45deg);
 
-.badge {
-  display: inline-block;
-  border-radius: var(--radius-6);
-  background-color: var(--surface-2);
-  text-wrap: nowrap;
+  & .avatar__status {
+    content: ' ';
+    display: block;
+    block-size: 1rem;
+    aspect-ratio: 1;
+    position: absolute;
+    border-radius: 50%;
+    right: -0.5rem;
+    border: 1px solid var(--border-color);
+    top: calc(50% - 0.5rem);
+    bottom: calc(50% - 0.5rem);
+    background-color: hsla(var(--positive-bg) / 1);
+  }
 
-  &.empty {
-    background-color: var(--surface-tab);
+  & :deep(.q-img) {
+    transform: rotate(-45deg);
   }
 }
 
@@ -396,4 +337,60 @@ defineEmits<{
     opacity: 80%;
   }
 }
+
+.tags {
+  display: inline-block;
+  color: hsla(var(--_color) / 1);
+  background: hsla(var(--_color) / 0.15);
+  border-radius: var(--radius-2);
+  padding-inline: var(--size-2);
+}
+
+.tags__purple {
+  --_color: var(--violet-11-hsl);
+}
+
+.tags__pink {
+  --_color: var(--pink-6-hsl);
+}
+
+.tags__green {
+  --_color: var(--teal-10-hsl);
+}
+
+.tags__cyan {
+  --_color: var(--cyan-7-hsl);
+}
+
+.tags__red {
+  --_color: var(--red-6-hsl);
+}
+
+.tags__yellow {
+  --_color: var(--orange-4-hsl);
+}
+
+.tags__orange {
+  --_color: var(--orange-5-hsl);
+}
+
+.tags__magenta {
+  --_color: var(--pink-8-hsl);
+}
+
+.dark .tags__purple {
+  --_color: var(--violet-10-hsl);
+}
+
+.dark .tags__green {
+  --_color: var(--teal-8-hsl);
+}
+
+.dark .tags__orange {
+  --_color: var(--orange-6-hsl);
+}
+
+.dark .tags__magenta {
+  --_color: var(--pink-7-hsl);
+}
 </style>
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index c3ffdc0a..c00d6310 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from 'vue';
 import { storeToRefs } from 'pinia';
-import useUtilsStore, { dialog } from 'src/stores/utils';
+import useUtilsStore, { dialog, calculateAge } from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
 import useFlowStore from 'src/stores/flow';
 import useUserStore from 'stores/user';
@@ -91,7 +91,7 @@ const statusToggle = ref(true);
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
 const inputSearch = ref('');
 const userId = ref<string>();
-const selectorLabel = ref<string>('');
+const selectorLabel = ref<string>('MESSENGER');
 const hqId = ref<string>();
 const brId = ref<string>();
 const formDialogRef = ref();
@@ -170,7 +170,7 @@ const selectorList = computed(() => [
 
 async function openDialog(
   action?: 'FORM' | 'INFO',
-  idEdit?: string,
+  id?: string,
   isPersonEdit: boolean = false,
 ) {
   if (userStore.userOption.hqOpts.length === 0) {
@@ -181,12 +181,12 @@ async function openDialog(
     await userStore.fetchRoleOption();
   }
 
-  if (idEdit && userData.value) {
-    assignFormData(idEdit);
+  if (id && userData.value) {
+    assignFormData(id);
     isEdit.value = true;
 
     if (formData.value.userType === 'AGENCY') {
-      const result = await userStore.fetchAttachment(idEdit);
+      const result = await userStore.fetchAttachment(id);
 
       if (result) {
         agencyFileList.value = result;
@@ -201,7 +201,7 @@ async function openDialog(
 
     infoDrawerEdit.value = isPersonEdit ? true : false;
     infoDrawer.value = true;
-    const user = userData.value.result.find((x) => x.id === idEdit);
+    const user = userData.value.result.find((x) => x.id === id);
     infoPersonCard.value = user
       ? [
           {
@@ -377,7 +377,7 @@ async function assignFormData(idEdit: string) {
     infoPersonId.value = currentUser.value.id;
 
     formData.value = {
-      branchId: foundUser.branch[0].id,
+      branchId: foundUser.branch[0]?.id,
       provinceId: foundUser.provinceId,
       districtId: foundUser.districtId,
       subDistrictId: foundUser.subDistrictId,
@@ -556,13 +556,21 @@ watch(inputSearch, async () => await fetchUserList());
       <div v-if="!hideStat" class="scroll q-mb-md">
         <div style="display: inline-block">
           <StatCardComponent
-            v-if="sortedUserStats"
+            v-if="typeStats"
             :branch="
-              sortedUserStats.map((v) => ({
-                count: v.count,
-                label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+              Object.entries(typeStats).map(([key, val]) => ({
+                count: val,
+                label: key,
                 icon: 'mdi-account',
-                color: v.isHeadOffice ? 'pink' : 'purple',
+                color:
+                  (
+                    {
+                      USER: 'cyan',
+                      MESSENGER: 'yellow',
+                      DELEGATE: 'red',
+                      AGENCY: 'magenta',
+                    } as const
+                  )[key] || 'pink',
               }))
             "
             :dark="$q.dark.isActive"
@@ -633,51 +641,69 @@ watch(inputSearch, async () => await fetchUserList());
           </q-btn>
         </div>
       </div>
-      <div class="col column scroll q-pa-md">
-        <PersonCard
-          :list="
-            userData?.result
-              .filter((v) => {
-                if (
-                  statusFilter === 'statusACTIVE' &&
-                  v.status === 'INACTIVE'
-                ) {
-                  return false;
-                }
-                if (
-                  statusFilter === 'statusINACTIVE' &&
-                  v.status !== 'INACTIVE'
-                ) {
-                  return false;
-                }
-                return true;
-              })
-              .map((v) => ({
-                id: v.id,
-                img: `${v.profileImageUrl}`,
+      <div class="col scroll">
+        <div class="q-pa-md q-col-gutter-md row">
+          <div
+            v-for="v in userData?.result.filter((v) => {
+              if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
+                return false;
+              }
+
+              if (
+                statusFilter === 'statusINACTIVE' &&
+                v.status !== 'INACTIVE'
+              ) {
+                return false;
+              }
+
+              return true;
+            })"
+            :key="v.id"
+            class="col-3"
+          >
+            <PersonCard
+              :data="{
+                code: v.code,
                 name:
                   $i18n.locale === 'en-US'
-                    ? `${v.firstNameEN} ${v.lastNameEN}`
-                    : `${v.firstName} ${v.lastName}`,
+                    ? `${v.firstNameEN} ${v.lastNameEN}`.trim()
+                    : `${v.firstName} ${v.lastName}`.trim(),
+                img: v.profileImageUrl,
                 male: v.gender === 'male',
                 female: v.gender === 'female',
                 detail: [
-                  { label: $t('personnelCardUserType'), value: $t(v.userType) },
-                  { label: $t('personnelCardTelephone'), value: v.telephoneNo },
                   {
-                    label: $t('personnelCardAge'),
-                    value: userStore.calculateAge(v.birthDate as Date) || '',
+                    icon: 'mdi-phone',
+                    value: v.telephoneNo,
+                  },
+                  {
+                    icon: 'mdi-clock-outline',
+                    value: (v.birthDate && calculateAge(v.birthDate)) || '-',
                   },
                 ],
-                badge: v.code,
-                disabled: v.status === 'INACTIVE',
-              })) || []
-          "
-          @update-card="openDialog"
-          @delete-card="onDelete"
-          @enter-card="openDialog"
-          @toggle-status="toggleStatus"
-        />
+              }"
+              :tag="[
+                {
+                  color:
+                    (
+                      {
+                        USER: 'cyan',
+                        MESSENGER: 'yellow',
+                        DELEGATE: 'red',
+                        AGENCY: 'magenta',
+                      } as const
+                    )[v.userType] || 'pink',
+                  value: $t(v.userType),
+                },
+              ]"
+              :disabled="v.status === 'INACTIVE'"
+              @update-card="(a, b) => openDialog(a, v.id, b)"
+              @delete-card="onDelete(v.id)"
+              @enter-card="(a) => openDialog(a, v.id)"
+              @toggle-status="toggleStatus(v.id)"
+            />
+          </div>
+        </div>
         <template v-if="userData && userData.total === 0 && !inputSearch">
           <div class="col-1 self-end">
             <div class="row">
@@ -807,17 +833,20 @@ watch(inputSearch, async () => await fetchUserList());
             <AppBox class="surface-1" style="padding: 0">
               <PersonCard
                 :can-edit-profile="infoDrawerEdit"
+                :data="{
+                  code: currentUser.code,
+                  name:
+                    $i18n.locale === 'en-US'
+                      ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`.trim()
+                      : `${currentUser.firstName} ${currentUser.lastName}`.trim(),
+                  img: currentUser.profileImageUrl,
+                  male: currentUser.gender === 'male',
+                  female: currentUser.gender === 'female',
+                }"
                 no-hover
                 no-action
-                no-detail
                 no-bg
-                :list="infoPersonCard"
-                :gridColumns="1"
-                @edit-profile="
-                  () => {
-                    inputFile.click();
-                  }
-                "
+                @edit-profile="inputFile.click()"
               />
             </AppBox>
           </div>

From 1b039fd93500a6d3995ae49105368292df649f07 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 16:33:06 +0700
Subject: [PATCH 084/158] chore: comment error to prev commit

---
 src/pages/03_customer-management/MainPage.vue | 96 +++++++++----------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 7ef61706..eafb7159 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1810,40 +1810,40 @@ watch([inputSearch, currentStatus], async () => {
                   class="col column justify-between q-px-md q-pt-md scroll"
                   v-if="listEmployee.length !== 0"
                 >
-                  <PersonCard
-                    history
-                    :list="
-                      listEmployee.map((v: Employee) => ({
-                        disabled: v.status === 'INACTIVE',
-                        img: v.profileImageUrl,
-                        id: v.id,
-                        name:
-                          $i18n.locale === 'en-US'
-                            ? `${v.firstNameEN} ${v.lastNameEN}`
-                            : `${v.firstName} ${v.lastName}`,
-                        male: v.gender === 'male',
-                        female: v.gender === 'female',
-                        badge: v.code,
-                        detail: [
-                          {
-                            label: $t('personnelCardNationality'),
-                            value: v.nationality,
-                          },
-                          {
-                            label: $t('personnelCardAge'),
-                            value: calculateAge(v.dateOfBirth),
-                          },
-                        ],
-                      }))
-                    "
-                    @history="openHistory"
-                    @update-card="openDialogInputForm"
-                    @enter-card="openDialogInputForm"
-                    @delete-card="onDelete"
-                    @toggle-status="
-                      (id, status) => toggleStatusEmployee(id, status)
-                    "
-                  />
+                  <!-- <PersonCard -->
+                  <!--   history -->
+                  <!--   :list=" -->
+                  <!--     listEmployee.map((v: Employee) => ({ -->
+                  <!--       disabled: v.status === 'INACTIVE', -->
+                  <!--       img: v.profileImageUrl, -->
+                  <!--       id: v.id, -->
+                  <!--       name: -->
+                  <!--         $i18n.locale === 'en-US' -->
+                  <!--           ? `${v.firstNameEN} ${v.lastNameEN}` -->
+                  <!--           : `${v.firstName} ${v.lastName}`, -->
+                  <!--       male: v.gender === 'male', -->
+                  <!--       female: v.gender === 'female', -->
+                  <!--       badge: v.code, -->
+                  <!--       detail: [ -->
+                  <!--         { -->
+                  <!--           label: $t('personnelCardNationality'), -->
+                  <!--           value: v.nationality, -->
+                  <!--         }, -->
+                  <!--         { -->
+                  <!--           label: $t('personnelCardAge'), -->
+                  <!--           value: calculateAge(v.dateOfBirth), -->
+                  <!--         }, -->
+                  <!--       ], -->
+                  <!--     })) -->
+                  <!--   " -->
+                  <!--   @history="openHistory" -->
+                  <!--   @update-card="openDialogInputForm" -->
+                  <!--   @enter-card="openDialogInputForm" -->
+                  <!--   @delete-card="onDelete" -->
+                  <!--   @toggle-status=" -->
+                  <!--     (id, status) => toggleStatusEmployee(id, status) -->
+                  <!--   " -->
+                  <!-- /> -->
                 </div>
                 <div
                   v-if="listEmployee.length !== 0"
@@ -3063,20 +3063,20 @@ watch([inputSearch, currentStatus], async () => {
       <template #person-card>
         <div class="q-ma-md">
           <AppBox class="surface-1" style="padding: 0">
-            <PersonCard
-              :can-edit-profile="infoDrawerEmployeeEdit"
-              no-hover
-              no-action
-              no-detail
-              no-bg
-              :list="infoEmployeePersonCard ? infoEmployeePersonCard : []"
-              :gridColumns="1"
-              @edit-profile="
-                () => {
-                  inputFile.click();
-                }
-              "
-            />
+            <!-- <PersonCard -->
+            <!--   :can-edit-profile="infoDrawerEmployeeEdit" -->
+            <!--   no-hover -->
+            <!--   no-action -->
+            <!--   no-detail -->
+            <!--   no-bg -->
+            <!--   :list="infoEmployeePersonCard ? infoEmployeePersonCard : []" -->
+            <!--   :gridColumns="1" -->
+            <!--   @edit-profile=" -->
+            <!--     () => { -->
+            <!--       inputFile.click(); -->
+            <!--     } -->
+            <!--   " -->
+            <!-- /> -->
           </AppBox>
         </div>
       </template>

From 70f3959c080bddafcb76e00c70f1c95cdb51707e Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 17:35:40 +0700
Subject: [PATCH 085/158] refactor: employer branch card

---
 .../BranchCardCustomer.vue                    | 259 ++++++++++--------
 .../CustomerInfoComponent.vue                 |  23 +-
 2 files changed, 152 insertions(+), 130 deletions(-)

diff --git a/src/components/03_customer-management/BranchCardCustomer.vue b/src/components/03_customer-management/BranchCardCustomer.vue
index eba693ae..5ffa6139 100644
--- a/src/components/03_customer-management/BranchCardCustomer.vue
+++ b/src/components/03_customer-management/BranchCardCustomer.vue
@@ -1,30 +1,27 @@
-<script setup lang="ts">
-import AppBox from 'components/app/AppBox.vue';
-
-import { CustomerBranch } from 'src/stores/customer/types';
-
-withDefaults(
-  defineProps<{
-    inactive?: boolean;
-    color?: 'none' | 'CORP' | 'PERS';
-
-    metadata?: unknown;
-    badgeField?: string[];
-    fieldSelected?: string[];
-    footer?: boolean;
-
-    data: {
-      customerBranchFormTab: number;
-      branchName: string;
-      address: string;
-      telephone: string;
-      businessTypePure: string;
-      status: string;
-      totalEmployee: number;
-    };
-  }>(),
-  {},
-);
+<script lang="ts" setup>
+defineProps<{
+  inactive?: boolean;
+  color?: 'none' | 'pers' | 'corp';
+  data: {
+    customerBranchFormTab: number;
+    branchName: string;
+    address: string;
+    telephone: string;
+    businessTypePure: string;
+    totalEmployee: number;
+  };
+  metadata?: unknown;
+  badgeField?: string[];
+  fieldSelected?: (
+    | 'customerBranchFormTab'
+    | 'branchName'
+    | 'address'
+    | 'telephone'
+    | 'businessTypePure'
+    | 'totalEmployee'
+  )[];
+  footer?: boolean;
+}>();
 </script>
 
 <template>
@@ -34,114 +31,135 @@ withDefaults(
       'branch-card__dark': $q.dark.isActive,
       'branch-card__inactive': inactive,
       'branch-card__none':
-        color !== 'CORP' && color !== 'PERS' && (!color || color === 'none'),
-      'branch-card__CORP': color === 'CORP',
-      'branch-card__PERS': color === 'PERS',
+        color !== 'pers' && color !== 'corp' && (!color || color === 'none'),
+      'branch-card__pers': color === 'pers',
+      'branch-card__corp': color === 'corp',
     }"
+    @click="$emit('open')"
   >
-    <div
-      class="branch-card__row"
-      :class="{
-        'branch-card__header': i === 0,
-        'branch-card__footer': footer && i === Object.keys(data).length - 1,
-      }"
-      v-for="([k, v], i) in Object.entries(data).filter(
-        ([key], idx) =>
-          idx === 0 || (fieldSelected ? fieldSelected.includes(key) : true),
-      )"
-      :key="k"
-    >
-      <div class="branch-card__label">
-        <span>{{ $t(k) }}</span>
-      </div>
-      <div
-        class="branch-card__value"
-        :class="{ 'branch-card__badge': badgeField?.includes(k) }"
-        style="justify-content: space-between"
-      >
-        <span>{{ v }}</span>
-        <q-btn
-          @click.stop="$emit('view-detail', metadata ?? data)"
-          :label="$t('viewDetail')"
-          rounded
-          outline
-          dense
-          no-caps
-          class="branch-card__view-detail q-px-md text-caption"
-          v-if="i === 0"
+    <div class="branch-card__header">
+      <div class="branch-card__icon">
+        <q-icon
+          size="md"
+          style="scale: 0.8"
+          name="mdi-office-building-outline"
         />
       </div>
+      <div class="branch-card__name">
+        <b>{{ data.branchName }}</b>
+        <small class="branch-card__code">{{ data.branchName }}</small>
+      </div>
+
+      <div class="branch-card__action">
+        <q-btn
+          icon="mdi-eye-outline"
+          size="sm"
+          dense
+          round
+          flat
+          @click.stop="$emit('viewDetail')"
+        >
+          <slot name="action" />
+        </q-btn>
+      </div>
+    </div>
+    <div
+      style="
+        display: block;
+        width: 100%;
+        height: 1px;
+        background: hsla(0 0% 0% / 0.1);
+        margin-bottom: var(--size-2);
+      "
+    />
+    <div
+      v-for="key in fieldSelected?.sort() || [
+        'customerBranchFormTab',
+        'branchName',
+        'address',
+        'telephone',
+        'businessTypePure',
+        'totalEmployee',
+      ]"
+      class="branch-card__data"
+    >
+      <div>{{ $t(key) }}</div>
+      <div>{{ data[key as keyof typeof data] }}</div>
     </div>
   </div>
 </template>
 
 <style scoped>
 .branch-card {
-  --_branch-card-row-fg: 0 0% 100%;
-  --_branch-card-row-bg: var(--blue-5-hsl);
-  --_branch-badge-fg: var(--green-8-hsl);
-  --_branch-badge-bg: var(--green-6-hsl);
+  --_branch-card-fg: 0 0% 100%;
+  --_branch-card-bg: var(--blue-5-hsl);
+  --_branch-status-color: var(--green-6-hsl);
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  box-shadow: var(--shadow-2);
+  padding: var(--size-3);
 
-  & > .branch-card__row {
+  & .branch-card__header {
+    display: flex;
+    margin-bottom: var(--size-2);
+
+    & .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);
+      }
+    }
+
+    & .branch-card__name {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      padding-inline: var(--size-2);
+
+      & .branch-card__code {
+        color: hsla(var(--text-mute) / 1);
+      }
+    }
+
+    & .branch-card__action {
+      margin-left: auto;
+    }
+  }
+  & .branch-card__data {
     display: flex;
-    flex-wrap: nowrap;
-    padding-inline: var(--size-4);
     padding-block: var(--size-2);
 
-    &:last-child {
-      flex-grow: 1;
-    }
-
-    &:nth-child(2n + 1) {
-      background-color: hsla(var(--_branch-card-row-bg) / 0.05);
-    }
-
-    &.branch-card__header,
-    &.branch-card__footer {
-      color: hsl(var(--_branch-card-row-fg));
-      background-color: hsl(var(--_branch-card-row-bg));
-
-      &:deep(*) {
-        font-weight: 600;
-      }
-    }
-
-    &.branch-card__header > * {
-      display: flex;
-      align-items: center;
-    }
-
-    & > .branch-card__label {
-      min-width: 120px;
-      width: 30%;
-    }
-
-    &:not(.branch-card__header) .branch-card__label {
-      color: hsl(var(--stone-6-hsl));
-    }
-
-    & > .branch-card__value {
-      width: 70%;
-
-      &.branch-card__badge > span {
-        display: inline-block;
-        border-radius: 999rem;
-        padding-inline: var(--size-2);
-        color: hsl(var(--_branch-badge-fg));
-        background-color: hsla(var(--_branch-badge-bg) / 0.1);
-      }
+    & > :first-child {
+      color: hsla(var(--text-mute) / 1);
+      width: 0%;
+      min-width: 40%;
     }
   }
 
   &.branch-card__none {
-    --_branch-card-row-bg: var(--gray-3-hsl);
+    --_branch-card-bg: var(--gray-3-hsl);
 
     &.branch-card__dark {
-      --_branch-card-row-bg: var(--gray-9-hsl);
+      --_branch-card-bg: var(--gray-9-hsl);
     }
 
     &:not(.branch-card__dark) .branch-card__header {
@@ -153,18 +171,23 @@ withDefaults(
     }
   }
 
-  &.branch-card__CORP {
-    --_branch-card-row-bg: var(--purple-11-hsl);
+  &.branch-card__pers {
+    --_branch-card-bg: var(--pink-6-hsl);
   }
 
-  &.branch-card__PERS {
-    --_branch-card-row-bg: var(--teal-9-hsl);
+  &.branch-card__corp {
+    --_branch-card-bg: var(--violet-11-hsl);
+
+    &.branch-card__dark {
+      --_branch-card-bg: var(--violet-10-hsl);
+    }
   }
 
   &.branch-card__inactive {
-    --_branch-badge-fg: var(--red-4-hsl);
+    --_branch-status-color: var(--red-4-hsl);
     --_branch-badge-bg: var(--red-4-hsl);
-    filter: grayscale(40%);
+    filter: grayscale(1);
+    background-color: hsl(var(--gray-6-hsl) / 0.1);
     opacity: 0.5;
   }
 }
diff --git a/src/components/03_customer-management/CustomerInfoComponent.vue b/src/components/03_customer-management/CustomerInfoComponent.vue
index 7189be2c..5b6a822a 100644
--- a/src/components/03_customer-management/CustomerInfoComponent.vue
+++ b/src/components/03_customer-management/CustomerInfoComponent.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, watch } from 'vue';
 
 import useCustomerStore from 'src/stores/customer';
 import useFlowStore from 'src/stores/flow';
+import useOptionStore from 'src/stores/options';
 
 import { Status } from 'src/stores/types';
 import { CustomerBranch, CustomerType } from 'src/stores/customer/types';
@@ -45,7 +46,7 @@ const prop = withDefaults(
   },
 );
 
-const emit = defineEmits<{
+defineEmits<{
   (e: 'back'): void;
   (e: 'viewDetail', branch: CustomerBranch, index: number): void;
   (e: 'dialog'): void;
@@ -185,31 +186,29 @@ watch(currentStatus, async () => {
       </div>
     </div>
     <div
-      class="row q-pa-lg q-col-gutter-xl"
+      class="row q-pa-md q-col-gutter-md"
       :class="{ 'justify-center': totalBranch === 0 }"
       style="min-height: 350px"
     >
       <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />
 
-      <div
-        v-for="(br, i) in branch?.sort((a, b) => a.branchNo - b.branchNo)"
-        :key="i"
-        class="col-4"
-      >
+      <div v-for="(br, i) in branch" :key="i" class="col-4">
         <BranchCardCustomer
           :inactive="br.status === 'INACTIVE'"
-          :color="customerType"
+          :color="customerType === 'CORP' ? 'corp' : 'pers'"
           :badgeField="['status']"
           :data="{
             customerBranchFormTab: br.branchNo,
             branchName: br.name,
-            address: br.address,
+            address:
+              $i18n.locale === 'en-US'
+                ? `${br.addressEN || ''} ${br.subDistrict?.nameEN || ''} ${br.district?.nameEN || ''} ${br.province?.nameEN || ''}`
+                : `${br.address || ''} ${br.subDistrict?.name || ''} ${br.district?.name || ''} ${br.province?.name || ''}`,
             telephone: br.telephoneNo,
-            businessTypePure: br.bussinessType,
-            status: 'ดำเนินการอยู่',
+            businessTypePure: useOptionStore().mapOption(br.bussinessType),
             totalEmployee: br._count?.employee,
           }"
-          @view-detail="emit('viewDetail', br, i)"
+          @view-detail="$emit('viewDetail', br, i)"
         />
       </div>
     </div>

From 701d82e7a70c8c7d10de50421b7a29e6cbac8412 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Jul 2024 11:01:40 +0000
Subject: [PATCH 086/158] fix: new 02 ui & layout

---
 .../02_personnel-management/MainPage.vue      | 386 +++++++++++++-----
 src/stores/user/types.ts                      |   1 +
 2 files changed, 296 insertions(+), 91 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index c00d6310..d6cc1641 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -76,6 +76,9 @@ const defaultFormData = {
   checkpointEN: null,
 };
 
+const modeView = ref(true);
+const fieldSelected = ref();
+const fieldDisplay = ref();
 const hideStat = ref(false);
 const userCode = ref<string>();
 const currentUser = ref<User>();
@@ -91,7 +94,7 @@ const statusToggle = ref(true);
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
 const inputSearch = ref('');
 const userId = ref<string>();
-const selectorLabel = ref<string>('MESSENGER');
+const selectorLabel = ref<string>('ALL');
 const hqId = ref<string>();
 const brId = ref<string>();
 const formDialogRef = ref();
@@ -459,11 +462,11 @@ onMounted(async () => {
     : '';
   typeStats.value = await userStore.typeStats();
 
-  const firstTypeIncludeUser = Object.entries(typeStats.value || {}).find(
-    (v) => v[1] > 0,
-  );
+  // const firstTypeIncludeUser = Object.entries(typeStats.value || {}).find(
+  //   (v) => v[1] > 0,
+  // );
 
-  firstTypeIncludeUser && (selectorLabel.value = firstTypeIncludeUser[0]);
+  // firstTypeIncludeUser && (selectorLabel.value = firstTypeIncludeUser[0]);
 
   const res = await branchStore.userStats(formData.value.userType);
   if (res) {
@@ -513,7 +516,7 @@ async function fetchUserList() {
     pageSize: pageSize.value,
     page: currentPage.value,
     query: !!inputSearch.value ? inputSearch.value : undefined,
-    userType: selectorLabel.value ?? undefined,
+    userType: selectorLabel.value === 'ALL' ? undefined : selectorLabel.value,
   });
 }
 
@@ -538,8 +541,23 @@ watch(inputSearch, async () => await fetchUserList());
   <div class="column full-height no-wrap">
     <div class="text-body-2 q-mb-xs flex items-center">
       {{ $t('personnelStatTitle') }}
+      <q-badge
+        v-if="typeStats"
+        rounded
+        class="q-ml-sm"
+        style="
+          background-color: hsla(var(--info-bg) / 0.15);
+          color: hsl(var(--info-bg));
+        "
+      >
+        {{
+          selectorLabel === 'ALL'
+            ? Object.values(typeStats).reduce((acc, val) => acc + val, 0)
+            : typeStats[selectorLabel]
+        }}
+      </q-badge>
       <q-btn
-        class="q-ml-xs"
+        class="q-ml-sm"
         icon="mdi-pin"
         color="primary"
         size="sm"
@@ -556,22 +574,39 @@ watch(inputSearch, async () => await fetchUserList());
       <div v-if="!hideStat" class="scroll q-mb-md">
         <div style="display: inline-block">
           <StatCardComponent
-            v-if="typeStats"
+            v-if="typeStats && userData?.result"
+            labelI18n
             :branch="
-              Object.entries(typeStats).map(([key, val]) => ({
-                count: val,
-                label: key,
-                icon: 'mdi-account',
-                color:
-                  (
+              selectorLabel === 'ALL'
+                ? Object.entries(typeStats).map(([key, val]) => ({
+                    count: val,
+                    label: key,
+                    icon: 'mdi-account',
+                    color:
+                      (
+                        {
+                          USER: 'cyan',
+                          MESSENGER: 'yellow',
+                          DELEGATE: 'red',
+                          AGENCY: 'magenta',
+                        } as const
+                      )[key] || 'pink',
+                  }))
+                : [
                     {
-                      USER: 'cyan',
-                      MESSENGER: 'yellow',
-                      DELEGATE: 'red',
-                      AGENCY: 'magenta',
-                    } as const
-                  )[key] || 'pink',
-              }))
+                      label: selectorLabel,
+                      count: typeStats[selectorLabel],
+                      icon: 'mdi-account',
+                      color:
+                        selectorLabel === 'USER'
+                          ? 'cyan'
+                          : selectorLabel === 'MESSENGER'
+                            ? 'yellow'
+                            : selectorLabel === 'DELEGATE'
+                              ? 'red'
+                              : 'magenta',
+                    },
+                  ]
             "
             :dark="$q.dark.isActive"
           />
@@ -584,65 +619,234 @@ watch(inputSearch, async () => await fetchUserList());
       class="col surface-1 rounded justify-between column no-wrap"
       style="overflow: hidden"
     >
-      <div class="surface-2 bordered-b q-px-md q-py-sm">
-        <div class="row justify-end" style="gap: var(--size-2)">
-          <q-input
-            for="input-search"
-            style="width: 250px"
-            outlined
+      <div class="column">
+        <div
+          class="row surface-3 bordered-b justify-between full-width items-center surface-1"
+          style="z-index: 1"
+        >
+          <div class="row q-py-sm q-px-md justify-between full-width">
+            <q-input
+              for="input-search"
+              outlined
+              dense
+              style="width: 250px"
+              :label="$t('search')"
+              class="q-mr-md"
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              v-model="inputSearch"
+              debounce="200"
+            >
+              <template #prepend>
+                <q-icon name="mdi-magnify" />
+              </template>
+            </q-input>
+
+            <div class="row">
+              <q-select
+                v-model="statusFilter"
+                outlined
+                dense
+                option-value="value"
+                option-label="label"
+                class="q-pr-md"
+                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"
+                for="select-field"
+                :options="[
+                  { label: 'กันว่าง 1', value: 'กันว่าง 1' },
+                  { label: 'กันว่าง 2', value: 'กันว่าง 2' },
+                ]"
+                :display-value="$t('displayField')"
+                v-model="fieldSelected"
+                option-label="label"
+                option-value="value"
+                map-options
+                emit-value
+                outlined
+                multiple
+                dense
+              />
+
+              <q-btn-toggle
+                id="btn-mode"
+                v-model="modeView"
+                dense
+                class="no-shadow bordered rounded surface-1 q-ml-md"
+                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+                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: $q.dark.isActive
+                        ? modeView
+                          ? '#C9D3DB '
+                          : '#787B7C'
+                        : 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: $q.dark.isActive
+                        ? modeView === false
+                          ? '#C9D3DB'
+                          : '#787B7C'
+                        : modeView === false
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+              </q-btn-toggle>
+            </div>
+          </div>
+        </div>
+
+        <div class="surface-2 bordered-b q-px-md">
+          <q-tabs
             dense
-            :label="$t('search')"
-            debounce="500"
-            v-model="inputSearch"
-          ></q-input>
-          <q-btn
-            id="btn-filter"
-            icon="mdi-tune-vertical-variant"
-            size="sm"
-            class="bordered rounded surface-1"
-            :class="{ 'app-text-info': statusFilter !== 'all' }"
-            unelevated
+            v-model="selectorLabel"
+            align="left"
+            class="full-height"
+            active-color="info"
           >
-            <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-tab
+              name="employer"
+              @click="
+                async () => {
+                  currentPage = 1;
+                  inputSearch = '';
+                  selectorLabel = 'ALL';
+                  statusFilter = 'all';
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  selectorLabel === 'ALL' ? 'text-bold' : 'app-text-muted'
+                "
+              >
+                {{ $t('all') }}
+              </div>
+            </q-tab>
+            <q-tab
+              name="employee"
+              @click="
+                async () => {
+                  selectorLabel = 'USER';
+                  statusFilter = 'all';
+                  currentPage = 1;
+                  inputSearch = '';
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  selectorLabel === 'USER' ? 'text-bold' : 'app-text-muted'
+                "
+              >
+                {{ $t('USER') }}
+              </div>
+            </q-tab>
+            <q-tab
+              name="MESSENGER"
+              @click="
+                async () => {
+                  selectorLabel = 'MESSENGER';
+                  statusFilter = 'all';
+                  currentPage = 1;
+                  inputSearch = '';
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  selectorLabel === 'MESSENGER' ? 'text-bold' : 'app-text-muted'
+                "
+              >
+                {{ $t('MESSENGER') }}
+              </div>
+            </q-tab>
+            <q-tab
+              name="DELEGATE"
+              @click="
+                async () => {
+                  selectorLabel = 'DELEGATE';
+                  statusFilter = 'all';
+                  currentPage = 1;
+                  inputSearch = '';
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  selectorLabel === 'DELEGATE' ? 'text-bold' : 'app-text-muted'
+                "
+              >
+                {{ $t('DELEGATE') }}
+              </div>
+            </q-tab>
+            <q-tab
+              name="AGENCY"
+              @click="
+                async () => {
+                  selectorLabel = 'AGENCY';
+                  statusFilter = 'all';
+                  currentPage = 1;
+                  inputSearch = '';
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  selectorLabel === 'AGENCY' ? 'text-bold' : 'app-text-muted'
+                "
+              >
+                {{ $t('AGENCY') }}
+              </div>
+            </q-tab>
+          </q-tabs>
         </div>
       </div>
-      <div class="col scroll">
-        <div class="q-pa-md q-col-gutter-md row">
+
+      <div class="col scroll column">
+        <div
+          v-if="userData && userData.total > 0 && !inputSearch"
+          class="q-pa-md q-col-gutter-md row"
+        >
           <div
             v-for="v in userData?.result.filter((v) => {
               if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
@@ -704,31 +908,31 @@ watch(inputSearch, async () => await fetchUserList());
             />
           </div>
         </div>
-        <template v-if="userData && userData.total === 0 && !inputSearch">
-          <div class="col-1 self-end">
-            <div class="row">
-              <TooltipComponent
-                title="personnelTooltipTitle"
-                caption="personnelTooltipCaption"
-                imgSrc="personnel-table-"
-              />
-            </div>
+
+        <div
+          v-if="userData && userData.total === 0 && !inputSearch"
+          class="col column"
+        >
+          <div class="flex justify-end q-pa-md">
+            <TooltipComponent
+              title="personnelTooltipTitle"
+              caption="personnelTooltipCaption"
+              imgSrc="personnel-table-"
+            />
           </div>
-          <div
-            class="col self-center"
-            style="display: flex; flex-grow: 1; align-items: center"
-          >
+
+          <div class="col items-center flex justify-center">
             <AddButton
               :label="'personnelAdd'"
               :cyanOn="true"
               @trigger="openDialog('FORM')"
             />
           </div>
-        </template>
+        </div>
 
         <div
           v-if="userData?.total === 0 && !!inputSearch"
-          class="row full-width items-center justify-center"
+          class="row col full-width items-center justify-center"
           style="min-height: 250px"
         >
           <NoData :not-found="!!inputSearch" />
diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts
index 754e7d84..cbc45b57 100644
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@@ -97,6 +97,7 @@ export type UserAttachmentDelete = {
 };
 
 export type UserTypeStats = {
+  [x: string]: number;
   USER: number;
   MESSENGER: number;
   DELEGATE: number;

From 7473275bc4b7570aaafface3efb11f3cd49b5c7f Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Jul 2024 11:01:53 +0000
Subject: [PATCH 087/158] fix: 03 form value

---
 src/components/03_customer-management/FormBusiness.vue | 4 ++--
 src/pages/03_customer-management/MainPage.vue          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/03_customer-management/FormBusiness.vue b/src/components/03_customer-management/FormBusiness.vue
index 4fef5d72..9e91ac03 100644
--- a/src/components/03_customer-management/FormBusiness.vue
+++ b/src/components/03_customer-management/FormBusiness.vue
@@ -68,7 +68,7 @@ onMounted(async () => {
       <q-select
         id="select-business-type"
         emit-value
-        option-value="label"
+        option-value="value"
         option-label="label"
         map-options
         :dense="dense"
@@ -95,7 +95,7 @@ onMounted(async () => {
       <q-select
         id="select-job-position"
         emit-value
-        option-value="label"
+        option-value="value"
         option-label="label"
         map-options
         :dense="dense"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index eafb7159..19bba46f 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1361,7 +1361,7 @@ watch([inputSearch, currentStatus], async () => {
           }}
         </q-badge>
         <q-btn
-          class="q-ml-lg"
+          class="q-ml-sm"
           icon="mdi-pin"
           color="primary"
           size="sm"

From e87dd523fff55448e3a940a65b18f5796277df93 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Jul 2024 11:10:46 +0000
Subject: [PATCH 088/158] fix: 02 tab selected

---
 src/pages/02_personnel-management/MainPage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index d6cc1641..70d769b7 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -734,7 +734,7 @@ watch(inputSearch, async () => await fetchUserList());
             active-color="info"
           >
             <q-tab
-              name="employer"
+              name="ALL"
               @click="
                 async () => {
                   currentPage = 1;
@@ -755,7 +755,7 @@ watch(inputSearch, async () => await fetchUserList());
               </div>
             </q-tab>
             <q-tab
-              name="employee"
+              name="USER"
               @click="
                 async () => {
                   selectorLabel = 'USER';

From cd643da089a1fdb71e6784a745edb763e251fa1d Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 09:09:21 +0700
Subject: [PATCH 089/158] =?UTF-8?q?refactor:=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/customer/types.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/stores/customer/types.ts b/src/stores/customer/types.ts
index bbc1ec58..c7e46fbf 100644
--- a/src/stores/customer/types.ts
+++ b/src/stores/customer/types.ts
@@ -4,6 +4,7 @@ import { Status } from '../types';
 export type CustomerType = 'CORP' | 'PERS';
 
 export type Customer = {
+  registeredBranchId: string;
   imageUrl: string;
   id: string;
   code: string;

From 23e2469cd22f0e4090274475ca65c939b5042867 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 09:09:55 +0700
Subject: [PATCH 090/158] =?UTF-8?q?refactor:=20=E0=B8=94=E0=B8=B1=E0=B8=81?=
 =?UTF-8?q?=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B8=A1=E0=B8=B5=E0=B8=A3=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/PersonCard.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 6983b07e..6e5409be 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -153,22 +153,36 @@ defineEmits<{
         </q-btn>
       </div>
 
+     
       <!-- profile -->
+    
       <AppCircle
         bordered
         class="avatar"
         style="border: 2px solid var(--border-color); overflow: visible"
         @click="$emit('editProfile')"
       >
+
+       
         <q-img
-          :src="data.img"
+          :src="data.img ?? '/no-profile.png'"
           style="
             object-fit: cover;
             width: 100%;
             height: 100%;
             border-radius: 50%;
           "
-        />
+        >
+   <template #error>
+          <div
+            style="background: none"
+            class="full-width full-height items-center justify-center flex"
+          >
+            <q-img src="/no-profile.png" width="5rem" />
+          </div>
+        </template>
+
+        </q-img>
         <div class="avatar__status"></div>
       </AppCircle>
 

From 4ccb2e933ec7e0a4257f632ac0f49340ecab3639 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 09:10:12 +0700
Subject: [PATCH 091/158] =?UTF-8?q?fix:=20=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9,=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
 =?UTF-8?q?=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B8=AB=E0=B8=A1=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 8a92815e..d6cb0228 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -913,6 +913,7 @@ watch(locale, () => {
                     <q-table
                       flat
                       bordered
+                       :rows-per-page-options="[0]"
                       :rows="
                         treeData
                           .flatMap((v) => [v, ...v.branch])

From a1fc39cbab09caa42319ed69a49deacdacd151f2 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 8 Jul 2024 10:44:36 +0700
Subject: [PATCH 092/158] fix: drawer

---
 src/components/DrawerComponent.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 5795ffec..cd7585a0 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -103,6 +103,7 @@ function branchSetting() {}
     :breakpoint="599"
     class="column justify-between no-wrap"
     :width="mini ? 80 : 256"
+    show-if-above
   >
     <!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
     <div class="scroll" style="overflow-x: hidden; scrollbar-gutter: stable">

From f5a63f86f20f1c31a964de624e21ccc59fc889cf Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 11:04:17 +0700
Subject: [PATCH 093/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=20key=20=E0=B9=83=E0=B8=AB=E0=B9=89=20btn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/PersonCard.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 6e5409be..11bfdb25 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -68,6 +68,7 @@ defineEmits<{
         />
 
         <q-btn
+        :key="data.code"
           flat
           round
           padding="xs"

From 769106d8d377ab61f3174ebf640a7579895c2903 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 11:04:41 +0700
Subject: [PATCH 094/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/en-US/employer-dialog.ts | 2 ++
 src/i18n/th-th/employer-dialog.ts | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/src/i18n/en-US/employer-dialog.ts b/src/i18n/en-US/employer-dialog.ts
index 0d84df27..31d08d86 100644
--- a/src/i18n/en-US/employer-dialog.ts
+++ b/src/i18n/en-US/employer-dialog.ts
@@ -6,4 +6,6 @@ export default {
   corporationEnglish: 'English company name',
 
   companyOwnerName: 'Company Owner Name',
+
+  corporation:'Corporation'
 };
diff --git a/src/i18n/th-th/employer-dialog.ts b/src/i18n/th-th/employer-dialog.ts
index 798aeede..e2f28c78 100644
--- a/src/i18n/th-th/employer-dialog.ts
+++ b/src/i18n/th-th/employer-dialog.ts
@@ -6,4 +6,7 @@ export default {
   corporationEnglish: 'ชื่อ บริษัท ภาษาอังกฤษ',
 
   companyOwnerName: 'ชื่อเจ้าของบริษัท',
+
+  corporation:'ชื่อ บริษัท/นิติบุคคล'
+
 };

From ff7b4d1f7686dd3b287d22a99ffe397cb5a750f4 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 11:05:07 +0700
Subject: [PATCH 095/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=20list=20=20=E0=B8=82=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=99=E0=B8=B2=E0=B8=A2=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 562 ++++++++++++++++--
 1 file changed, 517 insertions(+), 45 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 19bba46f..4dd04358 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch, toRaw } from 'vue';
+import type { QTableProps } from 'quasar';
 
 import useCustomerStore from 'src/stores/customer';
 import useEmployeeStore from 'src/stores/employee';
@@ -67,6 +68,46 @@ const useMyBranch = useMyBranchStore();
 
 const { fetchListOptionBranch } = useMyBranch;
 
+
+const columns = [
+  {
+    name: 'customerName',
+    align: 'left',
+    label: 'corporation',
+    field: 'customerName',
+    sortable: true,
+  },
+  {
+    name: 'customerType',
+    align: 'left',
+    label: 'type',
+    field: 'customerType',
+    sortable: true,
+  },
+  {
+    name: 'personName',
+    align: 'left',
+    label: 'name',
+    field: 'personName',
+  },
+
+ 
+  {
+    name: 'telephoneNo',
+    align: 'left',
+    label: 'telephone',
+    field: 'branch[0].telephoneNo',
+  },
+
+   {
+    name: 'branchEmail',
+    align: 'left',
+    label: 'formDialogInputEmail',
+    field: 'branch[0].email',
+  },
+] satisfies QTableProps['columns'];
+
+
 const {
   create,
   getStatsCustomer,
@@ -130,8 +171,58 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
   value: 'all',
 });
 
-const fieldSelected = ref();
-const fieldDisplay = ref();
+
+
+
+
+const fieldDisplay = ref<
+ {
+   label: string;
+   value: string;
+  }[]
+>([
+
+{
+  label: t('corporation'),
+  value: 'customerName',
+},
+
+{
+  label: t('type'),
+  value: 'customerType',
+},
+
+{
+  label: t('name'),
+  value: 'personName',
+},
+
+{
+  label: t('telephone'),
+  value: 'telephoneNo',
+},
+
+{
+  label: t('formDialogInputEmail'),
+  value: 'branchEmail',
+},
+
+ 
+]);
+const fieldSelected = ref<
+  (
+   | 'customerName'
+    | 'customerType'
+    | 'personName'
+    | 'telephoneNo'
+    | 'branchEmail'
+  )[]
+>([  'customerName',
+  'customerType',
+  'personName',
+  'telephoneNo',
+  'branchEmail']);
+
 const splitterModel = ref(15);
 const modeView = ref(true);
 const currentEmployee = ref<Employee | undefined>();
@@ -774,6 +865,8 @@ async function toggleStatusEmployee(id: string, status: boolean) {
 }
 
 async function toggleStatusCustomer(id: string, status: boolean) {
+ 
+  
   await editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' });
 
   await fetchListCustomer();
@@ -1221,7 +1314,6 @@ watch(locale, () => {
 
 watch(fieldSelectedCustomer, async () => {
   let resultList;
-  console.log('asd');
 
   if (fieldSelectedCustomer.value.value === 'all') {
     resultList = await fetchList({ includeBranch: true });
@@ -1459,12 +1551,10 @@ watch([inputSearch, currentStatus], async () => {
                 ></q-select>
 
                 <q-select
+                v-if="modeView === false"
                   id="select-field"
                   for="select-field"
-                  :options="[
-                    { label: 'กันว่าง 1', value: 'กันว่าง 1' },
-                    { label: 'กันว่าง 2', value: 'กันว่าง 2' },
-                  ]"
+                  :options="fieldDisplay"
                   :display-value="$t('displayField')"
                   v-model="fieldSelected"
                   option-label="label"
@@ -1643,10 +1733,363 @@ watch([inputSearch, currentStatus], async () => {
                 >
                   <div
                     class="row full-width customer-row"
-                    :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '2' : $q.screen.lt.md ? '3' : $q.screen.lt.lg ? '5' : '6'}, 1fr)`"
                     style="min-height: 250px"
                   >
-                    <UsersDetailCardComponent
+                    <q-table
+                      flat
+                      bordered
+                      :grid="modeView"
+                      :rows="listCustomer"
+                      :columns="columns"
+                      card-container-class=" q-col-gutter-md"
+                      row-key="name"
+                      :rows-per-page-options="[0]"
+                      hide-pagination
+                      :visible-columns="fieldSelected"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr 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"
+                          @click="
+                            () => {
+                              currentCustomerName = props.row.customerName;
+                              customerType = props.row.customerType;
+                              currentCustomerUrlImage = props.row.imageUrl;
+                              currentCustomerId = props.row.id;
+
+                              const { branch, ...payload } = props.row;
+                              currentCustomer = payload;
+                              isMainPage = false;
+                            }
+                          "
+                        >
+                          <q-td
+                          v-if="fieldSelected.includes('customerName')"
+                          >
+                            <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-avatar size="md">
+                                      <q-img  :src="props.row.imageUrl ?? '/no-profile.png'">
+
+                                      <template #error>
+                                        <q-img  src="/no-profile.png"/>
+                                      </template>
+                                      
+                                      </q-img>
+                                  </q-avatar>
+                                  
+                               
+                                  <!-- <q-icon
+                                    size="md"
+                                    style="scale: 0.8"
+                                    :name="props.row.imageUrl"
+                                  /> -->
+                                </div>
+                              </div>
+                              <div class="col">
+                                <div class="col">{{ props.row.customerName || '-'   }}</div>
+                                <div class="col app-text-muted">
+                                  {{ props.row.customerNameEN || '-'    }}
+                                </div>
+                              </div>
+                            </div>
+                          </q-td>
+                          <q-td
+                           v-if="fieldSelected.includes('customerType')"
+                          >
+
+                            <span
+                              class="tags"
+         
+                              :class="{ [`tags__${props.row.customerType === 'CORP'? 'purple' : 'green'}`]: true }"
+                             >
+                                      {{props.row.customerType === 'CORP' ? $t('customerLegalEntity') : $t('customerNaturalPerson')}}
+                             </span>
+
+                           
+                          </q-td>
+                          <q-td  v-if="fieldSelected.includes('personName')">
+                          {{ props.row.personName }}
+                          </q-td>
+                          <q-td v-if="fieldSelected.includes('telephoneNo')">
+                          {{ props.row.branch[0].telephoneNo || '-' }}
+                          </q-td>
+                          <q-td
+                          v-if="fieldSelected.includes('branchEmail')"
+                          >
+                           
+                           {{ props.row.branch[0].email || '-' }}
+                          </q-td>
+                          <q-td>
+                            <q-btn
+                              icon="mdi-eye"
+                              size="sm"
+                              dense
+                              round
+                              flat
+                              @click.stop="
+                                () => {
+                                  const { branch, ...payload } = props.row;
+                                  currentCustomer = payload;
+
+                                  currentCustomerId = props.row.id;
+                                  customerType = props.row.customerType;
+                                  assignFormData(props.row.id);
+                                  openDialogInputForm('INFO', props.row.id);
+                                }
+                              "
+                            />
+
+                            <q-btn
+                              icon="mdi-dots-vertical"
+                              size="sm"
+                              dense
+                              round
+                              flat
+                              @click.stop
+                              :key="props.row.id"
+                            >
+                              <q-menu class="bordered" >
+                                <q-list v-close-popup>
+                                  <q-item
+                                    :id="`view-detail-btn-${props.row.name}-view`"
+                                    @click.stop="
+                                      () => {
+                                        const { branch, ...payload } =
+                                          props.row;
+                                        currentCustomer = payload;
+
+                                        currentCustomerId = props.row.id;
+                                        customerType = props.row.customerType;
+                                        assignFormData(props.row.id);
+                                        openDialogInputForm(
+                                          'INFO',
+                                          props.row.id,
+                                        );
+                                      }
+                                    "
+                                    clickable
+                                    dense
+                                    class="row q-py-sm"
+                                    style="white-space: nowrap"
+                                  >
+                                    <q-icon
+                                      name="mdi-eye-outline"
+                                      class="col-3"
+                                      size="xs"
+                                      style="color: hsl(var(--green-6-hsl))"
+                                    />
+                                    <span
+                                      class="col-9 q-px-md flex items-center"
+                                    >
+                                      {{ $t('viewDetail') }}
+                                    </span>
+                                  </q-item>
+
+                                  <q-item
+                                    :id="`view-detail-btn-${props.row.name}-edit`"
+                                    clickable
+                                    dense
+                                    class="row q-py-sm"
+                                    style="white-space: nowrap"
+                                    @click="
+                                      () => {
+                                        if (!listCustomer) return;
+
+                                        customerType = props.row.customerType;
+                                        const { branch, ...payload } =
+                                          props.row;
+                                        currentCustomer = payload;
+
+                                        currentCustomerId = props.row.id;
+
+                                        assignFormData(props.row.id);
+
+                                        infoDrawerEdit = true;
+                                        openDialogInputForm(
+                                          'INFO',
+                                          props.row.id,
+                                        );
+                                      }
+                                    "
+                                  >
+                                    <q-icon
+                                      name="mdi-pencil-outline"
+                                      class="col-3"
+                                      size="xs"
+                                      style="color: hsl(var(--cyan-6-hsl))"
+                                    />
+                                    <span
+                                      class="col-9 q-px-md flex items-center"
+                                    >
+                                      {{ $t('edit') }}
+                                    </span>
+                                  </q-item>
+                                  <q-item
+                                    :id="`view-detail-btn-${props.row.name}-delete`"
+                                    dense
+                                    :clickable="props.row.status === 'CREATED'"
+                                    class="row"
+                                    :class="{
+                                      'surface-3':
+                                        props.row.status !== 'CREATED',
+                                      'app-text-muted':
+                                        props.row.status !== 'CREATED',
+                                    }"
+                                    style="white-space: nowrap"
+                                    @click="deleteCustomerById(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 () => {
+                                              toggleStatusCustomer(
+                                                props.row.id,
+                                                props.row.status === 'ACTIVE'
+                                                  ? true
+                                                  : false,
+                                              );
+                                            }
+                                          "
+                                          :model-value="
+                                           
+                                            props.row.status !== 'INACTIVE'
+                                          "
+                                        />
+                                      </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-3">
+                          <PersonCard
+                          :field-selected="fieldSelected"
+                            history
+                            :data="{
+                              code: props.row.code,
+                              name:
+                                $i18n.locale === 'en-US'
+                                  ? `${props.row.customerName} `.trim()
+                                  : `${props.row.customerNameEN} `.trim(),
+                              img: props.row.imageUrl,
+                              male: props.row.gender === 'male',
+                              female: props.row.gender === 'female',
+                              detail: [
+                                {
+                                  icon: 'mdi-cellphone',
+                                  value: props.row.branch[0].telephoneNo,
+                                },
+                                {
+                                  icon: 'mdi-account',
+                                  value: props.row.personName,
+                                },
+                              ],
+                            }"
+                            @history="openHistory(props.row.id)"
+                            @update-card="
+                            ()=>{
+                                           if (!listCustomer) return;
+
+                          customerType = props.row.customerType
+                          const { branch, ...payload } = props.row
+                          currentCustomer = payload
+
+                          currentCustomerId = props.row.id
+
+                          assignFormData(props.row.id)
+ 
+
+                          infoDrawerEdit = true
+                          openDialogInputForm('INFO', props.row.id)
+                       
+                            }
+                            "
+                            @enter-card="()=>{
+                                   currentCustomerName = props.row.customerName;
+                          customerType = props.row.customerType;
+                          currentCustomerUrlImage = props.row.imageUrl;
+                          currentCustomerId = props.row.id;
+
+                          const { branch, ...payload } = props.row;
+                          currentCustomer = payload;
+                          isMainPage = false;
+                            }"
+                            @delete-card="deleteCustomerById(props.row.id)"
+                            @toggle-status="
+                               toggleStatusCustomer(
+                            props.row.id,
+                            props.row.status === 'ACTIVE' ? true : false,
+                          );
+                            "
+                          />
+                        </div>
+                      </template>
+                    </q-table>
+
+                    <!-- <UsersDetailCardComponent
                       v-for="i in listCustomer"
                       :key="i.id"
                       class="hover-card"
@@ -1724,7 +2167,7 @@ watch([inputSearch, currentStatus], async () => {
                           );
                         }
                       "
-                    />
+                    /> -->
                   </div>
                 </div>
 
@@ -1810,40 +2253,7 @@ watch([inputSearch, currentStatus], async () => {
                   class="col column justify-between q-px-md q-pt-md scroll"
                   v-if="listEmployee.length !== 0"
                 >
-                  <!-- <PersonCard -->
-                  <!--   history -->
-                  <!--   :list=" -->
-                  <!--     listEmployee.map((v: Employee) => ({ -->
-                  <!--       disabled: v.status === 'INACTIVE', -->
-                  <!--       img: v.profileImageUrl, -->
-                  <!--       id: v.id, -->
-                  <!--       name: -->
-                  <!--         $i18n.locale === 'en-US' -->
-                  <!--           ? `${v.firstNameEN} ${v.lastNameEN}` -->
-                  <!--           : `${v.firstName} ${v.lastName}`, -->
-                  <!--       male: v.gender === 'male', -->
-                  <!--       female: v.gender === 'female', -->
-                  <!--       badge: v.code, -->
-                  <!--       detail: [ -->
-                  <!--         { -->
-                  <!--           label: $t('personnelCardNationality'), -->
-                  <!--           value: v.nationality, -->
-                  <!--         }, -->
-                  <!--         { -->
-                  <!--           label: $t('personnelCardAge'), -->
-                  <!--           value: calculateAge(v.dateOfBirth), -->
-                  <!--         }, -->
-                  <!--       ], -->
-                  <!--     })) -->
-                  <!--   " -->
-                  <!--   @history="openHistory" -->
-                  <!--   @update-card="openDialogInputForm" -->
-                  <!--   @enter-card="openDialogInputForm" -->
-                  <!--   @delete-card="onDelete" -->
-                  <!--   @toggle-status=" -->
-                  <!--     (id, status) => toggleStatusEmployee(id, status) -->
-                  <!--   " -->
-                  <!-- /> -->
+                  <!-- eeee -->
                 </div>
                 <div
                   v-if="listEmployee.length !== 0"
@@ -3068,7 +3478,7 @@ watch([inputSearch, currentStatus], async () => {
             <!--   no-hover -->
             <!--   no-action -->
             <!--   no-detail -->
-            <!--   no-bg -->
+
             <!--   :list="infoEmployeePersonCard ? infoEmployeePersonCard : []" -->
             <!--   :gridColumns="1" -->
             <!--   @edit-profile=" -->
@@ -3240,4 +3650,66 @@ watch([inputSearch, currentStatus], async () => {
   background-color: hsla(var(--info-bg) / 0.1);
   color: hsl(var(--info-bg));
 }
+
+.tags {
+  display: inline-block;
+  color: hsla(var(--_color) / 1);
+  background: hsla(var(--_color) / 0.15);
+  border-radius: var(--radius-2);
+  padding-inline: var(--size-2);
+}
+
+.tags__purple {
+  --_color: var(--violet-11-hsl);
+}
+
+.tags__green {
+  --_color: var(--teal-10-hsl);
+}
+
+.dark .tags__purple {
+  --_color: var(--violet-10-hsl);
+}
+
+.dark .tags__green {
+  --_color: var(--teal-8-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.1rem;
+    top: calc(50% - 0.25rem);
+    bottom: calc(50% - 0.25rem);
+    background-color: hsla(var(--_branch-status-color) / 1);
+  }
+
+  & :deep(.q-avatar) {
+    transform: rotate(-45deg);
+    color: hsla(var(--_branch-card-bg) / 1);
+  }
+}
 </style>

From 37d19e8600ad88bebe8efdb9280a2351a8cee011 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 8 Jul 2024 11:15:31 +0700
Subject: [PATCH 096/158] feat: scroll inside product / service

---
 src/pages/04_product-service/MainPage.vue | 237 +++++++++++-----------
 1 file changed, 116 insertions(+), 121 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 7b7cdc3b..8890de45 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1227,31 +1227,28 @@ watch(inputSearchProductAndService, async () => {
       <!-- group/type -->
       <div
         v-if="productMode === 'group' || productMode === 'type'"
-        class="surface-1 col bordered rounded q-px-md q-pt-md scroll column"
+        class="surface-1 col bordered rounded column no-wrap"
       >
-        <div class="row justify-between">
-          <div
-            v-if="productMode === 'type'"
-            class="text-h6 text-weight-bold q-mb-md"
-          >
+        <div class="row surface-2 bordered-b q-px-md q-py-sm">
+          <div v-if="productMode === 'type'" class="text-h6 text-weight-bold">
             {{ $t('productAndServiceType') }}
           </div>
           <div
             v-else-if="productMode === 'group'"
-            class="text-h6 text-weight-bold q-mb-md"
+            class="text-h6 text-weight-bold"
           >
             {{ $t('productAndServiceAll') }}
           </div>
           <div
             v-if="productMode === 'group' || productMode === 'type'"
-            class="row q-px-md q-pb-md"
+            class="row q-ml-auto"
           >
             <q-input
               style="width: 300px"
               outlined
               dense
               :label="$t('search')"
-              class="q-mr-lg"
+              class="q-mr-sm"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearch"
               debounce="500"
@@ -1309,119 +1306,117 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-        <div class="row q-col-gutter-md col scroll">
-          <div
-            :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
-            v-for="(v, i) in productMode === 'type'
-              ? productType
-              : productGroup"
-            :key="i"
-          >
-            <ProductCardComponent
-              v-if="productMode === 'type'"
-              isType
-              :count-product="v._count.product"
-              :count-type="v._count.type"
-              :count-service="v._count.service"
-              :title="v.name"
-              :subtitle="v.code"
-              :date="new Date(v.updatedAt)"
-              :status="v.status"
-              :id="v.id"
-              :isDisabled="v.status === 'INACTIVE'"
-              :color="
-                $q.dark.isActive
-                  ? 'var(--purple-7-hsl)'
-                  : 'var(--violet-11-hsl)'
-              "
-              @toggleStatus="toggleStatusType(v.id, v.status)"
-              @viewCard="
-                () => {
-                  currentStatusProduct = v.status === 'INACTIVE';
-                  clearFormGroup();
-                  currentIdType = v.id;
-                  assignFormDataGroup(v);
-                  isEdit = false;
-                  drawerInfo = true;
-                }
-              "
-              @updateCard="
-                () => {
-                  clearFormGroup();
-                  currentIdType = v.id;
-                  assignFormDataGroup(v);
-                  isEdit = true;
-                  drawerInfo = true;
-                }
-              "
-              @deleteCard="
-                () => {
-                  deleteProductById(v.id);
-                }
-              "
-              @on-click="
-                async () => {
-                  pathTypeName = v.name;
-                  currentIdType = v.id;
-                  productMode = 'service';
-                  productAndServiceTab = 'all';
-                  // await featchStatsService();
-                  // await featchStatsProduct();
-                  await fetchListOfProduct();
-                  await fetchListOfService();
-                  await fetchListOfProductAndService();
-                  flowStore.rotate();
-                }
-              "
-            />
-            <ProductCardComponent
-              v-else-if="productMode === 'group'"
-              :title="v.name"
-              :subtitle="v.code"
-              :count-product="v._count.product"
-              :count-type="v._count.type"
-              :count-service="v._count.service"
-              :date="new Date(v.updatedAt)"
-              :status="v.status"
-              color="var(--pink-6-hsl)"
-              :id="v.id"
-              :isDisabled="v.status === 'INACTIVE'"
-              @toggleStatus="toggleStatusGroup(v.id, v.status)"
-              @viewCard="
-                () => {
-                  currentStatusProduct = v.status === 'INACTIVE';
-                  clearFormGroup();
-                  assignFormDataGroup(v);
-                  isEdit = false;
-                  currentId = v.id;
-                  drawerInfo = true;
-                }
-              "
-              @updateCard="
-                () => {
-                  clearFormGroup();
-                  assignFormDataGroup(v);
-                  isEdit = true;
-                  currentId = v.id;
+        <div style="height: 100%" class="q-pa-md scroll">
+          <div class="row q-col-gutter-md col">
+            <div
+              :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
+              v-for="(v, i) in productMode === 'type'
+                ? productType
+                : productGroup"
+              :key="i"
+            >
+              <ProductCardComponent
+                v-if="productMode === 'type'"
+                isType
+                :count-product="v._count.product"
+                :count-type="v._count.type"
+                :count-service="v._count.service"
+                :title="v.name"
+                :subtitle="v.code"
+                :date="new Date(v.updatedAt)"
+                :status="v.status"
+                :id="v.id"
+                :isDisabled="v.status === 'INACTIVE'"
+                :color="
+                  $q.dark.isActive
+                    ? 'var(--purple-7-hsl)'
+                    : 'var(--violet-11-hsl)'
+                "
+                @toggleStatus="toggleStatusType(v.id, v.status)"
+                @viewCard="
+                  () => {
+                    currentStatusProduct = v.status === 'INACTIVE';
+                    clearFormGroup();
+                    currentIdType = v.id;
+                    assignFormDataGroup(v);
+                    isEdit = false;
+                    drawerInfo = true;
+                  }
+                "
+                @updateCard="
+                  () => {
+                    clearFormGroup();
+                    currentIdType = v.id;
+                    assignFormDataGroup(v);
+                    isEdit = true;
+                    drawerInfo = true;
+                  }
+                "
+                @deleteCard="
+                  () => {
+                    deleteProductById(v.id);
+                  }
+                "
+                @on-click="
+                  async () => {
+                    pathTypeName = v.name;
+                    currentIdType = v.id;
+                    productMode = 'service';
+                    productAndServiceTab = 'all';
+                    // await featchStatsService();
+                    // await featchStatsProduct();
+                    await fetchListOfProduct();
+                    await fetchListOfService();
+                    await fetchListOfProductAndService();
+                    flowStore.rotate();
+                  }
+                "
+              />
+              <ProductCardComponent
+                v-else-if="productMode === 'group'"
+                :title="v.name"
+                :subtitle="v.code"
+                :count-product="v._count.product"
+                :count-type="v._count.type"
+                :count-service="v._count.service"
+                :date="new Date(v.updatedAt)"
+                :status="v.status"
+                color="var(--pink-6-hsl)"
+                :id="v.id"
+                :isDisabled="v.status === 'INACTIVE'"
+                @toggleStatus="toggleStatusGroup(v.id, v.status)"
+                @viewCard="
+                  () => {
+                    currentStatusProduct = v.status === 'INACTIVE';
+                    clearFormGroup();
+                    assignFormDataGroup(v);
+                    isEdit = false;
+                    currentId = v.id;
+                    drawerInfo = true;
+                  }
+                "
+                @updateCard="
+                  () => {
+                    clearFormGroup();
+                    assignFormDataGroup(v);
+                    isEdit = true;
+                    currentId = v.id;
 
-                  drawerInfo = true;
-                }
-              "
-              @deleteCard="
-                () => {
-                  deleteProductById(v.id);
-                }
-              "
-              @on-click="
-                async () => {
-                  pathGroupName = v.name;
-                  currentId = v.id;
-                  productMode = 'type';
-                  await fetchListType();
-                  flowStore.rotate();
-                }
-              "
-            />
+                    drawerInfo = true;
+                  }
+                "
+                @deleteCard="deleteProductById(v.id)"
+                @on-click="
+                  async () => {
+                    pathGroupName = v.name;
+                    currentId = v.id;
+                    productMode = 'type';
+                    await fetchListType();
+                    flowStore.rotate();
+                  }
+                "
+              />
+            </div>
           </div>
         </div>
 

From 4fa1188063b35897353f62403436b0fb03ce12a3 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 8 Jul 2024 11:21:00 +0700
Subject: [PATCH 097/158] chore: format code

---
 src/boot/components.ts                        |   2 +-
 src/components/home/PersonCard.vue            |  24 +--
 src/i18n/en-US/employer-dialog.ts             |   2 +-
 src/i18n/th-th/employer-dialog.ts             |   3 +-
 src/pages/01_branch-management/MainPage.vue   |   2 +-
 src/pages/03_customer-management/MainPage.vue | 187 ++++++++----------
 6 files changed, 98 insertions(+), 122 deletions(-)

diff --git a/src/boot/components.ts b/src/boot/components.ts
index 9bd627c0..0e028326 100644
--- a/src/boot/components.ts
+++ b/src/boot/components.ts
@@ -1,6 +1,6 @@
 import { boot } from 'quasar/wrappers';
 import VueDatePicker from '@vuepic/vue-datepicker';
-import '@vuepic/vue-datepicker/dist/main.css'
+import '@vuepic/vue-datepicker/dist/main.css';
 import GlobalDialog from 'components/GlobalDialog.vue';
 import GlobalLoading from 'components/GlobalLoading.vue';
 
diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 11bfdb25..16172e58 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -68,7 +68,7 @@ defineEmits<{
         />
 
         <q-btn
-        :key="data.code"
+          :key="data.code"
           flat
           round
           padding="xs"
@@ -154,17 +154,14 @@ defineEmits<{
         </q-btn>
       </div>
 
-     
       <!-- profile -->
-    
+
       <AppCircle
         bordered
         class="avatar"
         style="border: 2px solid var(--border-color); overflow: visible"
         @click="$emit('editProfile')"
       >
-
-       
         <q-img
           :src="data.img ?? '/no-profile.png'"
           style="
@@ -174,15 +171,14 @@ defineEmits<{
             border-radius: 50%;
           "
         >
-   <template #error>
-          <div
-            style="background: none"
-            class="full-width full-height items-center justify-center flex"
-          >
-            <q-img src="/no-profile.png" width="5rem" />
-          </div>
-        </template>
-
+          <template #error>
+            <div
+              style="background: none"
+              class="full-width full-height items-center justify-center flex"
+            >
+              <q-img src="/no-profile.png" width="5rem" />
+            </div>
+          </template>
         </q-img>
         <div class="avatar__status"></div>
       </AppCircle>
diff --git a/src/i18n/en-US/employer-dialog.ts b/src/i18n/en-US/employer-dialog.ts
index 31d08d86..3a618ea9 100644
--- a/src/i18n/en-US/employer-dialog.ts
+++ b/src/i18n/en-US/employer-dialog.ts
@@ -7,5 +7,5 @@ export default {
 
   companyOwnerName: 'Company Owner Name',
 
-  corporation:'Corporation'
+  corporation: 'Corporation',
 };
diff --git a/src/i18n/th-th/employer-dialog.ts b/src/i18n/th-th/employer-dialog.ts
index e2f28c78..927d9eaa 100644
--- a/src/i18n/th-th/employer-dialog.ts
+++ b/src/i18n/th-th/employer-dialog.ts
@@ -7,6 +7,5 @@ export default {
 
   companyOwnerName: 'ชื่อเจ้าของบริษัท',
 
-  corporation:'ชื่อ บริษัท/นิติบุคคล'
-
+  corporation: 'ชื่อ บริษัท/นิติบุคคล',
 };
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index d6cb0228..50a547dc 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -913,7 +913,7 @@ watch(locale, () => {
                     <q-table
                       flat
                       bordered
-                       :rows-per-page-options="[0]"
+                      :rows-per-page-options="[0]"
                       :rows="
                         treeData
                           .flatMap((v) => [v, ...v.branch])
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 4dd04358..ec1d819c 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -68,7 +68,6 @@ const useMyBranch = useMyBranchStore();
 
 const { fetchListOptionBranch } = useMyBranch;
 
-
 const columns = [
   {
     name: 'customerName',
@@ -91,7 +90,6 @@ const columns = [
     field: 'personName',
   },
 
- 
   {
     name: 'telephoneNo',
     align: 'left',
@@ -99,7 +97,7 @@ const columns = [
     field: 'branch[0].telephoneNo',
   },
 
-   {
+  {
     name: 'branchEmail',
     align: 'left',
     label: 'formDialogInputEmail',
@@ -107,7 +105,6 @@ const columns = [
   },
 ] satisfies QTableProps['columns'];
 
-
 const {
   create,
   getStatsCustomer,
@@ -171,57 +168,46 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
   value: 'all',
 });
 
-
-
-
-
 const fieldDisplay = ref<
- {
-   label: string;
-   value: string;
+  {
+    label: string;
+    value: string;
   }[]
 >([
+  {
+    label: t('corporation'),
+    value: 'customerName',
+  },
 
-{
-  label: t('corporation'),
-  value: 'customerName',
-},
+  {
+    label: t('type'),
+    value: 'customerType',
+  },
 
-{
-  label: t('type'),
-  value: 'customerType',
-},
+  {
+    label: t('name'),
+    value: 'personName',
+  },
 
-{
-  label: t('name'),
-  value: 'personName',
-},
+  {
+    label: t('telephone'),
+    value: 'telephoneNo',
+  },
 
-{
-  label: t('telephone'),
-  value: 'telephoneNo',
-},
-
-{
-  label: t('formDialogInputEmail'),
-  value: 'branchEmail',
-},
-
- 
+  {
+    label: t('formDialogInputEmail'),
+    value: 'branchEmail',
+  },
 ]);
 const fieldSelected = ref<
   (
-   | 'customerName'
+    | 'customerName'
     | 'customerType'
     | 'personName'
     | 'telephoneNo'
     | 'branchEmail'
   )[]
->([  'customerName',
-  'customerType',
-  'personName',
-  'telephoneNo',
-  'branchEmail']);
+>(['customerName', 'customerType', 'personName', 'telephoneNo', 'branchEmail']);
 
 const splitterModel = ref(15);
 const modeView = ref(true);
@@ -865,8 +851,6 @@ async function toggleStatusEmployee(id: string, status: boolean) {
 }
 
 async function toggleStatusCustomer(id: string, status: boolean) {
- 
-  
   await editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' });
 
   await fetchListCustomer();
@@ -1551,7 +1535,7 @@ watch([inputSearch, currentStatus], async () => {
                 ></q-select>
 
                 <q-select
-                v-if="modeView === false"
+                  v-if="modeView === false"
                   id="select-field"
                   for="select-field"
                   :options="fieldDisplay"
@@ -1779,9 +1763,7 @@ watch([inputSearch, currentStatus], async () => {
                             }
                           "
                         >
-                          <q-td
-                          v-if="fieldSelected.includes('customerName')"
-                          >
+                          <q-td v-if="fieldSelected.includes('customerName')">
                             <div class="row items-center">
                               <div
                                 :class="{
@@ -1799,17 +1781,18 @@ watch([inputSearch, currentStatus], async () => {
                                 "
                               >
                                 <div class="branch-card__icon">
-                                   <q-avatar size="md">
-                                      <q-img  :src="props.row.imageUrl ?? '/no-profile.png'">
-
+                                  <q-avatar size="md">
+                                    <q-img
+                                      :src="
+                                        props.row.imageUrl ?? '/no-profile.png'
+                                      "
+                                    >
                                       <template #error>
-                                        <q-img  src="/no-profile.png"/>
+                                        <q-img src="/no-profile.png" />
                                       </template>
-                                      
-                                      </q-img>
+                                    </q-img>
                                   </q-avatar>
-                                  
-                               
+
                                   <!-- <q-icon
                                     size="md"
                                     style="scale: 0.8"
@@ -1818,38 +1801,37 @@ watch([inputSearch, currentStatus], async () => {
                                 </div>
                               </div>
                               <div class="col">
-                                <div class="col">{{ props.row.customerName || '-'   }}</div>
+                                <div class="col">
+                                  {{ props.row.customerName || '-' }}
+                                </div>
                                 <div class="col app-text-muted">
-                                  {{ props.row.customerNameEN || '-'    }}
+                                  {{ props.row.customerNameEN || '-' }}
                                 </div>
                               </div>
                             </div>
                           </q-td>
-                          <q-td
-                           v-if="fieldSelected.includes('customerType')"
-                          >
-
+                          <q-td v-if="fieldSelected.includes('customerType')">
                             <span
                               class="tags"
-         
-                              :class="{ [`tags__${props.row.customerType === 'CORP'? 'purple' : 'green'}`]: true }"
-                             >
-                                      {{props.row.customerType === 'CORP' ? $t('customerLegalEntity') : $t('customerNaturalPerson')}}
-                             </span>
-
-                           
+                              :class="{
+                                [`tags__${props.row.customerType === 'CORP' ? 'purple' : 'green'}`]: true,
+                              }"
+                            >
+                              {{
+                                props.row.customerType === 'CORP'
+                                  ? $t('customerLegalEntity')
+                                  : $t('customerNaturalPerson')
+                              }}
+                            </span>
                           </q-td>
-                          <q-td  v-if="fieldSelected.includes('personName')">
-                          {{ props.row.personName }}
+                          <q-td v-if="fieldSelected.includes('personName')">
+                            {{ props.row.personName }}
                           </q-td>
                           <q-td v-if="fieldSelected.includes('telephoneNo')">
-                          {{ props.row.branch[0].telephoneNo || '-' }}
+                            {{ props.row.branch[0].telephoneNo || '-' }}
                           </q-td>
-                          <q-td
-                          v-if="fieldSelected.includes('branchEmail')"
-                          >
-                           
-                           {{ props.row.branch[0].email || '-' }}
+                          <q-td v-if="fieldSelected.includes('branchEmail')">
+                            {{ props.row.branch[0].email || '-' }}
                           </q-td>
                           <q-td>
                             <q-btn
@@ -1880,7 +1862,7 @@ watch([inputSearch, currentStatus], async () => {
                               @click.stop
                               :key="props.row.id"
                             >
-                              <q-menu class="bordered" >
+                              <q-menu class="bordered">
                                 <q-list v-close-popup>
                                   <q-item
                                     :id="`view-detail-btn-${props.row.name}-view`"
@@ -2009,7 +1991,6 @@ watch([inputSearch, currentStatus], async () => {
                                             }
                                           "
                                           :model-value="
-                                           
                                             props.row.status !== 'INACTIVE'
                                           "
                                         />
@@ -2026,7 +2007,7 @@ watch([inputSearch, currentStatus], async () => {
                       <template v-slot:item="props">
                         <div class="col-3">
                           <PersonCard
-                          :field-selected="fieldSelected"
+                            :field-selected="fieldSelected"
                             history
                             :data="{
                               code: props.row.code,
@@ -2050,39 +2031,39 @@ watch([inputSearch, currentStatus], async () => {
                             }"
                             @history="openHistory(props.row.id)"
                             @update-card="
-                            ()=>{
-                                           if (!listCustomer) return;
+                              () => {
+                                if (!listCustomer) return;
 
-                          customerType = props.row.customerType
-                          const { branch, ...payload } = props.row
-                          currentCustomer = payload
+                                customerType = props.row.customerType;
+                                const { branch, ...payload } = props.row;
+                                currentCustomer = payload;
 
-                          currentCustomerId = props.row.id
+                                currentCustomerId = props.row.id;
 
-                          assignFormData(props.row.id)
- 
+                                assignFormData(props.row.id);
 
-                          infoDrawerEdit = true
-                          openDialogInputForm('INFO', props.row.id)
-                       
-                            }
+                                infoDrawerEdit = true;
+                                openDialogInputForm('INFO', props.row.id);
+                              }
                             "
-                            @enter-card="()=>{
-                                   currentCustomerName = props.row.customerName;
-                          customerType = props.row.customerType;
-                          currentCustomerUrlImage = props.row.imageUrl;
-                          currentCustomerId = props.row.id;
+                            @enter-card="
+                              () => {
+                                currentCustomerName = props.row.customerName;
+                                customerType = props.row.customerType;
+                                currentCustomerUrlImage = props.row.imageUrl;
+                                currentCustomerId = props.row.id;
 
-                          const { branch, ...payload } = props.row;
-                          currentCustomer = payload;
-                          isMainPage = false;
-                            }"
+                                const { branch, ...payload } = props.row;
+                                currentCustomer = payload;
+                                isMainPage = false;
+                              }
+                            "
                             @delete-card="deleteCustomerById(props.row.id)"
                             @toggle-status="
-                               toggleStatusCustomer(
-                            props.row.id,
-                            props.row.status === 'ACTIVE' ? true : false,
-                          );
+                              toggleStatusCustomer(
+                                props.row.id,
+                                props.row.status === 'ACTIVE' ? true : false,
+                              )
                             "
                           />
                         </div>

From 4d8e22d64ee223c0dd99ea881cfca880b3b6bcc7 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 13:37:22 +0700
Subject: [PATCH 098/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9B=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B8=AA=E0=B8=B5=20=20?=
 =?UTF-8?q?=E0=B8=88=E0=B8=B8=E0=B8=94=E0=B8=AD=E0=B8=AD=E0=B8=99=E0=B9=84?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=99=E0=B9=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/PersonCard.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 16172e58..9c91f14c 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -77,14 +77,14 @@ defineEmits<{
           size="sm"
           @click.stop
         >
-          <q-menu class="bordered">
+          <q-menu  class="bordered">
             <q-list v-close-popup>
               <q-item
                 clickable
                 dense
                 class="row q-py-sm"
                 style="white-space: nowrap"
-                @click="$emit('enterCard', 'INFO')"
+                @click.stop="$emit('enterCard', 'INFO')"
               >
                 <q-icon
                   name="mdi-eye-outline"
@@ -234,15 +234,15 @@ defineEmits<{
   padding: var(--size-2);
 
   &.person-box__disabled {
-    opacity: 0.4;
+  
+    opacity: 0.7;
+    filter: grayscale(1);
 
     .status-circle {
       background-color: var(--surface-1);
     }
 
-    .locale {
-      filter: grayscale();
-    }
+  
   }
 
   &.person-box__no-detail {
@@ -309,6 +309,7 @@ defineEmits<{
     --_hover: hsl(var(--gender-male));
     cursor: pointer;
     box-shadow: var(--shadow-2);
+   
   }
 }
 

From e631ed9c4767527e45fdee86e2c53eda4b805070 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 8 Jul 2024 14:08:57 +0700
Subject: [PATCH 099/158] feat: refactor for path support

---
 .../01_branch-management/BranchCard.vue       | 15 +++++++------
 src/layouts/MainLayout.vue                    | 21 ++++++++++++-------
 src/pages/01_branch-management/MainPage.vue   |  2 +-
 .../02_personnel-management/MainPage.vue      |  2 +-
 src/pages/03_customer-management/MainPage.vue |  7 +++++--
 src/pages/04_product-service/MainPage.vue     |  6 +++---
 src/pages/MainPage.vue                        |  2 +-
 src/stores/utils/index.ts                     | 12 +++++++++--
 8 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index 180ac7e0..945474d5 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -35,12 +35,14 @@ defineProps<{
     @click="$emit('open')"
   >
     <div class="branch-card__header">
-      <div class="branch-card__icon">
-        <q-icon
-          size="md"
-          style="scale: 0.8"
-          name="mdi-office-building-outline"
-        />
+      <div class="branch-card__wrapper">
+        <div class="branch-card__icon">
+          <q-icon
+            size="md"
+            style="scale: 0.8"
+            name="mdi-office-building-outline"
+          />
+        </div>
       </div>
       <div class="branch-card__name">
         <b>{{ data.branchLabelName }}</b>
@@ -96,6 +98,7 @@ defineProps<{
       padding: var(--size-1);
       position: relative;
       transform: rotate(45deg);
+      aspect-ratio: 1;
 
       &::after {
         content: ' ';
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 7fa2b864..1a26d58f 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -259,13 +259,20 @@ onMounted(async () => {
                     : 'Jobs Worker Service'
               }}
             </span>
-            <span class="text-caption">
-              {{
-                utilsStore.currentTitle?.caption
-                  ? $t(utilsStore.currentTitle?.caption)
-                  : ''
-              }}
-            </span>
+            <div class="flex items-center" style="gap: var(--size-1)">
+              <template v-for="(item, i) in utilsStore.currentTitle.path">
+                <span
+                  class="text-caption cursor-pointer"
+                  @click="item.handler?.()"
+                >
+                  {{ item.text ? $t(item.text) : '' }}
+                </span>
+                <q-icon
+                  name="mdi-chevron-right"
+                  v-if="i + 1 !== utilsStore.currentTitle.path.length"
+                />
+              </template>
+            </div>
           </div>
 
           <div class="row q-gutter-x-md items-center" style="margin-left: auto">
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 50a547dc..45fdaa86 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -151,7 +151,7 @@ async function calculateStats() {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'branchManagement';
-  utilsStore.currentTitle.caption = 'branchManagementCaption';
+  utilsStore.currentTitle.path = [{ text: 'branchManagementCaption' }];
 
   await branchStore.fetchList({ pageSize: 99999 });
   await calculateStats();
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 70d769b7..0faf0fb6 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -453,7 +453,7 @@ async function assignFormData(idEdit: string) {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'personnelManagement';
-  utilsStore.currentTitle.caption = 'personnelManagementCaption';
+  utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }];
 
   await fetchUserList();
 
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index ec1d819c..d19cff6e 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1240,7 +1240,7 @@ async function fetchListStatsEmployeeGender() {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'customerManagement';
-  utilsStore.currentTitle.caption = 'customerManagementCaption';
+  utilsStore.currentTitle.path = [{ text: 'customerManagementCaption' }];
 
   const resultStats = await getStatsCustomer();
 
@@ -1493,7 +1493,10 @@ watch([inputSearch, currentStatus], async () => {
       </div>
 
       <!-- main -->
-      <div class="surface-1 bordered rounded col column">
+      <div
+        class="surface-1 bordered rounded col column"
+        style="overflow: hidden"
+      >
         <!-- tabs -->
         <div class="column">
           <div
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 8890de45..dc5c728b 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1012,7 +1012,7 @@ function cloneData() {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'mainProductTitle';
-  utilsStore.currentTitle.caption = 'mainProductCaption';
+  utilsStore.currentTitle.path = [{ text: 'mainProductCaption' }];
 
   calculateStats();
   await fetchListGroups();
@@ -1229,7 +1229,7 @@ watch(inputSearchProductAndService, async () => {
         v-if="productMode === 'group' || productMode === 'type'"
         class="surface-1 col bordered rounded column no-wrap"
       >
-        <div class="row surface-2 bordered-b q-px-md q-py-sm">
+        <div class="row surface-2 bordered-b q-px-md q-py-sm items-center">
           <div v-if="productMode === 'type'" class="text-h6 text-weight-bold">
             {{ $t('productAndServiceType') }}
           </div>
@@ -1433,7 +1433,7 @@ watch(inputSearchProductAndService, async () => {
         <template v-else>
           <div
             v-if="productMode === 'group'"
-            class="row items-center justify-between"
+            class="row items-center justify-between q-px-md q-py-sm"
           >
             <div class="col-4">
               <div class="row items-center">
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index bef9bef9..a84f970f 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -99,7 +99,7 @@ const menu = [
 
 onMounted(() => {
   utilsStore.currentTitle.title = '';
-  utilsStore.currentTitle.caption = '';
+  utilsStore.currentTitle.path = [{ text: '' }];
 });
 </script>
 
diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index 77e49b6a..03715f20 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -95,9 +95,17 @@ export function formatNumberDecimal(num: number, point: number): string {
 }
 
 const useUtilsStore = defineStore('utilsStore', () => {
-  const currentTitle = ref<{ title: string; caption: string }>({
+  const currentTitle = ref<{
+    title: string;
+    path: { text: string; handler?: () => unknown }[];
+  }>({
     title: '',
-    caption: '',
+    path: [
+      {
+        text: '',
+        handler: () => {},
+      },
+    ],
   });
 
   return {

From 199815f78e238c9d2863a4f25b8361edd4828e22 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 8 Jul 2024 14:26:30 +0700
Subject: [PATCH 100/158] refactor: styling

---
 src/pages/01_branch-management/MainPage.vue    |  4 ++--
 src/pages/02_personnel-management/MainPage.vue |  4 ++--
 src/pages/03_customer-management/MainPage.vue  | 14 +++++++-------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 45fdaa86..b3f9ff0a 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -533,7 +533,7 @@ watch(locale, () => {
         <div class="row" style="flex-grow: 1; flex-wrap: nowrap">
           <q-splitter
             v-model="splitterModel"
-            :limits="[25, 80]"
+            :limits="[0, 100]"
             style="width: 100%"
           >
             <template v-slot:before>
@@ -1226,7 +1226,7 @@ watch(locale, () => {
                       </template>
 
                       <template v-slot:item="props">
-                        <div class="col-6">
+                        <div class="col-12 col-md-6">
                           <BranchCard
                             :id="`branch-card-${props.row.name}`"
                             @click="
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 0faf0fb6..79d1fc0c 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -616,12 +616,12 @@ watch(inputSearch, async () => await fetchUserList());
 
     <!-- main -->
     <div
-      class="col surface-1 rounded justify-between column no-wrap"
+      class="col surface-1 rounded justify-between column no-wrap bordered"
       style="overflow: hidden"
     >
       <div class="column">
         <div
-          class="row surface-3 bordered-b justify-between full-width items-center surface-1"
+          class="row surface-2 justify-between full-width items-center"
           style="z-index: 1"
         >
           <div class="row q-py-sm q-px-md justify-between full-width">
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index d19cff6e..576d9e90 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1500,7 +1500,7 @@ watch([inputSearch, currentStatus], async () => {
         <!-- tabs -->
         <div class="column">
           <div
-            class="row surface-3 bordered-b justify-between full-width items-center surface-1"
+            class="row justify-between full-width items-center surface-2"
             style="z-index: 1"
           >
             <div class="row q-py-sm q-px-md justify-between full-width">
@@ -1664,8 +1664,8 @@ watch([inputSearch, currentStatus], async () => {
           class="col"
         >
           <template v-slot:before>
-            <div class="column q-pa-md q-gutter-y-sm">
-              <div v-if="selectorLabel === 'EMPLOYER'">
+            <div class="column q-pa-md" style="gap: var(--size-1)">
+              <template v-if="selectorLabel === 'EMPLOYER'">
                 <q-item
                   v-for="v in fieldCustomer"
                   :key="v"
@@ -1680,8 +1680,8 @@ watch([inputSearch, currentStatus], async () => {
                     {{ $t(v) }}
                   </span>
                 </q-item>
-              </div>
-              <div v-else>
+              </template>
+              <template v-else>
                 <q-item
                   active
                   dense
@@ -1693,12 +1693,12 @@ watch([inputSearch, currentStatus], async () => {
                     {{ $t('totalEmployee') }}
                   </span>
                 </q-item>
-              </div>
+              </template>
             </div>
           </template>
 
           <template v-slot:after>
-            <div class="column full-height surface-2">
+            <div class="column full-height">
               <!-- employer -->
               <template
                 v-if="

From 9a09ae1946667120b05d720b8a97b4563b9509bd Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 8 Jul 2024 16:27:44 +0700
Subject: [PATCH 101/158] feat: make input not move on edit

---
 src/components/04_product-service/BasicInfoProduct.vue   | 8 ++++----
 src/components/04_product-service/PriceDataComponent.vue | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/04_product-service/BasicInfoProduct.vue b/src/components/04_product-service/BasicInfoProduct.vue
index 1d6abc7a..2e23bf00 100644
--- a/src/components/04_product-service/BasicInfoProduct.vue
+++ b/src/components/04_product-service/BasicInfoProduct.vue
@@ -82,7 +82,7 @@ onMounted(async () => {
     <q-input
       for="input-name"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
@@ -94,7 +94,7 @@ onMounted(async () => {
     <q-input
       for="input-detail"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
@@ -108,7 +108,7 @@ onMounted(async () => {
     <div class="col-12">
       <q-field
         class="full-width"
-        :outlined="!readonly"
+        outlined
         :readonly="readonly"
         :borderless="readonly"
         :label="$t('detail')"
@@ -138,7 +138,7 @@ onMounted(async () => {
     <q-input
       for="input-process"
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
diff --git a/src/components/04_product-service/PriceDataComponent.vue b/src/components/04_product-service/PriceDataComponent.vue
index 5e58106a..cb06353b 100644
--- a/src/components/04_product-service/PriceDataComponent.vue
+++ b/src/components/04_product-service/PriceDataComponent.vue
@@ -17,7 +17,7 @@ defineProps<{
   <div class="col-9 row q-col-gutter-md">
     <q-input
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
@@ -28,7 +28,7 @@ defineProps<{
 
     <q-input
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
@@ -39,7 +39,7 @@ defineProps<{
 
     <q-input
       :dense="dense"
-      :outlined="!readonly"
+      outlined
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space

From 3a69c5e44e033d395410a663c9c24453a2ae4877 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 8 Jul 2024 16:29:37 +0700
Subject: [PATCH 102/158] feat: change path in product service

---
 src/i18n/en-US/product-service.ts         |  2 +
 src/i18n/th-th/main.ts                    |  2 +-
 src/layouts/MainLayout.vue                |  8 +++-
 src/pages/04_product-service/MainPage.vue | 57 +++++++----------------
 src/stores/utils/index.ts                 |  6 ++-
 5 files changed, 31 insertions(+), 44 deletions(-)

diff --git a/src/i18n/en-US/product-service.ts b/src/i18n/en-US/product-service.ts
index c1e34332..a912978c 100644
--- a/src/i18n/en-US/product-service.ts
+++ b/src/i18n/en-US/product-service.ts
@@ -9,6 +9,8 @@ export default {
 
   service: 'Service',
   product: 'Product',
+  productGroup: 'Product Group: {name}',
+  productType: 'Product Type: {name}',
 
   messageTooltipNoProduct: 'No Product and Service Groups',
   messageTooltipProductCreate: 'Click + for product and service groups.',
diff --git a/src/i18n/th-th/main.ts b/src/i18n/th-th/main.ts
index 2aa8851d..ea26c3f7 100644
--- a/src/i18n/th-th/main.ts
+++ b/src/i18n/th-th/main.ts
@@ -9,7 +9,7 @@ export default {
   mainCustomerCaption: 'จัดการคนภายในองค์กร',
 
   mainProductTitle: 'สินค้าและบริการ',
-  mainProductCaption: 'รายการสินค้าและบริการ',
+  mainProductCaption: 'ประเภทสินค้าและบริการ',
 
   mainQuotationTitle: 'ใบเสนอราคา',
   mainQuotationCaption: 'รายการใบเสนอราคา',
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 1a26d58f..1188c616 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -265,7 +265,13 @@ onMounted(async () => {
                   class="text-caption cursor-pointer"
                   @click="item.handler?.()"
                 >
-                  {{ item.text ? $t(item.text) : '' }}
+                  {{
+                    item.text
+                      ? $t(item.text, {
+                          ...(item.argsi18n || {}),
+                        })
+                      : ''
+                  }}
                 </span>
                 <q-icon
                   name="mdi-chevron-right"
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index dc5c728b..d631d08c 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1022,6 +1022,22 @@ onMounted(async () => {
 watch(productMode, () => {
   inputSearch.value = '';
   currentStatus.value = 'All';
+  const tmp: typeof utilsStore.currentTitle.path = [];
+
+  if (productMode.value === 'type' || productMode.value === 'service') {
+    tmp.push({
+      text: 'productGroup',
+      argsi18n: { name: pathGroupName.value },
+      handler: () => {
+        productMode.value = 'type';
+      },
+    });
+  }
+  if (productMode.value === 'service') {
+    tmp.push({ text: 'productType', argsi18n: { name: pathTypeName.value } });
+  }
+
+  utilsStore.currentTitle.path = tmp;
 });
 
 watch(currentStatus, async () => {
@@ -1183,47 +1199,6 @@ watch(inputSearchProductAndService, async () => {
         </div>
       </transition>
 
-      <!-- title type/service -->
-      <div
-        class="row items-center q-mb-md"
-        v-if="productMode === 'service' || productMode === 'type'"
-      >
-        <q-btn
-          round
-          icon="mdi-arrow-left"
-          flat
-          dense
-          @click="productMode = productMode === 'service' ? 'type' : 'group'"
-          class="q-mr-md"
-        />
-        <div
-          class="text-h6 hover-underline"
-          :class="{
-            'app-text-muted': productMode !== 'type',
-            'text-weight-bold': productMode === 'type',
-          }"
-          @click="productMode = 'type'"
-        >
-          {{ pathGroupName }}
-        </div>
-        <div
-          class="text-h6 app-text-muted q-mx-sm"
-          v-if="productMode === 'service'"
-        >
-          /
-        </div>
-        <div
-          v-if="productMode === 'service'"
-          class="text-h6"
-          :class="{
-            'app-text-muted': productMode !== 'service',
-            'text-weight-bold': productMode === 'service',
-          }"
-        >
-          {{ pathTypeName }}
-        </div>
-      </div>
-
       <!-- group/type -->
       <div
         v-if="productMode === 'group' || productMode === 'type'"
diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index 03715f20..d0484eda 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -97,7 +97,11 @@ export function formatNumberDecimal(num: number, point: number): string {
 const useUtilsStore = defineStore('utilsStore', () => {
   const currentTitle = ref<{
     title: string;
-    path: { text: string; handler?: () => unknown }[];
+    path: {
+      text: string;
+      argsi18n?: Record<string, string>;
+      handler?: () => unknown;
+    }[];
   }>({
     title: '',
     path: [

From e15fd825f9b423ab94fe4e6ce76ee9020dc7d848 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 16:33:16 +0700
Subject: [PATCH 103/158] =?UTF-8?q?refactor:=20=20=E0=B9=80=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B4=E0=B9=88=E0=B8=A1=20=20i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/en-US/customer-main-page.ts | 3 +++
 src/i18n/th-th/customer-main-page.ts | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/src/i18n/en-US/customer-main-page.ts b/src/i18n/en-US/customer-main-page.ts
index 8d4547cf..24f703ef 100644
--- a/src/i18n/en-US/customer-main-page.ts
+++ b/src/i18n/en-US/customer-main-page.ts
@@ -8,6 +8,9 @@ export default {
   customerEmployeeTooltipCaption: 'Click + to add an employee',
   customerEmployerAdd: 'Add employer',
   customerEmployeeAdd: 'Add employee',
+
+ nameEmployee:'Name Employee',
+
   EMPLOYER: 'Employer',
   EMPLOYEE: 'Employee',
   customerEmployerStatTitle: 'Employer data summary',
diff --git a/src/i18n/th-th/customer-main-page.ts b/src/i18n/th-th/customer-main-page.ts
index 150b9f14..8f5edc4b 100644
--- a/src/i18n/th-th/customer-main-page.ts
+++ b/src/i18n/th-th/customer-main-page.ts
@@ -8,6 +8,9 @@ export default {
   customerEmployeeTooltipCaption: 'คลิก + เพื่อเพิ่มลูกจ้าง',
   customerEmployerAdd: 'เพิ่มนายจ้าง',
   customerEmployeeAdd: 'เพิ่มลูกจ้าง',
+
+  nameEmployee:'ชื่อลูกจ้าง',
+
   EMPLOYER: 'นายจ้าง',
   EMPLOYEE: 'ลูกจ้าง',
   customerEmployerStatTitle: 'สรุปจำนวนข้อมูลนายจ้าง',

From afc08791c648c3e5cfecf688e5f0108af38bb89d Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 16:34:26 +0700
Subject: [PATCH 104/158] =?UTF-8?q?refactor:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=20=E0=B8=AA=E0=B8=B5=E0=B8=95=E0=B8=AD=E0=B8=99=20=20INACTIVE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/PersonCard.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 9c91f14c..b11c7172 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -235,8 +235,8 @@ defineEmits<{
 
   &.person-box__disabled {
   
-    opacity: 0.7;
-    filter: grayscale(1);
+    opacity: 0.5;
+    filter: grayscale(0.9);
 
     .status-circle {
       background-color: var(--surface-1);

From 6ea6cf231f8f6dce2307aaed145d05dd5ee51dd2 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 16:37:08 +0700
Subject: [PATCH 105/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9B=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B8=A2=E0=B8=99=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index b3f9ff0a..a85cbea1 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1049,7 +1049,7 @@ watch(locale, () => {
                           </q-td>
                           <q-td>
                             <q-btn
-                              icon="mdi-eye"
+                              icon="mdi-eye-outline"
                               size="sm"
                               dense
                               round
@@ -1680,7 +1680,6 @@ watch(locale, () => {
   --_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;
 }
 

From 461cd9fab8a32c9960d1582c0e97eea13ae15cc6 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 16:37:54 +0700
Subject: [PATCH 106/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/employee/types.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/stores/employee/types.ts b/src/stores/employee/types.ts
index ad612870..42932fd5 100644
--- a/src/stores/employee/types.ts
+++ b/src/stores/employee/types.ts
@@ -2,6 +2,8 @@ import { District, Province, SubDistrict } from '../address';
 import { Status } from '../types';
 import { User } from '../user/types';
 
+import { Customer , CustomerBranch } from '../customer/types';
+
 export type Employee = {
   id: string;
   code: string;
@@ -45,6 +47,8 @@ export type Employee = {
   district: District | null;
   province: Province | null;
   profileImageUrl: string | null;
+  customerBranch: CustomerBranch & { customer: Customer } ; 
+  
 };
 
 export type EmployeeCreate = {

From 26d6c58390b2c74bc979026d91e01fd879396736 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 16:38:17 +0700
Subject: [PATCH 107/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=20list=20=20=E0=B8=82=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=20=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 481 +++++++++++++++++-
 1 file changed, 455 insertions(+), 26 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 576d9e90..57387cc1 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -6,6 +6,7 @@ import useCustomerStore from 'src/stores/customer';
 import useEmployeeStore from 'src/stores/employee';
 import useOptionStore from 'src/stores/options';
 import useMyBranchStore from 'src/stores/my-branch';
+import useUserStore from 'src/stores/user';
 
 import { Status } from 'src/stores/types';
 
@@ -65,10 +66,53 @@ const { t, locale } = useI18n();
 const utilsStore = useUtilsStore();
 const userCustomer = useCustomerStore();
 const useMyBranch = useMyBranchStore();
+const userStore = useUserStore();
 
 const { fetchListOptionBranch } = useMyBranch;
 
-const columns = [
+const columnsEmployee = [
+  {
+    name: 'firstName',
+    align: 'left',
+    label: 'nameEmployee',
+    field: 'firstName',
+    sortable: true,
+  },
+  {
+    name: 'type',
+    align: 'left',
+    label: 'type',
+    field: 'type',
+    sortable: true,
+  },
+  {
+    name: 'formDialogInputNationality',
+    align: 'left',
+    label: 'formDialogInputNationality',
+    field: 'nationality',
+  },
+  {
+    name: 'formDialogEmployeeNRCNo',
+    align: 'left',
+    label: 'formDialogEmployeeNRCNo',
+    field: 'nrcNo',
+  },
+  {
+    name: 'formDialogInputAge',
+    align: 'left',
+    label: 'formDialogInputAge',
+    field: 'dateOfBirth',
+  },
+
+  {
+    name: 'branchLabel',
+    align: 'left',
+    label: 'branchLabel',
+    field: 'customerBranch',
+  },
+] satisfies QTableProps['columns'];
+
+const columnsCustomer = [
   {
     name: 'customerName',
     align: 'left',
@@ -77,7 +121,7 @@ const columns = [
     sortable: true,
   },
   {
-    name: 'customerType',
+    name: 'type',
     align: 'left',
     label: 'type',
     field: 'customerType',
@@ -168,7 +212,7 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
   value: 'all',
 });
 
-const fieldDisplay = ref<
+const fieldDisplayEmployer = ref<
   {
     label: string;
     value: string;
@@ -181,7 +225,7 @@ const fieldDisplay = ref<
 
   {
     label: t('type'),
-    value: 'customerType',
+    value: 'type',
   },
 
   {
@@ -199,15 +243,69 @@ const fieldDisplay = ref<
     value: 'branchEmail',
   },
 ]);
+
+const fieldDisplayEmployee = ref<
+  {
+    label: string;
+    value: string;
+  }[]
+>([
+  {
+    label: t('nameEmployee'),
+    value: 'firstName',
+  },
+  {
+    label: t('type'),
+    value: 'type',
+  },
+
+  {
+    label: t('formDialogInputNationality'),
+    value: 'formDialogInputNationality',
+  },
+
+  {
+    label: t('formDialogEmployeeNRCNo'),
+    value: 'formDialogEmployeeNRCNo',
+  },
+
+  {
+    label: t('formDialogInputAge'),
+    value: 'formDialogInputAge',
+  },
+
+  {
+    label: t('branchLabel'),
+    value: 'branchLabel',
+  },
+]);
+
 const fieldSelected = ref<
   (
     | 'customerName'
-    | 'customerType'
+    | 'type'
     | 'personName'
     | 'telephoneNo'
     | 'branchEmail'
+    | 'firstName'
+    | 'formDialogInputNationality'
+    | 'formDialogEmployeeNRCNo'
+    | 'formDialogInputAge'
+    | 'branchLabel'
   )[]
->(['customerName', 'customerType', 'personName', 'telephoneNo', 'branchEmail']);
+>([
+  'customerName',
+  'type',
+  'personName',
+  'telephoneNo',
+  'branchEmail',
+  'firstName',
+  'formDialogInputNationality',
+  'formDialogInputNationality',
+  'formDialogEmployeeNRCNo',
+  'formDialogInputAge',
+  'branchLabel',
+]);
 
 const splitterModel = ref(15);
 const modeView = ref(true);
@@ -391,8 +489,8 @@ const inputFile = (() => {
   return element;
 })();
 
-const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>();
-const listEmployee = ref();
+const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
+const listEmployee = ref<Employee[]>([]);
 
 const itemCard = [
   {
@@ -1124,7 +1222,7 @@ async function assignFormDataEmployee(id: string) {
     };
 
     formDataEmployee.value = {
-      image: foundEmployee.profileImageUrl,
+      image: null,
       customerBranchId: foundEmployee.customerBranchId,
       nrcNo: foundEmployee.nrcNo,
       dateOfBirth: foundEmployee.dateOfBirth,
@@ -1169,7 +1267,7 @@ async function assignFormDataEmployee(id: string) {
     }
 
     if (infoEmployeePersonCard.value) {
-      infoEmployeePersonCard.value[0].img = foundEmployee.profileImageUrl;
+      infoEmployeePersonCard.value[0].img = foundEmployee.profileImageUrl || '';
     }
   }
   flowStore.rotate();
@@ -1536,12 +1634,15 @@ watch([inputSearch, currentStatus], async () => {
                     { label: $t('statusINACTIVE'), value: 'INACTIVE' },
                   ]"
                 ></q-select>
-
                 <q-select
                   v-if="modeView === false"
                   id="select-field"
                   for="select-field"
-                  :options="fieldDisplay"
+                  :options="
+                    currentTab === 'employer'
+                      ? fieldDisplayEmployer
+                      : fieldDisplayEmployee
+                  "
                   :display-value="$t('displayField')"
                   v-model="fieldSelected"
                   option-label="label"
@@ -1727,7 +1828,7 @@ watch([inputSearch, currentStatus], async () => {
                       bordered
                       :grid="modeView"
                       :rows="listCustomer"
-                      :columns="columns"
+                      :columns="columnsCustomer"
                       card-container-class=" q-col-gutter-md"
                       row-key="name"
                       :rows-per-page-options="[0]"
@@ -1751,6 +1852,8 @@ watch([inputSearch, currentStatus], async () => {
                         <q-tr
                           :class="{
                             'app-text-muted': props.row.status === 'INACTIVE',
+                            'status-active': props.row.status !== 'INACTIVE',
+                            'status-inactive': props.row.status === 'INACTIVE',
                           }"
                           :props="props"
                           @click="
@@ -1769,14 +1872,7 @@ watch([inputSearch, currentStatus], async () => {
                           <q-td v-if="fieldSelected.includes('customerName')">
                             <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,
-                                }"
+                                :class="{}"
                                 style="
                                   width: 50px;
                                   display: flex;
@@ -1813,7 +1909,7 @@ watch([inputSearch, currentStatus], async () => {
                               </div>
                             </div>
                           </q-td>
-                          <q-td v-if="fieldSelected.includes('customerType')">
+                          <q-td v-if="fieldSelected.includes('type')">
                             <span
                               class="tags"
                               :class="{
@@ -1838,7 +1934,7 @@ watch([inputSearch, currentStatus], async () => {
                           </q-td>
                           <q-td>
                             <q-btn
-                              icon="mdi-eye"
+                              icon="mdi-eye-outline"
                               size="sm"
                               dense
                               round
@@ -2032,6 +2128,7 @@ watch([inputSearch, currentStatus], async () => {
                                 },
                               ],
                             }"
+                            :disabled="props.row.status === 'INACTIVE'"
                             @history="openHistory(props.row.id)"
                             @update-card="
                               () => {
@@ -2237,7 +2334,332 @@ watch([inputSearch, currentStatus], async () => {
                   class="col column justify-between q-px-md q-pt-md scroll"
                   v-if="listEmployee.length !== 0"
                 >
-                  <!-- eeee -->
+                  <q-table
+                    flat
+                    bordered
+                    :grid="modeView"
+                    :rows="listEmployee"
+                    :columns="columnsEmployee"
+                    card-container-class=" q-col-gutter-md"
+                    row-key="name"
+                    :rows-per-page-options="[0]"
+                    hide-pagination
+                    :visible-columns="fieldSelected"
+                  >
+                    <template v-slot:header="props">
+                      <q-tr 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',
+                          'status-active': props.row.status !== 'INACTIVE',
+                          'status-inactive': props.row.status === 'INACTIVE',
+                        }"
+                        :props="props"
+                        @click="
+                          () => {
+                            currentCustomerName = props.row.customerName;
+                            customerType = props.row.customerType;
+                            currentCustomerUrlImage = props.row.imageUrl;
+                            currentCustomerId = props.row.id;
+
+                            const { branch, ...payload } = props.row;
+                            currentCustomer = payload;
+                            isMainPage = false;
+                          }
+                        "
+                      >
+                        <q-td v-if="fieldSelected.includes('firstName')">
+                          <div class="row items-center">
+                            <div
+                              style="
+                                width: 50px;
+                                display: flex;
+                                margin-bottom: var(--size-2);
+                              "
+                            >
+                              <div class="branch-card__icon">
+                                <q-avatar size="md">
+                                  <q-img
+                                    :src="
+                                      props.row.profileImageUrl ??
+                                      '/no-profile.png'
+                                    "
+                                  >
+                                    <template #error>
+                                      <q-img src="/no-profile.png" />
+                                    </template>
+                                  </q-img>
+                                </q-avatar>
+
+                                <!-- <q-icon
+                                    size="md"
+                                    style="scale: 0.8"
+                                    :name="props.row.imageUrl"
+                                  /> -->
+                              </div>
+                            </div>
+                            <div class="col">
+                              <div class="col">
+                                {{
+                                  `${props.row.firstName} ${props.row.lastName}` ||
+                                  '-'
+                                }}
+                              </div>
+                              <div class="col app-text-muted">
+                                {{
+                                  `${props.row.firstNameEN} ${props.row.lastNameEN}` ||
+                                  '-'
+                                }}
+                              </div>
+                            </div>
+                          </div>
+                        </q-td>
+                        <q-td v-if="fieldSelected.includes('type')">
+                          <span class="tags tags__parimary">
+                            {{ $t('EMPLOYEE') }}
+                          </span>
+                        </q-td>
+                        <q-td
+                          v-if="
+                            fieldSelected.includes('formDialogInputNationality')
+                          "
+                        >
+                          {{ props.row.nationality || '-' }}
+                        </q-td>
+                        <q-td
+                          v-if="
+                            fieldSelected.includes('formDialogEmployeeNRCNo')
+                          "
+                        >
+                          {{ props.row.nrcNo || '-' }}
+                        </q-td>
+                        <q-td
+                          v-if="fieldSelected.includes('formDialogInputAge')"
+                        >
+                          {{ userStore.calculateAge(props.row.dateOfBirth) }}
+                        </q-td>
+
+                        <q-td
+                          v-if="fieldSelected.includes('formDialogInputAge')"
+                        >
+                        
+
+                          <div class="row items-center">
+                          <div class="col">
+                              <div class="col">
+                             {{ props.row.customerBranch.code }}
+                              </div>
+                              <div class="col app-text-muted">
+                              {{ 
+                                
+                                 $i18n.locale === 'en-US' ? `${props.row.customerBranch.nameEN}` : `${props.row.customerBranch.name}`
+                                
+                                }}
+                              </div>
+                            </div>
+                          </div>
+
+
+                        </q-td>
+                        <q-td>
+                          <q-btn
+                            icon="mdi-eye-outline"
+                            size="sm"
+                            dense
+                            round
+                            flat
+                            @click.stop="
+                              () => {
+                              openDialogInputForm('INFO', props.row.id) }
+                            "
+                          />
+
+                          <q-btn
+                            icon="mdi-dots-vertical"
+                            size="sm"
+                            dense
+                            round
+                            flat
+                            @click.stop
+                            :key="props.row.id"
+                          >
+                            <q-menu class="bordered">
+                              <q-list v-close-popup>
+                                <q-item
+                                  :id="`view-detail-btn-${props.row.name}-view`"
+                                  @click.stop="
+                                    () => {
+                                      openDialogInputForm('INFO', props.row.id);
+                                    }
+                                  "
+                                  clickable
+                                  dense
+                                  class="row q-py-sm"
+                                  style="white-space: nowrap"
+                                >
+                                  <q-icon
+                                    name="mdi-eye-outline"
+                                    class="col-3"
+                                    size="xs"
+                                    style="color: hsl(var(--green-6-hsl))"
+                                  />
+                                  <span class="col-9 q-px-md flex items-center">
+                                    {{ $t('viewDetail') }}
+                                  </span>
+                                </q-item>
+
+                                <q-item
+                                  :id="`view-detail-btn-${props.row.name}-edit`"
+                                  clickable
+                                  dense
+                                  class="row q-py-sm"
+                                  style="white-space: nowrap"
+                                  @click="
+                                    () => {
+                                      openDialogInputForm(
+                                        'INFO',
+                                        props.row.id,
+                                        true,
+                                      );
+                                    }
+                                  "
+                                >
+                                  <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="onDelete(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 () => {
+                                            toggleStatusEmployee(
+                                              props.row.id,
+                                              props.row.status === 'ACTIVE'
+                                                ? true
+                                                : false,
+                                            );
+                                          }
+                                        "
+                                        :model-value="
+                                          props.row.status !== 'INACTIVE'
+                                        "
+                                      />
+                                    </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-3">
+                        <PersonCard
+                          :field-selected="fieldSelected"
+                          history
+                          :data="{
+                            code: props.row.code,
+                            name:
+                              $i18n.locale === 'en-US'
+                                ? `${props.row.firstName} ${props.row.lastName} `.trim()
+                                : `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim(),
+                            img: props.row.imageUrl,
+                            male: props.row.gender === 'male',
+                            female: props.row.gender === 'female',
+                            detail: [
+                              {
+                                icon: 'mdi-passport',
+                                value: props.row.nationality,
+                              },
+
+                              {
+                                icon: 'mdi-clock-outline',
+                                value: props.row.dateOfBirth
+                                  ? userStore.calculateAge(
+                                      props.row.dateOfBirth,
+                                    ) ?? ''
+                                  : '',
+                              },
+                            ],
+                          }"
+                          :disabled="props.row.status === 'INACTIVE'"
+                          @history="openHistory(props.row.id)"
+                          @update-card="
+                            (action) =>
+                              openDialogInputForm(action, props.row.id, true)
+                          "
+                          @enter-card="
+                            (action) =>
+                              openDialogInputForm(action, props.row.id)
+                          "
+                          @delete-card="onDelete(props.row.id)"
+                          @toggle-status="
+                            toggleStatusEmployee(
+                              props.row.id,
+                              props.row.status === 'ACTIVE' ? true : false,
+                            )
+                          "
+                        />
+                      </div>
+                    </template>
+                  </q-table>
                 </div>
                 <div
                   v-if="listEmployee.length !== 0"
@@ -3643,6 +4065,10 @@ watch([inputSearch, currentStatus], async () => {
   padding-inline: var(--size-2);
 }
 
+.tags__parimary {
+  --_color: var(--blue-6-hsl);
+}
+
 .tags__purple {
   --_color: var(--violet-11-hsl);
 }
@@ -3651,6 +4077,10 @@ watch([inputSearch, currentStatus], async () => {
   --_color: var(--teal-10-hsl);
 }
 
+.dark .tags__parimary {
+  --_color: var(--blue-12-hsl);
+}
+
 .dark .tags__purple {
   --_color: var(--violet-10-hsl);
 }
@@ -3666,8 +4096,7 @@ watch([inputSearch, currentStatus], async () => {
 .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);
+  filter: grayscale(0.5);
   opacity: 0.5;
 }
 

From f3b0dc4e1d0c9ebd4eb6087fb3bbd4441846f36c Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 16:52:00 +0700
Subject: [PATCH 108/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20?=
 =?UTF-8?q?=20=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5=E0=B9=88=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=99=E0=B8=AA=E0=B8=96=E0=B8=B2=E0=B8=99=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A5=E0=B9=89=E0=B8=A7=E0=B9=84=E0=B8=A1=E0=B9=88?=
 =?UTF-8?q?=20=E0=B8=AD=E0=B8=B1=E0=B8=9E=E0=B9=80=E0=B8=94=E0=B8=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index d631d08c..0e10147c 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -469,7 +469,7 @@ async function toggleStatusProduct(id: string, status: Status) {
     status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
   });
 
-  await fetchListOfProduct();
+  await alternativeFetch();
   flowStore.rotate();
 }
 
@@ -478,7 +478,7 @@ async function toggleStatusService(id: string, status: Status) {
     status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
   });
 
-  await fetchListOfService();
+  await alternativeFetch();
   flowStore.rotate();
 }
 async function toggleStatusType(id: string, status: Status) {
@@ -973,6 +973,11 @@ async function fetchStatus() {
 }
 
 async function alternativeFetch() {
+
+
+console.log('asdasds');
+
+  
   if (productAndServiceTab.value === 'all') {
     await fetchListOfProductAndService();
     flowStore.rotate();

From c50e775c116f9dc72c191a68665bc5d6a7824e33 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Mon, 8 Jul 2024 17:16:34 +0700
Subject: [PATCH 109/158] refactor: lay out

---
 .../TotalProductCardComponent.vue             |   2 +-
 src/pages/04_product-service/MainPage.vue     | 310 ++++++++----------
 2 files changed, 146 insertions(+), 166 deletions(-)

diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index c38862f3..aa596898 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -42,7 +42,7 @@ withDefaults(
   <div
     bordered
     :class="{ 'is-add-product': isAddProduct }"
-    class="column bordered rounded q-pa-sm no-wrap"
+    class="column bordered rounded q-pa-sm no-wrap surface-1"
     style="height: 20rem"
     @click="$emit('select', data)"
   >
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index dc5c728b..22de202e 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1559,119 +1559,13 @@ watch(inputSearchProductAndService, async () => {
       <!-- product/service -->
       <div
         v-else-if="productMode === 'service'"
-        class="surface-1 col bordered rounded column"
+        class="surface-2 col bordered rounded column"
       >
         <div
-          class="row justify-between items-center surface-1 rounded"
+          class="row justify-between items-center surface-1 q-px-md q-py-sm rounded surface-3 bordered"
           style="z-index: 1"
         >
-          <q-tabs
-            v-model="productAndServiceTab"
-            class="full-height"
-            style="border-top-left-radius: var(--radius-2)"
-          >
-            <q-tab
-              name="all"
-              @click="
-                async () => {
-                  currentPageServiceAndProduct = 1;
-                  inputSearchProductAndService = '';
-                  currentStatus = 'All';
-                  pageSizeServiceAndProduct;
-                  // await fetchListOfProductAndService();
-                  flowStore.rotate();
-                }
-              "
-            >
-              <div
-                class="row"
-                :class="
-                  productAndServiceTab === 'all'
-                    ? 'text-bold'
-                    : 'app-text-muted'
-                "
-              >
-                {{ $t('all') }}
-                <q-badge
-                  class="rounded q-ml-sm"
-                  :class="
-                    productAndServiceTab === 'all' ? '' : 'app-text-muted'
-                  "
-                  :color="productAndServiceTab === 'all' ? 'primary' : ''"
-                  style="background-color: var(--surface-3)"
-                  :label="totalProductAndService"
-                />
-              </div>
-            </q-tab>
-
-            <q-tab
-              name="product"
-              @click="
-                async () => {
-                  currentPageServiceAndProduct = 1;
-                  inputSearchProductAndService = '';
-                  currentStatus = 'All';
-                  // await fetchListOfProduct();
-                  flowStore.rotate();
-                }
-              "
-            >
-              <div
-                class="row"
-                :class="
-                  productAndServiceTab === 'product'
-                    ? 'text-bold'
-                    : 'app-text-muted'
-                "
-              >
-                {{ $t('product') }}
-
-                <q-badge
-                  class="rounded q-ml-sm"
-                  :class="
-                    productAndServiceTab === 'product' ? '' : 'app-text-muted'
-                  "
-                  :color="productAndServiceTab === 'product' ? 'primary' : ''"
-                  style="background-color: var(--surface-3)"
-                  :label="totalProduct"
-                />
-              </div>
-            </q-tab>
-            <q-tab
-              name="service"
-              @click="
-                async () => {
-                  currentPageServiceAndProduct = 1;
-                  inputSearchProductAndService = '';
-                  currentStatus = 'All';
-                  // await fetchListOfService();
-                  flowStore.rotate();
-                }
-              "
-            >
-              <div
-                class="row"
-                :class="
-                  productAndServiceTab === 'service'
-                    ? 'text-bold'
-                    : 'app-text-muted'
-                "
-              >
-                {{ $t('service') }}
-                <q-badge
-                  class="rounded q-ml-sm"
-                  :class="
-                    productAndServiceTab === 'service' ? '' : 'app-text-muted'
-                  "
-                  :color="productAndServiceTab === 'service' ? 'primary' : ''"
-                  style="background-color: var(--surface-3)"
-                  :label="totalService"
-                />
-              </div>
-            </q-tab>
-          </q-tabs>
-
-          <div class="row q-py-sm q-pr-md">
+          <div>
             <q-input
               style="width: 300px"
               outlined
@@ -1687,7 +1581,8 @@ watch(inputSearchProductAndService, async () => {
                 <q-icon name="mdi-magnify" />
               </template>
             </q-input>
-
+          </div>
+          <div class="row">
             <q-btn
               icon="mdi-tune-vertical-variant"
               size="sm"
@@ -1754,74 +1649,159 @@ watch(inputSearchProductAndService, async () => {
         </div>
 
         <!-- tab -->
+
         <div
           v-if="productAndService && productAndService.length > 0"
-          class="row flex q-pa-md q-col-gutter-md col scroll"
+          class="row flex col q-px-md"
         >
-          <div
-            class="col-md-3 col-sm-6 col-12"
-            v-for="i in productAndServiceTab === 'all'
-              ? productAndService
-              : productAndServiceTab === 'product'
-                ? product
-                : service"
-            :key="i.id"
+          <q-tabs
+            dense
+            v-model="productAndServiceTab"
+            class="col-12 q-mb-lg bordered-b"
+            align="left"
+            style="border-top-left-radius: var(--radius-2)"
           >
-            <TotalProductCardComponent
-              :data="i"
-              :key="i.id"
-              :title="i.name"
-              :isDisabled="i.status === 'INACTIVE' ? true : false"
-              @toggleStatus="
-                () => {
-                  if (i.type === 'product') {
-                    toggleStatusProduct(i.id, i.status);
-                  }
-                  if (i.type === 'service') {
-                    toggleStatusService(i.id, i.status);
-                  }
+            <q-tab
+              name="all"
+              @click="
+                async () => {
+                  currentPageServiceAndProduct = 1;
+                  inputSearchProductAndService = '';
+                  currentStatus = 'All';
+                  pageSizeServiceAndProduct;
+                  // await fetchListOfProductAndService();
+                  flowStore.rotate();
                 }
               "
-              @menuViewDetail="
-                async () => {
-                  if (i.type === 'product') {
-                    currentIdProduct = i.id;
-                    assignFormDataProduct(i);
-                    dialogProductEdit = true;
-                  }
-                  if (i.type === 'service') {
-                    currentIdService = i.id;
-                    infoServiceEdit = false;
-                    assignFormDataProductService(i.id);
-                    dialogServiceEdit = true;
-                  }
-                  await fetchListOfOptionBranch();
-                }
-              "
-              @menuEdit="
-                async () => {
-                  if (i.type === 'product') {
-                    currentIdProduct = i.id;
-                    infoProductEdit = true;
-                    assignFormDataProduct(i);
-                    dialogProductEdit = true;
-                  }
-                  if (i.type === 'service') {
-                    currentIdService = i.id;
-                    infoServiceEdit = true;
-                    assignFormDataProductService(i.id);
-                    dialogServiceEdit = true;
-                  }
+            >
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'all'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
+              >
+                {{ $t('all') }}
+              </div>
+            </q-tab>
 
-                  await fetchListOfOptionBranch();
+            <q-tab
+              name="product"
+              @click="
+                async () => {
+                  currentPageServiceAndProduct = 1;
+                  inputSearchProductAndService = '';
+                  currentStatus = 'All';
+                  // await fetchListOfProduct();
+                  flowStore.rotate();
                 }
               "
-            />
+            >
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'product'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
+              >
+                {{ $t('product') }}
+              </div>
+            </q-tab>
+            <q-tab
+              name="service"
+              @click="
+                async () => {
+                  currentPageServiceAndProduct = 1;
+                  inputSearchProductAndService = '';
+                  currentStatus = 'All';
+                  // await fetchListOfService();
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'service'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
+              >
+                {{ $t('service') }}
+              </div>
+            </q-tab>
+          </q-tabs>
+          <div class="col-12 row flex col q-col-gutter-sm scroll full-height">
+            <div
+              class="col-md-3 col-sm-6 col-12"
+              v-for="i in productAndServiceTab === 'all'
+                ? productAndService
+                : productAndServiceTab === 'product'
+                  ? product
+                  : service"
+              :key="i.id"
+            >
+              <TotalProductCardComponent
+                :data="i"
+                :key="i.id"
+                :title="i.name"
+                :isDisabled="i.status === 'INACTIVE' ? true : false"
+                @toggleStatus="
+                  () => {
+                    if (i.type === 'product') {
+                      toggleStatusProduct(i.id, i.status);
+                    }
+                    if (i.type === 'service') {
+                      toggleStatusService(i.id, i.status);
+                    }
+                  }
+                "
+                @menuViewDetail="
+                  async () => {
+                    if (i.type === 'product') {
+                      currentIdProduct = i.id;
+                      assignFormDataProduct(i);
+                      dialogProductEdit = true;
+                    }
+                    if (i.type === 'service') {
+                      currentIdService = i.id;
+                      infoServiceEdit = false;
+                      assignFormDataProductService(i.id);
+                      dialogServiceEdit = true;
+                    }
+                    await fetchListOfOptionBranch();
+                  }
+                "
+                @menuEdit="
+                  async () => {
+                    if (i.type === 'product') {
+                      currentIdProduct = i.id;
+                      infoProductEdit = true;
+                      assignFormDataProduct(i);
+                      dialogProductEdit = true;
+                    }
+                    if (i.type === 'service') {
+                      currentIdService = i.id;
+                      infoServiceEdit = true;
+                      assignFormDataProductService(i.id);
+                      dialogServiceEdit = true;
+                    }
+
+                    await fetchListOfOptionBranch();
+                  }
+                "
+              />
+            </div>
           </div>
         </div>
 
         <!-- footer -->
-        <div class="row items-center justify-between q-px-md">
+        <div
+          class="row items-center justify-between q-px-md surface-2"
+          style="z-index: 99"
+        >
           <div class="col-4">
             <div class="row items-center">
               <div class="app-text-muted" style="width: 80px">

From 98bb78a69b6222a8f25287221bc787aa37be7950 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 17:46:05 +0700
Subject: [PATCH 110/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=20type=20=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/employee/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stores/employee/types.ts b/src/stores/employee/types.ts
index 42932fd5..8213b363 100644
--- a/src/stores/employee/types.ts
+++ b/src/stores/employee/types.ts
@@ -52,11 +52,11 @@ export type Employee = {
 };
 
 export type EmployeeCreate = {
+
+  code: string;
   image: File | null;
   customerBranchId: string;
-
   status?: Status;
-
   nrcNo: string;
 
   dateOfBirth: Date | null;

From e6824716a1273738a97d99051d8107609ef45360 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 17:46:17 +0700
Subject: [PATCH 111/158] =?UTF-8?q?refactor:=20=E0=B8=94=E0=B8=B1=E0=B8=81?=
 =?UTF-8?q?=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B8=AA?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87=20=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/employee/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index 471a9db1..6b77a8c4 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -104,7 +104,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
       transactionId?: string;
     },
   ) {
-    const { image, ...payload } = data;
+    const { code  , image, ...payload } = data;
     const res = await api.put<
       Employee & { imageUrl: string; profileImageUploadUrl: string }
     >(`/employee/${id}`, payload, {

From 7469fa17d1d525aae1ccf98d9c3801892ba19794 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 17:46:37 +0700
Subject: [PATCH 112/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9B=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B8=A3=E0=B8=B9=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B9=E0=B8=9B=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 128 +++++-------------
 1 file changed, 31 insertions(+), 97 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 57387cc1..6e0ea200 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -341,7 +341,8 @@ const formDataEmployeeOwner = ref<{
   subDistrictId: string;
   zipCode: string;
 }>();
-const formDataEmployee = ref<EmployeeCreate>({
+const formDataEmployee = ref<EmployeeCreate >({
+  code:'',
   image: null,
   customerBranchId: '',
   nrcNo: '',
@@ -723,6 +724,7 @@ function clearFormEmployee() {
   formDataEmployeeOwner.value = undefined;
 
   formDataEmployee.value = {
+    code:'',
     image: null,
     customerBranchId: '',
     nrcNo: '',
@@ -1221,7 +1223,10 @@ async function assignFormDataEmployee(id: string) {
       zipCode: foundBranch.zipCode,
     };
 
+    
+
     formDataEmployee.value = {
+      code: foundEmployee.code,
       image: null,
       customerBranchId: foundEmployee.customerBranchId,
       nrcNo: foundEmployee.nrcNo,
@@ -2169,86 +2174,6 @@ watch([inputSearch, currentStatus], async () => {
                         </div>
                       </template>
                     </q-table>
-
-                    <!-- <UsersDetailCardComponent
-                      v-for="i in listCustomer"
-                      :key="i.id"
-                      class="hover-card"
-                      :color="i.customerType === 'CORP' ? 'purple' : 'green'"
-                      :metadata="{
-                        id: i.id,
-                        disabled:
-                          i.status === 'ACTIVE' || i.status === 'CREATED',
-                      }"
-                      :badge="i.branch"
-                      :list="{
-                        id: i.id,
-                        imageUrl: i.imageUrl,
-                        type: i.customerType,
-                        name: i.customerName === '' ? '-' : i.customerName,
-                        code: i.code,
-                        status: i.status,
-
-                        detail: [
-                          {
-                            label: 'customerNameTh',
-                            value: i.customerName,
-                          },
-                          {
-                            label: 'customerNameEn',
-                            value: i.customerNameEN,
-                          },
-                        ],
-                      }"
-                      @enter-card="
-                        () => {
-                          currentCustomerName = i.customerName;
-                          customerType = i.customerType;
-                          currentCustomerUrlImage = i.imageUrl;
-                          currentCustomerId = i.id;
-
-                          const { branch, ...payload } = i;
-                          currentCustomer = payload;
-                          isMainPage = false;
-                        }
-                      "
-                      @update-card="
-                        () => {
-                          if (!listCustomer) return;
-
-                          customerType = i.customerType;
-                          const { branch, ...payload } = i;
-                          currentCustomer = payload;
-
-                          currentCustomerId = i.id;
-
-                          assignFormData(i.id);
-
-                          infoDrawerEdit = true;
-                          openDialogInputForm('INFO', i.id);
-                        }
-                      "
-                      @view-card="
-                        () => {
-                          const { branch, ...payload } = i;
-                          currentCustomer = payload;
-
-                          currentCustomerId = i.id;
-                          customerType = i.customerType;
-                          assignFormData(i.id);
-                          openDialogInputForm('INFO', i.id);
-                        }
-                      "
-                      @delete-card="deleteCustomerById(i.id)"
-                      @toggle-status="
-                        () => {
-                          toggleStatusCustomer(
-                            i.id,
-                            i.status === 'ACTIVE' ? true : false,
-                          );
-                        }
-                      "
-                    /> -->
                   </div>
                 </div>
 
@@ -2618,9 +2543,9 @@ watch([inputSearch, currentStatus], async () => {
                             code: props.row.code,
                             name:
                               $i18n.locale === 'en-US'
-                                ? `${props.row.firstName} ${props.row.lastName} `.trim()
-                                : `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim(),
-                            img: props.row.imageUrl,
+                                ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
+                                :  `${props.row.firstName} ${props.row.lastName} `.trim() ,
+                            img: props.row.profileImageUrl,
                             male: props.row.gender === 'male',
                             female: props.row.gender === 'female',
                             detail: [
@@ -3879,20 +3804,29 @@ watch([inputSearch, currentStatus], async () => {
       <template #person-card>
         <div class="q-ma-md">
           <AppBox class="surface-1" style="padding: 0">
-            <!-- <PersonCard -->
-            <!--   :can-edit-profile="infoDrawerEmployeeEdit" -->
-            <!--   no-hover -->
-            <!--   no-action -->
-            <!--   no-detail -->
+             <PersonCard 
+               :can-edit-profile="infoDrawerEmployeeEdit" 
+               no-hover 
+               no-action 
+               no-detail 
+              :data="
+              {
+                name:formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
+                code:formDataEmployee.code ,
+                male: formDataEmployee.gender === 'male',
+                female: formDataEmployee.gender === 'female',
+                img: profileUrl || undefined,
 
-            <!--   :list="infoEmployeePersonCard ? infoEmployeePersonCard : []" -->
-            <!--   :gridColumns="1" -->
-            <!--   @edit-profile=" -->
-            <!--     () => { -->
-            <!--       inputFile.click(); -->
-            <!--     } -->
-            <!--   " -->
-            <!-- /> -->
+              }
+              "
+               :list="infoEmployeePersonCard ? infoEmployeePersonCard : []" 
+               :gridColumns="1" 
+               @edit-profile=" 
+                 () => { 
+                   inputFile.click(); 
+                 } 
+               " 
+             /> 
           </AppBox>
         </div>
       </template>

From 33ca54adca7941ddfb9a621b527adc51dcb90ae9 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 8 Jul 2024 17:55:53 +0700
Subject: [PATCH 113/158] fix: edit not sent

---
 src/pages/03_customer-management/MainPage.vue | 77 ++++++++-----------
 1 file changed, 31 insertions(+), 46 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 6e0ea200..0b48bda9 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -341,8 +341,8 @@ const formDataEmployeeOwner = ref<{
   subDistrictId: string;
   zipCode: string;
 }>();
-const formDataEmployee = ref<EmployeeCreate >({
-  code:'',
+const formDataEmployee = ref<EmployeeCreate>({
+  code: '',
   image: null,
   customerBranchId: '',
   nrcNo: '',
@@ -724,7 +724,7 @@ function clearFormEmployee() {
   formDataEmployeeOwner.value = undefined;
 
   formDataEmployee.value = {
-    code:'',
+    code: '',
     image: null,
     customerBranchId: '',
     nrcNo: '',
@@ -1223,8 +1223,6 @@ async function assignFormDataEmployee(id: string) {
       zipCode: foundBranch.zipCode,
     };
 
-    
-
     formDataEmployee.value = {
       code: foundEmployee.code,
       image: null,
@@ -2379,24 +2377,20 @@ watch([inputSearch, currentStatus], async () => {
                         <q-td
                           v-if="fieldSelected.includes('formDialogInputAge')"
                         >
-                        
-
                           <div class="row items-center">
-                          <div class="col">
+                            <div class="col">
                               <div class="col">
-                             {{ props.row.customerBranch.code }}
+                                {{ props.row.customerBranch.code }}
                               </div>
                               <div class="col app-text-muted">
-                              {{ 
-                                
-                                 $i18n.locale === 'en-US' ? `${props.row.customerBranch.nameEN}` : `${props.row.customerBranch.name}`
-                                
+                                {{
+                                  $i18n.locale === 'en-US'
+                                    ? `${props.row.customerBranch.nameEN}`
+                                    : `${props.row.customerBranch.name}`
                                 }}
                               </div>
                             </div>
                           </div>
-
-
                         </q-td>
                         <q-td>
                           <q-btn
@@ -2407,7 +2401,8 @@ watch([inputSearch, currentStatus], async () => {
                             flat
                             @click.stop="
                               () => {
-                              openDialogInputForm('INFO', props.row.id) }
+                                openDialogInputForm('INFO', props.row.id);
+                              }
                             "
                           />
 
@@ -2544,7 +2539,7 @@ watch([inputSearch, currentStatus], async () => {
                             name:
                               $i18n.locale === 'en-US'
                                 ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
-                                :  `${props.row.firstName} ${props.row.lastName} `.trim() ,
+                                : `${props.row.firstName} ${props.row.lastName} `.trim(),
                             img: props.row.profileImageUrl,
                             male: props.row.gender === 'male',
                             female: props.row.gender === 'female',
@@ -3339,16 +3334,8 @@ watch([inputSearch, currentStatus], async () => {
     :isEdit="infoDrawerEdit"
     :close="() => onClose()"
     :editData="() => (infoDrawerEdit = true)"
-    :submit="
-      () => () => {
-        onSubmitEdit(currentCustomerId);
-      }
-    "
-    :deleteData="
-      () => {
-        deleteCustomerById(currentCustomerId);
-      }
-    "
+    :submit="() => onSubmitEdit(currentCustomerId)"
+    :deleteData="() => deleteCustomerById(currentCustomerId)"
   >
     <template #info>
       <InfoForm>
@@ -3804,29 +3791,27 @@ watch([inputSearch, currentStatus], async () => {
       <template #person-card>
         <div class="q-ma-md">
           <AppBox class="surface-1" style="padding: 0">
-             <PersonCard 
-               :can-edit-profile="infoDrawerEmployeeEdit" 
-               no-hover 
-               no-action 
-               no-detail 
-              :data="
-              {
-                name:formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
-                code:formDataEmployee.code ,
+            <PersonCard
+              :can-edit-profile="infoDrawerEmployeeEdit"
+              no-hover
+              no-action
+              no-detail
+              :data="{
+                name:
+                  formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
+                code: formDataEmployee.code,
                 male: formDataEmployee.gender === 'male',
                 female: formDataEmployee.gender === 'female',
                 img: profileUrl || undefined,
-
-              }
+              }"
+              :list="infoEmployeePersonCard ? infoEmployeePersonCard : []"
+              :gridColumns="1"
+              @edit-profile="
+                () => {
+                  inputFile.click();
+                }
               "
-               :list="infoEmployeePersonCard ? infoEmployeePersonCard : []" 
-               :gridColumns="1" 
-               @edit-profile=" 
-                 () => { 
-                   inputFile.click(); 
-                 } 
-               " 
-             /> 
+            />
           </AppBox>
         </div>
       </template>

From fe96dba906a710a18810952c532b9c913948a7ae Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 18:01:04 +0700
Subject: [PATCH 114/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B9=84=E0=B8=82=E0=B8=A3=E0=B8=B9=E0=B8=9B=E0=B8=99=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B9=84=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=88=E0=B9=84=E0=B8=94=E0=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 0b48bda9..05dd2467 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -666,6 +666,9 @@ function onCloseBranch() {
 }
 
 function clearForm() {
+
+profileFile.value = undefined;
+
   dialogInputForm.value = false;
   formData.value = {
     status: 'CREATED',
@@ -958,7 +961,9 @@ async function toggleStatusCustomer(id: string, status: boolean) {
 }
 
 async function onSubmitEdit(id: string) {
+
   if (selectorLabel.value === 'EMPLOYER') {
+    
     if (!formData.value) return;
 
     const tempValue: CustomerUpdate = {
@@ -970,10 +975,15 @@ async function onSubmitEdit(id: string) {
       customerBranch: formData.value.customerBranch,
       taxNo: formData.value.taxNo,
       personName: formData.value.personName,
+      image:  profileFile.value ,
     };
+     
+    
 
     if (tempValue.status === 'CREATED') delete tempValue['status'];
 
+
+   
     await editById(id, tempValue);
     infoDrawer.value = false;
     fetchListCustomer();

From dbb366ead3a84cc4becea759774bd9705610a5b7 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 9 Jul 2024 10:16:30 +0700
Subject: [PATCH 115/158] fix: i18n typo

---
 src/components/04_product-service/BasicInfoProduct.vue   | 2 +-
 src/components/04_product-service/PriceDataComponent.vue | 2 +-
 src/i18n/en-US/product-service.ts                        | 5 +++--
 src/i18n/th-th/product-service.ts                        | 3 ++-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/04_product-service/BasicInfoProduct.vue b/src/components/04_product-service/BasicInfoProduct.vue
index 2e23bf00..032e3e89 100644
--- a/src/components/04_product-service/BasicInfoProduct.vue
+++ b/src/components/04_product-service/BasicInfoProduct.vue
@@ -143,7 +143,7 @@ onMounted(async () => {
       :borderless="readonly"
       hide-bottom-space
       class="col-4"
-      :label="$t('processingTime')"
+      :label="$t('productProcessingTime')"
       v-model="process"
       type="number"
     />
diff --git a/src/components/04_product-service/PriceDataComponent.vue b/src/components/04_product-service/PriceDataComponent.vue
index cb06353b..aa21de8c 100644
--- a/src/components/04_product-service/PriceDataComponent.vue
+++ b/src/components/04_product-service/PriceDataComponent.vue
@@ -13,7 +13,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="col-3 app-text-muted">• {{ $t('priceeInformation') }}</div>
+  <div class="col-3 app-text-muted">• {{ $t('priceInformation') }}</div>
   <div class="col-9 row q-col-gutter-md">
     <q-input
       :dense="dense"
diff --git a/src/i18n/en-US/product-service.ts b/src/i18n/en-US/product-service.ts
index a912978c..ef3ebe5d 100644
--- a/src/i18n/en-US/product-service.ts
+++ b/src/i18n/en-US/product-service.ts
@@ -21,8 +21,9 @@ export default {
 
   productCode: 'Product Code',
   productName: 'Product Name',
-  processingTime: 'Processing Time (Day)',
-  priceeInformation: 'Price Information',
+  productDetail: 'Product Detail',
+  productProcessingTime: 'Processing Time (Day)',
+  priceInformation: 'Price Information',
   salePrice: 'Sale Price',
   agentPrice: 'Agent Price',
   processingPrice: 'Processing Price',
diff --git a/src/i18n/th-th/product-service.ts b/src/i18n/th-th/product-service.ts
index 583047de..f3e33d54 100644
--- a/src/i18n/th-th/product-service.ts
+++ b/src/i18n/th-th/product-service.ts
@@ -21,7 +21,8 @@ export default {
 
   productCode: 'รหัสสินค้า',
   productName: 'ชื่อสินค้า',
-  processingTime: 'ระยะเวลาดำเนินการ (วัน)',
+  productDetail: 'รายละเอียดสินค้า',
+  productProcessingTime: 'ระยะเวลาดำเนินการ (วัน)',
   priceeInformation: 'ข้อมูลราคา',
   salePrice: 'ราคาขาย',
   agentPrice: 'ราคาตัวแทน',

From face6973cda2a744ef61a47fc0b9983433e7768e Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 9 Jul 2024 11:19:10 +0700
Subject: [PATCH 116/158] refactor: add grid / table view to product service

---
 src/pages/04_product-service/MainPage.vue | 671 ++++++++++++++++------
 1 file changed, 509 insertions(+), 162 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 5f6430e6..579deda8 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, watch, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
+import type { QTableProps } from 'quasar';
 import ItemCard from 'components/ItemCard.vue';
 import AppBox from 'components/app/AppBox.vue';
 import AddButton from 'components/AddButton.vue';
@@ -120,6 +121,8 @@ const currentStatusProduct = ref(false);
 const drawerInfo = ref(false);
 const isEdit = ref(false);
 
+const modeView = ref(false);
+
 const dialogInputForm = ref(false);
 const dialogProduct = ref(false);
 const dialogService = ref(false);
@@ -149,7 +152,7 @@ const service = ref<(Service & { type: 'service' })[]>();
 const resultSearchProduct = ref<ProductList[]>();
 const productAndService = ref<ServiceAndProduct[]>([]);
 
-const productAndServiceTab = ref<'all' | 'product' | 'service'>('all');
+const productAndServiceTab = ref<'product' | 'service'>('service');
 const manageWorkNameDialog = ref(false);
 const previousValue = ref();
 
@@ -200,6 +203,69 @@ const serviceTab = [
 ];
 const hideStat = ref(false);
 
+const tbColumn = {
+  product: [
+    { name: 'productName', align: 'left', label: 'productName', field: 'name' },
+    {
+      name: 'productDetail',
+      align: 'left',
+      label: 'productDetail',
+      field: 'detail',
+    },
+    {
+      name: 'productProcessingTime',
+      align: 'left',
+      label: 'productProcessingTime',
+      field: 'process',
+    },
+    {
+      name: 'priceInformation',
+      align: 'left',
+      label: 'priceInformation',
+      field: 'name',
+    },
+  ],
+  service: [
+    { name: 'serviceName', align: 'left', label: 'serviceName', field: 'name' },
+    {
+      name: 'serviceDetail',
+      align: 'left',
+      label: 'serviceDetail',
+      field: 'detail',
+    },
+    {
+      name: 'serviceWorkTotal',
+      align: 'left',
+      label: 'serviceWorkTotal',
+      field: (v) => v.work.length,
+    },
+  ],
+} satisfies {
+  product: QTableProps['columns'];
+  service: QTableProps['columns'];
+};
+
+const tbControl = reactive({
+  product: {
+    fieldDisplay: [
+      'productName',
+      'productDetail',
+      'productProcessingTime',
+      'priceInformation',
+    ],
+    fieldSelected: [
+      'productName',
+      'productDetail',
+      'productProcessingTime',
+      'priceInformation',
+    ],
+  },
+  service: {
+    fieldDisplay: ['serviceName', 'serviceDetail', 'serviceWorkTotal'],
+    fieldSelected: ['serviceName', 'serviceDetail', 'serviceWorkTotal'],
+  },
+});
+
 const workItems = ref<WorkItems[]>([]);
 const workNameRef = ref();
 const selectProduct = ref<ProductList[]>([]);
@@ -541,10 +607,7 @@ async function deleteServiceById(serviceId?: string) {
       const res = await deleteService(serviceId ?? currentIdService.value);
 
       if (productAndServiceTab.value === 'service') {
-        await await fetchListOfService();
-      }
-      if (productAndServiceTab.value === 'all') {
-        await fetchListOfProductAndService();
+        await fetchListOfService();
       }
 
       dialogServiceEdit.value = false;
@@ -573,9 +636,6 @@ async function deleteTypeOfProduct(id?: string) {
       if (productAndServiceTab.value === 'product') {
         await fetchListOfProduct();
       }
-      if (productAndServiceTab.value === 'all') {
-        await fetchListOfProductAndService();
-      }
 
       dialogProductEdit.value = false;
 
@@ -722,7 +782,6 @@ const prevProduct = ref<ProductCreate>({
 
 function assignFormDataProduct(data: ProductList) {
   statusToggle.value = data.status === 'INACTIVE' ? false : true;
-  console.log(data);
   profileUrl.value = `${baseUrl.value}/product/${data?.id}/image`;
   profileSubmit.value = true;
 
@@ -835,9 +894,6 @@ async function submitService() {
     });
   }
 
-  if (productAndServiceTab.value === 'all') {
-    await fetchListOfProductAndService();
-  }
   if (productAndServiceTab.value === 'service') {
     await fetchListOfService();
   }
@@ -868,9 +924,6 @@ async function submitProduct() {
   totalProduct.value = totalProduct.value + 1;
   clearFormProduct();
 
-  if (productAndServiceTab.value === 'all') {
-    await fetchListOfProductAndService();
-  }
   if (productAndServiceTab.value === 'product') {
     await fetchListOfProduct();
   }
@@ -957,10 +1010,6 @@ async function calculateStats() {
 }
 
 async function fetchStatus() {
-  if (productAndServiceTab.value === 'all') {
-    await fetchListOfProductAndService();
-    flowStore.rotate();
-  }
   if (productAndServiceTab.value === 'product') {
     await fetchListOfProduct();
     flowStore.rotate();
@@ -973,15 +1022,6 @@ async function fetchStatus() {
 }
 
 async function alternativeFetch() {
-
-
-console.log('asdasds');
-
-  
-  if (productAndServiceTab.value === 'all') {
-    await fetchListOfProductAndService();
-    flowStore.rotate();
-  }
   if (productAndServiceTab.value === 'product') {
     await fetchListOfProduct();
 
@@ -1163,10 +1203,7 @@ watch(inputSearchProductAndService, async () => {
     </div>
 
     <div v-if="stat[0].count !== 0" class="column full-height no-wrap">
-      <div
-        v-if="productMode === 'group' || productMode === 'type'"
-        class="text-body-2 q-mb-xs flex items-center"
-      >
+      <div class="text-body-2 q-mb-xs flex items-center">
         {{ $t('dataSum') }}
         <q-btn
           class="q-ml-xs"
@@ -1182,17 +1219,8 @@ watch(inputSearchProductAndService, async () => {
         />
       </div>
 
-      <transition
-        v-if="productMode === 'group' || productMode === 'type'"
-        name="slide"
-      >
-        <div
-          v-if="
-            (productMode === 'group' && !hideStat) ||
-            (productMode === 'type' && !hideStat)
-          "
-          class="scroll q-mb-md"
-        >
+      <transition name="slide">
+        <div v-if="!hideStat" class="scroll q-mb-md">
           <div style="display: inline-block">
             <StatCard
               label-i18n
@@ -1342,7 +1370,7 @@ watch(inputSearchProductAndService, async () => {
                     pathTypeName = v.name;
                     currentIdType = v.id;
                     productMode = 'service';
-                    productAndServiceTab = 'all';
+                    productAndServiceTab = 'service';
                     // await featchStatsService();
                     // await featchStatsProduct();
                     await fetchListOfProduct();
@@ -1542,7 +1570,7 @@ watch(inputSearchProductAndService, async () => {
         class="surface-2 col bordered rounded column"
       >
         <div
-          class="row justify-between items-center surface-1 q-px-md q-py-sm rounded surface-3 bordered"
+          class="row justify-between items-center q-px-md q-py-sm rounded surface-2"
           style="z-index: 1"
         >
           <div>
@@ -1562,7 +1590,7 @@ watch(inputSearchProductAndService, async () => {
               </template>
             </q-input>
           </div>
-          <div class="row">
+          <div class="row" style="gap: var(--size-2)">
             <q-btn
               icon="mdi-tune-vertical-variant"
               size="sm"
@@ -1612,13 +1640,56 @@ watch(inputSearchProductAndService, async () => {
                 </q-list>
               </q-menu>
             </q-btn>
+            <q-btn-toggle
+              v-model="modeView"
+              id="btn-mode"
+              dense
+              class="no-shadow bordered rounded surface-1"
+              :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+              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: $q.dark.isActive
+                      ? modeView
+                        ? '#C9D3DB '
+                        : '#787B7C'
+                      : 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: $q.dark.isActive
+                      ? modeView === false
+                        ? '#C9D3DB'
+                        : '#787B7C'
+                      : modeView === false
+                        ? '#787B7C'
+                        : '#C9D3DB',
+                  }"
+                />
+              </template>
+            </q-btn-toggle>
           </div>
         </div>
 
         <div
           v-if="
-            (productAndServiceTab === 'all' &&
-              productAndService?.length === 0) ||
             (productAndServiceTab === 'product' && product?.length === 0) ||
             (productAndServiceTab === 'service' && service?.length === 0)
           "
@@ -1632,63 +1703,14 @@ watch(inputSearchProductAndService, async () => {
 
         <div
           v-if="productAndService && productAndService.length > 0"
-          class="row flex col q-px-md"
+          class="row flex col"
         >
           <q-tabs
             dense
             v-model="productAndServiceTab"
-            class="col-12 q-mb-lg bordered-b"
+            class="col-12 bordered-b q-px-md"
             align="left"
-            style="border-top-left-radius: var(--radius-2)"
           >
-            <q-tab
-              name="all"
-              @click="
-                async () => {
-                  currentPageServiceAndProduct = 1;
-                  inputSearchProductAndService = '';
-                  currentStatus = 'All';
-                  pageSizeServiceAndProduct;
-                  // await fetchListOfProductAndService();
-                  flowStore.rotate();
-                }
-              "
-            >
-              <div
-                class="row"
-                :class="
-                  productAndServiceTab === 'all'
-                    ? 'text-bold'
-                    : 'app-text-muted'
-                "
-              >
-                {{ $t('all') }}
-              </div>
-            </q-tab>
-
-            <q-tab
-              name="product"
-              @click="
-                async () => {
-                  currentPageServiceAndProduct = 1;
-                  inputSearchProductAndService = '';
-                  currentStatus = 'All';
-                  // await fetchListOfProduct();
-                  flowStore.rotate();
-                }
-              "
-            >
-              <div
-                class="row"
-                :class="
-                  productAndServiceTab === 'product'
-                    ? 'text-bold'
-                    : 'app-text-muted'
-                "
-              >
-                {{ $t('product') }}
-              </div>
-            </q-tab>
             <q-tab
               name="service"
               @click="
@@ -1712,67 +1734,394 @@ watch(inputSearchProductAndService, async () => {
                 {{ $t('service') }}
               </div>
             </q-tab>
-          </q-tabs>
-          <div class="col-12 row flex col q-col-gutter-sm scroll full-height">
-            <div
-              class="col-md-3 col-sm-6 col-12"
-              v-for="i in productAndServiceTab === 'all'
-                ? productAndService
-                : productAndServiceTab === 'product'
-                  ? product
-                  : service"
-              :key="i.id"
+            <q-tab
+              name="product"
+              @click="
+                async () => {
+                  currentPageServiceAndProduct = 1;
+                  inputSearchProductAndService = '';
+                  currentStatus = 'All';
+                  // await fetchListOfProduct();
+                  flowStore.rotate();
+                }
+              "
             >
-              <TotalProductCardComponent
-                :data="i"
-                :key="i.id"
-                :title="i.name"
-                :isDisabled="i.status === 'INACTIVE' ? true : false"
-                @toggleStatus="
-                  () => {
-                    if (i.type === 'product') {
-                      toggleStatusProduct(i.id, i.status);
-                    }
-                    if (i.type === 'service') {
-                      toggleStatusService(i.id, i.status);
-                    }
-                  }
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'product'
+                    ? 'text-bold'
+                    : 'app-text-muted'
                 "
-                @menuViewDetail="
-                  async () => {
-                    if (i.type === 'product') {
-                      currentIdProduct = i.id;
-                      assignFormDataProduct(i);
-                      dialogProductEdit = true;
-                    }
-                    if (i.type === 'service') {
-                      currentIdService = i.id;
-                      infoServiceEdit = false;
-                      assignFormDataProductService(i.id);
-                      dialogServiceEdit = true;
-                    }
-                    await fetchListOfOptionBranch();
-                  }
+              >
+                {{ $t('product') }}
+              </div>
+            </q-tab>
+          </q-tabs>
+          <div class="col-12 flex col scroll full-height q-pa-md surface-1">
+            <div class="full-width">
+              <q-table
+                class="full-width"
+                flat
+                bordered
+                :rows-per-page-options="[0]"
+                :rows="{ product, service }[productAndServiceTab] || []"
+                :columns="
+                  {
+                    product: tbColumn.product,
+                    service: tbColumn.service,
+                  }[productAndServiceTab]
                 "
-                @menuEdit="
-                  async () => {
-                    if (i.type === 'product') {
-                      currentIdProduct = i.id;
-                      infoProductEdit = true;
-                      assignFormDataProduct(i);
-                      dialogProductEdit = true;
-                    }
-                    if (i.type === 'service') {
-                      currentIdService = i.id;
-                      infoServiceEdit = true;
-                      assignFormDataProductService(i.id);
-                      dialogServiceEdit = true;
-                    }
+                :grid="modeView"
+                card-container-class="row q-col-gutter-md"
+                row-key="name"
+                hide-pagination
+                :visible-columns="
+                  {
+                    product: tbControl.product.fieldSelected,
+                    service: tbControl.service.fieldSelected,
+                  }[productAndServiceTab]
+                "
+              >
+                <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>
 
-                    await fetchListOfOptionBranch();
-                  }
-                "
-              />
+                <template v-slot:body="props">
+                  <q-tr
+                    :class="{
+                      'app-text-muted': props.row.status === 'INACTIVE',
+                    }"
+                    :props="props"
+                  >
+                    <q-td
+                      v-if="
+                        {
+                          product: tbControl.product.fieldSelected,
+                          service: tbControl.service.fieldSelected,
+                        }[productAndServiceTab].includes(
+                          { product: 'productName', service: 'serviceName' }[
+                            productAndServiceTab
+                          ],
+                        )
+                      "
+                    >
+                      <div class="row items-center">
+                        <div
+                          :class="{
+                            'status-active': props.row.status !== 'INACTIVE',
+                            'status-inactive': props.row.status === 'INACTIVE',
+                          }"
+                          style="
+                            width: 50px;
+                            display: flex;
+                            margin-bottom: var(--size-2);
+                          "
+                        >
+                          <div class="table__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="
+                        {
+                          product: tbControl.product.fieldSelected,
+                          service: tbControl.service.fieldSelected,
+                        }[productAndServiceTab].includes(
+                          {
+                            product: 'productDetail',
+                            service: 'serviceDetail',
+                          }[productAndServiceTab],
+                        )
+                      "
+                    >
+                      {{ props.row.detail }}
+                    </q-td>
+                    <q-td
+                      v-if="
+                        {
+                          product: tbControl.product.fieldSelected,
+                          service: tbControl.service.fieldSelected,
+                        }[productAndServiceTab].includes(
+                          {
+                            product: 'productProcessingTime',
+                            service: 'serviceWorkTotal',
+                          }[productAndServiceTab],
+                        )
+                      "
+                    >
+                      {{
+                        {
+                          product: props.row.remark,
+                          service: props.row.work?.length,
+                        }[productAndServiceTab]
+                      }}
+                    </q-td>
+                    <q-td
+                      v-if="
+                        {
+                          product: tbControl.product.fieldSelected,
+                          service: tbControl.service.fieldSelected,
+                        }[productAndServiceTab].includes(
+                          {
+                            product: 'productProcessingTime',
+                            service: 'empty',
+                          }[productAndServiceTab],
+                        )
+                      "
+                    >
+                      {{ props.row.process }}
+                    </q-td>
+                    <q-td>
+                      <q-btn
+                        icon="mdi-eye-outline"
+                        size="sm"
+                        dense
+                        round
+                        flat
+                        @click.stop="
+                          async () => {
+                            if (props.row.type === 'product') {
+                              currentIdProduct = props.row.id;
+                              assignFormDataProduct(props.row);
+                              dialogProductEdit = true;
+                            }
+                            if (props.row.type === 'service') {
+                              currentIdService = props.row.id;
+                              infoServiceEdit = false;
+                              assignFormDataProductService(props.row.id);
+                              dialogServiceEdit = true;
+                            }
+                            await fetchListOfOptionBranch();
+                          }
+                        "
+                      />
+
+                      <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="
+                                async () => {
+                                  if (props.row.type === 'product') {
+                                    currentIdProduct = props.row.id;
+                                    assignFormDataProduct(props.row);
+                                    dialogProductEdit = true;
+                                  }
+                                  if (props.row.type === 'service') {
+                                    currentIdService = props.row.id;
+                                    infoServiceEdit = false;
+                                    assignFormDataProductService(props.row.id);
+                                    dialogServiceEdit = true;
+                                  }
+                                  await fetchListOfOptionBranch();
+                                }
+                              "
+                              clickable
+                              dense
+                              class="row q-py-sm"
+                              style="white-space: nowrap"
+                            >
+                              <q-icon
+                                name="mdi-eye-outline"
+                                class="col-3"
+                                size="xs"
+                                style="color: hsl(var(--green-6-hsl))"
+                              />
+                              <span class="col-9 q-px-md flex items-center">
+                                {{ $t('viewDetail') }}
+                              </span>
+                            </q-item>
+
+                            <q-item
+                              :id="`view-detail-btn-${props.row.name}-edit`"
+                              clickable
+                              dense
+                              class="row q-py-sm"
+                              style="white-space: nowrap"
+                              @click="
+                                async () => {
+                                  if (props.row.type === 'product') {
+                                    currentIdProduct = props.row.id;
+                                    infoProductEdit = true;
+                                    assignFormDataProduct(props.row);
+                                    dialogProductEdit = true;
+                                  }
+                                  if (props.row.type === 'service') {
+                                    currentIdService = props.row.id;
+                                    infoServiceEdit = true;
+                                    assignFormDataProductService(props.row.id);
+                                    dialogServiceEdit = true;
+                                  }
+
+                                  await fetchListOfOptionBranch();
+                                }
+                              "
+                            >
+                              <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=""
+                            >
+                              <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="
+                                      () => {
+                                        if (props.row.type === 'product') {
+                                          toggleStatusProduct(
+                                            props.row.id,
+                                            props.row.status,
+                                          );
+                                        }
+                                        if (props.row.type === 'service') {
+                                          toggleStatusService(
+                                            props.row.id,
+                                            props.row.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="{ row }">
+                  <div class="col-12 col-md-6">
+                    <TotalProductCardComponent
+                      :data="row"
+                      :key="row.id"
+                      :title="row.name"
+                      :isDisabled="row.status === 'INACTIVE' ? true : false"
+                      @toggleStatus="
+                        () => {
+                          if (row.type === 'product') {
+                            toggleStatusProduct(row.id, row.status);
+                          }
+                          if (row.type === 'service') {
+                            toggleStatusService(row.id, row.status);
+                          }
+                        }
+                      "
+                      @menuViewDetail="
+                        async () => {
+                          if (row.type === 'product') {
+                            currentIdProduct = row.id;
+                            assignFormDataProduct(row);
+                            dialogProductEdit = true;
+                          }
+                          if (row.type === 'service') {
+                            currentIdService = row.id;
+                            infoServiceEdit = false;
+                            assignFormDataProductService(row.id);
+                            dialogServiceEdit = true;
+                          }
+                          await fetchListOfOptionBranch();
+                        }
+                      "
+                      @menuEdit="
+                        async () => {
+                          if (row.type === 'product') {
+                            currentIdProduct = row.id;
+                            infoProductEdit = true;
+                            assignFormDataProduct(row);
+                            dialogProductEdit = true;
+                          }
+                          if (row.type === 'service') {
+                            currentIdService = row.id;
+                            infoServiceEdit = true;
+                            assignFormDataProductService(row.id);
+                            dialogServiceEdit = true;
+                          }
+
+                          await fetchListOfOptionBranch();
+                        }
+                      "
+                    />
+                  </div>
+                </template>
+              </q-table>
             </div>
           </div>
         </div>
@@ -1821,11 +2170,9 @@ watch(inputSearchProductAndService, async () => {
             {{
               $t('recordsPage', {
                 resultcurrentPage:
-                  productAndServiceTab === 'all'
-                    ? productAndService.length
-                    : productAndServiceTab === 'product'
-                      ? product?.length
-                      : service?.length,
+                  productAndServiceTab === 'product'
+                    ? product?.length
+                    : service?.length,
                 total: total,
               })
             }}

From 97e6726567fa473f10e6aa7a0dd96752d35a0f5a Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 11:21:25 +0700
Subject: [PATCH 117/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20list=20=20=E0=B8=82=E0=B8=AD=E0=B8=87=20?=
 =?UTF-8?q?=20user?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02_personnel-management/MainPage.vue      | 493 +++++++++++++++++-
 1 file changed, 479 insertions(+), 14 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 79d1fc0c..108ac12c 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from 'vue';
-import { storeToRefs } from 'pinia';
 import useUtilsStore, { dialog, calculateAge } from 'src/stores/utils';
+import type { QTableProps } from 'quasar';
+import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import useFlowStore from 'src/stores/flow';
 import useUserStore from 'stores/user';
@@ -32,7 +33,7 @@ import NoData from 'components/NoData.vue';
 import ProfileUpload from 'components/ProfileUpload.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 
-const { locale } = useI18n();
+const { locale, t } = useI18n();
 
 const utilsStore = useUtilsStore();
 const flowStore = useFlowStore();
@@ -77,7 +78,37 @@ const defaultFormData = {
 };
 
 const modeView = ref(true);
-const fieldSelected = ref();
+
+const fieldSelectedOption = ref<{ label: string; value: string }[]>([
+  {
+    label: 'fullname',
+    value: 'name',
+  },
+  {
+    label: 'type',
+    value: 'type',
+  },
+  {
+    label: 'telephone',
+    value: 'telephoneNo',
+  },
+  {
+    label: 'personnelCardAge',
+    value: 'birthDate',
+  },
+  {
+    label: 'formDialogInputEmail',
+    value: 'email',
+  },
+  {
+    label: 'userRole',
+    value: 'userRole',
+  },
+]);
+
+const fieldSelected = ref<
+  ('name' | 'type' | 'telephoneNo' | 'birthDate' | 'email' | 'userRole')[]
+>(['name', 'type', 'telephoneNo', 'birthDate', 'email', 'userRole']);
 const fieldDisplay = ref();
 const hideStat = ref(false);
 const userCode = ref<string>();
@@ -148,6 +179,46 @@ inputFile.accept = 'image/*';
 
 const reader = new FileReader();
 
+const columns = [
+  {
+    name: 'name',
+    align: 'left',
+    label: 'fullname',
+    field: 'firstName',
+  },
+  {
+    name: 'type',
+    align: 'left',
+    label: 'type',
+    field: 'type',
+  },
+  {
+    name: 'telephoneNo',
+    align: 'left',
+    label: 'telephone',
+    field: 'telephoneNo',
+  },
+  {
+    name: 'birthDate',
+    align: 'left',
+    label: 'personnelCardAge',
+    field: 'birthDate',
+  },
+  {
+    name: 'email',
+    align: 'left',
+    label: 'formDialogInputEmail',
+    field: 'email',
+  },
+
+  {
+    name: 'userRole',
+    align: 'left',
+    label: 'userRole',
+    field: 'userRole',
+  },
+] satisfies QTableProps['columns'];
+
 reader.addEventListener('load', () => {
   if (typeof reader.result === 'string') {
     urlProfile.value = reader.result;
@@ -659,12 +730,15 @@ watch(inputSearch, async () => await fetchUserList());
               ></q-select>
 
               <q-select
+                v-if="!modeView"
                 id="select-field"
                 for="select-field"
-                :options="[
-                  { label: 'กันว่าง 1', value: 'กันว่าง 1' },
-                  { label: 'กันว่าง 2', value: 'กันว่าง 2' },
-                ]"
+                :options="
+                  fieldSelectedOption.map((v) => ({
+                    ...v,
+                    label: $t(v.label),
+                  }))
+                "
                 :display-value="$t('displayField')"
                 v-model="fieldSelected"
                 option-label="label"
@@ -843,11 +917,321 @@ watch(inputSearch, async () => await fetchUserList());
       </div>
 
       <div class="col scroll column">
-        <div
-          v-if="userData && userData.total > 0 && !inputSearch"
-          class="q-pa-md q-col-gutter-md row"
-        >
-          <div
+        <div v-if="userData && userData.total > 0 && !inputSearch">
+          <q-table
+            flat
+            bordered
+            :grid="modeView"
+            :rows="
+              userData.result.filter((v) => {
+                if (
+                  statusFilter === 'statusACTIVE' &&
+                  v.status === 'INACTIVE'
+                ) {
+                  return false;
+                }
+
+                if (
+                  statusFilter === 'statusINACTIVE' &&
+                  v.status !== 'INACTIVE'
+                ) {
+                  return false;
+                }
+
+                return true;
+              })
+            "
+            :columns="columns"
+            card-container-class="q-col-gutter-md  full-width "
+            row-key="name"
+            :rows-per-page-options="[0]"
+            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>
+
+            <template v-slot:body="props">
+              <q-tr
+                :class="{
+                  'app-text-muted': props.row.status === 'INACTIVE',
+                  'status-active': props.row.status !== 'INACTIVE',
+                  'status-inactive': props.row.status === 'INACTIVE',
+                }"
+                :props="props"
+              >
+                <q-td v-if="fieldSelected.includes('name')">
+                  <div class="row items-center">
+                    <div
+                      style="
+                        width: 50px;
+                        display: flex;
+                        margin-bottom: var(--size-2);
+                      "
+                    >
+                      <div class="branch-card__icon">
+                        <q-avatar size="md">
+                          <q-img
+                            :src="
+                              props.row.profileImageUrl ?? '/no-profile.png'
+                            "
+                          >
+                            <template #error>
+                              <q-img src="/no-profile.png" />
+                            </template>
+                          </q-img>
+                        </q-avatar>
+                      </div>
+                    </div>
+                    <div class="col">
+                      <div class="col">
+                        {{
+                          $i18n.locale === 'en-US'
+                            ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
+                            : `${props.row.firstName} ${props.row.lastName}`.trim()
+                        }}
+
+                        <q-icon
+                          class="q-pl-xs"
+                          :class="{
+                            'symbol-gender': props.row.gender,
+                            'symbol-gender__male': props.row.gender === 'male',
+                            'symbol-gender__female':
+                              props.row.gender === 'female',
+                          }"
+                          :name="`mdi-gender-${props.row.gender === 'male' ? 'male' : 'female'}`"
+                          width="24px"
+                        />
+                      </div>
+                      <div class="col app-text-muted">
+                        {{ props.row.code || '-' }}
+                      </div>
+                    </div>
+                  </div>
+                </q-td>
+                <q-td v-if="fieldSelected.includes('type')">
+                  <span
+                    class="tags"
+                    :class="{
+                      [`tags__${
+                        {
+                          USER: 'cyan',
+                          MESSENGER: 'yellow',
+                          DELEGATE: 'red',
+                          AGENCY: 'magenta',
+                        }[props.row.userType as string] || 'pink'
+                      } }`]: true,
+                    }"
+                  >
+                    {{
+                      $t(
+                        {
+                          USER: 'USER',
+                          MESSENGER: 'MESSENGER',
+                          DELEGATE: 'DELEGATE',
+                          AGENCY: 'AGENCY',
+                        }[props.row.userType as string] || 'USER',
+                      )
+                    }}
+                  </span>
+                </q-td>
+
+                <q-td v-if="fieldSelected.includes('telephoneNo')">
+                  {{ props.row.telephoneNo || '-' }}
+                </q-td>
+
+                <q-td v-if="fieldSelected.includes('birthDate')">
+                  {{ calculateAge(props.row.birthDate) || '-' }}
+                </q-td>
+
+                <q-td v-if="fieldSelected.includes('email')">
+                  {{ props.row.email || '-' }}
+                </q-td>
+
+                <q-td v-if="fieldSelected.includes('userRole')">
+                  {{ props.row.userRole || '-' }}
+                </q-td>
+
+                <q-td>
+                  <q-btn
+                    icon="mdi-eye-outline"
+                    size="sm"
+                    dense
+                    round
+                    flat
+                    @click.stop="
+                      () => {
+                        openDialog('INFO', props.row.id);
+                      }
+                    "
+                  />
+
+                  <q-btn
+                    icon="mdi-dots-vertical"
+                    size="sm"
+                    dense
+                    round
+                    flat
+                    @click.stop
+                    :key="props.row.id"
+                  >
+                    <q-menu class="bordered">
+                      <q-list v-close-popup>
+                        <q-item
+                          :id="`view-detail-btn-${props.row.name}-view`"
+                          @click.stop="
+                            () => {
+                              openDialog('INFO', props.row.id);
+                            }
+                          "
+                          clickable
+                          dense
+                          class="row q-py-sm"
+                          style="white-space: nowrap"
+                        >
+                          <q-icon
+                            name="mdi-eye-outline"
+                            class="col-3"
+                            size="xs"
+                            style="color: hsl(var(--green-6-hsl))"
+                          />
+                          <span class="col-9 q-px-md flex items-center">
+                            {{ $t('viewDetail') }}
+                          </span>
+                        </q-item>
+
+                        <q-item
+                          :id="`view-detail-btn-${props.row.name}-edit`"
+                          clickable
+                          dense
+                          class="row q-py-sm"
+                          style="white-space: nowrap"
+                          @click="
+                            () => {
+                              openDialog('INFO', props.row.id, true);
+                            }
+                          "
+                        >
+                          <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="onDelete(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 () => {
+                                    toggleStatus(props.row.id);
+                                  }
+                                "
+                                :model-value="props.row.status !== 'INACTIVE'"
+                              />
+                            </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-3">
+                <PersonCard
+                  :data="{
+                    code: props.row.code,
+                    name:
+                      $i18n.locale === 'en-US'
+                        ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
+                        : `${props.row.firstName} ${props.row.lastName}`.trim(),
+                    img: props.row.profileImageUrl,
+                    male: props.row.gender === 'male',
+                    female: props.row.gender === 'female',
+                    detail: [
+                      {
+                        icon: 'mdi-phone',
+                        value: props.row.telephoneNo,
+                      },
+                      {
+                        icon: 'mdi-clock-outline',
+                        value:
+                          (props.row.birthDate &&
+                            calculateAge(props.row.birthDate)) ||
+                          '-',
+                      },
+                    ],
+                  }"
+                  :tag="[
+                    {
+                      color:
+                        {
+                          USER: 'cyan',
+                          MESSENGER: 'yellow',
+                          DELEGATE: 'red',
+                          AGENCY: 'magenta',
+                        }[props.row.userType as string] || 'pink',
+                      value: $t(props.row.userType),
+                    },
+                  ]"
+                  :disabled="props.row.status === 'INACTIVE'"
+                  @update-card="(a, b) => openDialog(a, props.row.id, b)"
+                  @delete-card="onDelete(props.row.id)"
+                  @enter-card="(a) => openDialog(a, props.row.id)"
+                  @toggle-status="toggleStatus(props.row.id)"
+                />
+              </div>
+            </template>
+          </q-table>
+
+          <!-- <div
             v-for="v in userData?.result.filter((v) => {
               if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
                 return false;
@@ -906,7 +1290,7 @@ watch(inputSearch, async () => await fetchUserList());
               @enter-card="(a) => openDialog(a, v.id)"
               @toggle-status="toggleStatus(v.id)"
             />
-          </div>
+          </div> -->
         </div>
 
         <div
@@ -1189,7 +1573,7 @@ watch(inputSearch, async () => await fetchUserList());
     </template>
   </FormDialog>
 </template>
-<style>
+<style scoped>
 .upload-img-preview {
   border: 1px solid var(--border-color);
   border-radius: var(--radius-2);
@@ -1242,4 +1626,85 @@ watch(inputSearch, async () => await fetchUserList());
   transform: translateY(-20px);
   opacity: 0;
 }
+
+.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(0.5);
+  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.1rem;
+    top: calc(50% - 0.25rem);
+    bottom: calc(50% - 0.25rem);
+    background-color: hsla(var(--_branch-status-color) / 1);
+  }
+
+  & :deep(.q-avatar) {
+    transform: rotate(-45deg);
+    color: hsla(var(--_branch-card-bg) / 1);
+  }
+}
+
+.tags {
+  display: inline-block;
+  color: hsla(var(--_color) / 1);
+  background: hsla(var(--_color) / 0.15);
+  border-radius: var(--radius-2);
+  padding-inline: var(--size-2);
+}
+
+.tags__cyan {
+  --_color: var(--cyan-7-hsl);
+}
+
+.tags__yellow {
+  --_color: var(--orange-4-hsl);
+}
+
+.tags__red {
+  --_color: var(--red-6-hsl);
+}
+
+.tags__magenta {
+  --_color: var(--pink-8-hsl);
+}
+
+.tags__pink {
+  --_color: var(--pink-6-hsl);
+}
+
+.dark .tags__magenta {
+  --_color: var(--pink-7-hsl);
+}
+
+& .symbol-gender {
+  color: hsla(var(--_fg));
+
+  &.symbol-gender__male {
+    --_fg: var(--gender-male);
+  }
+
+  &.symbol-gender__female {
+    --_fg: var(--gender-female);
+  }
+}
 </style>

From a8e7182d2b45259731df23ffc137be681627632e Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 9 Jul 2024 11:25:39 +0700
Subject: [PATCH 118/158] fix: wrong data display

---
 src/pages/04_product-service/MainPage.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 579deda8..5c695546 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1873,7 +1873,7 @@ watch(inputSearchProductAndService, async () => {
                     >
                       {{
                         {
-                          product: props.row.remark,
+                          product: props.row.process,
                           service: props.row.work?.length,
                         }[productAndServiceTab]
                       }}
@@ -1885,13 +1885,13 @@ watch(inputSearchProductAndService, async () => {
                           service: tbControl.service.fieldSelected,
                         }[productAndServiceTab].includes(
                           {
-                            product: 'productProcessingTime',
+                            product: 'priceInformation',
                             service: 'empty',
                           }[productAndServiceTab],
                         )
                       "
                     >
-                      {{ props.row.process }}
+                      price
                     </q-td>
                     <q-td>
                       <q-btn

From 501a722b28db66f02d2370250a7de8bc4be59158 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 9 Jul 2024 11:32:23 +0700
Subject: [PATCH 119/158] fix: no data wrapping

---
 src/pages/04_product-service/MainPage.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 5c695546..dfe4dac1 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1693,18 +1693,12 @@ watch(inputSearchProductAndService, async () => {
             (productAndServiceTab === 'product' && product?.length === 0) ||
             (productAndServiceTab === 'service' && service?.length === 0)
           "
-          class="flex justify-center items-center"
-          style="min-height: 70vh; background-color: var(--surface-2)"
+          class="flex justify-center items-center surface-1 col"
         >
           <NoData :not-found="!!inputSearchProductAndService" />
         </div>
-
         <!-- tab -->
-
-        <div
-          v-if="productAndService && productAndService.length > 0"
-          class="row flex col"
-        >
+        <div v-else class="row flex col">
           <q-tabs
             dense
             v-model="productAndServiceTab"

From 25080739b7b710fc648a9d69bac8970688a69119 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 9 Jul 2024 11:35:46 +0700
Subject: [PATCH 120/158] fix: rounded border

---
 src/pages/04_product-service/MainPage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index dfe4dac1..23510488 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1568,6 +1568,7 @@ watch(inputSearchProductAndService, async () => {
       <div
         v-else-if="productMode === 'service'"
         class="surface-2 col bordered rounded column"
+        style="overflow: hidden"
       >
         <div
           class="row justify-between items-center q-px-md q-py-sm rounded surface-2"

From faab76fadb544f39aea9b10dfa8911d1ad713237 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 9 Jul 2024 11:35:50 +0700
Subject: [PATCH 121/158] fix: spacing

---
 src/layouts/MainLayout.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 1188c616..f4a6f5dc 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -221,8 +221,8 @@ onMounted(async () => {
       </div>
 
       <div
-        class="surface-0 q-pb-lg scroll column"
-        style="height: 100vh; flex-wrap: nowrap"
+        class="surface-0 scroll column"
+        style="height: 100vh; flex-wrap: nowrap; padding-bottom: var(--size-4)"
       >
         <!-- header -->
         <div

From b155e5712267a1e5c6cdff8984282aa229e67807 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 9 Jul 2024 11:50:38 +0700
Subject: [PATCH 122/158] fix: layout

---
 src/pages/04_product-service/MainPage.vue | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 23510488..d549795b 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1567,7 +1567,7 @@ watch(inputSearchProductAndService, async () => {
       <!-- product/service -->
       <div
         v-else-if="productMode === 'service'"
-        class="surface-2 col bordered rounded column"
+        class="surface-2 col bordered rounded column no-wrap"
         style="overflow: hidden"
       >
         <div
@@ -1699,11 +1699,11 @@ watch(inputSearchProductAndService, async () => {
           <NoData :not-found="!!inputSearchProductAndService" />
         </div>
         <!-- tab -->
-        <div v-else class="row flex col">
+        <template v-else>
           <q-tabs
             dense
             v-model="productAndServiceTab"
-            class="col-12 bordered-b q-px-md"
+            class="bordered-b q-px-md"
             align="left"
           >
             <q-tab
@@ -1753,7 +1753,7 @@ watch(inputSearchProductAndService, async () => {
               </div>
             </q-tab>
           </q-tabs>
-          <div class="col-12 flex col scroll full-height q-pa-md surface-1">
+          <div class="col flex scroll full-height q-pa-md surface-1">
             <div class="full-width">
               <q-table
                 class="full-width"
@@ -2063,7 +2063,7 @@ watch(inputSearchProductAndService, async () => {
                 </template>
 
                 <template v-slot:item="{ row }">
-                  <div class="col-12 col-md-6">
+                  <div class="col-12 col-md-4 col-lg-2">
                     <TotalProductCardComponent
                       :data="row"
                       :key="row.id"
@@ -2119,13 +2119,9 @@ watch(inputSearchProductAndService, async () => {
               </q-table>
             </div>
           </div>
-        </div>
-
+        </template>
         <!-- footer -->
-        <div
-          class="row items-center justify-between q-px-md surface-2"
-          style="z-index: 99"
-        >
+        <div class="row items-center justify-between q-py-sm q-px-md surface-2">
           <div class="col-4">
             <div class="row items-center">
               <div class="app-text-muted" style="width: 80px">

From 7ba5947575f21d7d6d710ca7e5c2413f5797e5e0 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Tue, 9 Jul 2024 11:54:03 +0700
Subject: [PATCH 123/158] fix: wrong fetch function

---
 src/pages/04_product-service/MainPage.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index d549795b..b2220029 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2296,6 +2296,7 @@ watch(inputSearchProductAndService, async () => {
         <q-space />
         <q-input
           outlined
+          style="width: 250px"
           dense
           :label="$t('search')"
           :bg-color="$q.dark.isActive ? 'dark' : 'white'"
@@ -2309,7 +2310,11 @@ watch(inputSearchProductAndService, async () => {
         </q-input>
       </div>
       <div>
-        <AppBox class="row" style="background: none">
+        <AppBox
+          no-padding
+          class="row q-mt-sm q-col-gutter-sm"
+          style="background: none"
+        >
           <div
             class="col-12 text-center"
             v-if="resultSearchProduct?.length === 0"
@@ -2318,7 +2323,6 @@ watch(inputSearchProductAndService, async () => {
           </div>
 
           <div
-            class="q-pa-xs"
             :class="`${$q.screen.gt.sm ? 'col-3 ' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
             v-for="i in (!!inputSearchProductAndService
               ? resultSearchProduct
@@ -2731,7 +2735,7 @@ watch(inputSearchProductAndService, async () => {
         dense
         @addProduct="
           async (index) => {
-            await fetchListOfProduct();
+            await fetchListOfProductIsAdd(currentIdType);
             currentWorkIndex = index;
             dialogTotalProduct = true;
           }

From 912faf481d7a9fc7280ca26f405c7361bc924882 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 11:54:25 +0700
Subject: [PATCH 124/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=E0=B9=80=E0=B8=87=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=99=E0=B9=84=E0=B8=82=20=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=20=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/PersonCard.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index b11c7172..d10cf369 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -77,7 +77,7 @@ defineEmits<{
           size="sm"
           @click.stop
         >
-          <q-menu  class="bordered">
+          <q-menu class="bordered">
             <q-list v-close-popup>
               <q-item
                 clickable
@@ -187,6 +187,7 @@ defineEmits<{
       <span class="items-center row">
         {{ data.name }}
         <Icon
+          v-if="data.male || data.female"
           class="q-pl-xs"
           :class="{
             'symbol-gender': data.male || data.female,
@@ -234,15 +235,12 @@ defineEmits<{
   padding: var(--size-2);
 
   &.person-box__disabled {
-  
     opacity: 0.5;
     filter: grayscale(0.9);
 
     .status-circle {
       background-color: var(--surface-1);
     }
-
-  
   }
 
   &.person-box__no-detail {
@@ -309,7 +307,6 @@ defineEmits<{
     --_hover: hsl(var(--gender-male));
     cursor: pointer;
     box-shadow: var(--shadow-2);
-   
   }
 }
 

From d7e24e964127234b0821bd46f31ae5b8a156a8e1 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 11:56:24 +0700
Subject: [PATCH 125/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=20icon=20=E0=B9=80=E0=B8=9E=E0=B8=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 80 ++++++++++++-------
 1 file changed, 53 insertions(+), 27 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 05dd2467..d8eac2d0 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch, toRaw } from 'vue';
 import type { QTableProps } from 'quasar';
+import { Status } from 'src/stores/types';
 
 import useCustomerStore from 'src/stores/customer';
 import useEmployeeStore from 'src/stores/employee';
@@ -8,8 +9,6 @@ import useOptionStore from 'src/stores/options';
 import useMyBranchStore from 'src/stores/my-branch';
 import useUserStore from 'src/stores/user';
 
-import { Status } from 'src/stores/types';
-
 import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
 import PersonCard from 'components/home/PersonCard.vue';
 import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
@@ -666,8 +665,7 @@ function onCloseBranch() {
 }
 
 function clearForm() {
-
-profileFile.value = undefined;
+  profileFile.value = undefined;
 
   dialogInputForm.value = false;
   formData.value = {
@@ -961,9 +959,7 @@ async function toggleStatusCustomer(id: string, status: boolean) {
 }
 
 async function onSubmitEdit(id: string) {
-
   if (selectorLabel.value === 'EMPLOYER') {
-    
     if (!formData.value) return;
 
     const tempValue: CustomerUpdate = {
@@ -975,15 +971,11 @@ async function onSubmitEdit(id: string) {
       customerBranch: formData.value.customerBranch,
       taxNo: formData.value.taxNo,
       personName: formData.value.personName,
-      image:  profileFile.value ,
+      image: profileFile.value,
     };
-     
-    
 
     if (tempValue.status === 'CREATED') delete tempValue['status'];
 
-
-   
     await editById(id, tempValue);
     infoDrawer.value = false;
     fetchListCustomer();
@@ -1885,7 +1877,6 @@ watch([inputSearch, currentStatus], async () => {
                           <q-td v-if="fieldSelected.includes('customerName')">
                             <div class="row items-center">
                               <div
-                                :class="{}"
                                 style="
                                   width: 50px;
                                   display: flex;
@@ -2128,8 +2119,8 @@ watch([inputSearch, currentStatus], async () => {
                                   ? `${props.row.customerName} `.trim()
                                   : `${props.row.customerNameEN} `.trim(),
                               img: props.row.imageUrl,
-                              male: props.row.gender === 'male',
-                              female: props.row.gender === 'female',
+                              male: undefined,
+                              female: undefined,
                               detail: [
                                 {
                                   icon: 'mdi-cellphone',
@@ -2141,6 +2132,20 @@ watch([inputSearch, currentStatus], async () => {
                                 },
                               ],
                             }"
+                            :tag="[
+                              {
+                                color:
+                                  {
+                                    CORP: 'purple',
+                                    PERS: 'green',
+                                  }[props.row.customerType as string] || 'CORP',
+                                value: $t(
+                                  props.row.customerType === 'CORP'
+                                    ? 'customerLegalEntity'
+                                    : 'customerNaturalPerson',
+                                ),
+                              },
+                            ]"
                             :disabled="props.row.status === 'INACTIVE'"
                             @history="openHistory(props.row.id)"
                             @update-card="
@@ -2335,12 +2340,6 @@ watch([inputSearch, currentStatus], async () => {
                                     </template>
                                   </q-img>
                                 </q-avatar>
-
-                                <!-- <q-icon
-                                    size="md"
-                                    style="scale: 0.8"
-                                    :name="props.row.imageUrl"
-                                  /> -->
                               </div>
                             </div>
                             <div class="col">
@@ -2349,6 +2348,19 @@ watch([inputSearch, currentStatus], async () => {
                                   `${props.row.firstName} ${props.row.lastName}` ||
                                   '-'
                                 }}
+
+                                <q-icon
+                                  class="q-pl-xs"
+                                  :class="{
+                                    'symbol-gender': props.row.gender,
+                                    'symbol-gender__male':
+                                      props.row.gender === 'male',
+                                    'symbol-gender__female':
+                                      props.row.gender === 'female',
+                                  }"
+                                  :name="`mdi-gender-${props.row.gender === 'male' ? 'male' : 'female'}`"
+                                  width="24px"
+                                />
                               </div>
                               <div class="col app-text-muted">
                                 {{
@@ -2360,7 +2372,7 @@ watch([inputSearch, currentStatus], async () => {
                           </div>
                         </q-td>
                         <q-td v-if="fieldSelected.includes('type')">
-                          <span class="tags tags__parimary">
+                          <span class="tags tags__pink">
                             {{ $t('EMPLOYEE') }}
                           </span>
                         </q-td>
@@ -2569,6 +2581,12 @@ watch([inputSearch, currentStatus], async () => {
                               },
                             ],
                           }"
+                          :tag="[
+                            {
+                              color: 'pink',
+                              value: $t('EMPLOYEE'),
+                            },
+                          ]"
                           :disabled="props.row.status === 'INACTIVE'"
                           @history="openHistory(props.row.id)"
                           @update-card="
@@ -3994,8 +4012,8 @@ watch([inputSearch, currentStatus], async () => {
   padding-inline: var(--size-2);
 }
 
-.tags__parimary {
-  --_color: var(--blue-6-hsl);
+.tags__pink {
+  --_color: var(--pink-6-hsl);
 }
 
 .tags__purple {
@@ -4006,10 +4024,6 @@ watch([inputSearch, currentStatus], async () => {
   --_color: var(--teal-10-hsl);
 }
 
-.dark .tags__parimary {
-  --_color: var(--blue-12-hsl);
-}
-
 .dark .tags__purple {
   --_color: var(--violet-10-hsl);
 }
@@ -4054,4 +4068,16 @@ watch([inputSearch, currentStatus], async () => {
     color: hsla(var(--_branch-card-bg) / 1);
   }
 }
+
+& .symbol-gender {
+  color: hsla(var(--_fg));
+
+  &.symbol-gender__male {
+    --_fg: var(--gender-male);
+  }
+
+  &.symbol-gender__female {
+    --_fg: var(--gender-female);
+  }
+}
 </style>

From 3354ac9dc177592d3aeeab522a9c9d40962ed02c Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 11:58:51 +0700
Subject: [PATCH 126/158] =?UTF-8?q?refactor:=20=E0=B8=95=E0=B8=B1=E0=B9=89?=
 =?UTF-8?q?=E0=B8=87default=20=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B9=80=E0=B8=9B=E0=B9=87=E0=B8=99?=
 =?UTF-8?q?=20=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/02_personnel-management/MainPage.vue | 2 +-
 src/pages/03_customer-management/MainPage.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 108ac12c..9de4b7e0 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -77,7 +77,7 @@ const defaultFormData = {
   checkpointEN: null,
 };
 
-const modeView = ref(true);
+const modeView = ref(false);
 
 const fieldSelectedOption = ref<{ label: string; value: string }[]>([
   {
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index d8eac2d0..9b2f09b0 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -307,7 +307,7 @@ const fieldSelected = ref<
 ]);
 
 const splitterModel = ref(15);
-const modeView = ref(true);
+const modeView = ref(false);
 const currentEmployee = ref<Employee | undefined>();
 const currentEmployeeCode = ref('');
 const isEmployeeEdit = ref(false);

From bf5b868d31057088db79c46e4e56e8973abd8253 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 14:37:40 +0700
Subject: [PATCH 127/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/en-US/index.ts | 1 +
 src/i18n/th-th/index.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index c775372d..d612098f 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -61,6 +61,7 @@ export default {
   recordsPage: 'Showing {resultcurrentPage} out of {total} records',
   showing: 'Showing',
   dataSum: 'Data Summaries',
+   createdAt: 'Created At',
   ...status,
   ...main,
   ...address,
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
index d1591d49..cecc7788 100644
--- a/src/i18n/th-th/index.ts
+++ b/src/i18n/th-th/index.ts
@@ -61,6 +61,7 @@ export default {
   recordsPage: 'แสดง {resultcurrentPage} รายการจาก {total} รายการ',
   showing: 'แสดงทีละ',
   dataSum: 'สรุปจำนวนข้อมูล',
+  createdAt: 'สร้างเมื่อ',
   ...status,
   ...main,
   ...address,

From 41a833418eeaffd4c97762b72fd9372361a2d604 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 14:38:22 +0700
Subject: [PATCH 128/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=20list=20=E0=B8=82=E0=B8=AD=E0=B8=87=20?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A5=E0=B8=B8=E0=B9=88=E0=B8=A1=20=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=E0=B8=84=E0=B9=89=E0=B8=B2=20=E0=B9=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B0=20=E0=B8=9A=E0=B8=A3=E0=B8=B4=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 693 ++++++++++++++++++++--
 1 file changed, 629 insertions(+), 64 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index b2220029..8dffc7cb 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -204,6 +204,39 @@ const serviceTab = [
 const hideStat = ref(false);
 
 const tbColumn = {
+
+  groupAndType: [
+
+  {
+    name: 'name',
+    align:'left',
+    label: 'name',
+    field: 'name',
+  },
+  {
+    name: 'detail',
+    align:'left',
+    label: 'detail',
+    field: 'detail',
+  },
+  {
+    name: 'formDialogInputRemark',
+    align:'left',
+    label: 'formDialogInputRemark',
+    field: 'remark',
+  },
+   {
+    name: 'createdAt',
+    align:'left',
+    label: 'createdAt',
+    field: 'createdAt',
+  }
+
+
+
+    
+  ],
+
   product: [
     { name: 'productName', align: 'left', label: 'productName', field: 'name' },
     {
@@ -241,11 +274,17 @@ const tbColumn = {
     },
   ],
 } satisfies {
+  groupAndType: QTableProps['columns'];
   product: QTableProps['columns'];
   service: QTableProps['columns'];
 };
 
 const tbControl = reactive({
+
+  groupAndType: {
+    fieldDisplay: ['name', 'detail', 'formDialogInputRemark', 'createdAt'],
+    fieldSelected: ['name', 'detail', 'formDialogInputRemark', 'createdAt'],
+  },
   product: {
     fieldDisplay: [
       'productName',
@@ -1235,88 +1274,544 @@ watch(inputSearchProductAndService, async () => {
       <!-- group/type -->
       <div
         v-if="productMode === 'group' || productMode === 'type'"
-        class="surface-1 col bordered rounded column no-wrap"
+        class="surface-2 col bordered rounded column no-wrap"
       >
-        <div class="row surface-2 bordered-b q-px-md q-py-sm items-center">
-          <div v-if="productMode === 'type'" class="text-h6 text-weight-bold">
-            {{ $t('productAndServiceType') }}
-          </div>
-          <div
-            v-else-if="productMode === 'group'"
-            class="text-h6 text-weight-bold"
-          >
-            {{ $t('productAndServiceAll') }}
-          </div>
+        <div class="row q-px-md q-py-sm items-center">
           <div
             v-if="productMode === 'group' || productMode === 'type'"
-            class="row q-ml-auto"
+            class="row full-width justify-between"
           >
             <q-input
               style="width: 300px"
               outlined
               dense
+              unelavated
               :label="$t('search')"
-              class="q-mr-sm"
+              class="q-mr-md"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearch"
-              debounce="500"
+              debounce="250"
             >
               <template v-slot:prepend>
                 <q-icon name="mdi-magnify" />
               </template>
             </q-input>
-            <q-btn
-              icon="mdi-tune-vertical-variant"
-              size="sm"
-              :color="$q.dark.isActive ? 'dark' : 'white'"
-              :text-color="$q.dark.isActive ? 'white' : 'dark'"
-              class="bordered rounded"
-              unelevated
-            >
-              <q-menu class="bordered">
-                <q-list v-close-popup dense>
-                  <q-item
-                    clickable
-                    class="flex items-center"
-                    @click="
-                      () => {
-                        currentStatus = 'All';
-                      }
-                    "
-                  >
-                    {{ $t('all') }}
-                  </q-item>
-                  <q-item
-                    clickable
-                    class="flex items-center"
-                    @click="
-                      () => {
-                        currentStatus = 'ACTIVE';
-                      }
-                    "
-                  >
-                    {{ $t('statusACTIVE') }}
-                  </q-item>
-                  <q-item
-                    clickable
-                    class="flex items-center"
-                    @click="
-                      () => {
-                        currentStatus = 'INACTIVE';
-                      }
-                    "
-                  >
-                    {{ $t('statusINACTIVE') }}
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
+
+            <div class="row" style="gap: var(--size-2)">
+              <q-btn
+                icon="mdi-tune-vertical-variant"
+                size="sm"
+                :color="$q.dark.isActive ? 'dark' : 'white'"
+                :text-color="$q.dark.isActive ? 'white' : 'dark'"
+                class="bordered rounded"
+                unelevated
+              >
+                <q-menu class="bordered">
+                  <q-list v-close-popup dense>
+                    <q-item
+                      clickable
+                      class="flex items-center"
+                      @click="
+                        () => {
+                          currentStatus = 'All';
+                        }
+                      "
+                    >
+                      {{ $t('all') }}
+                    </q-item>
+                    <q-item
+                      clickable
+                      class="flex items-center"
+                      @click="
+                        () => {
+                          currentStatus = 'ACTIVE';
+                        }
+                      "
+                    >
+                      {{ $t('statusACTIVE') }}
+                    </q-item>
+                    <q-item
+                      clickable
+                      class="flex items-center"
+                      @click="
+                        () => {
+                          currentStatus = 'INACTIVE';
+                        }
+                      "
+                    >
+                      {{ $t('statusINACTIVE') }}
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+
+                 <q-select
+                  v-if="modeView === false"
+                  id="select-field"
+                  for="select-field"
+                  :options=" tbControl.groupAndType.fieldDisplay.map(x => ({ label: $t(x), value: x })) "
+                  :display-value="$t('displayField')"
+                  v-model="tbControl.groupAndType.fieldSelected"
+                  option-label="label"
+                  option-value="value"
+                  map-options
+                  emit-value
+                  outlined
+                  multiple
+                  dense
+                />
+
+              <q-btn-toggle
+                v-model="modeView"
+                id="btn-mode"
+                dense
+                class="no-shadow bordered rounded surface-1"
+                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+                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: $q.dark.isActive
+                        ? modeView
+                          ? '#C9D3DB '
+                          : '#787B7C'
+                        : 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: $q.dark.isActive
+                        ? modeView === false
+                          ? '#C9D3DB'
+                          : '#787B7C'
+                        : modeView === false
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+              </q-btn-toggle>
+            </div>
           </div>
         </div>
 
-        <div style="height: 100%" class="q-pa-md scroll">
-          <div class="row q-col-gutter-md col">
-            <div
+        <div style="height: 100%" class="scroll">
+          <div class="row  col full-width full-height">
+            <q-table
+              flat
+              bordered
+              :grid="modeView"
+              :rows="
+                (productMode === 'type' ? productType : productGroup) || []
+              "
+              :columns="tbColumn.groupAndType"
+              class="full-width"
+              card-container-class="q-gutter-md  "
+              row-key="name"
+              :rows-per-page-options="[0]"
+              hide-pagination
+              :visible-columns="tbControl.groupAndType.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>
+
+            <template v-slot:body="props">
+              <q-tr
+                :class="{
+                  'app-text-muted': props.row.status === 'INACTIVE',
+                  'status-active': props.row.status !== 'INACTIVE',
+                  'status-inactive': props.row.status === 'INACTIVE',
+                }"
+                :props="props"
+                @click="async ()=>{
+                   if (productMode === 'type') {
+                          pathTypeName = props.row.name;
+                          currentIdType = props.row.id;
+                          productMode = 'service';
+                          productAndServiceTab = 'service';
+
+                          await fetchListOfProduct();
+                          await fetchListOfService();
+                          await fetchListOfProductAndService();
+                          flowStore.rotate();
+                        }
+                        if (productMode === 'group') {
+
+                              pathGroupName = props.row.name;
+                    currentId = props.row.id;
+                    productMode = 'type';
+                    await fetchListType();
+                    flowStore.rotate();
+                        }
+                }"
+              >
+                <q-td v-if="tbControl.groupAndType.fieldSelected.includes('name')">
+                  <div class="row items-center">
+                    <div
+                      style="
+                        width: 50px;
+                        display: flex;
+                        margin-bottom: var(--size-2);
+                      "
+                    >
+                      <div :class="`icon-color-${productMode ==='group' ? 'pink' : 'purple'}`" class="branch-card__icon">
+
+                   
+
+                        <q-avatar  size="md" icon="mdi-folder">
+
+                     
+                        </q-avatar>
+                      </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="tbControl.groupAndType.fieldSelected.includes('detail')">
+                  {{ props.row.detail || '-' }}
+                </q-td>
+
+                <q-td v-if="tbControl.groupAndType.fieldSelected.includes('formDialogInputRemark')">
+                  {{ props.row.remark || '-' }}
+                </q-td>
+
+                <q-td v-if="tbControl.groupAndType.fieldSelected.includes('createdAt')">
+                88585
+                </q-td>
+
+          
+
+                <q-td>
+                  <q-btn
+                    icon="mdi-eye-outline"
+                    size="sm"
+                    dense
+                    round
+                    flat
+                    @click.stop="
+                      () => {
+                      
+   if (productMode === 'type') {
+                          currentStatusProduct =
+                            props.row.status === 'INACTIVE';
+                          clearFormGroup();
+                          currentIdType = props.row.id;
+                          assignFormDataGroup(props.row);
+                          isEdit = false;
+                          drawerInfo = true;
+                        }
+                        if (productMode === 'group') {
+
+
+                    currentStatusProduct = props.row.status === 'INACTIVE';
+                    clearFormGroup();
+                    assignFormDataGroup(props.row);
+                    isEdit = false;
+                    currentId = props.row.id;
+                    drawerInfo = true;
+                        }
+
+                      }
+                    "
+                  />
+
+                  <q-btn
+                    icon="mdi-dots-vertical"
+                    size="sm"
+                    dense
+                    round
+                    flat
+                    @click.stop
+                    :key="props.row.id"
+                  >
+                    <q-menu class="bordered">
+                      <q-list v-close-popup>
+                        <q-item
+                          :id="`view-detail-btn-${props.row.name}-view`"
+                          @click.stop="
+                            () => {
+                        if (productMode === 'type') {
+                          currentStatusProduct =
+                            props.row.status === 'INACTIVE';
+                          clearFormGroup();
+                          currentIdType = props.row.id;
+                          assignFormDataGroup(props.row);
+                          isEdit = false;
+                          drawerInfo = true;
+                        }
+                        if (productMode === 'group') {
+
+
+                    currentStatusProduct = props.row.status === 'INACTIVE';
+                    clearFormGroup();
+                    assignFormDataGroup(props.row);
+                    isEdit = false;
+                    currentId = props.row.id;
+                    drawerInfo = true;
+                        }
+                            }
+                          "
+                          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 (productMode === 'type') {
+                          clearFormGroup();
+                          currentIdType = props.row.id;
+                          assignFormDataGroup(props.row);
+                          isEdit = true;
+                          drawerInfo = true;
+                        }
+                        if (productMode === 'group') {
+
+                            clearFormGroup();
+                    assignFormDataGroup(props.row);
+                    isEdit = true;
+                    currentId = props.row.id;
+
+                    drawerInfo = true;
+                        }
+                            }
+                          "
+                        >
+                          <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="()=>{
+                                if (productMode === 'type') {
+                          deleteProductById(props.row.id);
+                        }
+                        if (productMode === 'group') {
+                          deleteProductById(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 () => {
+                                           if (productMode === 'type') {
+                        toggleStatusType(props.row.id, props.row.status);
+                      }
+                      if (productMode === 'group') {
+                        toggleStatusGroup(props.row.id, props.row.status);
+                      }
+                                  }
+                                "
+                                :model-value="props.row.status !== 'INACTIVE'"
+                              />
+                            </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-3">
+                  <ProductCardComponent
+                    :isType="productMode === 'type'"
+                    :count-product="props.row._count.product"
+                    :count-type="props.row._count.type"
+                    :count-service="props.row._count.service"
+                    :title="props.row.name"
+                    :subtitle="props.row.code"
+                    :date="new Date(props.row.updatedAt)"
+                    :status="props.row.status"
+                    :id="props.row.id"
+                    :isDisabled="props.row.status === 'INACTIVE'"
+                    :color="
+                      {
+                        type: $q.dark.isActive
+                          ? 'var(--purple-7-hsl)'
+                          : 'var(--violet-11-hsl)',
+                        group: 'var(--pink-6-hsl)',
+                      }[productMode] || 'var(--pink-6-hsl)'
+                    "
+                    @toggleStatus="
+                      if (productMode === 'type') {
+                        toggleStatusType(props.row.id, props.row.status);
+                      }
+                      if (productMode === 'group') {
+                        toggleStatusGroup(props.row.id, props.row.status);
+                      }
+                    "
+                    @viewCard="
+                      () => {
+                        if (productMode === 'type') {
+                          currentStatusProduct =
+                            props.row.status === 'INACTIVE';
+                          clearFormGroup();
+                          currentIdType = props.row.id;
+                          assignFormDataGroup(props.row);
+                          isEdit = false;
+                          drawerInfo = true;
+                        }
+                        if (productMode === 'group') {
+
+
+                    currentStatusProduct = props.row.status === 'INACTIVE';
+                    clearFormGroup();
+                    assignFormDataGroup(props.row);
+                    isEdit = false;
+                    currentId = props.row.id;
+                    drawerInfo = true;
+                        }
+                      }
+                    "
+                    @updateCard="
+                      () => {
+                        if (productMode === 'type') {
+                          clearFormGroup();
+                          currentIdType = props.row.id;
+                          assignFormDataGroup(props.row);
+                          isEdit = true;
+                          drawerInfo = true;
+                        }
+                        if (productMode === 'group') {
+
+                            clearFormGroup();
+                    assignFormDataGroup(props.row);
+                    isEdit = true;
+                    currentId = props.row.id;
+
+                    drawerInfo = true;
+                        }
+                      }
+                    "
+                    @deleteCard="
+                      () => {
+                        if (productMode === 'type') {
+                          deleteProductById(props.row.id);
+                        }
+                        if (productMode === 'group') {
+                          deleteProductById(props.row.id)
+                        }
+                      }
+                    "
+                    @on-click="
+                      async () => {
+                        if (productMode === 'type') {
+                          pathTypeName = props.row.name;
+                          currentIdType = props.row.id;
+                          productMode = 'service';
+                          productAndServiceTab = 'service';
+
+                          await fetchListOfProduct();
+                          await fetchListOfService();
+                          await fetchListOfProductAndService();
+                          flowStore.rotate();
+                        }
+                        if (productMode === 'group') {
+
+                              pathGroupName = props.row.name;
+                    currentId = props.row.id;
+                    productMode = 'type';
+                    await fetchListType();
+                    flowStore.rotate();
+                        }
+                      }
+                    "
+                  />
+                </div>
+              </template>
+            </q-table>
+
+            <!-- <div
               :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
               v-for="(v, i) in productMode === 'type'
                 ? productType
@@ -1424,7 +1919,7 @@ watch(inputSearchProductAndService, async () => {
                   }
                 "
               />
-            </div>
+            </div> -->
           </div>
         </div>
 
@@ -2758,4 +3253,74 @@ watch(inputSearchProductAndService, async () => {
   cursor: pointer;
   text-decoration: underline;
 }
+
+.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(0.5);
+  opacity: 0.5;
+}
+
+.icon-color-purple {
+  --_color: var(--violet-11-hsl);
+}
+
+.icon-color-pink {
+  --_color: var(--pink-6-hsl);
+}
+
+.icon-color-orange {
+  --_color: var(--orange-5-hsl);
+}
+
+.icon-color-green {
+  --_color: var(--teal-10-hsl);
+}
+
+.dark .icon-color-purple {
+  --_color: var(--violet-10-hsl);
+}
+
+.dark .icon-color-green {
+  --_color: var(--teal-8-hsl);
+}
+
+.dark .icon-color-orange {
+  --_color: var(--orange-6-hsl);
+}
+
+.branch-card__icon {
+
+  background-color: hsla(var(--_color) / 0.15);
+  color: hsla(var(--_color) / 1);
+  
+  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.1rem;
+    top: calc(50% - 0.25rem);
+    bottom: calc(50% - 0.25rem);
+    background-color: hsla(var(--_branch-status-color) / 1);
+  }
+
+  & :deep(.q-avatar) {
+    transform: rotate(-45deg);
+    color: hsla(var(--_branch-card-bg) / 1);
+  }
+}
+
 </style>
+                                      toggleStatusGroup(props.row

From 6426b0868de20c7905d734a4bbbf1ef2d0415666 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 15:23:42 +0700
Subject: [PATCH 129/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=E0=B8=AA=E0=B8=B5=20icon=20=E0=B9=83?=
 =?UTF-8?q?=E0=B8=AB=E0=B9=89=20=E0=B8=9A=E0=B8=A3=E0=B8=B4=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=20=E0=B9=81=E0=B8=A5=E0=B8=B0=20=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=E0=B8=84=E0=B9=89=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 31 +++++++++++++----------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 8dffc7cb..235e934f 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -102,12 +102,12 @@ const stat = ref<
 >([
   { icon: 'mdi-folder', count: 0, label: 'productAndService', color: 'pink' },
   {
-    icon: 'mdi-folder',
+    icon: 'mdi-folder-table',
     count: 0,
     label: 'productAndServiceType',
     color: 'purple',
   },
-  { icon: 'mdi-folder', count: 0, label: 'service', color: 'orange' },
+  { icon: 'mdi-server-network', count: 0, label: 'service', color: 'orange' },
   { icon: 'mdi-folder', count: 0, label: 'product', color: 'green' },
 ]);
 
@@ -1410,8 +1410,8 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-        <div style="height: 100%" class="scroll">
-          <div class="row  col full-width full-height">
+        <div  class="col flex scroll full-height q-pa-md surface-1 ">
+          <div class="full-width">
             <q-table
               flat
               bordered
@@ -1420,7 +1420,7 @@ watch(inputSearchProductAndService, async () => {
                 (productMode === 'type' ? productType : productGroup) || []
               "
               :columns="tbColumn.groupAndType"
-              class="full-width"
+              class="  full-width  "
               card-container-class="q-gutter-md  "
               row-key="name"
               :rows-per-page-options="[0]"
@@ -1475,14 +1475,17 @@ watch(inputSearchProductAndService, async () => {
                         margin-bottom: var(--size-2);
                       "
                     >
-                      <div :class="`icon-color-${productMode ==='group' ? 'pink' : 'purple'}`" class="branch-card__icon">
+                      <div :class="`icon-color-${productMode ==='group' ? 'pink' : 'purple'}`" class="table__icon">
 
                    
+                            <q-icon
+                              size="md"
+                              style="scale: 0.8"
+                              :name="productMode === 'group' ? 'mdi-folder' : 'mdi-folder-table'"
+                            />
 
-                        <q-avatar  size="md" icon="mdi-folder">
 
-                     
-                        </q-avatar>
+                    
                       </div>
                     </div>
                     <div class="col">
@@ -2317,11 +2320,11 @@ watch(inputSearchProductAndService, async () => {
                             margin-bottom: var(--size-2);
                           "
                         >
-                          <div class="table__icon">
+                          <div class="table__icon" :class="`icon-color-${productAndServiceTab ==='product' ? 'orange' : 'green'}`">
                             <q-icon
                               size="md"
                               style="scale: 0.8"
-                              name="mdi-office-building-outline"
+                              :name="productAndServiceTab === 'product' ? 'mdi-folder' : 'mdi-server-network'"
                             />
                           </div>
                         </div>
@@ -3293,7 +3296,7 @@ watch(inputSearchProductAndService, async () => {
   --_color: var(--orange-6-hsl);
 }
 
-.branch-card__icon {
+.table__icon {
 
   background-color: hsla(var(--_color) / 0.15);
   color: hsla(var(--_color) / 1);
@@ -3316,10 +3319,12 @@ watch(inputSearchProductAndService, async () => {
     background-color: hsla(var(--_branch-status-color) / 1);
   }
 
-  & :deep(.q-avatar) {
+    &:deep(.q-icon)  {
     transform: rotate(-45deg);
     color: hsla(var(--_branch-card-bg) / 1);
   }
+
+
 }
 
 </style>

From 8e1b1ef66f43d7a7285a7cfa77cc87d4ca4624e8 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 16:18:13 +0700
Subject: [PATCH 130/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=20i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/en-US/customer-main-page.ts | 3 +++
 src/i18n/th-th/customer-main-page.ts | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/src/i18n/en-US/customer-main-page.ts b/src/i18n/en-US/customer-main-page.ts
index 24f703ef..b9f19bbf 100644
--- a/src/i18n/en-US/customer-main-page.ts
+++ b/src/i18n/en-US/customer-main-page.ts
@@ -56,4 +56,7 @@ export default {
   editBy: 'Edit by',
   valueBefore: 'Before',
   valueAfter: 'After',
+
+  serviceWorkTotal: 'Service Work Total',
+  priceInformation: 'Price Information',
 };
diff --git a/src/i18n/th-th/customer-main-page.ts b/src/i18n/th-th/customer-main-page.ts
index 8f5edc4b..f949852c 100644
--- a/src/i18n/th-th/customer-main-page.ts
+++ b/src/i18n/th-th/customer-main-page.ts
@@ -64,4 +64,7 @@ export default {
   editBy: 'แก้ไขโดย',
   valueBefore: 'แก้ไขใหม่',
   valueAfter: 'ค่าเดิม',
+
+  serviceWorkTotal: 'จำนวนงานทั้งหมด',
+  priceInformation: 'ข้อมูลราคา',
 };

From cd51de015964f1ad05bef446193f45a09aa2aad4 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 16:18:48 +0700
Subject: [PATCH 131/158] =?UTF-8?q?refactor:=20=E0=B8=88=E0=B8=B1=E0=B8=94?=
 =?UTF-8?q?=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B8=87=20=20=E0=B8=9A=E0=B8=A3=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=E0=B8=84=E0=B9=89=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 74 ++++++++++++++++++++---
 1 file changed, 65 insertions(+), 9 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 235e934f..9ab359be 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -30,6 +30,9 @@ import PaginationComponent from 'src/components/PaginationComponent.vue';
 import useFlowStore from 'src/stores/flow';
 import useMyBranchStore from 'src/stores/my-branch';
 
+import { dateFormat } from 'src/utils/datetime';
+import {formatNumberDecimal} from 'src/stores/utils';
+
 const useMyBranch = useMyBranchStore();
 
 const { fetchListOptionBranch } = useMyBranch;
@@ -253,7 +256,7 @@ const tbColumn = {
     },
     {
       name: 'priceInformation',
-      align: 'left',
+      align: 'center',
       label: 'priceInformation',
       field: 'name',
     },
@@ -272,6 +275,12 @@ const tbColumn = {
       label: 'serviceWorkTotal',
       field: (v) => v.work.length,
     },
+    {
+      name: 'createdAt',
+      align: 'left',
+      label: 'createdAt',
+      field: 'createdAt',
+    }
   ],
 } satisfies {
   groupAndType: QTableProps['columns'];
@@ -300,8 +309,8 @@ const tbControl = reactive({
     ],
   },
   service: {
-    fieldDisplay: ['serviceName', 'serviceDetail', 'serviceWorkTotal'],
-    fieldSelected: ['serviceName', 'serviceDetail', 'serviceWorkTotal'],
+    fieldDisplay: ['serviceName', 'serviceDetail', 'serviceWorkTotal' ,'createdAt'],
+    fieldSelected: ['serviceName', 'serviceDetail', 'serviceWorkTotal' ,'createdAt'],
   },
 });
 
@@ -1509,7 +1518,7 @@ watch(inputSearchProductAndService, async () => {
                 </q-td>
 
                 <q-td v-if="tbControl.groupAndType.fieldSelected.includes('createdAt')">
-                88585
+                {{dateFormat(props.row.createdAt)}}
                 </q-td>
 
           
@@ -2320,7 +2329,7 @@ watch(inputSearchProductAndService, async () => {
                             margin-bottom: var(--size-2);
                           "
                         >
-                          <div class="table__icon" :class="`icon-color-${productAndServiceTab ==='product' ? 'orange' : 'green'}`">
+                          <div class="table__icon" :class="`icon-color-${productAndServiceTab ==='product' ? 'green' : 'orange'}`">
                             <q-icon
                               size="md"
                               style="scale: 0.8"
@@ -2384,7 +2393,37 @@ watch(inputSearchProductAndService, async () => {
                         )
                       "
                     >
-                      price
+
+                    <div class="row tags-color-green  q-gutter-x-md  no-wrap items-center text-right ">
+                      <div class="tags  col-3 column ellipsis-2-lines  " style=" min-width: 50px;">
+                        <div class="col-4">{{$t('salePrice')}}</div>
+                        <div class="col-4 text-weight-bold">{{ formatNumberDecimal(props.row.price || 0 , 2) }}</div>
+
+                      </div>
+                       <div class="tags  col-3 column ellipsis-2-lines"  style=" min-width: 50px;">
+                        <div class="col-4">{{$t('agentPrice')}}</div>
+                        <div class="col-4  text-weight-bold">{{ formatNumberDecimal(props.row.agentPrice || 0 , 2) }}</div>
+
+                      </div>
+                       <div class="tags  col-3 column ellipsis-2-lines"  style=" min-width: 50px;">
+                        <div class="col-4">{{$t('processingPrice')}}</div>
+                        <div class="col-4  text-weight-bold">{{ formatNumberDecimal(props.row.processingPrice || 0 , 2) }}</div>
+
+                      </div>
+
+                    </div>
+                     
+                    </q-td>
+
+                       <q-td
+                      v-if="
+                        {
+                          product: tbControl.product.fieldSelected,
+                          service: tbControl.service.fieldSelected,
+                        }[productAndServiceTab].includes( 'createdAt')
+                      "
+                    >
+                      {{  dateFormat(props.row.createdAt) }}
                     </q-td>
                     <q-td>
                       <q-btn
@@ -3280,15 +3319,23 @@ watch(inputSearchProductAndService, async () => {
   --_color: var(--orange-5-hsl);
 }
 
-.icon-color-green {
+.icon-color-green  {
   --_color: var(--teal-10-hsl);
 }
 
+.tags-color-green {
+  --_color-tag: var(--teal-10-hsl);
+}
+
+.dark .tags-color-green {
+  --_color-tag: var(--teal-8-hsl);
+}
+
 .dark .icon-color-purple {
   --_color: var(--violet-10-hsl);
 }
 
-.dark .icon-color-green {
+.dark .icon-color-green  {
   --_color: var(--teal-8-hsl);
 }
 
@@ -3327,5 +3374,14 @@ watch(inputSearchProductAndService, async () => {
 
 }
 
+.tags {
+  display: inline-block;
+  color: hsla(var(--_color-tag) / 1);
+  background: hsla(var(--_color-tag) / 0.15);
+  border-radius: var(--radius-2);
+  padding-inline: var(--size-2);
+}
+
+
 </style>
-                                      toggleStatusGroup(props.row
+                                    

From 7b89fd7cb64e8b986fb6be2634e9cbd34fa065d5 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 16:56:03 +0700
Subject: [PATCH 132/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 27 +++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 9ab359be..c6f4ca92 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2148,6 +2148,33 @@ watch(inputSearchProductAndService, async () => {
                 </q-list>
               </q-menu>
             </q-btn>
+
+
+    <q-select
+                  v-if="modeView === false"
+                  id="select-field"
+                  for="select-field"
+                  :options="   {
+                    product: tbControl.product.fieldDisplay,
+                    service: tbControl.service.fieldDisplay,
+                  }[productAndServiceTab].map(x => ({ label: $t(x), value: x })) "
+                  :display-value="$t('displayField')"
+                  :model-value="
+                    { product: tbControl.product.fieldSelected,
+                    service: tbControl.service.fieldSelected,
+                  }[productAndServiceTab]
+"
+                  @update:model-value="(v) => tbControl[productAndServiceTab].fieldSelected = v
+                  "
+                  option-label="label"
+                  option-value="value"
+                  map-options
+                  emit-value
+                  outlined
+                  multiple
+                  dense
+                />
+
             <q-btn-toggle
               v-model="modeView"
               id="btn-mode"

From 726ba370ad2634826cfbe11077d022ae031e9108 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 17:17:08 +0700
Subject: [PATCH 133/158] =?UTF-8?q?refactor:=20=E0=B8=81=E0=B8=94=E0=B8=A2?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=99=E0=B8=81=E0=B8=A5=E0=B8=B1=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue |  13 +-
 src/pages/04_product-service/MainPage.vue   | 870 +++++++++++---------
 2 files changed, 479 insertions(+), 404 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index a85cbea1..452f961c 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -151,7 +151,18 @@ async function calculateStats() {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'branchManagement';
-  utilsStore.currentTitle.path = [{ text: 'branchManagementCaption' }];
+  utilsStore.currentTitle.path = [
+    {
+      text: 'branchManagementCaption',
+      handler: () => {
+        fieldSelectedBranch.value.value = 'branchHQLabel';
+        currentHq.value = {
+          id: '',
+          code: '',
+        };
+      },
+    },
+  ];
 
   await branchStore.fetchList({ pageSize: 99999 });
   await calculateStats();
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index c6f4ca92..8608c651 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -31,7 +31,7 @@ import useFlowStore from 'src/stores/flow';
 import useMyBranchStore from 'src/stores/my-branch';
 
 import { dateFormat } from 'src/utils/datetime';
-import {formatNumberDecimal} from 'src/stores/utils';
+import { formatNumberDecimal } from 'src/stores/utils';
 
 const useMyBranch = useMyBranchStore();
 
@@ -207,37 +207,31 @@ const serviceTab = [
 const hideStat = ref(false);
 
 const tbColumn = {
-
   groupAndType: [
-
-  {
-    name: 'name',
-    align:'left',
-    label: 'name',
-    field: 'name',
-  },
-  {
-    name: 'detail',
-    align:'left',
-    label: 'detail',
-    field: 'detail',
-  },
-  {
-    name: 'formDialogInputRemark',
-    align:'left',
-    label: 'formDialogInputRemark',
-    field: 'remark',
-  },
-   {
-    name: 'createdAt',
-    align:'left',
-    label: 'createdAt',
-    field: 'createdAt',
-  }
-
-
-
-    
+    {
+      name: 'name',
+      align: 'left',
+      label: 'name',
+      field: 'name',
+    },
+    {
+      name: 'detail',
+      align: 'left',
+      label: 'detail',
+      field: 'detail',
+    },
+    {
+      name: 'formDialogInputRemark',
+      align: 'left',
+      label: 'formDialogInputRemark',
+      field: 'remark',
+    },
+    {
+      name: 'createdAt',
+      align: 'left',
+      label: 'createdAt',
+      field: 'createdAt',
+    },
   ],
 
   product: [
@@ -280,7 +274,7 @@ const tbColumn = {
       align: 'left',
       label: 'createdAt',
       field: 'createdAt',
-    }
+    },
   ],
 } satisfies {
   groupAndType: QTableProps['columns'];
@@ -289,7 +283,6 @@ const tbColumn = {
 };
 
 const tbControl = reactive({
-
   groupAndType: {
     fieldDisplay: ['name', 'detail', 'formDialogInputRemark', 'createdAt'],
     fieldSelected: ['name', 'detail', 'formDialogInputRemark', 'createdAt'],
@@ -309,8 +302,18 @@ const tbControl = reactive({
     ],
   },
   service: {
-    fieldDisplay: ['serviceName', 'serviceDetail', 'serviceWorkTotal' ,'createdAt'],
-    fieldSelected: ['serviceName', 'serviceDetail', 'serviceWorkTotal' ,'createdAt'],
+    fieldDisplay: [
+      'serviceName',
+      'serviceDetail',
+      'serviceWorkTotal',
+      'createdAt',
+    ],
+    fieldSelected: [
+      'serviceName',
+      'serviceDetail',
+      'serviceWorkTotal',
+      'createdAt',
+    ],
   },
 });
 
@@ -1105,7 +1108,14 @@ function cloneData() {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'mainProductTitle';
-  utilsStore.currentTitle.path = [{ text: 'mainProductCaption' }];
+  utilsStore.currentTitle.path = [
+    {
+      text: 'manage',
+      handler: () => {
+        productMode.value = 'group';
+      },
+    },
+  ];
 
   calculateStats();
   await fetchListGroups();
@@ -1115,7 +1125,15 @@ onMounted(async () => {
 watch(productMode, () => {
   inputSearch.value = '';
   currentStatus.value = 'All';
-  const tmp: typeof utilsStore.currentTitle.path = [];
+
+  const tmp: typeof utilsStore.currentTitle.path = [
+    {
+      text: 'manage',
+      handler: () => {
+        productMode.value = 'group';
+      },
+    },
+  ];
 
   if (productMode.value === 'type' || productMode.value === 'service') {
     tmp.push({
@@ -1354,21 +1372,26 @@ watch(inputSearchProductAndService, async () => {
                 </q-menu>
               </q-btn>
 
-                 <q-select
-                  v-if="modeView === false"
-                  id="select-field"
-                  for="select-field"
-                  :options=" tbControl.groupAndType.fieldDisplay.map(x => ({ label: $t(x), value: x })) "
-                  :display-value="$t('displayField')"
-                  v-model="tbControl.groupAndType.fieldSelected"
-                  option-label="label"
-                  option-value="value"
-                  map-options
-                  emit-value
-                  outlined
-                  multiple
-                  dense
-                />
+              <q-select
+                v-if="modeView === false"
+                id="select-field"
+                for="select-field"
+                :options="
+                  tbControl.groupAndType.fieldDisplay.map((x) => ({
+                    label: $t(x),
+                    value: x,
+                  }))
+                "
+                :display-value="$t('displayField')"
+                v-model="tbControl.groupAndType.fieldSelected"
+                option-label="label"
+                option-value="value"
+                map-options
+                emit-value
+                outlined
+                multiple
+                dense
+              />
 
               <q-btn-toggle
                 v-model="modeView"
@@ -1419,7 +1442,7 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-        <div  class="col flex scroll full-height q-pa-md surface-1 ">
+        <div class="col flex scroll full-height q-pa-md surface-1">
           <div class="full-width">
             <q-table
               flat
@@ -1429,7 +1452,7 @@ watch(inputSearchProductAndService, async () => {
                 (productMode === 'type' ? productType : productGroup) || []
               "
               :columns="tbColumn.groupAndType"
-              class="  full-width  "
+              class="full-width"
               card-container-class="q-gutter-md  "
               row-key="name"
               :rows-per-page-options="[0]"
@@ -1437,281 +1460,303 @@ watch(inputSearchProductAndService, async () => {
               :visible-columns="tbControl.groupAndType.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>
-
-            <template v-slot:body="props">
-              <q-tr
-                :class="{
-                  'app-text-muted': props.row.status === 'INACTIVE',
-                  'status-active': props.row.status !== 'INACTIVE',
-                  'status-inactive': props.row.status === 'INACTIVE',
-                }"
-                :props="props"
-                @click="async ()=>{
-                   if (productMode === 'type') {
-                          pathTypeName = props.row.name;
-                          currentIdType = props.row.id;
-                          productMode = 'service';
-                          productAndServiceTab = 'service';
-
-                          await fetchListOfProduct();
-                          await fetchListOfService();
-                          await fetchListOfProductAndService();
-                          flowStore.rotate();
-                        }
-                        if (productMode === 'group') {
-
-                              pathGroupName = props.row.name;
-                    currentId = props.row.id;
-                    productMode = 'type';
-                    await fetchListType();
-                    flowStore.rotate();
-                        }
-                }"
-              >
-                <q-td v-if="tbControl.groupAndType.fieldSelected.includes('name')">
-                  <div class="row items-center">
-                    <div
-                      style="
-                        width: 50px;
-                        display: flex;
-                        margin-bottom: var(--size-2);
-                      "
-                    >
-                      <div :class="`icon-color-${productMode ==='group' ? 'pink' : 'purple'}`" class="table__icon">
-
-                   
-                            <q-icon
-                              size="md"
-                              style="scale: 0.8"
-                              :name="productMode === 'group' ? 'mdi-folder' : 'mdi-folder-table'"
-                            />
-
-
-                    
-                      </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="tbControl.groupAndType.fieldSelected.includes('detail')">
-                  {{ props.row.detail || '-' }}
-                </q-td>
-
-                <q-td v-if="tbControl.groupAndType.fieldSelected.includes('formDialogInputRemark')">
-                  {{ props.row.remark || '-' }}
-                </q-td>
-
-                <q-td v-if="tbControl.groupAndType.fieldSelected.includes('createdAt')">
-                {{dateFormat(props.row.createdAt)}}
-                </q-td>
-
-          
-
-                <q-td>
-                  <q-btn
-                    icon="mdi-eye-outline"
-                    size="sm"
-                    dense
-                    round
-                    flat
-                    @click.stop="
-                      () => {
-                      
-   if (productMode === 'type') {
-                          currentStatusProduct =
-                            props.row.status === 'INACTIVE';
-                          clearFormGroup();
-                          currentIdType = props.row.id;
-                          assignFormDataGroup(props.row);
-                          isEdit = false;
-                          drawerInfo = true;
-                        }
-                        if (productMode === 'group') {
-
-
-                    currentStatusProduct = props.row.status === 'INACTIVE';
-                    clearFormGroup();
-                    assignFormDataGroup(props.row);
-                    isEdit = false;
-                    currentId = props.row.id;
-                    drawerInfo = true;
-                        }
-
-                      }
-                    "
-                  />
-
-                  <q-btn
-                    icon="mdi-dots-vertical"
-                    size="sm"
-                    dense
-                    round
-                    flat
-                    @click.stop
-                    :key="props.row.id"
+                <q-tr class="surface-2" :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
                   >
-                    <q-menu class="bordered">
-                      <q-list v-close-popup>
-                        <q-item
-                          :id="`view-detail-btn-${props.row.name}-view`"
-                          @click.stop="
-                            () => {
-                        if (productMode === 'type') {
-                          currentStatusProduct =
-                            props.row.status === 'INACTIVE';
-                          clearFormGroup();
-                          currentIdType = props.row.id;
-                          assignFormDataGroup(props.row);
-                          isEdit = false;
-                          drawerInfo = true;
-                        }
-                        if (productMode === 'group') {
+                    {{ $t(col.label) }}
+                  </q-th>
+                  <q-th auto-width />
+                </q-tr>
+              </template>
 
+              <template v-slot:body="props">
+                <q-tr
+                  :class="{
+                    'app-text-muted': props.row.status === 'INACTIVE',
+                    'status-active': props.row.status !== 'INACTIVE',
+                    'status-inactive': props.row.status === 'INACTIVE',
+                  }"
+                  :props="props"
+                  @click="
+                    async () => {
+                      if (productMode === 'type') {
+                        pathTypeName = props.row.name;
+                        currentIdType = props.row.id;
+                        productMode = 'service';
+                        productAndServiceTab = 'service';
 
-                    currentStatusProduct = props.row.status === 'INACTIVE';
-                    clearFormGroup();
-                    assignFormDataGroup(props.row);
-                    isEdit = false;
-                    currentId = props.row.id;
-                    drawerInfo = true;
-                        }
-                            }
-                          "
-                          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 (productMode === 'type') {
-                          clearFormGroup();
-                          currentIdType = props.row.id;
-                          assignFormDataGroup(props.row);
-                          isEdit = true;
-                          drawerInfo = true;
-                        }
-                        if (productMode === 'group') {
-
-                            clearFormGroup();
-                    assignFormDataGroup(props.row);
-                    isEdit = true;
-                    currentId = props.row.id;
-
-                    drawerInfo = true;
-                        }
-                            }
-                          "
-                        >
-                          <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="()=>{
-                                if (productMode === 'type') {
-                          deleteProductById(props.row.id);
-                        }
-                        if (productMode === 'group') {
-                          deleteProductById(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 () => {
-                                           if (productMode === 'type') {
-                        toggleStatusType(props.row.id, props.row.status);
+                        await fetchListOfProduct();
+                        await fetchListOfService();
+                        await fetchListOfProductAndService();
+                        flowStore.rotate();
                       }
                       if (productMode === 'group') {
-                        toggleStatusGroup(props.row.id, props.row.status);
+                        pathGroupName = props.row.name;
+                        currentId = props.row.id;
+                        productMode = 'type';
+                        await fetchListType();
+                        flowStore.rotate();
                       }
-                                  }
-                                "
-                                :model-value="props.row.status !== 'INACTIVE'"
-                              />
-                            </div>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
-                  </q-btn>
-                </q-td>
-              </q-tr>
-            </template>
+                    }
+                  "
+                >
+                  <q-td
+                    v-if="tbControl.groupAndType.fieldSelected.includes('name')"
+                  >
+                    <div class="row items-center">
+                      <div
+                        style="
+                          width: 50px;
+                          display: flex;
+                          margin-bottom: var(--size-2);
+                        "
+                      >
+                        <div
+                          :class="`icon-color-${productMode === 'group' ? 'pink' : 'purple'}`"
+                          class="table__icon"
+                        >
+                          <q-icon
+                            size="md"
+                            style="scale: 0.8"
+                            :name="
+                              productMode === 'group'
+                                ? 'mdi-folder'
+                                : 'mdi-folder-table'
+                            "
+                          />
+                        </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="
+                      tbControl.groupAndType.fieldSelected.includes('detail')
+                    "
+                  >
+                    {{ props.row.detail || '-' }}
+                  </q-td>
+
+                  <q-td
+                    v-if="
+                      tbControl.groupAndType.fieldSelected.includes(
+                        'formDialogInputRemark',
+                      )
+                    "
+                  >
+                    {{ props.row.remark || '-' }}
+                  </q-td>
+
+                  <q-td
+                    v-if="
+                      tbControl.groupAndType.fieldSelected.includes('createdAt')
+                    "
+                  >
+                    {{ dateFormat(props.row.createdAt) }}
+                  </q-td>
+
+                  <q-td>
+                    <q-btn
+                      icon="mdi-eye-outline"
+                      size="sm"
+                      dense
+                      round
+                      flat
+                      @click.stop="
+                        () => {
+                          if (productMode === 'type') {
+                            currentStatusProduct =
+                              props.row.status === 'INACTIVE';
+                            clearFormGroup();
+                            currentIdType = props.row.id;
+                            assignFormDataGroup(props.row);
+                            isEdit = false;
+                            drawerInfo = true;
+                          }
+                          if (productMode === 'group') {
+                            currentStatusProduct =
+                              props.row.status === 'INACTIVE';
+                            clearFormGroup();
+                            assignFormDataGroup(props.row);
+                            isEdit = false;
+                            currentId = props.row.id;
+                            drawerInfo = true;
+                          }
+                        }
+                      "
+                    />
+
+                    <q-btn
+                      icon="mdi-dots-vertical"
+                      size="sm"
+                      dense
+                      round
+                      flat
+                      @click.stop
+                      :key="props.row.id"
+                    >
+                      <q-menu class="bordered">
+                        <q-list v-close-popup>
+                          <q-item
+                            :id="`view-detail-btn-${props.row.name}-view`"
+                            @click.stop="
+                              () => {
+                                if (productMode === 'type') {
+                                  currentStatusProduct =
+                                    props.row.status === 'INACTIVE';
+                                  clearFormGroup();
+                                  currentIdType = props.row.id;
+                                  assignFormDataGroup(props.row);
+                                  isEdit = false;
+                                  drawerInfo = true;
+                                }
+                                if (productMode === 'group') {
+                                  currentStatusProduct =
+                                    props.row.status === 'INACTIVE';
+                                  clearFormGroup();
+                                  assignFormDataGroup(props.row);
+                                  isEdit = false;
+                                  currentId = props.row.id;
+                                  drawerInfo = true;
+                                }
+                              }
+                            "
+                            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 (productMode === 'type') {
+                                  clearFormGroup();
+                                  currentIdType = props.row.id;
+                                  assignFormDataGroup(props.row);
+                                  isEdit = true;
+                                  drawerInfo = true;
+                                }
+                                if (productMode === 'group') {
+                                  clearFormGroup();
+                                  assignFormDataGroup(props.row);
+                                  isEdit = true;
+                                  currentId = props.row.id;
+
+                                  drawerInfo = true;
+                                }
+                              }
+                            "
+                          >
+                            <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="
+                              () => {
+                                if (productMode === 'type') {
+                                  deleteProductById(props.row.id);
+                                }
+                                if (productMode === 'group') {
+                                  deleteProductById(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 () => {
+                                      if (productMode === 'type') {
+                                        toggleStatusType(
+                                          props.row.id,
+                                          props.row.status,
+                                        );
+                                      }
+                                      if (productMode === 'group') {
+                                        toggleStatusGroup(
+                                          props.row.id,
+                                          props.row.status,
+                                        );
+                                      }
+                                    }
+                                  "
+                                  :model-value="props.row.status !== 'INACTIVE'"
+                                />
+                              </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-3">
@@ -1754,14 +1799,13 @@ watch(inputSearchProductAndService, async () => {
                           drawerInfo = true;
                         }
                         if (productMode === 'group') {
-
-
-                    currentStatusProduct = props.row.status === 'INACTIVE';
-                    clearFormGroup();
-                    assignFormDataGroup(props.row);
-                    isEdit = false;
-                    currentId = props.row.id;
-                    drawerInfo = true;
+                          currentStatusProduct =
+                            props.row.status === 'INACTIVE';
+                          clearFormGroup();
+                          assignFormDataGroup(props.row);
+                          isEdit = false;
+                          currentId = props.row.id;
+                          drawerInfo = true;
                         }
                       }
                     "
@@ -1775,13 +1819,12 @@ watch(inputSearchProductAndService, async () => {
                           drawerInfo = true;
                         }
                         if (productMode === 'group') {
+                          clearFormGroup();
+                          assignFormDataGroup(props.row);
+                          isEdit = true;
+                          currentId = props.row.id;
 
-                            clearFormGroup();
-                    assignFormDataGroup(props.row);
-                    isEdit = true;
-                    currentId = props.row.id;
-
-                    drawerInfo = true;
+                          drawerInfo = true;
                         }
                       }
                     "
@@ -1791,7 +1834,7 @@ watch(inputSearchProductAndService, async () => {
                           deleteProductById(props.row.id);
                         }
                         if (productMode === 'group') {
-                          deleteProductById(props.row.id)
+                          deleteProductById(props.row.id);
                         }
                       }
                     "
@@ -1809,12 +1852,11 @@ watch(inputSearchProductAndService, async () => {
                           flowStore.rotate();
                         }
                         if (productMode === 'group') {
-
-                              pathGroupName = props.row.name;
-                    currentId = props.row.id;
-                    productMode = 'type';
-                    await fetchListType();
-                    flowStore.rotate();
+                          pathGroupName = props.row.name;
+                          currentId = props.row.id;
+                          productMode = 'type';
+                          await fetchListType();
+                          flowStore.rotate();
                         }
                       }
                     "
@@ -2149,31 +2191,34 @@ watch(inputSearchProductAndService, async () => {
               </q-menu>
             </q-btn>
 
-
-    <q-select
-                  v-if="modeView === false"
-                  id="select-field"
-                  for="select-field"
-                  :options="   {
-                    product: tbControl.product.fieldDisplay,
-                    service: tbControl.service.fieldDisplay,
-                  }[productAndServiceTab].map(x => ({ label: $t(x), value: x })) "
-                  :display-value="$t('displayField')"
-                  :model-value="
-                    { product: tbControl.product.fieldSelected,
-                    service: tbControl.service.fieldSelected,
-                  }[productAndServiceTab]
-"
-                  @update:model-value="(v) => tbControl[productAndServiceTab].fieldSelected = v
-                  "
-                  option-label="label"
-                  option-value="value"
-                  map-options
-                  emit-value
-                  outlined
-                  multiple
-                  dense
-                />
+            <q-select
+              v-if="modeView === false"
+              id="select-field"
+              for="select-field"
+              :options="
+                {
+                  product: tbControl.product.fieldDisplay,
+                  service: tbControl.service.fieldDisplay,
+                }[productAndServiceTab].map((x) => ({ label: $t(x), value: x }))
+              "
+              :display-value="$t('displayField')"
+              :model-value="
+                {
+                  product: tbControl.product.fieldSelected,
+                  service: tbControl.service.fieldSelected,
+                }[productAndServiceTab]
+              "
+              @update:model-value="
+                (v) => (tbControl[productAndServiceTab].fieldSelected = v)
+              "
+              option-label="label"
+              option-value="value"
+              map-options
+              emit-value
+              outlined
+              multiple
+              dense
+            />
 
             <q-btn-toggle
               v-model="modeView"
@@ -2356,11 +2401,18 @@ watch(inputSearchProductAndService, async () => {
                             margin-bottom: var(--size-2);
                           "
                         >
-                          <div class="table__icon" :class="`icon-color-${productAndServiceTab ==='product' ? 'green' : 'orange'}`">
+                          <div
+                            class="table__icon"
+                            :class="`icon-color-${productAndServiceTab === 'product' ? 'green' : 'orange'}`"
+                          >
                             <q-icon
                               size="md"
                               style="scale: 0.8"
-                              :name="productAndServiceTab === 'product' ? 'mdi-folder' : 'mdi-server-network'"
+                              :name="
+                                productAndServiceTab === 'product'
+                                  ? 'mdi-folder'
+                                  : 'mdi-server-network'
+                              "
                             />
                           </div>
                         </div>
@@ -2420,37 +2472,55 @@ watch(inputSearchProductAndService, async () => {
                         )
                       "
                     >
-
-                    <div class="row tags-color-green  q-gutter-x-md  no-wrap items-center text-right ">
-                      <div class="tags  col-3 column ellipsis-2-lines  " style=" min-width: 50px;">
-                        <div class="col-4">{{$t('salePrice')}}</div>
-                        <div class="col-4 text-weight-bold">{{ formatNumberDecimal(props.row.price || 0 , 2) }}</div>
-
+                      <div
+                        class="row tags-color-green q-gutter-x-md no-wrap items-center text-right"
+                      >
+                        <div
+                          class="tags col-3 column ellipsis-2-lines"
+                          style="min-width: 50px"
+                        >
+                          <div class="col-4">{{ $t('salePrice') }}</div>
+                          <div class="col-4 text-weight-bold">
+                            {{ formatNumberDecimal(props.row.price || 0, 2) }}
+                          </div>
+                        </div>
+                        <div
+                          class="tags col-3 column ellipsis-2-lines"
+                          style="min-width: 50px"
+                        >
+                          <div class="col-4">{{ $t('agentPrice') }}</div>
+                          <div class="col-4 text-weight-bold">
+                            {{
+                              formatNumberDecimal(props.row.agentPrice || 0, 2)
+                            }}
+                          </div>
+                        </div>
+                        <div
+                          class="tags col-3 column ellipsis-2-lines"
+                          style="min-width: 50px"
+                        >
+                          <div class="col-4">{{ $t('processingPrice') }}</div>
+                          <div class="col-4 text-weight-bold">
+                            {{
+                              formatNumberDecimal(
+                                props.row.processingPrice || 0,
+                                2,
+                              )
+                            }}
+                          </div>
+                        </div>
                       </div>
-                       <div class="tags  col-3 column ellipsis-2-lines"  style=" min-width: 50px;">
-                        <div class="col-4">{{$t('agentPrice')}}</div>
-                        <div class="col-4  text-weight-bold">{{ formatNumberDecimal(props.row.agentPrice || 0 , 2) }}</div>
-
-                      </div>
-                       <div class="tags  col-3 column ellipsis-2-lines"  style=" min-width: 50px;">
-                        <div class="col-4">{{$t('processingPrice')}}</div>
-                        <div class="col-4  text-weight-bold">{{ formatNumberDecimal(props.row.processingPrice || 0 , 2) }}</div>
-
-                      </div>
-
-                    </div>
-                     
                     </q-td>
 
-                       <q-td
+                    <q-td
                       v-if="
                         {
                           product: tbControl.product.fieldSelected,
                           service: tbControl.service.fieldSelected,
-                        }[productAndServiceTab].includes( 'createdAt')
+                        }[productAndServiceTab].includes('createdAt')
                       "
                     >
-                      {{  dateFormat(props.row.createdAt) }}
+                      {{ dateFormat(props.row.createdAt) }}
                     </q-td>
                     <q-td>
                       <q-btn
@@ -3346,7 +3416,7 @@ watch(inputSearchProductAndService, async () => {
   --_color: var(--orange-5-hsl);
 }
 
-.icon-color-green  {
+.icon-color-green {
   --_color: var(--teal-10-hsl);
 }
 
@@ -3362,7 +3432,7 @@ watch(inputSearchProductAndService, async () => {
   --_color: var(--violet-10-hsl);
 }
 
-.dark .icon-color-green  {
+.dark .icon-color-green {
   --_color: var(--teal-8-hsl);
 }
 
@@ -3371,10 +3441,9 @@ watch(inputSearchProductAndService, async () => {
 }
 
 .table__icon {
-
   background-color: hsla(var(--_color) / 0.15);
   color: hsla(var(--_color) / 1);
-  
+
   border-radius: 50%;
   padding: var(--size-1);
   position: relative;
@@ -3393,12 +3462,10 @@ watch(inputSearchProductAndService, async () => {
     background-color: hsla(var(--_branch-status-color) / 1);
   }
 
-    &:deep(.q-icon)  {
+  &:deep(.q-icon) {
     transform: rotate(-45deg);
     color: hsla(var(--_branch-card-bg) / 1);
   }
-
-
 }
 
 .tags {
@@ -3408,7 +3475,4 @@ watch(inputSearchProductAndService, async () => {
   border-radius: var(--radius-2);
   padding-inline: var(--size-2);
 }
-
-
 </style>
-                                    

From cd682a814a21f2ba0401ded9aabdbacaabb7e4ee Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 08:58:46 +0700
Subject: [PATCH 134/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=20=E0=B8=A5=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B9=84=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=88=E0=B9=84=E0=B8=94=E0=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/employee/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index 6b77a8c4..cd891ca3 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -71,7 +71,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
       transactionId?: string;
     },
   ) {
-    const { image, ...payload } = data;
+    const { code, image, ...payload } = data;
     const res = await api.post<
       Employee & { profileImageUrl: string; profileImageUploadUrl: string }
     >('/employee', payload, {
@@ -104,7 +104,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
       transactionId?: string;
     },
   ) {
-    const { code  , image, ...payload } = data;
+    const { code, image, ...payload } = data;
     const res = await api.put<
       Employee & { imageUrl: string; profileImageUploadUrl: string }
     >(`/employee/${id}`, payload, {

From e58c670f9d6c5b0307360c7e1dfc8ee7fe496a09 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 09:18:43 +0700
Subject: [PATCH 135/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20no?=
 =?UTF-8?q?=20data?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 136 +++-------------------
 1 file changed, 16 insertions(+), 120 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 8608c651..9100443f 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1442,6 +1442,19 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
+
+        <div
+          v-if="
+            (productMode === 'type' && productType?.length === 0) ||
+            (productGroup?.length === 0 && productMode === 'group')
+          "
+          class="flex full-height justify-center items-center q-mt-lg"
+          style="min-height: 70vh; background-color: var(--surface-2)"
+        >
+          <NoData :not-found="!!inputSearch" />
+        </div>
+        <template v-else>
+
         <div class="col flex scroll full-height q-pa-md surface-1">
           <div class="full-width">
             <q-table
@@ -1865,129 +1878,11 @@ watch(inputSearchProductAndService, async () => {
               </template>
             </q-table>
 
-            <!-- <div
-              :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
-              v-for="(v, i) in productMode === 'type'
-                ? productType
-                : productGroup"
-              :key="i"
-            >
-              <ProductCardComponent
-                v-if="productMode === 'type'"
-                isType
-                :count-product="v._count.product"
-                :count-type="v._count.type"
-                :count-service="v._count.service"
-                :title="v.name"
-                :subtitle="v.code"
-                :date="new Date(v.updatedAt)"
-                :status="v.status"
-                :id="v.id"
-                :isDisabled="v.status === 'INACTIVE'"
-                :color="
-                  $q.dark.isActive
-                    ? 'var(--purple-7-hsl)'
-                    : 'var(--violet-11-hsl)'
-                "
-                @toggleStatus="toggleStatusType(v.id, v.status)"
-                @viewCard="
-                  () => {
-                    currentStatusProduct = v.status === 'INACTIVE';
-                    clearFormGroup();
-                    currentIdType = v.id;
-                    assignFormDataGroup(v);
-                    isEdit = false;
-                    drawerInfo = true;
-                  }
-                "
-                @updateCard="
-                  () => {
-                    clearFormGroup();
-                    currentIdType = v.id;
-                    assignFormDataGroup(v);
-                    isEdit = true;
-                    drawerInfo = true;
-                  }
-                "
-                @deleteCard="
-                  () => {
-                    deleteProductById(v.id);
-                  }
-                "
-                @on-click="
-                  async () => {
-                    pathTypeName = v.name;
-                    currentIdType = v.id;
-                    productMode = 'service';
-                    productAndServiceTab = 'service';
-                    // await featchStatsService();
-                    // await featchStatsProduct();
-                    await fetchListOfProduct();
-                    await fetchListOfService();
-                    await fetchListOfProductAndService();
-                    flowStore.rotate();
-                  }
-                "
-              />
-              <ProductCardComponent
-                v-else-if="productMode === 'group'"
-                :title="v.name"
-                :subtitle="v.code"
-                :count-product="v._count.product"
-                :count-type="v._count.type"
-                :count-service="v._count.service"
-                :date="new Date(v.updatedAt)"
-                :status="v.status"
-                color="var(--pink-6-hsl)"
-                :id="v.id"
-                :isDisabled="v.status === 'INACTIVE'"
-                @toggleStatus="toggleStatusGroup(v.id, v.status)"
-                @viewCard="
-                  () => {
-                    currentStatusProduct = v.status === 'INACTIVE';
-                    clearFormGroup();
-                    assignFormDataGroup(v);
-                    isEdit = false;
-                    currentId = v.id;
-                    drawerInfo = true;
-                  }
-                "
-                @updateCard="
-                  () => {
-                    clearFormGroup();
-                    assignFormDataGroup(v);
-                    isEdit = true;
-                    currentId = v.id;
-
-                    drawerInfo = true;
-                  }
-                "
-                @deleteCard="deleteProductById(v.id)"
-                @on-click="
-                  async () => {
-                    pathGroupName = v.name;
-                    currentId = v.id;
-                    productMode = 'type';
-                    await fetchListType();
-                    flowStore.rotate();
-                  }
-                "
-              />
-            </div> -->
+    
           </div>
         </div>
 
-        <div
-          v-if="
-            (productMode === 'type' && productType?.length === 0) ||
-            (productGroup?.length === 0 && productMode === 'group')
-          "
-          class="flex justify-center items-center q-mt-lg"
-          style="min-height: 70vh; background-color: var(--surface-2)"
-        >
-          <NoData :not-found="!!inputSearch" />
-        </div>
-        <template v-else>
+        
           <div
             v-if="productMode === 'group'"
             class="row items-center justify-between q-px-md q-py-sm"
@@ -2381,6 +2276,7 @@ watch(inputSearchProductAndService, async () => {
                       v-if="
                         {
                           product: tbControl.product.fieldSelected,
+                          
                           service: tbControl.service.fieldSelected,
                         }[productAndServiceTab].includes(
                           { product: 'productName', service: 'serviceName' }[

From 4183dbb0ec4a82d3e4dc8e1c118a70c2c9281fb8 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 09:35:00 +0700
Subject: [PATCH 136/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/03_customer-management/AboutComponent.vue     | 5 +++++
 src/components/03_customer-management/BasicInformation.vue   | 5 +++++
 .../03_customer-management/FormEmployeePassport.vue          | 5 +----
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/03_customer-management/AboutComponent.vue b/src/components/03_customer-management/AboutComponent.vue
index 27772208..14566ce2 100644
--- a/src/components/03_customer-management/AboutComponent.vue
+++ b/src/components/03_customer-management/AboutComponent.vue
@@ -139,6 +139,11 @@ const branchNo = defineModel<number>('branchNo');
         class="col-6"
         :label="$t('taxNo')"
         v-model="taxNo"
+          :rules="[
+        (val) =>
+          (val && val.length === 13 && /[0-9]+/.test(val)) ||
+          $t('formDialogInputTaxNoValidate'),
+      ]"
       />
       <q-input
         for="input-registerName"
diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index 72772e6c..91ac3f8f 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -89,6 +89,11 @@ onMounted(async () => {});
       class="col-6"
       :label="$t('taxNo')"
       v-model="taxNo"
+        :rules="[
+        (val) =>
+          (val && val.length === 13 && /[0-9]+/.test(val)) ||
+          $t('formDialogInputTaxNoValidate'),
+      ]"
     />
 
     <q-input
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 11d1e864..f9493dfc 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -73,10 +73,7 @@ defineProps<{
       class="col-6"
       :label="$t('formDialogInputPassportRef')"
       v-model="previousPassportReference"
-      :rules="[
-        (val: string) =>
-          !!val || $t('inputValidate') + $t('formDialogInputPassportRef'),
-      ]"
+  
     />
     <q-input
       for="input-passport-place"

From 9a7bbe601ccc7b899382d9ab4cbb9c42c93f3e36 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Wed, 10 Jul 2024 09:41:50 +0700
Subject: [PATCH 137/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20la?=
 =?UTF-8?q?bel=20=E0=B9=80=E0=B8=9B=E0=B9=87=E0=B8=99=E0=B8=99=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/en-US/form-dialog.ts                 | 1 +
 src/i18n/th-th/form-dialog.ts                 | 1 +
 src/pages/03_customer-management/MainPage.vue | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/i18n/en-US/form-dialog.ts b/src/i18n/en-US/form-dialog.ts
index ec2f242d..43b66694 100644
--- a/src/i18n/en-US/form-dialog.ts
+++ b/src/i18n/en-US/form-dialog.ts
@@ -92,6 +92,7 @@ export default {
   formDialogInputNationality: 'Nationality',
 
   formDialogTitlePersonnelAddress: 'Personnel Address',
+  formDialogTitleEmployerAddress: 'Employer Address',
   formDialogTitleAddressPure: 'Address',
   formDialogTitleAddressPureEN: 'Address in English',
 
diff --git a/src/i18n/th-th/form-dialog.ts b/src/i18n/th-th/form-dialog.ts
index 6be4f21a..8688354a 100644
--- a/src/i18n/th-th/form-dialog.ts
+++ b/src/i18n/th-th/form-dialog.ts
@@ -90,6 +90,7 @@ export default {
   formDialogInputNationality: 'สัญชาติ',
 
   formDialogTitlePersonnelAddress: 'ข้อมูลที่อยู่พนักงาน',
+  formDialogTitleEmployerAddress: 'ข้อมูลที่อยู่นายจ้าง',
   formDialogTitleAddressPure: 'ที่อยู่',
   formDialogTitleAddressPureEN: 'ที่อยู่ภาษาอังกฤษ',
 
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 9b2f09b0..d9fbb506 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2847,6 +2847,7 @@ watch([inputSearch, currentStatus], async () => {
                 formData.customerBranch[indexTab].subDistrictId
               "
               v-model:zip-code="formData.customerBranch[indexTab].zipCode"
+              :title="$t('formDialogTitleEmployerAddress')"
               separator
               dense
               outlined

From 41e896b98f90e9731a41291f9abf066cd3af032a Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 09:44:10 +0700
Subject: [PATCH 138/158] =?UTF-8?q?fix:=20=E0=B8=81=E0=B8=94=20item=20?=
 =?UTF-8?q?=E0=B9=80=E0=B9=80=E0=B8=A5=E0=B9=89=E0=B8=A7=E0=B9=84=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=9B=E0=B8=B4=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue   |  7 +++++--
 .../02_personnel-management/MainPage.vue      | 15 +++++++++++---
 src/pages/03_customer-management/MainPage.vue | 12 +++++++++--
 src/pages/04_product-service/MainPage.vue     | 20 +++++++++++++++----
 4 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 452f961c..e5b4de3b 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1293,8 +1293,8 @@ watch(locale, () => {
                             "
                           >
                             <template v-slot:action>
-                              <q-menu class="bordered">
-                                <q-list v-close-popup>
+                              <q-menu  class="bordered" >
+                                <q-list>
                                   <q-item
                                     :id="`view-detail-btn-${props.row.name}-view`"
                                     @click.stop="
@@ -1313,6 +1313,7 @@ watch(locale, () => {
                                         );
                                       }
                                     "
+                                    v-close-popup
                                     clickable
                                     dense
                                     class="row q-py-sm"
@@ -1333,6 +1334,7 @@ watch(locale, () => {
 
                                   <q-item
                                     :id="`view-detail-btn-${props.row.name}-edit`"
+                                     v-close-popup
                                     clickable
                                     dense
                                     class="row q-py-sm"
@@ -1371,6 +1373,7 @@ watch(locale, () => {
                                   <q-item
                                     :id="`view-detail-btn-${props.row.name}-delete`"
                                     dense
+                                    v-close-popup
                                     :clickable="props.row.status === 'CREATED'"
                                     class="row"
                                     :class="{
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 9de4b7e0..893f9366 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -942,7 +942,8 @@ watch(inputSearch, async () => await fetchUserList());
               })
             "
             :columns="columns"
-            card-container-class="q-col-gutter-md  full-width "
+            class="full-width"
+            card-container-class="q-gutter-md  "
             row-key="name"
             :rows-per-page-options="[0]"
             hide-pagination
@@ -1090,7 +1091,8 @@ watch(inputSearch, async () => await fetchUserList());
                               openDialog('INFO', props.row.id);
                             }
                           "
-                          clickable
+                             v-close-popup
+                                    clickable
                           dense
                           class="row q-py-sm"
                           style="white-space: nowrap"
@@ -1108,7 +1110,8 @@ watch(inputSearch, async () => await fetchUserList());
 
                         <q-item
                           :id="`view-detail-btn-${props.row.name}-edit`"
-                          clickable
+                             v-close-popup
+                                    clickable
                           dense
                           class="row q-py-sm"
                           style="white-space: nowrap"
@@ -1131,6 +1134,8 @@ watch(inputSearch, async () => await fetchUserList());
                         <q-item
                           :id="`view-detail-btn-${props.row.name}-delete`"
                           dense
+                             v-close-popup
+                          
                           :clickable="props.row.status === 'CREATED'"
                           class="row"
                           :class="{
@@ -1627,6 +1632,10 @@ watch(inputSearch, async () => await fetchUserList());
   opacity: 0;
 }
 
+
+
+
+
 .status-active {
   --_branch-status-color: var(--green-6-hsl);
 }
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index d9fbb506..dc49a079 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1773,9 +1773,11 @@ watch([inputSearch, currentStatus], async () => {
             <div class="column q-pa-md" style="gap: var(--size-1)">
               <template v-if="selectorLabel === 'EMPLOYER'">
                 <q-item
+                   v-close-popup
+                                    clickable
                   v-for="v in fieldCustomer"
                   :key="v"
-                  clickable
+                
                   dense
                   class="no-padding flex items-center rounded"
                   active-class="employer-active"
@@ -1791,9 +1793,11 @@ watch([inputSearch, currentStatus], async () => {
                 <q-item
                   active
                   dense
-                  clickable
+                
                   active-class="employer-active"
                   class="no-padding flex items-center rounded"
+                     v-close-popup
+                                    clickable
                 >
                   <span class="q-px-md">
                     {{ $t('totalEmployee') }}
@@ -1984,6 +1988,7 @@ watch([inputSearch, currentStatus], async () => {
                                         );
                                       }
                                     "
+                                      v-close-popup
                                     clickable
                                     dense
                                     class="row q-py-sm"
@@ -2004,6 +2009,7 @@ watch([inputSearch, currentStatus], async () => {
 
                                   <q-item
                                     :id="`view-detail-btn-${props.row.name}-edit`"
+                                       v-close-popup
                                     clickable
                                     dense
                                     class="row q-py-sm"
@@ -2044,6 +2050,8 @@ watch([inputSearch, currentStatus], async () => {
                                   <q-item
                                     :id="`view-detail-btn-${props.row.name}-delete`"
                                     dense
+                                       v-close-popup
+                                   
                                     :clickable="props.row.status === 'CREATED'"
                                     class="row"
                                     :class="{
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 9100443f..3eb36657 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1621,6 +1621,8 @@ watch(inputSearchProductAndService, async () => {
                       <q-menu class="bordered">
                         <q-list v-close-popup>
                           <q-item
+                             v-close-popup
+                                    clickable
                             :id="`view-detail-btn-${props.row.name}-view`"
                             @click.stop="
                               () => {
@@ -1644,7 +1646,7 @@ watch(inputSearchProductAndService, async () => {
                                 }
                               }
                             "
-                            clickable
+                       
                             dense
                             class="row q-py-sm"
                             style="white-space: nowrap"
@@ -1661,8 +1663,10 @@ watch(inputSearchProductAndService, async () => {
                           </q-item>
 
                           <q-item
+
                             :id="`view-detail-btn-${props.row.name}-edit`"
-                            clickable
+                              v-close-popup
+                                    clickable
                             dense
                             class="row q-py-sm"
                             style="white-space: nowrap"
@@ -1697,6 +1701,8 @@ watch(inputSearchProductAndService, async () => {
                             </span>
                           </q-item>
                           <q-item
+                             v-close-popup
+                           
                             :id="`view-detail-btn-${props.row.name}-delete`"
                             dense
                             :clickable="props.row.status === 'CREATED'"
@@ -2047,6 +2053,7 @@ watch(inputSearchProductAndService, async () => {
               <q-menu class="bordered">
                 <q-list v-close-popup dense>
                   <q-item
+                  
                     clickable
                     class="flex items-center"
                     @click="
@@ -2454,6 +2461,7 @@ watch(inputSearchProductAndService, async () => {
                         <q-menu class="bordered">
                           <q-list v-close-popup>
                             <q-item
+
                               :id="`view-detail-btn-${props.row.name}-view`"
                               @click.stop="
                                 async () => {
@@ -2471,7 +2479,8 @@ watch(inputSearchProductAndService, async () => {
                                   await fetchListOfOptionBranch();
                                 }
                               "
-                              clickable
+                               v-close-popup
+                                    clickable
                               dense
                               class="row q-py-sm"
                               style="white-space: nowrap"
@@ -2489,7 +2498,8 @@ watch(inputSearchProductAndService, async () => {
 
                             <q-item
                               :id="`view-detail-btn-${props.row.name}-edit`"
-                              clickable
+                               v-close-popup
+                                    clickable
                               dense
                               class="row q-py-sm"
                               style="white-space: nowrap"
@@ -2525,6 +2535,8 @@ watch(inputSearchProductAndService, async () => {
                             <q-item
                               :id="`view-detail-btn-${props.row.name}-delete`"
                               dense
+                                 v-close-popup
+                                   
                               :clickable="props.row.status === 'CREATED'"
                               class="row"
                               :class="{

From 015673032bb15a5bb1c5e59a54b1cb8079dbcf38 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 10:24:31 +0700
Subject: [PATCH 139/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/branch/types.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/stores/branch/types.ts b/src/stores/branch/types.ts
index 4e231fd1..cafecaad 100644
--- a/src/stores/branch/types.ts
+++ b/src/stores/branch/types.ts
@@ -33,6 +33,9 @@ export type Branch = {
   telephoneNo: string;
   lineId: string;
   contact: BranchContact[];
+  _count:{
+    branch:number
+  }
 };
 
 export type BranchWithChildren = Branch & { branch: Branch[] };

From 99e26e4ad2e6627053916e44bb5aae901802178f Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 10:24:47 +0700
Subject: [PATCH 140/158] =?UTF-8?q?refactor:=20=E0=B8=95=E0=B8=A3=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=88=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B9=80=E0=B8=87=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=99=E0=B9=84=E0=B8=82=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=81=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue | 28 ++++++---------------
 1 file changed, 7 insertions(+), 21 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index e5b4de3b..ccc8aa10 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -987,11 +987,12 @@ watch(locale, () => {
                         <q-tr
                           :class="{
                             'app-text-muted': props.row.status === 'INACTIVE',
+                                 'cursor-pointer': props.row._count.branch !== 0,
                           }"
                           :props="props"
                           @click="
                             () => {
-                              if (props.row.isHeadOffice) {
+                              if (props.row.isHeadOffice && props.row._count.branch !==0) {
                                 fieldSelectedBranch.value = '';
                                 inputSearch = '';
                                 currentHq = {
@@ -1059,25 +1060,7 @@ watch(locale, () => {
                             }}
                           </q-td>
                           <q-td>
-                            <q-btn
-                              icon="mdi-eye-outline"
-                              size="sm"
-                              dense
-                              round
-                              flat
-                              @click.stop="
-                                () => {
-                                  triggerEdit(
-                                    'drawer',
-                                    props.row.id,
-                                    props.row.isHeadOffice
-                                      ? 'headOffice'
-                                      : 'subBranch',
-                                    props.row.code,
-                                  );
-                                }
-                              "
-                            />
+                           
 
                             <q-btn
                               icon="mdi-dots-vertical"
@@ -1240,9 +1223,12 @@ watch(locale, () => {
                         <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) {
+                                if (props.row.isHeadOffice && props.row._count.branch !==0) {
                                   fieldSelectedBranch.value = '';
                                   inputSearch = '';
                                   currentHq = {

From fc0abea637c23484b5cf5d6d73ed499950cc73fe Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 11:02:26 +0700
Subject: [PATCH 141/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=E0=B8=9E=E0=B8=B7=E0=B9=89=E0=B8=99?=
 =?UTF-8?q?=E0=B8=90=E0=B8=B2=E0=B8=99=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=20=E0=B8=AA=E0=B8=B2=E0=B8=82=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=A5=E0=B8=87=E0=B8=97=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03_customer-management/BasicInformation.vue    | 14 ++++++++++++--
 .../04_product-service/BasicInfoProduct.vue        | 13 +++++++++++--
 .../04_product-service/BasicInformation.vue        | 11 ++++++++++-
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index 91ac3f8f..2b16f199 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -23,7 +23,7 @@ const customerBranch = defineModel<{
 const employeeId = defineModel<string>('employeeId');
 const nrcNo = defineModel<string>('nrcNo');
 
-defineProps<{
+const props = defineProps<{
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
@@ -39,14 +39,24 @@ defineEmits<{
   (e: 'filterOwnerBranch', val: string, update: void): void;
 }>();
 
-onMounted(async () => {});
+onMounted(async () => {
+
+  if(!!props.optionsBranch) {
+
+    registeredBranchId.value = props.optionsBranch[0].id ;
+  }
+
+});
 </script>
 
 <template>
+
+  
   <div class="col-3 app-text-muted">
     • {{ $t(`formDialogTitleInformation`) }}
   </div>
   <div v-if="!employee" class="col-9 row q-col-gutter-md">
+
     <q-select
       id="input-source-nationality"
       :dense="dense"
diff --git a/src/components/04_product-service/BasicInfoProduct.vue b/src/components/04_product-service/BasicInfoProduct.vue
index 032e3e89..d75c9f7d 100644
--- a/src/components/04_product-service/BasicInfoProduct.vue
+++ b/src/components/04_product-service/BasicInfoProduct.vue
@@ -10,9 +10,9 @@ const name = defineModel<string>('name');
 const code = defineModel<string>('code');
 
 const registeredBranchId = defineModel<string>('registeredBranchId');
-const codeOption = ref([]);
+const codeOption = ref<{ id: string; name: string }[]>([]);
 
-defineProps<{
+const props = defineProps<{
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
@@ -31,6 +31,15 @@ onMounted(async () => {
   if (locale.value === 'th-th') {
     codeOption.value = option.tha.typeProduct;
   }
+
+  if(!!props.optionsBranch) {
+
+  
+
+    registeredBranchId.value = props.optionsBranch[0].id ;
+  }
+
+
 });
 </script>
 
diff --git a/src/components/04_product-service/BasicInformation.vue b/src/components/04_product-service/BasicInformation.vue
index e4d86d61..c26704d9 100644
--- a/src/components/04_product-service/BasicInformation.vue
+++ b/src/components/04_product-service/BasicInformation.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import useOptionStore from 'src/stores/options';
+import { onMounted } from 'vue';
 
 const optionStore = useOptionStore();
 
@@ -13,7 +14,7 @@ const serviceName = defineModel<string>('serviceNameTh');
 const serviceDescription = defineModel<string>('serviceDescription');
 
 const registeredBranchId = defineModel<string | null>('registeredBranchId');
-defineProps<{
+const props = defineProps<{
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
@@ -22,6 +23,14 @@ defineProps<{
   service?: boolean;
   optionsBranch?: { id: string; name: string }[];
 }>();
+
+onMounted(async () => {
+  if(!!props.optionsBranch) {
+    registeredBranchId.value = props.optionsBranch[0].id ;
+  }
+});
+
+
 </script>
 
 <template>

From bc7070d0e3fdbe907650a3bdc8cb4a90cacc88df Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 11:11:06 +0700
Subject: [PATCH 142/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20?=
 =?UTF-8?q?=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
 =?UTF-8?q?=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 26 ++++++++++++-----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 3eb36657..87251475 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2170,18 +2170,7 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-        <div
-          v-if="
-            (productAndServiceTab === 'product' && product?.length === 0) ||
-            (productAndServiceTab === 'service' && service?.length === 0)
-          "
-          class="flex justify-center items-center surface-1 col"
-        >
-          <NoData :not-found="!!inputSearchProductAndService" />
-        </div>
-        <!-- tab -->
-        <template v-else>
-          <q-tabs
+<q-tabs
             dense
             v-model="productAndServiceTab"
             class="bordered-b q-px-md"
@@ -2234,6 +2223,19 @@ watch(inputSearchProductAndService, async () => {
               </div>
             </q-tab>
           </q-tabs>
+
+        <div
+          v-if="
+            (productAndServiceTab === 'product' && product?.length === 0) ||
+            (productAndServiceTab === 'service' && service?.length === 0)
+          "
+          class="flex justify-center items-center surface-1 col"
+        >
+          <NoData :not-found="!!inputSearchProductAndService" />
+        </div>
+        <!-- tab -->
+        <template v-else>
+          
           <div class="col flex scroll full-height q-pa-md surface-1">
             <div class="full-width">
               <q-table

From e4c4f26dbb5624ab5403fa2e8edb3a6dc1ba258f Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 11:31:11 +0700
Subject: [PATCH 143/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=9A=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=84=E0=B8=94?=
 =?UTF-8?q?=E0=B9=89=E0=B8=82=E0=B8=AD=E0=B8=87=20item?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 87251475..85373b0f 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2547,7 +2547,16 @@ watch(inputSearchProductAndService, async () => {
                                   props.row.status !== 'CREATED',
                               }"
                               style="white-space: nowrap"
-                              @click=""
+                              @click="()=>{ 
+                                if (props.row.type === 'product'){
+                                deleteTypeOfProduct(props.row.id)
+                              }
+                              if (props.row.type === 'service') {
+                                deleteServiceById(props.row.id)
+                                }
+                              }
+                                "
+
                             >
                               <q-icon
                                 name="mdi-trash-can-outline"

From 877f8271239c583434114f65dc7099f4be5c27ef Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 10 Jul 2024 11:36:15 +0700
Subject: [PATCH 144/158] feat: change tab on create data

---
 src/pages/04_product-service/MainPage.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 85373b0f..e470b36f 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -934,6 +934,7 @@ async function submitService() {
 
     await createService(formDataProductService.value);
     totalService.value = totalService.value + 1;
+    productAndServiceTab.value = 'service';
   }
 
   if (dialogServiceEdit.value) {
@@ -964,6 +965,8 @@ async function submitProduct() {
     if (res) {
       stat.value[3].count = stat.value[3].count + 1;
     }
+
+    productAndServiceTab.value = 'product';
   }
 
   if (dialogProductEdit.value) {

From e525e3932908aaeaafd0cbbff32017f11e3a832b Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 10 Jul 2024 11:42:36 +0700
Subject: [PATCH 145/158] fix: wrong field used

---
 src/pages/04_product-service/MainPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index e470b36f..124f3a7f 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2411,7 +2411,7 @@ watch(inputSearchProductAndService, async () => {
                           <div class="col-4 text-weight-bold">
                             {{
                               formatNumberDecimal(
-                                props.row.processingPrice || 0,
+                                props.row.serviceCharge || 0,
                                 2,
                               )
                             }}

From 48527a2f09150b913666c8196385b2cd9ef578f3 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 10 Jul 2024 11:42:46 +0700
Subject: [PATCH 146/158] fix: data type input

---
 src/components/04_product-service/PriceDataComponent.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/04_product-service/PriceDataComponent.vue b/src/components/04_product-service/PriceDataComponent.vue
index aa21de8c..cce94ea9 100644
--- a/src/components/04_product-service/PriceDataComponent.vue
+++ b/src/components/04_product-service/PriceDataComponent.vue
@@ -22,6 +22,7 @@ defineProps<{
       :borderless="readonly"
       hide-bottom-space
       class="col-4"
+      type="number"
       :label="$t('salePrice')"
       v-model="price"
     />
@@ -33,6 +34,7 @@ defineProps<{
       :borderless="readonly"
       hide-bottom-space
       class="col-4"
+      type="number"
       :label="$t('agentPrice')"
       v-model="agentPrice"
     />
@@ -44,6 +46,7 @@ defineProps<{
       :borderless="readonly"
       hide-bottom-space
       class="col-4"
+      type="number"
       :label="$t('processingPrice')"
       v-model="serviceCharge"
     />

From 56f880c4e30aff3b90f54d38f6f8e84b954b4da6 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 11:49:27 +0700
Subject: [PATCH 147/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B2=E0=B8=82=E0=B8=B2=E0=B8=97=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=87=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B8=A1=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_product-service/BasicInformation.vue     | 17 +++++++++++++----
 src/pages/04_product-service/MainPage.vue       |  2 ++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/04_product-service/BasicInformation.vue b/src/components/04_product-service/BasicInformation.vue
index c26704d9..22c479be 100644
--- a/src/components/04_product-service/BasicInformation.vue
+++ b/src/components/04_product-service/BasicInformation.vue
@@ -24,10 +24,19 @@ const props = defineProps<{
   optionsBranch?: { id: string; name: string }[];
 }>();
 
-onMounted(async () => {
-  if(!!props.optionsBranch) {
-    registeredBranchId.value = props.optionsBranch[0].id ;
-  }
+onMounted(  async() => {
+
+
+ 
+  
+
+  
+     setTimeout(() => {
+  if(!!props.optionsBranch ){ 
+       registeredBranchId.value = props.optionsBranch[0].id ;
+       
+      }
+  }, 100);
 });
 
 
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 124f3a7f..4ae31925 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -3094,6 +3094,8 @@ watch(inputSearchProductAndService, async () => {
       class="col-md-10 col-sm-12"
     >
       <div class="surface-1 rounded bordered q-pa-lg full-width row">
+        
+    
         <BasicInformation
           dense
           service

From 96107502ac35897e5c16842b96445067f1846d66 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Wed, 10 Jul 2024 11:54:22 +0700
Subject: [PATCH 148/158] =?UTF-8?q?fix:=20count=20=E0=B8=9A=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=84=E0=B8=A1=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=B1=E0=B8=9E=E0=B9=80=E0=B8=94=E0=B8=97=20+=20?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=9A=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=9A=E0=B8=A3=E0=B8=B4=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=95=E0=B8=AD=E0=B8=99=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B9=84=E0=B8=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 957 +++++++++++-----------
 1 file changed, 478 insertions(+), 479 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 4ae31925..9c22ef78 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -932,7 +932,10 @@ async function submitService() {
       formDataProductService.value.registeredBranchId = null;
     }
 
-    await createService(formDataProductService.value);
+    const res = await createService(formDataProductService.value);
+    if (res) {
+      stat.value[2].count = stat.value[2].count + 1;
+    }
     totalService.value = totalService.value + 1;
     productAndServiceTab.value = 'service';
   }
@@ -949,6 +952,7 @@ async function submitService() {
   if (productAndServiceTab.value === 'service') {
     await fetchListOfService();
   }
+
   flowStore.rotate();
   clearFormService();
 }
@@ -1445,7 +1449,6 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-
         <div
           v-if="
             (productMode === 'type' && productType?.length === 0) ||
@@ -1457,410 +1460,45 @@ watch(inputSearchProductAndService, async () => {
           <NoData :not-found="!!inputSearch" />
         </div>
         <template v-else>
-
-        <div class="col flex scroll full-height q-pa-md surface-1">
-          <div class="full-width">
-            <q-table
-              flat
-              bordered
-              :grid="modeView"
-              :rows="
-                (productMode === 'type' ? productType : productGroup) || []
-              "
-              :columns="tbColumn.groupAndType"
-              class="full-width"
-              card-container-class="q-gutter-md  "
-              row-key="name"
-              :rows-per-page-options="[0]"
-              hide-pagination
-              :visible-columns="tbControl.groupAndType.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>
-
-              <template v-slot:body="props">
-                <q-tr
-                  :class="{
-                    'app-text-muted': props.row.status === 'INACTIVE',
-                    'status-active': props.row.status !== 'INACTIVE',
-                    'status-inactive': props.row.status === 'INACTIVE',
-                  }"
-                  :props="props"
-                  @click="
-                    async () => {
-                      if (productMode === 'type') {
-                        pathTypeName = props.row.name;
-                        currentIdType = props.row.id;
-                        productMode = 'service';
-                        productAndServiceTab = 'service';
-
-                        await fetchListOfProduct();
-                        await fetchListOfService();
-                        await fetchListOfProductAndService();
-                        flowStore.rotate();
-                      }
-                      if (productMode === 'group') {
-                        pathGroupName = props.row.name;
-                        currentId = props.row.id;
-                        productMode = 'type';
-                        await fetchListType();
-                        flowStore.rotate();
-                      }
-                    }
-                  "
-                >
-                  <q-td
-                    v-if="tbControl.groupAndType.fieldSelected.includes('name')"
-                  >
-                    <div class="row items-center">
-                      <div
-                        style="
-                          width: 50px;
-                          display: flex;
-                          margin-bottom: var(--size-2);
-                        "
-                      >
-                        <div
-                          :class="`icon-color-${productMode === 'group' ? 'pink' : 'purple'}`"
-                          class="table__icon"
-                        >
-                          <q-icon
-                            size="md"
-                            style="scale: 0.8"
-                            :name="
-                              productMode === 'group'
-                                ? 'mdi-folder'
-                                : 'mdi-folder-table'
-                            "
-                          />
-                        </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="
-                      tbControl.groupAndType.fieldSelected.includes('detail')
-                    "
-                  >
-                    {{ props.row.detail || '-' }}
-                  </q-td>
-
-                  <q-td
-                    v-if="
-                      tbControl.groupAndType.fieldSelected.includes(
-                        'formDialogInputRemark',
-                      )
-                    "
-                  >
-                    {{ props.row.remark || '-' }}
-                  </q-td>
-
-                  <q-td
-                    v-if="
-                      tbControl.groupAndType.fieldSelected.includes('createdAt')
-                    "
-                  >
-                    {{ dateFormat(props.row.createdAt) }}
-                  </q-td>
-
-                  <q-td>
-                    <q-btn
-                      icon="mdi-eye-outline"
-                      size="sm"
-                      dense
-                      round
-                      flat
-                      @click.stop="
-                        () => {
-                          if (productMode === 'type') {
-                            currentStatusProduct =
-                              props.row.status === 'INACTIVE';
-                            clearFormGroup();
-                            currentIdType = props.row.id;
-                            assignFormDataGroup(props.row);
-                            isEdit = false;
-                            drawerInfo = true;
-                          }
-                          if (productMode === 'group') {
-                            currentStatusProduct =
-                              props.row.status === 'INACTIVE';
-                            clearFormGroup();
-                            assignFormDataGroup(props.row);
-                            isEdit = false;
-                            currentId = props.row.id;
-                            drawerInfo = true;
-                          }
-                        }
-                      "
-                    />
-
-                    <q-btn
-                      icon="mdi-dots-vertical"
-                      size="sm"
-                      dense
-                      round
-                      flat
-                      @click.stop
-                      :key="props.row.id"
+          <div class="col flex scroll full-height q-pa-md surface-1">
+            <div class="full-width">
+              <q-table
+                flat
+                bordered
+                :grid="modeView"
+                :rows="
+                  (productMode === 'type' ? productType : productGroup) || []
+                "
+                :columns="tbColumn.groupAndType"
+                class="full-width"
+                card-container-class="q-gutter-md  "
+                row-key="name"
+                :rows-per-page-options="[0]"
+                hide-pagination
+                :visible-columns="tbControl.groupAndType.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"
                     >
-                      <q-menu class="bordered">
-                        <q-list v-close-popup>
-                          <q-item
-                             v-close-popup
-                                    clickable
-                            :id="`view-detail-btn-${props.row.name}-view`"
-                            @click.stop="
-                              () => {
-                                if (productMode === 'type') {
-                                  currentStatusProduct =
-                                    props.row.status === 'INACTIVE';
-                                  clearFormGroup();
-                                  currentIdType = props.row.id;
-                                  assignFormDataGroup(props.row);
-                                  isEdit = false;
-                                  drawerInfo = true;
-                                }
-                                if (productMode === 'group') {
-                                  currentStatusProduct =
-                                    props.row.status === 'INACTIVE';
-                                  clearFormGroup();
-                                  assignFormDataGroup(props.row);
-                                  isEdit = false;
-                                  currentId = props.row.id;
-                                  drawerInfo = true;
-                                }
-                              }
-                            "
-                       
-                            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>
+                      {{ $t(col.label) }}
+                    </q-th>
+                    <q-th auto-width />
+                  </q-tr>
+                </template>
 
-                          <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 (productMode === 'type') {
-                                  clearFormGroup();
-                                  currentIdType = props.row.id;
-                                  assignFormDataGroup(props.row);
-                                  isEdit = true;
-                                  drawerInfo = true;
-                                }
-                                if (productMode === 'group') {
-                                  clearFormGroup();
-                                  assignFormDataGroup(props.row);
-                                  isEdit = true;
-                                  currentId = props.row.id;
-
-                                  drawerInfo = true;
-                                }
-                              }
-                            "
-                          >
-                            <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
-                             v-close-popup
-                           
-                            :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="
-                              () => {
-                                if (productMode === 'type') {
-                                  deleteProductById(props.row.id);
-                                }
-                                if (productMode === 'group') {
-                                  deleteProductById(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 () => {
-                                      if (productMode === 'type') {
-                                        toggleStatusType(
-                                          props.row.id,
-                                          props.row.status,
-                                        );
-                                      }
-                                      if (productMode === 'group') {
-                                        toggleStatusGroup(
-                                          props.row.id,
-                                          props.row.status,
-                                        );
-                                      }
-                                    }
-                                  "
-                                  :model-value="props.row.status !== 'INACTIVE'"
-                                />
-                              </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-3">
-                  <ProductCardComponent
-                    :isType="productMode === 'type'"
-                    :count-product="props.row._count.product"
-                    :count-type="props.row._count.type"
-                    :count-service="props.row._count.service"
-                    :title="props.row.name"
-                    :subtitle="props.row.code"
-                    :date="new Date(props.row.updatedAt)"
-                    :status="props.row.status"
-                    :id="props.row.id"
-                    :isDisabled="props.row.status === 'INACTIVE'"
-                    :color="
-                      {
-                        type: $q.dark.isActive
-                          ? 'var(--purple-7-hsl)'
-                          : 'var(--violet-11-hsl)',
-                        group: 'var(--pink-6-hsl)',
-                      }[productMode] || 'var(--pink-6-hsl)'
-                    "
-                    @toggleStatus="
-                      if (productMode === 'type') {
-                        toggleStatusType(props.row.id, props.row.status);
-                      }
-                      if (productMode === 'group') {
-                        toggleStatusGroup(props.row.id, props.row.status);
-                      }
-                    "
-                    @viewCard="
-                      () => {
-                        if (productMode === 'type') {
-                          currentStatusProduct =
-                            props.row.status === 'INACTIVE';
-                          clearFormGroup();
-                          currentIdType = props.row.id;
-                          assignFormDataGroup(props.row);
-                          isEdit = false;
-                          drawerInfo = true;
-                        }
-                        if (productMode === 'group') {
-                          currentStatusProduct =
-                            props.row.status === 'INACTIVE';
-                          clearFormGroup();
-                          assignFormDataGroup(props.row);
-                          isEdit = false;
-                          currentId = props.row.id;
-                          drawerInfo = true;
-                        }
-                      }
-                    "
-                    @updateCard="
-                      () => {
-                        if (productMode === 'type') {
-                          clearFormGroup();
-                          currentIdType = props.row.id;
-                          assignFormDataGroup(props.row);
-                          isEdit = true;
-                          drawerInfo = true;
-                        }
-                        if (productMode === 'group') {
-                          clearFormGroup();
-                          assignFormDataGroup(props.row);
-                          isEdit = true;
-                          currentId = props.row.id;
-
-                          drawerInfo = true;
-                        }
-                      }
-                    "
-                    @deleteCard="
-                      () => {
-                        if (productMode === 'type') {
-                          deleteProductById(props.row.id);
-                        }
-                        if (productMode === 'group') {
-                          deleteProductById(props.row.id);
-                        }
-                      }
-                    "
-                    @on-click="
+                <template v-slot:body="props">
+                  <q-tr
+                    :class="{
+                      'app-text-muted': props.row.status === 'INACTIVE',
+                      'status-active': props.row.status !== 'INACTIVE',
+                      'status-inactive': props.row.status === 'INACTIVE',
+                    }"
+                    :props="props"
+                    @click="
                       async () => {
                         if (productMode === 'type') {
                           pathTypeName = props.row.name;
@@ -1882,16 +1520,381 @@ watch(inputSearchProductAndService, async () => {
                         }
                       }
                     "
-                  />
-                </div>
-              </template>
-            </q-table>
+                  >
+                    <q-td
+                      v-if="
+                        tbControl.groupAndType.fieldSelected.includes('name')
+                      "
+                    >
+                      <div class="row items-center">
+                        <div
+                          style="
+                            width: 50px;
+                            display: flex;
+                            margin-bottom: var(--size-2);
+                          "
+                        >
+                          <div
+                            :class="`icon-color-${productMode === 'group' ? 'pink' : 'purple'}`"
+                            class="table__icon"
+                          >
+                            <q-icon
+                              size="md"
+                              style="scale: 0.8"
+                              :name="
+                                productMode === 'group'
+                                  ? 'mdi-folder'
+                                  : 'mdi-folder-table'
+                              "
+                            />
+                          </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="
+                        tbControl.groupAndType.fieldSelected.includes('detail')
+                      "
+                    >
+                      {{ props.row.detail || '-' }}
+                    </q-td>
 
-    
+                    <q-td
+                      v-if="
+                        tbControl.groupAndType.fieldSelected.includes(
+                          'formDialogInputRemark',
+                        )
+                      "
+                    >
+                      {{ props.row.remark || '-' }}
+                    </q-td>
+
+                    <q-td
+                      v-if="
+                        tbControl.groupAndType.fieldSelected.includes(
+                          'createdAt',
+                        )
+                      "
+                    >
+                      {{ dateFormat(props.row.createdAt) }}
+                    </q-td>
+
+                    <q-td>
+                      <q-btn
+                        icon="mdi-eye-outline"
+                        size="sm"
+                        dense
+                        round
+                        flat
+                        @click.stop="
+                          () => {
+                            if (productMode === 'type') {
+                              currentStatusProduct =
+                                props.row.status === 'INACTIVE';
+                              clearFormGroup();
+                              currentIdType = props.row.id;
+                              assignFormDataGroup(props.row);
+                              isEdit = false;
+                              drawerInfo = true;
+                            }
+                            if (productMode === 'group') {
+                              currentStatusProduct =
+                                props.row.status === 'INACTIVE';
+                              clearFormGroup();
+                              assignFormDataGroup(props.row);
+                              isEdit = false;
+                              currentId = props.row.id;
+                              drawerInfo = true;
+                            }
+                          }
+                        "
+                      />
+
+                      <q-btn
+                        icon="mdi-dots-vertical"
+                        size="sm"
+                        dense
+                        round
+                        flat
+                        @click.stop
+                        :key="props.row.id"
+                      >
+                        <q-menu class="bordered">
+                          <q-list v-close-popup>
+                            <q-item
+                              v-close-popup
+                              clickable
+                              :id="`view-detail-btn-${props.row.name}-view`"
+                              @click.stop="
+                                () => {
+                                  if (productMode === 'type') {
+                                    currentStatusProduct =
+                                      props.row.status === 'INACTIVE';
+                                    clearFormGroup();
+                                    currentIdType = props.row.id;
+                                    assignFormDataGroup(props.row);
+                                    isEdit = false;
+                                    drawerInfo = true;
+                                  }
+                                  if (productMode === 'group') {
+                                    currentStatusProduct =
+                                      props.row.status === 'INACTIVE';
+                                    clearFormGroup();
+                                    assignFormDataGroup(props.row);
+                                    isEdit = false;
+                                    currentId = props.row.id;
+                                    drawerInfo = true;
+                                  }
+                                }
+                              "
+                              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 (productMode === 'type') {
+                                    clearFormGroup();
+                                    currentIdType = props.row.id;
+                                    assignFormDataGroup(props.row);
+                                    isEdit = true;
+                                    drawerInfo = true;
+                                  }
+                                  if (productMode === 'group') {
+                                    clearFormGroup();
+                                    assignFormDataGroup(props.row);
+                                    isEdit = true;
+                                    currentId = props.row.id;
+
+                                    drawerInfo = true;
+                                  }
+                                }
+                              "
+                            >
+                              <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
+                              v-close-popup
+                              :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="
+                                () => {
+                                  if (productMode === 'type') {
+                                    deleteProductById(props.row.id);
+                                  }
+                                  if (productMode === 'group') {
+                                    deleteProductById(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 () => {
+                                        if (productMode === 'type') {
+                                          toggleStatusType(
+                                            props.row.id,
+                                            props.row.status,
+                                          );
+                                        }
+                                        if (productMode === 'group') {
+                                          toggleStatusGroup(
+                                            props.row.id,
+                                            props.row.status,
+                                          );
+                                        }
+                                      }
+                                    "
+                                    :model-value="
+                                      props.row.status !== 'INACTIVE'
+                                    "
+                                  />
+                                </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-3">
+                    <ProductCardComponent
+                      :isType="productMode === 'type'"
+                      :count-product="props.row._count.product"
+                      :count-type="props.row._count.type"
+                      :count-service="props.row._count.service"
+                      :title="props.row.name"
+                      :subtitle="props.row.code"
+                      :date="new Date(props.row.updatedAt)"
+                      :status="props.row.status"
+                      :id="props.row.id"
+                      :isDisabled="props.row.status === 'INACTIVE'"
+                      :color="
+                        {
+                          type: $q.dark.isActive
+                            ? 'var(--purple-7-hsl)'
+                            : 'var(--violet-11-hsl)',
+                          group: 'var(--pink-6-hsl)',
+                        }[productMode] || 'var(--pink-6-hsl)'
+                      "
+                      @toggleStatus="
+                        if (productMode === 'type') {
+                          toggleStatusType(props.row.id, props.row.status);
+                        }
+                        if (productMode === 'group') {
+                          toggleStatusGroup(props.row.id, props.row.status);
+                        }
+                      "
+                      @viewCard="
+                        () => {
+                          if (productMode === 'type') {
+                            currentStatusProduct =
+                              props.row.status === 'INACTIVE';
+                            clearFormGroup();
+                            currentIdType = props.row.id;
+                            assignFormDataGroup(props.row);
+                            isEdit = false;
+                            drawerInfo = true;
+                          }
+                          if (productMode === 'group') {
+                            currentStatusProduct =
+                              props.row.status === 'INACTIVE';
+                            clearFormGroup();
+                            assignFormDataGroup(props.row);
+                            isEdit = false;
+                            currentId = props.row.id;
+                            drawerInfo = true;
+                          }
+                        }
+                      "
+                      @updateCard="
+                        () => {
+                          if (productMode === 'type') {
+                            clearFormGroup();
+                            currentIdType = props.row.id;
+                            assignFormDataGroup(props.row);
+                            isEdit = true;
+                            drawerInfo = true;
+                          }
+                          if (productMode === 'group') {
+                            clearFormGroup();
+                            assignFormDataGroup(props.row);
+                            isEdit = true;
+                            currentId = props.row.id;
+
+                            drawerInfo = true;
+                          }
+                        }
+                      "
+                      @deleteCard="
+                        () => {
+                          if (productMode === 'type') {
+                            deleteProductById(props.row.id);
+                          }
+                          if (productMode === 'group') {
+                            deleteProductById(props.row.id);
+                          }
+                        }
+                      "
+                      @on-click="
+                        async () => {
+                          if (productMode === 'type') {
+                            pathTypeName = props.row.name;
+                            currentIdType = props.row.id;
+                            productMode = 'service';
+                            productAndServiceTab = 'service';
+
+                            await fetchListOfProduct();
+                            await fetchListOfService();
+                            await fetchListOfProductAndService();
+                            flowStore.rotate();
+                          }
+                          if (productMode === 'group') {
+                            pathGroupName = props.row.name;
+                            currentId = props.row.id;
+                            productMode = 'type';
+                            await fetchListType();
+                            flowStore.rotate();
+                          }
+                        }
+                      "
+                    />
+                  </div>
+                </template>
+              </q-table>
+            </div>
           </div>
-        </div>
 
-        
           <div
             v-if="productMode === 'group'"
             class="row items-center justify-between q-px-md q-py-sm"
@@ -2056,7 +2059,6 @@ watch(inputSearchProductAndService, async () => {
               <q-menu class="bordered">
                 <q-list v-close-popup dense>
                   <q-item
-                  
                     clickable
                     class="flex items-center"
                     @click="
@@ -2173,59 +2175,59 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-<q-tabs
-            dense
-            v-model="productAndServiceTab"
-            class="bordered-b q-px-md"
-            align="left"
+        <q-tabs
+          dense
+          v-model="productAndServiceTab"
+          class="bordered-b q-px-md"
+          align="left"
+        >
+          <q-tab
+            name="service"
+            @click="
+              async () => {
+                currentPageServiceAndProduct = 1;
+                inputSearchProductAndService = '';
+                currentStatus = 'All';
+                // await fetchListOfService();
+                flowStore.rotate();
+              }
+            "
           >
-            <q-tab
-              name="service"
-              @click="
-                async () => {
-                  currentPageServiceAndProduct = 1;
-                  inputSearchProductAndService = '';
-                  currentStatus = 'All';
-                  // await fetchListOfService();
-                  flowStore.rotate();
-                }
+            <div
+              class="row"
+              :class="
+                productAndServiceTab === 'service'
+                  ? 'text-bold'
+                  : 'app-text-muted'
               "
             >
-              <div
-                class="row"
-                :class="
-                  productAndServiceTab === 'service'
-                    ? 'text-bold'
-                    : 'app-text-muted'
-                "
-              >
-                {{ $t('service') }}
-              </div>
-            </q-tab>
-            <q-tab
-              name="product"
-              @click="
-                async () => {
-                  currentPageServiceAndProduct = 1;
-                  inputSearchProductAndService = '';
-                  currentStatus = 'All';
-                  // await fetchListOfProduct();
-                  flowStore.rotate();
-                }
+              {{ $t('service') }}
+            </div>
+          </q-tab>
+          <q-tab
+            name="product"
+            @click="
+              async () => {
+                currentPageServiceAndProduct = 1;
+                inputSearchProductAndService = '';
+                currentStatus = 'All';
+                // await fetchListOfProduct();
+                flowStore.rotate();
+              }
+            "
+          >
+            <div
+              class="row"
+              :class="
+                productAndServiceTab === 'product'
+                  ? 'text-bold'
+                  : 'app-text-muted'
               "
             >
-              <div
-                class="row"
-                :class="
-                  productAndServiceTab === 'product'
-                    ? 'text-bold'
-                    : 'app-text-muted'
-                "
-              >
-                {{ $t('product') }}
-              </div>
-            </q-tab>
-          </q-tabs>
+              {{ $t('product') }}
+            </div>
+          </q-tab>
+        </q-tabs>
 
         <div
           v-if="
@@ -2238,7 +2240,6 @@ watch(inputSearchProductAndService, async () => {
         </div>
         <!-- tab -->
         <template v-else>
-          
           <div class="col flex scroll full-height q-pa-md surface-1">
             <div class="full-width">
               <q-table
@@ -2288,7 +2289,7 @@ watch(inputSearchProductAndService, async () => {
                       v-if="
                         {
                           product: tbControl.product.fieldSelected,
-                          
+
                           service: tbControl.service.fieldSelected,
                         }[productAndServiceTab].includes(
                           { product: 'productName', service: 'serviceName' }[
@@ -2466,7 +2467,6 @@ watch(inputSearchProductAndService, async () => {
                         <q-menu class="bordered">
                           <q-list v-close-popup>
                             <q-item
-
                               :id="`view-detail-btn-${props.row.name}-view`"
                               @click.stop="
                                 async () => {
@@ -2484,8 +2484,8 @@ watch(inputSearchProductAndService, async () => {
                                   await fetchListOfOptionBranch();
                                 }
                               "
-                               v-close-popup
-                                    clickable
+                              v-close-popup
+                              clickable
                               dense
                               class="row q-py-sm"
                               style="white-space: nowrap"
@@ -2503,8 +2503,8 @@ watch(inputSearchProductAndService, async () => {
 
                             <q-item
                               :id="`view-detail-btn-${props.row.name}-edit`"
-                               v-close-popup
-                                    clickable
+                              v-close-popup
+                              clickable
                               dense
                               class="row q-py-sm"
                               style="white-space: nowrap"
@@ -2540,8 +2540,7 @@ watch(inputSearchProductAndService, async () => {
                             <q-item
                               :id="`view-detail-btn-${props.row.name}-delete`"
                               dense
-                                 v-close-popup
-                                   
+                              v-close-popup
                               :clickable="props.row.status === 'CREATED'"
                               class="row"
                               :class="{
@@ -2550,16 +2549,16 @@ watch(inputSearchProductAndService, async () => {
                                   props.row.status !== 'CREATED',
                               }"
                               style="white-space: nowrap"
-                              @click="()=>{ 
-                                if (props.row.type === 'product'){
-                                deleteTypeOfProduct(props.row.id)
-                              }
-                              if (props.row.type === 'service') {
-                                deleteServiceById(props.row.id)
+                              @click="
+                                () => {
+                                  if (props.row.type === 'product') {
+                                    deleteTypeOfProduct(props.row.id);
+                                  }
+                                  if (props.row.type === 'service') {
+                                    deleteServiceById(props.row.id);
+                                  }
                                 }
-                              }
-                                "
-
+                              "
                             >
                               <q-icon
                                 name="mdi-trash-can-outline"
@@ -3210,7 +3209,7 @@ watch(inputSearchProductAndService, async () => {
     :edit="!(formDataProductService.status === 'INACTIVE')"
     height="95vh"
     :isEdit="infoServiceEdit"
-    :title="$t('service', { msg: formDataProductService.name })"
+    :title="$t('service')"
     :tabs-list="serviceTab"
     v-model:modal="dialogServiceEdit"
     v-model:current-tab="currentServiceTab"

From 6e27e51bba6423d57cf322b94ac3764fc74426aa Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 12:42:00 +0700
Subject: [PATCH 149/158] =?UTF-8?q?fix:=20=E0=B8=95=E0=B8=A3=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=88=E0=B8=AA=E0=B8=AD=E0=B8=9A=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03_customer-management/BasicInformation.vue     | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index 2b16f199..46e5bf07 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { getRole } from 'src/services/keycloak';
 import { CustomerBranch } from 'src/stores/customer/types';
 import { onMounted, ref } from 'vue';
 
@@ -41,6 +42,8 @@ defineEmits<{
 
 onMounted(async () => {
 
+
+
   if(!!props.optionsBranch) {
 
     registeredBranchId.value = props.optionsBranch[0].id ;
@@ -73,7 +76,15 @@ onMounted(async () => {
       option-value="id"
       v-model="registeredBranchId"
       :options="optionsBranch"
-      :rules="[(val) => !!val]"
+:rules="[
+  (val) => {
+    const roles = getRole() || [];
+    const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(role => roles.includes(role));
+    return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
+  }
+]"
+
+clearable 
     />
 
     <q-input

From 19c928bab4781aca30f01be61c6ca6e5bca3751f Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 12:52:27 +0700
Subject: [PATCH 150/158] =?UTF-8?q?fix:=20=E0=B8=95=E0=B8=A3=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=88=E0=B8=AA=E0=B8=AD=E0=B8=9A=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/04_product-service/BasicInfoProduct.vue | 9 ++++++++-
 src/components/04_product-service/BasicInformation.vue | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/04_product-service/BasicInfoProduct.vue b/src/components/04_product-service/BasicInfoProduct.vue
index d75c9f7d..73b1dc65 100644
--- a/src/components/04_product-service/BasicInfoProduct.vue
+++ b/src/components/04_product-service/BasicInfoProduct.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { getRole } from 'src/services/keycloak';
 import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 const { locale } = useI18n({ useScope: 'global' });
@@ -85,7 +86,13 @@ onMounted(async () => {
       option-value="id"
       v-model="registeredBranchId"
       :options="optionsBranch"
-      :rules="[(val) => !!val]"
+      :rules="[
+  (val) => {
+    const roles = getRole() || [];
+    const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(role => roles.includes(role));
+    return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
+  }
+]"
     />
 
     <q-input
diff --git a/src/components/04_product-service/BasicInformation.vue b/src/components/04_product-service/BasicInformation.vue
index 22c479be..dba84f46 100644
--- a/src/components/04_product-service/BasicInformation.vue
+++ b/src/components/04_product-service/BasicInformation.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { getRole } from 'src/services/keycloak';
 import useOptionStore from 'src/stores/options';
 import { onMounted } from 'vue';
 
@@ -109,7 +110,13 @@ onMounted(  async() => {
       option-value="id"
       v-model="registeredBranchId"
       :options="optionsBranch"
-      :rules="[(val) => !!val]"
+      :rules="[
+  (val) => {
+    const roles = getRole() || [];
+    const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(role => roles.includes(role));
+    return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
+  }
+]"
     />
 
     <q-input

From dcefa3de020036874ae31a3dac2f8cfe92604ca5 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 13:03:06 +0700
Subject: [PATCH 151/158] =?UTF-8?q?refactor:=20=E0=B8=A5=E0=B8=9A=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B9=84=E0=B8=94?=
 =?UTF-8?q?=E0=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/04_product-service/BasicInfoProduct.vue | 3 ++-
 src/components/04_product-service/BasicInformation.vue | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/04_product-service/BasicInfoProduct.vue b/src/components/04_product-service/BasicInfoProduct.vue
index 73b1dc65..1bf17d1a 100644
--- a/src/components/04_product-service/BasicInfoProduct.vue
+++ b/src/components/04_product-service/BasicInfoProduct.vue
@@ -81,7 +81,7 @@ onMounted(async () => {
       map-options
       options-dense
       :label="$t('registeredBranch')"
-      class="col-3"
+      class="col-3 "
       option-label="name"
       option-value="id"
       v-model="registeredBranchId"
@@ -93,6 +93,7 @@ onMounted(async () => {
     return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
   }
 ]"
+clearable 
     />
 
     <q-input
diff --git a/src/components/04_product-service/BasicInformation.vue b/src/components/04_product-service/BasicInformation.vue
index dba84f46..69bdbc3e 100644
--- a/src/components/04_product-service/BasicInformation.vue
+++ b/src/components/04_product-service/BasicInformation.vue
@@ -96,6 +96,7 @@ onMounted(  async() => {
 
     <q-select
       id="input-source-nationality"
+      
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -105,7 +106,7 @@ onMounted(  async() => {
       map-options
       options-dense
       :label="$t('registeredBranch')"
-      class="col-3"
+      class="col-3 "
       option-label="name"
       option-value="id"
       v-model="registeredBranchId"
@@ -117,6 +118,7 @@ onMounted(  async() => {
     return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
   }
 ]"
+clearable 
     />
 
     <q-input

From 2dac800fad9b878536fe201072ca01b3f6a129d9 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 10 Jul 2024 13:21:32 +0700
Subject: [PATCH 152/158] feat: auto select current branch

---
 .../BasicInformation.vue                      | 35 +++++-----------
 .../04_product-service/BasicInformation.vue   | 17 --------
 src/components/DrawerComponent.vue            | 29 +++++++++++--
 src/pages/03_customer-management/MainPage.vue | 42 ++++++++++++-------
 src/pages/04_product-service/MainPage.vue     | 24 ++++++++---
 5 files changed, 81 insertions(+), 66 deletions(-)

diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index 46e5bf07..08e21eaa 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -39,27 +39,13 @@ const props = defineProps<{
 defineEmits<{
   (e: 'filterOwnerBranch', val: string, update: void): void;
 }>();
-
-onMounted(async () => {
-
-
-
-  if(!!props.optionsBranch) {
-
-    registeredBranchId.value = props.optionsBranch[0].id ;
-  }
-
-});
 </script>
 
 <template>
-
-  
   <div class="col-3 app-text-muted">
     • {{ $t(`formDialogTitleInformation`) }}
   </div>
   <div v-if="!employee" class="col-9 row q-col-gutter-md">
-
     <q-select
       id="input-source-nationality"
       :dense="dense"
@@ -76,15 +62,16 @@ onMounted(async () => {
       option-value="id"
       v-model="registeredBranchId"
       :options="optionsBranch"
-:rules="[
-  (val) => {
-    const roles = getRole() || [];
-    const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(role => roles.includes(role));
-    return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
-  }
-]"
-
-clearable 
+      :rules="[
+        (val) => {
+          const roles = getRole() || [];
+          const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
+            (role) => roles.includes(role),
+          );
+          return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
+        },
+      ]"
+      clearable
     />
 
     <q-input
@@ -110,7 +97,7 @@ clearable
       class="col-6"
       :label="$t('taxNo')"
       v-model="taxNo"
-        :rules="[
+      :rules="[
         (val) =>
           (val && val.length === 13 && /[0-9]+/.test(val)) ||
           $t('formDialogInputTaxNoValidate'),
diff --git a/src/components/04_product-service/BasicInformation.vue b/src/components/04_product-service/BasicInformation.vue
index 69bdbc3e..b51ce684 100644
--- a/src/components/04_product-service/BasicInformation.vue
+++ b/src/components/04_product-service/BasicInformation.vue
@@ -24,23 +24,6 @@ const props = defineProps<{
   service?: boolean;
   optionsBranch?: { id: string; name: string }[];
 }>();
-
-onMounted(  async() => {
-
-
- 
-  
-
-  
-     setTimeout(() => {
-  if(!!props.optionsBranch ){ 
-       registeredBranchId.value = props.optionsBranch[0].id ;
-       
-      }
-  }, 100);
-});
-
-
 </script>
 
 <template>
diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index cd7585a0..701b0fb2 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -1,13 +1,32 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
 import { Icon } from '@iconify/vue';
+import useMyBranch from 'stores/my-branch';
+import { getUserId, getRole } from 'src/services/keycloak';
 
 defineProps<{
   mini?: boolean;
 }>();
 
+onMounted(async () => {
+  const uid = getUserId();
+  const role = getRole();
+
+  if (!uid) return;
+
+  if (role?.includes('system')) {
+    const result = await userBranch.fetchListOptionBranch();
+    if (result && result.total > 0) currentMyBranch.value = result.result[0];
+  }
+  const result = await userBranch.fetchListMyBranch(uid);
+  if (result && result.total > 0) currentMyBranch.value = result.result[0];
+});
+
 const router = useRouter();
+const userBranch = useMyBranch();
+const { currentMyBranch } = storeToRefs(userBranch);
 
 const currentRoute = ref<string>('');
 const currentPath = computed(() => {
@@ -175,10 +194,14 @@ function branchSetting() {}
         style="white-space: nowrap"
       >
         <span class="text-weight-bold">
-          {{ 'ชื่อสาขาที่ 1' }}
+          {{
+            ($i18n.locale === 'en-US'
+              ? currentMyBranch?.nameEN
+              : currentMyBranch?.name) ?? '-'
+          }}
         </span>
         <span>
-          {{ 'BR1001' }}
+          {{ currentMyBranch?.code ?? '-' }}
         </span>
       </div>
 
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index dc49a079..194523e1 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, watch, toRaw } from 'vue';
 import type { QTableProps } from 'quasar';
+import { storeToRefs } from 'pinia';
+import { getUserId, getRole } from 'src/services/keycloak';
 import { Status } from 'src/stores/types';
 
 import useCustomerStore from 'src/stores/customer';
@@ -64,10 +66,10 @@ import useFlowStore from 'src/stores/flow';
 const { t, locale } = useI18n();
 const utilsStore = useUtilsStore();
 const userCustomer = useCustomerStore();
-const useMyBranch = useMyBranchStore();
+const userBranchStore = useMyBranchStore();
 const userStore = useUserStore();
 
-const { fetchListOptionBranch } = useMyBranch;
+const { currentMyBranch } = storeToRefs(userBranchStore);
 
 const columnsEmployee = [
   {
@@ -170,7 +172,7 @@ const formData = ref<CustomerCreate>({
   customerName: '',
   customerNameEN: '',
   taxNo: '',
-  registeredBranchId: '',
+  registeredBranchId: currentMyBranch.value?.id || '',
   customerBranch: [
     {
       code: '',
@@ -675,7 +677,7 @@ function clearForm() {
     customerNameEN: '',
     personName: '',
     taxNo: '',
-    registeredBranchId: '',
+    registeredBranchId: currentMyBranch.value?.id || '',
     customerBranch: [
       {
         code: '',
@@ -896,9 +898,20 @@ async function onSubmitCustomerBranch() {
 }
 
 async function fetchListOfOptionBranch() {
-  const res = await fetchListOptionBranch({ pageSize: 999 });
+  const uid = getUserId();
+  const role = getRole();
 
-  if (res) branchOption.value = res.result;
+  if (!uid) return;
+
+  if (role?.includes('system')) {
+    const result = await userBranchStore.fetchListOptionBranch();
+    if (result && result.total > 0) branchOption.value = result.result;
+  } else {
+    const result = await userBranchStore.fetchListMyBranch(uid);
+    if (result && result.total > 0) branchOption.value = result.result;
+  }
+
+  formData.value.registeredBranchId = currentMyBranch.value?.id || '';
 }
 
 async function fetchListCustomer() {
@@ -1773,11 +1786,10 @@ watch([inputSearch, currentStatus], async () => {
             <div class="column q-pa-md" style="gap: var(--size-1)">
               <template v-if="selectorLabel === 'EMPLOYER'">
                 <q-item
-                   v-close-popup
-                                    clickable
+                  v-close-popup
+                  clickable
                   v-for="v in fieldCustomer"
                   :key="v"
-                
                   dense
                   class="no-padding flex items-center rounded"
                   active-class="employer-active"
@@ -1793,11 +1805,10 @@ watch([inputSearch, currentStatus], async () => {
                 <q-item
                   active
                   dense
-                
                   active-class="employer-active"
                   class="no-padding flex items-center rounded"
-                     v-close-popup
-                                    clickable
+                  v-close-popup
+                  clickable
                 >
                   <span class="q-px-md">
                     {{ $t('totalEmployee') }}
@@ -1988,7 +1999,7 @@ watch([inputSearch, currentStatus], async () => {
                                         );
                                       }
                                     "
-                                      v-close-popup
+                                    v-close-popup
                                     clickable
                                     dense
                                     class="row q-py-sm"
@@ -2009,7 +2020,7 @@ watch([inputSearch, currentStatus], async () => {
 
                                   <q-item
                                     :id="`view-detail-btn-${props.row.name}-edit`"
-                                       v-close-popup
+                                    v-close-popup
                                     clickable
                                     dense
                                     class="row q-py-sm"
@@ -2050,8 +2061,7 @@ watch([inputSearch, currentStatus], async () => {
                                   <q-item
                                     :id="`view-detail-btn-${props.row.name}-delete`"
                                     dense
-                                       v-close-popup
-                                   
+                                    v-close-popup
                                     :clickable="props.row.status === 'CREATED'"
                                     class="row"
                                     :class="{
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 9c22ef78..e01a43a6 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2,6 +2,7 @@
 import { ref, watch, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { onMounted } from 'vue';
+import { getUserId, getRole } from 'src/services/keycloak';
 import { storeToRefs } from 'pinia';
 import type { QTableProps } from 'quasar';
 import ItemCard from 'components/ItemCard.vue';
@@ -33,9 +34,9 @@ import useMyBranchStore from 'src/stores/my-branch';
 import { dateFormat } from 'src/utils/datetime';
 import { formatNumberDecimal } from 'src/stores/utils';
 
-const useMyBranch = useMyBranchStore();
+const userBranchStore = useMyBranchStore();
 
-const { fetchListOptionBranch } = useMyBranch;
+const { currentMyBranch } = storeToRefs(userBranchStore);
 
 import { Status } from 'src/stores/types';
 
@@ -403,9 +404,22 @@ async function featchStatsService() {
 }
 
 async function fetchListOfOptionBranch() {
-  const res = await fetchListOptionBranch({ pageSize: 999 });
+  const uid = getUserId();
+  const role = getRole();
 
-  if (res) branchOption.value = res.result;
+  if (!uid) return;
+
+  if (role?.includes('system')) {
+    const result = await userBranchStore.fetchListOptionBranch();
+    if (result && result.total > 0) branchOption.value = result.result;
+  } else {
+    const result = await userBranchStore.fetchListMyBranch(uid);
+    if (result && result.total > 0) branchOption.value = result.result;
+  }
+
+  formDataProduct.value.registeredBranchId = currentMyBranch.value?.id || '';
+  formDataProductService.value.registeredBranchId =
+    currentMyBranch.value?.id || '';
 }
 
 async function featchStatsProduct() {
@@ -3093,8 +3107,6 @@ watch(inputSearchProductAndService, async () => {
       class="col-md-10 col-sm-12"
     >
       <div class="surface-1 rounded bordered q-pa-lg full-width row">
-        
-    
         <BasicInformation
           dense
           service

From 16584f6d9cc3b883965fda76a964eaab8d810d9c Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 11 Jul 2024 11:44:17 +0700
Subject: [PATCH 153/158] =?UTF-8?q?refactor:=20=E0=B8=81=E0=B8=94=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=82=E0=B9=89=E0=B8=B2=E0=B8=AA=E0=B8=B4=E0=B8=99?=
 =?UTF-8?q?=E0=B8=84=E0=B9=89=E0=B8=B2=E0=B9=80=E0=B9=80=E0=B8=A5=E0=B9=89?=
 =?UTF-8?q?=E0=B8=A7=20=E0=B9=83=E0=B8=AB=E0=B9=89=20=E0=B9=81=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=94=E0=B8=87=E0=B8=99=E0=B8=B3=E0=B8=99=E0=B8=A7=E0=B8=99?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=B2=E0=B8=A2=20=E0=B8=97=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=95=E0=B9=89=E0=B8=AD=E0=B8=87=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 39 ++++++++++++++++++++---
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index e01a43a6..2767ceb5 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -101,18 +101,36 @@ const stat = ref<
     icon: string;
     count: number;
     label: string;
+    mode: 'group' | 'type' | 'service' | 'product';
     color: 'pink' | 'purple' | 'green' | 'orange';
   }[]
 >([
-  { icon: 'mdi-folder', count: 0, label: 'productAndService', color: 'pink' },
+  { 
+    icon: 'mdi-folder',
+    count: 0, label: 'productAndService',
+    mode: 'group',
+    color: 'pink' 
+  },
   {
     icon: 'mdi-folder-table',
     count: 0,
     label: 'productAndServiceType',
+    mode: 'type',
     color: 'purple',
   },
-  { icon: 'mdi-server-network', count: 0, label: 'service', color: 'orange' },
-  { icon: 'mdi-folder', count: 0, label: 'product', color: 'green' },
+  { 
+  icon: 'mdi-server-network',
+  count: 0, label: 'service',
+  mode: 'service',
+  color: 'orange'
+  
+  },
+  { 
+  icon: 'mdi-folder',
+  count: 0, label: 'product',
+  mode: 'product', 
+  color: 'green' 
+  },
 ]);
 
 const { t } = useI18n();
@@ -330,6 +348,8 @@ const totalProduct = ref<number>(0);
 const totalService = ref<number>(0);
 const totalProductAndService = ref<number>(0);
 
+const filterStat = ref<('group' | 'type' | 'service' | 'product')[]>([]);
+
 // แบ่งหน้า
 const currentPageGroup = ref<number>(1);
 const maxPageGroup = ref<number>(1);
@@ -1134,6 +1154,9 @@ onMounted(async () => {
       text: 'manage',
       handler: () => {
         productMode.value = 'group';
+        
+        
+        
       },
     },
   ];
@@ -1152,6 +1175,7 @@ watch(productMode, () => {
       text: 'manage',
       handler: () => {
         productMode.value = 'group';
+        filterStat.value = []
       },
     },
   ];
@@ -1162,6 +1186,9 @@ watch(productMode, () => {
       argsi18n: { name: pathGroupName.value },
       handler: () => {
         productMode.value = 'type';
+        filterStat.value = filterStat.value.filter((item) => {
+          return item !== 'type';
+        })
       },
     });
   }
@@ -1311,7 +1338,7 @@ watch(inputSearchProductAndService, async () => {
           <div style="display: inline-block">
             <StatCard
               label-i18n
-              :branch="stat"
+              :branch="stat.filter((v) => !filterStat.includes(v.mode) )"
               :dark="$q.dark.isActive"
               nowrap
             />
@@ -1514,6 +1541,7 @@ watch(inputSearchProductAndService, async () => {
                     :props="props"
                     @click="
                       async () => {
+                        filterStat.push(productMode);
                         if (productMode === 'type') {
                           pathTypeName = props.row.name;
                           currentIdType = props.row.id;
@@ -1532,6 +1560,8 @@ watch(inputSearchProductAndService, async () => {
                           await fetchListType();
                           flowStore.rotate();
                         }
+                
+                        
                       }
                     "
                   >
@@ -1882,6 +1912,7 @@ watch(inputSearchProductAndService, async () => {
                       "
                       @on-click="
                         async () => {
+                           filterStat.push(productMode);
                           if (productMode === 'type') {
                             pathTypeName = props.row.name;
                             currentIdType = props.row.id;

From 4652676a3c749ddebba5f4042782713322495660 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Thu, 11 Jul 2024 14:06:44 +0700
Subject: [PATCH 154/158] feat: add id on btn add

---
 src/components/AddButton.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/AddButton.vue b/src/components/AddButton.vue
index 7fb150e9..676cb577 100644
--- a/src/components/AddButton.vue
+++ b/src/components/AddButton.vue
@@ -9,6 +9,7 @@ defineProps<{
     <div class="row">
       <q-btn
         unelevated
+        id="btn-Add"
         @click="$emit('trigger')"
         size="lg"
         class="color-btn"

From 470468b7e7bce3160aea5ffdaa44e672fbedbe8e Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 12 Jul 2024 09:38:35 +0700
Subject: [PATCH 155/158] =?UTF-8?q?fix:=20=E0=B8=84=E0=B9=88=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A7=E0=B9=88=E0=B8=B2=E0=B8=87=E0=B8=82=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=20telephoneNo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index ccc8aa10..3754ed55 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1048,7 +1048,7 @@ watch(locale, () => {
                             {{ props.row.address }}
                           </q-td>
                           <q-td v-if="fieldSelected.includes('branchLabelTel')">
-                            {{ props.row.contact[0].telephoneNo }}
+                            {{ props.row.contact[0]?.telephoneNo || '-' }}
                           </q-td>
                           <q-td
                             v-if="fieldSelected.includes('branchLabelType')"

From f0fadfdc1bc6824dde9a5f54bcec46e55c7eedcd Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 12 Jul 2024 11:07:13 +0700
Subject: [PATCH 156/158] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=20i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/en-US/index.ts | 2 ++
 src/i18n/th-th/index.ts | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index d612098f..35424c99 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -39,6 +39,8 @@ export default {
   displayField: 'Display Fields',
   deleteConfirmTitle: 'Comfirm Deletion',
   deleteConfirmMessage: 'Do you want to delete this item?',
+  headquartersNotEstablished: 'You have not yet established the headquarters. You need to establish the headquarters before you can create personnel.',
+
   changePassword: 'Change Password',
   signature: 'Signature',
   addSignature: 'Add Signature',
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
index cecc7788..bf5d3cb4 100644
--- a/src/i18n/th-th/index.ts
+++ b/src/i18n/th-th/index.ts
@@ -39,6 +39,7 @@ export default {
   displayField: 'ข้อมูลที่แสดง',
   deleteConfirmTitle: 'ยืนยันการลบข้อมูล',
   deleteConfirmMessage: 'คุณต้องการลบข้อมูลใช่หรือไม่',
+  headquartersNotEstablished: 'ท่านยังไม่ได้สร้างสำนักงานใหญ่ ต้องสร้างสำนักงานใหญ่ก่อนจึงจะสร้าง บุคลากรได้',
   changePassword: 'เปลี่ยนรหัสผ่าน',
   signature: 'ลายเซ็น',
   addSignature: 'เพิ่มลายเซ็น',

From 6b25dff32a198053db9fa6ada9591475a31d8f1f Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 12 Jul 2024 11:07:45 +0700
Subject: [PATCH 157/158] =?UTF-8?q?refactor:=20=E0=B9=81=E0=B8=88=E0=B9=89?=
 =?UTF-8?q?=E0=B8=87=E0=B9=80=E0=B8=95=E0=B8=B7=E0=B8=AD=E0=B8=99=E0=B8=96?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=A5=E0=B8=B2=E0=B8=81=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=81=E0=B9=88=E0=B8=AD=E0=B8=99=E0=B8=97=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=88=E0=B8=B0=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B2=E0=B8=82=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02_personnel-management/MainPage.vue      | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 893f9366..705db843 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -266,7 +266,30 @@ async function openDialog(
         agencyFileList.value = result;
       }
     }
-  } else hqId.value = userStore.userOption.hqOpts[0].value;
+  } if(userStore.userOption.hqOpts.length !== 0) {
+    
+    hqId.value = userStore.userOption.hqOpts[0].value;
+  }
+  if(userStore.userOption.hqOpts.length === 0) {
+    console.log('no hq');
+
+  dialog({
+    color: 'warning',
+    icon: 'mdi-alert',
+    title: t('warning'),
+    actionText: t('agree'),
+    persistent: true,
+    message: t('headquartersNotEstablished'),
+    action: async () => {
+
+    },
+  });
+
+
+    return
+    
+  }
+
 
   if (action === 'FORM') {
     modal.value = true;
@@ -407,10 +430,10 @@ async function onDelete(id: string) {
   dialog({
     color: 'negative',
     icon: 'mdi-trash-can-outline',
-    title: 'ยืนยันการลบข้อมูล',
-    actionText: 'ตกลง',
+    title: t('deleteConfirmTitle'),
+    actionText: t('agree'),
     persistent: true,
-    message: 'คุณต้องการลบข้อมูล ใช่หรือไม่',
+    message: t('deleteConfirmMessage'),
     action: async () => {
       await userStore.deleteById(id);
 

From 2c955de9001f0aee992746726cb0886ade2f2ffe Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 12 Jul 2024 13:35:15 +0700
Subject: [PATCH 158/158] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20?=
 =?UTF-8?q?=20layout=20=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=E0=B8=84=E0=B9=89=E0=B8=B2=E0=B9=81=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=9A=E0=B8=A3=E0=B8=B4=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=83=E0=B8=AB=E0=B8=A1=E0=B9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 2730 +++++++++++----------
 1 file changed, 1447 insertions(+), 1283 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 2767ceb5..cf41e589 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -105,11 +105,12 @@ const stat = ref<
     color: 'pink' | 'purple' | 'green' | 'orange';
   }[]
 >([
-  { 
+  {
     icon: 'mdi-folder',
-    count: 0, label: 'productAndService',
+    count: 0,
+    label: 'productAndService',
     mode: 'group',
-    color: 'pink' 
+    color: 'pink',
   },
   {
     icon: 'mdi-folder-table',
@@ -118,18 +119,19 @@ const stat = ref<
     mode: 'type',
     color: 'purple',
   },
-  { 
-  icon: 'mdi-server-network',
-  count: 0, label: 'service',
-  mode: 'service',
-  color: 'orange'
-  
+  {
+    icon: 'mdi-server-network',
+    count: 0,
+    label: 'service',
+    mode: 'service',
+    color: 'orange',
   },
-  { 
-  icon: 'mdi-folder',
-  count: 0, label: 'product',
-  mode: 'product', 
-  color: 'green' 
+  {
+    icon: 'mdi-folder',
+    count: 0,
+    label: 'product',
+    mode: 'product',
+    color: 'green',
   },
 ]);
 
@@ -144,6 +146,7 @@ const drawerInfo = ref(false);
 const isEdit = ref(false);
 
 const modeView = ref(false);
+const splitterModel = ref(25);
 
 const dialogInputForm = ref(false);
 const dialogProduct = ref(false);
@@ -1154,9 +1157,6 @@ onMounted(async () => {
       text: 'manage',
       handler: () => {
         productMode.value = 'group';
-        
-        
-        
       },
     },
   ];
@@ -1175,7 +1175,7 @@ watch(productMode, () => {
       text: 'manage',
       handler: () => {
         productMode.value = 'group';
-        filterStat.value = []
+        filterStat.value = [];
       },
     },
   ];
@@ -1188,7 +1188,7 @@ watch(productMode, () => {
         productMode.value = 'type';
         filterStat.value = filterStat.value.filter((item) => {
           return item !== 'type';
-        })
+        });
       },
     });
   }
@@ -1295,66 +1295,213 @@ watch(inputSearchProductAndService, async () => {
     ></q-fab-action>
   </ButtonAddComponent>
 
-  <div class="column full-height no-wrap">
-    <div
-      v-if="stat[0].count === 0"
-      class="column col bordered rounded q-pa-md"
-      :no-padding="productGroup?.length !== 0"
-    >
-      <TooltipComponent
-        class="self-end"
-        title="messageTooltipNoProduct"
-        caption="messageTooltipProductCreate"
-        imgSrc="personnel-table-"
-      />
+  <div class="text-body-2 q-mb-xs flex items-center">
+    {{ $t('dataSum') }}
+    <q-btn
+      class="q-ml-xs"
+      icon="mdi-pin"
+      color="primary"
+      size="sm"
+      flat
+      dense
+      rounded
+      @click="hideStat = !hideStat"
+      :style="hideStat ? 'rotate: 90deg' : ''"
+      style="transition: 0.1s ease-in-out"
+    />
+  </div>
 
-      <div class="row items-center justify-center" style="flex-grow: 1">
-        <AddButton
-          label="productCreate"
-          @trigger="() => (dialogInputForm = true)"
+  <transition name="slide">
+    <div v-if="!hideStat" class="scroll q-mb-md">
+      <div style="display: inline-block">
+        <StatCard
+          label-i18n
+          :branch="stat.filter((v) => !filterStat.includes(v.mode))"
+          :dark="$q.dark.isActive"
+          nowrap
         />
       </div>
     </div>
+  </transition>
 
-    <div v-if="stat[0].count !== 0" class="column full-height no-wrap">
-      <div class="text-body-2 q-mb-xs flex items-center">
-        {{ $t('dataSum') }}
-        <q-btn
-          class="q-ml-xs"
-          icon="mdi-pin"
-          color="primary"
-          size="sm"
-          flat
-          dense
-          rounded
-          @click="hideStat = !hideStat"
-          :style="hideStat ? 'rotate: 90deg' : ''"
-          style="transition: 0.1s ease-in-out"
-        />
-      </div>
+  <q-splitter
+    v-model="splitterModel"
+    :limits="[0, 100]"
+    style="width: 100%; height: 82%"
+    after-class="overflow-hidden"
+  >
+    <template v-slot:before>
+      <div class="surface-2 column full-height">
+        <div
+          class="row bordered-b q-pl-sm text-weight-bold items-center"
+          style="height: 56px"
+        >
+          <div class="col">จัดการสาขาทั้งหมด</div>
+        </div>
 
-      <transition name="slide">
-        <div v-if="!hideStat" class="scroll q-mb-md">
-          <div style="display: inline-block">
-            <StatCard
-              label-i18n
-              :branch="stat.filter((v) => !filterStat.includes(v.mode) )"
-              :dark="$q.dark.isActive"
-              nowrap
-            />
+        <div class="col" style="position: relative">
+          <div class="scroll" style="position: absolute; inset: 0">
+            <!-- <q-tree
+                      :nodes="treeData"
+                      node-key="id"
+                      label-key="name"
+                      children-key="branch"
+                      style="color: var(--foreground)"
+                    >
+                      <template #default-header="{ node }">
+                        <div
+                          class="row items-center justify-between full-width no-wrap"
+                        >
+                          <span>{{ node.name }}</span>
+                          <div
+                            class="row q-gutter-xs items-center no-wrap"
+                            @click.stop
+                          >
+                            <q-btn
+                              v-if="node.isHeadOffice"
+                              :id="`create-sub-branch-btn-${node.name}`"
+                              @click.stop=""
+                              icon="mdi-file-plus-outline"
+                              size="sm"
+                              dense
+                              round
+                              flat
+                            />
+
+                            <q-btn
+                              :id="`view-detail-btn-${node.name}`"
+                              icon="mdi-dots-vertical"
+                              size="sm"
+                              dense
+                              round
+                              flat
+                            >
+                              <q-menu class="bordered">
+                                <q-list v-close-popup>
+                                  <q-item
+                                    :id="`view-detail-btn-${node.name}-view`"
+                                    @click.stop="
+                                    
+                                    "
+                                    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="
+                                      () => {
+                               
+                                      }
+                                    "
+                                  >
+                                    <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=""
+                                  >
+                                    <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 () => {
+                                     
+                                        
+                                            }
+                                          "
+                                          :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>
-      </transition>
+      </div>
+    </template>
 
-      <!-- group/type -->
-      <div
-        v-if="productMode === 'group' || productMode === 'type'"
-        class="surface-2 col bordered rounded column no-wrap"
-      >
-        <div class="row q-px-md q-py-sm items-center">
+    <template v-slot:after>
+      <div class="column no-wrap full-height">
+        <!-- group/type -->
+        <div
+          v-if="productMode === 'group' || productMode === 'type'"
+          class="col justify-between surface-2 items-center full-width full-height justify-between"
+        >
           <div
-            v-if="productMode === 'group' || productMode === 'type'"
-            class="row full-width justify-between"
+            class="q-px-md row bordered-b justify-between items-center"
+            style="height: 56px"
           >
             <q-input
               style="width: 300px"
@@ -1362,7 +1509,7 @@ watch(inputSearchProductAndService, async () => {
               dense
               unelavated
               :label="$t('search')"
-              class="q-mr-md"
+              class=""
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearch"
               debounce="250"
@@ -1488,157 +1635,378 @@ watch(inputSearchProductAndService, async () => {
               </q-btn-toggle>
             </div>
           </div>
-        </div>
 
-        <div
-          v-if="
-            (productMode === 'type' && productType?.length === 0) ||
-            (productGroup?.length === 0 && productMode === 'group')
-          "
-          class="flex full-height justify-center items-center q-mt-lg"
-          style="min-height: 70vh; background-color: var(--surface-2)"
-        >
-          <NoData :not-found="!!inputSearch" />
-        </div>
-        <template v-else>
-          <div class="col flex scroll full-height q-pa-md surface-1">
-            <div class="full-width">
-              <q-table
-                flat
-                bordered
-                :grid="modeView"
-                :rows="
-                  (productMode === 'type' ? productType : productGroup) || []
-                "
-                :columns="tbColumn.groupAndType"
-                class="full-width"
-                card-container-class="q-gutter-md  "
-                row-key="name"
-                :rows-per-page-options="[0]"
-                hide-pagination
-                :visible-columns="tbControl.groupAndType.fieldSelected"
-              >
-                <template v-slot:header="props">
-                  <q-tr class="surface-2" :props="props">
-                    <q-th
-                      v-for="col in props.cols"
-                      :key="col.name"
+          <div
+            v-if="
+              ((productMode === 'type' && productType?.length === 0) ||
+                (productGroup?.length === 0 && productMode === 'group')) &&
+              stat[0].count !== undefined
+            "
+            class="surface-1 row items-center justify-center bordered q-pa-md full-width full-height"
+          >
+            <NoData :not-found="!!inputSearch" />
+          </div>
+
+          <template v-else>
+            <div class="col flex scroll full-height q-pa-md surface-1">
+              <div class="full-width">
+                <q-table
+                  flat
+                  bordered
+                  :grid="modeView"
+                  :rows="
+                    (productMode === 'type' ? productType : productGroup) || []
+                  "
+                  :columns="tbColumn.groupAndType"
+                  class="full-width"
+                  card-container-class="q-col-gutter-md"
+                  row-key="name"
+                  :rows-per-page-options="[0]"
+                  hide-pagination
+                  :visible-columns="tbControl.groupAndType.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>
+
+                  <template v-slot:body="props">
+                    <q-tr
+                      :class="{
+                        'app-text-muted': props.row.status === 'INACTIVE',
+                        'status-active': props.row.status !== 'INACTIVE',
+                        'status-inactive': props.row.status === 'INACTIVE',
+                      }"
                       :props="props"
-                    >
-                      {{ $t(col.label) }}
-                    </q-th>
-                    <q-th auto-width />
-                  </q-tr>
-                </template>
+                      @click="
+                        async () => {
+                          filterStat.push(productMode);
+                          if (productMode === 'type') {
+                            pathTypeName = props.row.name;
+                            currentIdType = props.row.id;
+                            productMode = 'service';
+                            productAndServiceTab = 'service';
 
-                <template v-slot:body="props">
-                  <q-tr
-                    :class="{
-                      'app-text-muted': props.row.status === 'INACTIVE',
-                      'status-active': props.row.status !== 'INACTIVE',
-                      'status-inactive': props.row.status === 'INACTIVE',
-                    }"
-                    :props="props"
-                    @click="
-                      async () => {
-                        filterStat.push(productMode);
-                        if (productMode === 'type') {
-                          pathTypeName = props.row.name;
-                          currentIdType = props.row.id;
-                          productMode = 'service';
-                          productAndServiceTab = 'service';
-
-                          await fetchListOfProduct();
-                          await fetchListOfService();
-                          await fetchListOfProductAndService();
-                          flowStore.rotate();
+                            await fetchListOfProduct();
+                            await fetchListOfService();
+                            await fetchListOfProductAndService();
+                            flowStore.rotate();
+                          }
+                          if (productMode === 'group') {
+                            pathGroupName = props.row.name;
+                            currentId = props.row.id;
+                            productMode = 'type';
+                            await fetchListType();
+                            flowStore.rotate();
+                          }
                         }
-                        if (productMode === 'group') {
-                          pathGroupName = props.row.name;
-                          currentId = props.row.id;
-                          productMode = 'type';
-                          await fetchListType();
-                          flowStore.rotate();
-                        }
-                
-                        
-                      }
-                    "
-                  >
-                    <q-td
-                      v-if="
-                        tbControl.groupAndType.fieldSelected.includes('name')
                       "
                     >
-                      <div class="row items-center">
-                        <div
-                          style="
-                            width: 50px;
-                            display: flex;
-                            margin-bottom: var(--size-2);
-                          "
-                        >
+                      <q-td
+                        v-if="
+                          tbControl.groupAndType.fieldSelected.includes('name')
+                        "
+                      >
+                        <div class="row items-center">
                           <div
-                            :class="`icon-color-${productMode === 'group' ? 'pink' : 'purple'}`"
-                            class="table__icon"
+                            style="
+                              width: 50px;
+                              display: flex;
+                              margin-bottom: var(--size-2);
+                            "
                           >
-                            <q-icon
-                              size="md"
-                              style="scale: 0.8"
-                              :name="
-                                productMode === 'group'
-                                  ? 'mdi-folder'
-                                  : 'mdi-folder-table'
-                              "
-                            />
+                            <div
+                              :class="`icon-color-${productMode === 'group' ? 'pink' : 'purple'}`"
+                              class="table__icon"
+                            >
+                              <q-icon
+                                size="md"
+                                style="scale: 0.8"
+                                :name="
+                                  productMode === 'group'
+                                    ? 'mdi-folder'
+                                    : 'mdi-folder-table'
+                                "
+                              />
+                            </div>
                           </div>
-                        </div>
-                        <div class="col">
                           <div class="col">
-                            {{ props.row.name }}
-                          </div>
-                          <div class="col app-text-muted">
-                            {{ props.row.code || '-' }}
+                            <div class="col">
+                              {{ props.row.name }}
+                            </div>
+                            <div class="col app-text-muted">
+                              {{ props.row.code || '-' }}
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    </q-td>
-                    <q-td
-                      v-if="
-                        tbControl.groupAndType.fieldSelected.includes('detail')
-                      "
-                    >
-                      {{ props.row.detail || '-' }}
-                    </q-td>
+                      </q-td>
+                      <q-td
+                        v-if="
+                          tbControl.groupAndType.fieldSelected.includes(
+                            'detail',
+                          )
+                        "
+                      >
+                        {{ props.row.detail || '-' }}
+                      </q-td>
 
-                    <q-td
-                      v-if="
-                        tbControl.groupAndType.fieldSelected.includes(
-                          'formDialogInputRemark',
-                        )
-                      "
-                    >
-                      {{ props.row.remark || '-' }}
-                    </q-td>
+                      <q-td
+                        v-if="
+                          tbControl.groupAndType.fieldSelected.includes(
+                            'formDialogInputRemark',
+                          )
+                        "
+                      >
+                        {{ props.row.remark || '-' }}
+                      </q-td>
 
-                    <q-td
-                      v-if="
-                        tbControl.groupAndType.fieldSelected.includes(
-                          'createdAt',
-                        )
-                      "
-                    >
-                      {{ dateFormat(props.row.createdAt) }}
-                    </q-td>
+                      <q-td
+                        v-if="
+                          tbControl.groupAndType.fieldSelected.includes(
+                            'createdAt',
+                          )
+                        "
+                      >
+                        {{ dateFormat(props.row.createdAt) }}
+                      </q-td>
 
-                    <q-td>
-                      <q-btn
-                        icon="mdi-eye-outline"
-                        size="sm"
-                        dense
-                        round
-                        flat
-                        @click.stop="
+                      <q-td>
+                        <q-btn
+                          icon="mdi-eye-outline"
+                          size="sm"
+                          dense
+                          round
+                          flat
+                          @click.stop="
+                            () => {
+                              if (productMode === 'type') {
+                                currentStatusProduct =
+                                  props.row.status === 'INACTIVE';
+                                clearFormGroup();
+                                currentIdType = props.row.id;
+                                assignFormDataGroup(props.row);
+                                isEdit = false;
+                                drawerInfo = true;
+                              }
+                              if (productMode === 'group') {
+                                currentStatusProduct =
+                                  props.row.status === 'INACTIVE';
+                                clearFormGroup();
+                                assignFormDataGroup(props.row);
+                                isEdit = false;
+                                currentId = props.row.id;
+                                drawerInfo = true;
+                              }
+                            }
+                          "
+                        />
+
+                        <q-btn
+                          icon="mdi-dots-vertical"
+                          size="sm"
+                          dense
+                          round
+                          flat
+                          @click.stop
+                          :key="props.row.id"
+                        >
+                          <q-menu class="bordered">
+                            <q-list v-close-popup>
+                              <q-item
+                                v-close-popup
+                                clickable
+                                :id="`view-detail-btn-${props.row.name}-view`"
+                                @click.stop="
+                                  () => {
+                                    if (productMode === 'type') {
+                                      currentStatusProduct =
+                                        props.row.status === 'INACTIVE';
+                                      clearFormGroup();
+                                      currentIdType = props.row.id;
+                                      assignFormDataGroup(props.row);
+                                      isEdit = false;
+                                      drawerInfo = true;
+                                    }
+                                    if (productMode === 'group') {
+                                      currentStatusProduct =
+                                        props.row.status === 'INACTIVE';
+                                      clearFormGroup();
+                                      assignFormDataGroup(props.row);
+                                      isEdit = false;
+                                      currentId = props.row.id;
+                                      drawerInfo = true;
+                                    }
+                                  }
+                                "
+                                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 (productMode === 'type') {
+                                      clearFormGroup();
+                                      currentIdType = props.row.id;
+                                      assignFormDataGroup(props.row);
+                                      isEdit = true;
+                                      drawerInfo = true;
+                                    }
+                                    if (productMode === 'group') {
+                                      clearFormGroup();
+                                      assignFormDataGroup(props.row);
+                                      isEdit = true;
+                                      currentId = props.row.id;
+
+                                      drawerInfo = true;
+                                    }
+                                  }
+                                "
+                              >
+                                <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
+                                v-close-popup
+                                :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="
+                                  () => {
+                                    if (productMode === 'type') {
+                                      deleteProductById(props.row.id);
+                                    }
+                                    if (productMode === 'group') {
+                                      deleteProductById(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 () => {
+                                          if (productMode === 'type') {
+                                            toggleStatusType(
+                                              props.row.id,
+                                              props.row.status,
+                                            );
+                                          }
+                                          if (productMode === 'group') {
+                                            toggleStatusGroup(
+                                              props.row.id,
+                                              props.row.status,
+                                            );
+                                          }
+                                        }
+                                      "
+                                      :model-value="
+                                        props.row.status !== 'INACTIVE'
+                                      "
+                                    />
+                                  </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-3">
+                      <ProductCardComponent
+                        :isType="productMode === 'type'"
+                        :count-product="props.row._count.product"
+                        :count-type="props.row._count.type"
+                        :count-service="props.row._count.service"
+                        :title="props.row.name"
+                        :subtitle="props.row.code"
+                        :date="new Date(props.row.updatedAt)"
+                        :status="props.row.status"
+                        :id="props.row.id"
+                        :isDisabled="props.row.status === 'INACTIVE'"
+                        :color="
+                          {
+                            type: $q.dark.isActive
+                              ? 'var(--purple-7-hsl)'
+                              : 'var(--violet-11-hsl)',
+                            group: 'var(--pink-6-hsl)',
+                          }[productMode] || 'var(--pink-6-hsl)'
+                        "
+                        @toggleStatus="
+                          if (productMode === 'type') {
+                            toggleStatusType(props.row.id, props.row.status);
+                          }
+                          if (productMode === 'group') {
+                            toggleStatusGroup(props.row.id, props.row.status);
+                          }
+                        "
+                        @viewCard="
                           () => {
                             if (productMode === 'type') {
                               currentStatusProduct =
@@ -1660,1130 +2028,926 @@ watch(inputSearchProductAndService, async () => {
                             }
                           }
                         "
+                        @updateCard="
+                          () => {
+                            if (productMode === 'type') {
+                              clearFormGroup();
+                              currentIdType = props.row.id;
+                              assignFormDataGroup(props.row);
+                              isEdit = true;
+                              drawerInfo = true;
+                            }
+                            if (productMode === 'group') {
+                              clearFormGroup();
+                              assignFormDataGroup(props.row);
+                              isEdit = true;
+                              currentId = props.row.id;
+
+                              drawerInfo = true;
+                            }
+                          }
+                        "
+                        @deleteCard="
+                          () => {
+                            if (productMode === 'type') {
+                              deleteProductById(props.row.id);
+                            }
+                            if (productMode === 'group') {
+                              deleteProductById(props.row.id);
+                            }
+                          }
+                        "
+                        @on-click="
+                          async () => {
+                            filterStat.push(productMode);
+                            if (productMode === 'type') {
+                              pathTypeName = props.row.name;
+                              currentIdType = props.row.id;
+                              productMode = 'service';
+                              productAndServiceTab = 'service';
+
+                              await fetchListOfProduct();
+                              await fetchListOfService();
+                              await fetchListOfProductAndService();
+                              flowStore.rotate();
+                            }
+                            if (productMode === 'group') {
+                              pathGroupName = props.row.name;
+                              currentId = props.row.id;
+                              productMode = 'type';
+                              await fetchListType();
+                              flowStore.rotate();
+                            }
+                          }
+                        "
                       />
+                    </div>
+                  </template>
+                </q-table>
+              </div>
+            </div>
 
-                      <q-btn
-                        icon="mdi-dots-vertical"
-                        size="sm"
-                        dense
-                        round
-                        flat
-                        @click.stop
-                        :key="props.row.id"
-                      >
-                        <q-menu class="bordered">
-                          <q-list v-close-popup>
-                            <q-item
-                              v-close-popup
-                              clickable
-                              :id="`view-detail-btn-${props.row.name}-view`"
-                              @click.stop="
-                                () => {
-                                  if (productMode === 'type') {
-                                    currentStatusProduct =
-                                      props.row.status === 'INACTIVE';
-                                    clearFormGroup();
-                                    currentIdType = props.row.id;
-                                    assignFormDataGroup(props.row);
-                                    isEdit = false;
-                                    drawerInfo = true;
-                                  }
-                                  if (productMode === 'group') {
-                                    currentStatusProduct =
-                                      props.row.status === 'INACTIVE';
-                                    clearFormGroup();
-                                    assignFormDataGroup(props.row);
-                                    isEdit = false;
-                                    currentId = props.row.id;
-                                    drawerInfo = true;
-                                  }
-                                }
-                              "
-                              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 (productMode === 'type') {
-                                    clearFormGroup();
-                                    currentIdType = props.row.id;
-                                    assignFormDataGroup(props.row);
-                                    isEdit = true;
-                                    drawerInfo = true;
-                                  }
-                                  if (productMode === 'group') {
-                                    clearFormGroup();
-                                    assignFormDataGroup(props.row);
-                                    isEdit = true;
-                                    currentId = props.row.id;
-
-                                    drawerInfo = true;
-                                  }
-                                }
-                              "
-                            >
-                              <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
-                              v-close-popup
-                              :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="
-                                () => {
-                                  if (productMode === 'type') {
-                                    deleteProductById(props.row.id);
-                                  }
-                                  if (productMode === 'group') {
-                                    deleteProductById(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 () => {
-                                        if (productMode === 'type') {
-                                          toggleStatusType(
-                                            props.row.id,
-                                            props.row.status,
-                                          );
-                                        }
-                                        if (productMode === 'group') {
-                                          toggleStatusGroup(
-                                            props.row.id,
-                                            props.row.status,
-                                          );
-                                        }
-                                      }
-                                    "
-                                    :model-value="
-                                      props.row.status !== 'INACTIVE'
-                                    "
-                                  />
-                                </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-3">
-                    <ProductCardComponent
-                      :isType="productMode === 'type'"
-                      :count-product="props.row._count.product"
-                      :count-type="props.row._count.type"
-                      :count-service="props.row._count.service"
-                      :title="props.row.name"
-                      :subtitle="props.row.code"
-                      :date="new Date(props.row.updatedAt)"
-                      :status="props.row.status"
-                      :id="props.row.id"
-                      :isDisabled="props.row.status === 'INACTIVE'"
-                      :color="
-                        {
-                          type: $q.dark.isActive
-                            ? 'var(--purple-7-hsl)'
-                            : 'var(--violet-11-hsl)',
-                          group: 'var(--pink-6-hsl)',
-                        }[productMode] || 'var(--pink-6-hsl)'
-                      "
-                      @toggleStatus="
-                        if (productMode === 'type') {
-                          toggleStatusType(props.row.id, props.row.status);
-                        }
-                        if (productMode === 'group') {
-                          toggleStatusGroup(props.row.id, props.row.status);
-                        }
-                      "
-                      @viewCard="
-                        () => {
-                          if (productMode === 'type') {
-                            currentStatusProduct =
-                              props.row.status === 'INACTIVE';
-                            clearFormGroup();
-                            currentIdType = props.row.id;
-                            assignFormDataGroup(props.row);
-                            isEdit = false;
-                            drawerInfo = true;
-                          }
-                          if (productMode === 'group') {
-                            currentStatusProduct =
-                              props.row.status === 'INACTIVE';
-                            clearFormGroup();
-                            assignFormDataGroup(props.row);
-                            isEdit = false;
-                            currentId = props.row.id;
-                            drawerInfo = true;
-                          }
-                        }
-                      "
-                      @updateCard="
-                        () => {
-                          if (productMode === 'type') {
-                            clearFormGroup();
-                            currentIdType = props.row.id;
-                            assignFormDataGroup(props.row);
-                            isEdit = true;
-                            drawerInfo = true;
-                          }
-                          if (productMode === 'group') {
-                            clearFormGroup();
-                            assignFormDataGroup(props.row);
-                            isEdit = true;
-                            currentId = props.row.id;
-
-                            drawerInfo = true;
-                          }
-                        }
-                      "
-                      @deleteCard="
-                        () => {
-                          if (productMode === 'type') {
-                            deleteProductById(props.row.id);
-                          }
-                          if (productMode === 'group') {
-                            deleteProductById(props.row.id);
-                          }
-                        }
-                      "
-                      @on-click="
-                        async () => {
-                           filterStat.push(productMode);
-                          if (productMode === 'type') {
-                            pathTypeName = props.row.name;
-                            currentIdType = props.row.id;
-                            productMode = 'service';
-                            productAndServiceTab = 'service';
-
-                            await fetchListOfProduct();
-                            await fetchListOfService();
-                            await fetchListOfProductAndService();
-                            flowStore.rotate();
-                          }
-                          if (productMode === 'group') {
-                            pathGroupName = props.row.name;
-                            currentId = props.row.id;
-                            productMode = 'type';
-                            await fetchListType();
-                            flowStore.rotate();
-                          }
-                        }
-                      "
-                    />
+            <div
+              v-if="productMode === 'group'"
+              class="row items-center justify-between q-px-md q-py-sm"
+            >
+              <div class="col-4">
+                <div class="row items-center">
+                  <div class="app-text-muted" style="width: 80px">
+                    {{ $t('showing') }}
                   </div>
+                  <div>
+                    <q-btn-dropdown
+                      dense
+                      unelevated
+                      :label="pageSizeGroup"
+                      class="bordered q-pl-md"
+                    >
+                      <q-list>
+                        <q-item
+                          v-for="v in [10, 30, 50, 100, 500, 1000]"
+                          :key="v"
+                          clickable
+                          v-close-popup
+                          @click="
+                            async () => {
+                              pageSizeGroup = v;
+                              await fetchListGroups();
+                            }
+                          "
+                        >
+                          <q-item-section>
+                            <q-item-label>{{ v }}</q-item-label>
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-btn-dropdown>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-4 row justify-center app-text-muted">
+                {{
+                  $t('recordsPage', {
+                    resultcurrentPage: productGroup?.length,
+                    total: totalGroup,
+                  })
+                }}
+              </div>
+
+              <div class="col-4 row justify-end">
+                <PaginationComponent
+                  v-model:current-page="currentPageGroup"
+                  v-model:max-page="maxPageGroup"
+                  :fetch-data="
+                    async () => {
+                      await fetchListGroups();
+                      flowStore.rotate();
+                    }
+                  "
+                />
+              </div>
+            </div>
+
+            <div
+              v-if="productMode === 'type'"
+              class="row justify-between items-center"
+            >
+              <div class="col-4">
+                <div class="row items-center">
+                  <div class="app-text-muted" style="width: 80px">
+                    {{ $t('showing') }}
+                  </div>
+                  <div>
+                    <q-btn-dropdown
+                      dense
+                      unelevated
+                      :label="pageSizeType"
+                      class="bordered q-pl-md"
+                    >
+                      <q-list>
+                        <q-item
+                          v-for="v in [10, 30, 50, 100, 500, 1000]"
+                          :key="v"
+                          clickable
+                          v-close-popup
+                          @click="
+                            async () => {
+                              pageSizeType = v;
+                              await fetchListType();
+                            }
+                          "
+                        >
+                          <q-item-section>
+                            <q-item-label>{{ v }}</q-item-label>
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-btn-dropdown>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-4 row justify-center app-text-muted">
+                {{
+                  $t('recordsPage', {
+                    resultcurrentPage: productType?.length,
+                    total: totalType,
+                  })
+                }}
+              </div>
+              <div class="col-4 row justify-end">
+                <PaginationComponent
+                  v-model:current-page="currentPageType"
+                  v-model:max-page="maxPageType"
+                  :fetch-data="
+                    async () => {
+                      await fetchListType();
+                      flowStore.rotate();
+                    }
+                  "
+                />
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <!-- product/service -->
+        <div
+          v-else-if="productMode === 'service'"
+          class="surface-2 col bordered rounded column no-wrap"
+          style="overflow: hidden"
+        >
+          <div
+            class="row justify-between items-center q-px-md q-py-sm rounded surface-2"
+            style="z-index: 1"
+          >
+            <div>
+              <q-input
+                style="width: 300px"
+                outlined
+                dense
+                unelavated
+                :label="$t('search')"
+                class="q-mr-md"
+                :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+                v-model="inputSearchProductAndService"
+                debounce="250"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="mdi-magnify" />
                 </template>
-              </q-table>
+              </q-input>
             </div>
-          </div>
+            <div class="row" style="gap: var(--size-2)">
+              <q-btn
+                icon="mdi-tune-vertical-variant"
+                size="sm"
+                :color="$q.dark.isActive ? 'dark' : 'white'"
+                :text-color="$q.dark.isActive ? 'white' : 'dark'"
+                class="bordered rounded q-py-sm"
+                unelevated
+              >
+                <q-menu class="bordered">
+                  <q-list v-close-popup dense>
+                    <q-item
+                      clickable
+                      class="flex items-center"
+                      @click="
+                        async () => {
+                          currentStatus = 'All';
+                          await fetchStatus();
+                        }
+                      "
+                    >
+                      {{ $t('all') }}
+                    </q-item>
+                    <q-item
+                      clickable
+                      class="flex items-center"
+                      @click="
+                        async () => {
+                          currentStatus = 'ACTIVE';
+                          await fetchStatus();
+                        }
+                      "
+                    >
+                      {{ $t('statusACTIVE') }}
+                    </q-item>
+                    <q-item
+                      clickable
+                      class="flex items-center"
+                      @click="
+                        async () => {
+                          currentStatus = 'INACTIVE';
+                          await fetchStatus();
+                        }
+                      "
+                    >
+                      {{ $t('statusINACTIVE') }}
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
 
-          <div
-            v-if="productMode === 'group'"
-            class="row items-center justify-between q-px-md q-py-sm"
-          >
-            <div class="col-4">
-              <div class="row items-center">
-                <div class="app-text-muted" style="width: 80px">
-                  {{ $t('showing') }}
-                </div>
-                <div>
-                  <q-btn-dropdown
-                    dense
-                    unelevated
-                    :label="pageSizeGroup"
-                    class="bordered q-pl-md"
-                  >
-                    <q-list>
-                      <q-item
-                        v-for="v in [10, 30, 50, 100, 500, 1000]"
-                        :key="v"
-                        clickable
-                        v-close-popup
-                        @click="
-                          async () => {
-                            pageSizeGroup = v;
-                            await fetchListGroups();
-                          }
-                        "
-                      >
-                        <q-item-section>
-                          <q-item-label>{{ v }}</q-item-label>
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-btn-dropdown>
-                </div>
-              </div>
-            </div>
-
-            <div class="col-4 row justify-center app-text-muted">
-              {{
-                $t('recordsPage', {
-                  resultcurrentPage: productGroup?.length,
-                  total: totalGroup,
-                })
-              }}
-            </div>
-
-            <div class="col-4 row justify-end">
-              <PaginationComponent
-                v-model:current-page="currentPageGroup"
-                v-model:max-page="maxPageGroup"
-                :fetch-data="
-                  async () => {
-                    await fetchListGroups();
-                    flowStore.rotate();
-                  }
-                "
-              />
-            </div>
-          </div>
-
-          <div
-            v-if="productMode === 'type'"
-            class="row justify-between items-center"
-          >
-            <div class="col-4">
-              <div class="row items-center">
-                <div class="app-text-muted" style="width: 80px">
-                  {{ $t('showing') }}
-                </div>
-                <div>
-                  <q-btn-dropdown
-                    dense
-                    unelevated
-                    :label="pageSizeType"
-                    class="bordered q-pl-md"
-                  >
-                    <q-list>
-                      <q-item
-                        v-for="v in [10, 30, 50, 100, 500, 1000]"
-                        :key="v"
-                        clickable
-                        v-close-popup
-                        @click="
-                          async () => {
-                            pageSizeType = v;
-                            await fetchListType();
-                          }
-                        "
-                      >
-                        <q-item-section>
-                          <q-item-label>{{ v }}</q-item-label>
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-btn-dropdown>
-                </div>
-              </div>
-            </div>
-
-            <div class="col-4 row justify-center app-text-muted">
-              {{
-                $t('recordsPage', {
-                  resultcurrentPage: productType?.length,
-                  total: totalType,
-                })
-              }}
-            </div>
-            <div class="col-4 row justify-end">
-              <PaginationComponent
-                v-model:current-page="currentPageType"
-                v-model:max-page="maxPageType"
-                :fetch-data="
-                  async () => {
-                    await fetchListType();
-                    flowStore.rotate();
-                  }
-                "
-              />
-            </div>
-          </div>
-        </template>
-      </div>
-
-      <!-- product/service -->
-      <div
-        v-else-if="productMode === 'service'"
-        class="surface-2 col bordered rounded column no-wrap"
-        style="overflow: hidden"
-      >
-        <div
-          class="row justify-between items-center q-px-md q-py-sm rounded surface-2"
-          style="z-index: 1"
-        >
-          <div>
-            <q-input
-              style="width: 300px"
-              outlined
-              dense
-              unelavated
-              :label="$t('search')"
-              class="q-mr-md"
-              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-              v-model="inputSearchProductAndService"
-              debounce="250"
-            >
-              <template v-slot:prepend>
-                <q-icon name="mdi-magnify" />
-              </template>
-            </q-input>
-          </div>
-          <div class="row" style="gap: var(--size-2)">
-            <q-btn
-              icon="mdi-tune-vertical-variant"
-              size="sm"
-              :color="$q.dark.isActive ? 'dark' : 'white'"
-              :text-color="$q.dark.isActive ? 'white' : 'dark'"
-              class="bordered rounded q-py-sm"
-              unelevated
-            >
-              <q-menu class="bordered">
-                <q-list v-close-popup dense>
-                  <q-item
-                    clickable
-                    class="flex items-center"
-                    @click="
-                      async () => {
-                        currentStatus = 'All';
-                        await fetchStatus();
-                      }
-                    "
-                  >
-                    {{ $t('all') }}
-                  </q-item>
-                  <q-item
-                    clickable
-                    class="flex items-center"
-                    @click="
-                      async () => {
-                        currentStatus = 'ACTIVE';
-                        await fetchStatus();
-                      }
-                    "
-                  >
-                    {{ $t('statusACTIVE') }}
-                  </q-item>
-                  <q-item
-                    clickable
-                    class="flex items-center"
-                    @click="
-                      async () => {
-                        currentStatus = 'INACTIVE';
-                        await fetchStatus();
-                      }
-                    "
-                  >
-                    {{ $t('statusINACTIVE') }}
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-
-            <q-select
-              v-if="modeView === false"
-              id="select-field"
-              for="select-field"
-              :options="
-                {
-                  product: tbControl.product.fieldDisplay,
-                  service: tbControl.service.fieldDisplay,
-                }[productAndServiceTab].map((x) => ({ label: $t(x), value: x }))
-              "
-              :display-value="$t('displayField')"
-              :model-value="
-                {
-                  product: tbControl.product.fieldSelected,
-                  service: tbControl.service.fieldSelected,
-                }[productAndServiceTab]
-              "
-              @update:model-value="
-                (v) => (tbControl[productAndServiceTab].fieldSelected = v)
-              "
-              option-label="label"
-              option-value="value"
-              map-options
-              emit-value
-              outlined
-              multiple
-              dense
-            />
-
-            <q-btn-toggle
-              v-model="modeView"
-              id="btn-mode"
-              dense
-              class="no-shadow bordered rounded surface-1"
-              :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
-              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: $q.dark.isActive
-                      ? modeView
-                        ? '#C9D3DB '
-                        : '#787B7C'
-                      : 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: $q.dark.isActive
-                      ? modeView === false
-                        ? '#C9D3DB'
-                        : '#787B7C'
-                      : modeView === false
-                        ? '#787B7C'
-                        : '#C9D3DB',
-                  }"
-                />
-              </template>
-            </q-btn-toggle>
-          </div>
-        </div>
-
-        <q-tabs
-          dense
-          v-model="productAndServiceTab"
-          class="bordered-b q-px-md"
-          align="left"
-        >
-          <q-tab
-            name="service"
-            @click="
-              async () => {
-                currentPageServiceAndProduct = 1;
-                inputSearchProductAndService = '';
-                currentStatus = 'All';
-                // await fetchListOfService();
-                flowStore.rotate();
-              }
-            "
-          >
-            <div
-              class="row"
-              :class="
-                productAndServiceTab === 'service'
-                  ? 'text-bold'
-                  : 'app-text-muted'
-              "
-            >
-              {{ $t('service') }}
-            </div>
-          </q-tab>
-          <q-tab
-            name="product"
-            @click="
-              async () => {
-                currentPageServiceAndProduct = 1;
-                inputSearchProductAndService = '';
-                currentStatus = 'All';
-                // await fetchListOfProduct();
-                flowStore.rotate();
-              }
-            "
-          >
-            <div
-              class="row"
-              :class="
-                productAndServiceTab === 'product'
-                  ? 'text-bold'
-                  : 'app-text-muted'
-              "
-            >
-              {{ $t('product') }}
-            </div>
-          </q-tab>
-        </q-tabs>
-
-        <div
-          v-if="
-            (productAndServiceTab === 'product' && product?.length === 0) ||
-            (productAndServiceTab === 'service' && service?.length === 0)
-          "
-          class="flex justify-center items-center surface-1 col"
-        >
-          <NoData :not-found="!!inputSearchProductAndService" />
-        </div>
-        <!-- tab -->
-        <template v-else>
-          <div class="col flex scroll full-height q-pa-md surface-1">
-            <div class="full-width">
-              <q-table
-                class="full-width"
-                flat
-                bordered
-                :rows-per-page-options="[0]"
-                :rows="{ product, service }[productAndServiceTab] || []"
-                :columns="
+              <q-select
+                v-if="modeView === false"
+                id="select-field"
+                for="select-field"
+                :options="
                   {
-                    product: tbColumn.product,
-                    service: tbColumn.service,
-                  }[productAndServiceTab]
+                    product: tbControl.product.fieldDisplay,
+                    service: tbControl.service.fieldDisplay,
+                  }[productAndServiceTab].map((x) => ({
+                    label: $t(x),
+                    value: x,
+                  }))
                 "
-                :grid="modeView"
-                card-container-class="row q-col-gutter-md"
-                row-key="name"
-                hide-pagination
-                :visible-columns="
+                :display-value="$t('displayField')"
+                :model-value="
                   {
                     product: tbControl.product.fieldSelected,
                     service: tbControl.service.fieldSelected,
                   }[productAndServiceTab]
                 "
+                @update:model-value="
+                  (v) => (tbControl[productAndServiceTab].fieldSelected = v)
+                "
+                option-label="label"
+                option-value="value"
+                map-options
+                emit-value
+                outlined
+                multiple
+                dense
+              />
+
+              <q-btn-toggle
+                v-model="modeView"
+                id="btn-mode"
+                dense
+                class="no-shadow bordered rounded surface-1"
+                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+                size="xs"
+                :options="[
+                  { value: true, slot: 'folder' },
+                  { value: false, slot: 'list' },
+                ]"
               >
-                <template v-slot:header="props">
-                  <q-tr class="surface-2" :props="props">
-                    <q-th
-                      v-for="col in props.cols"
-                      :key="col.name"
+                <template v-slot:folder>
+                  <q-icon
+                    name="mdi-view-grid-outline"
+                    size="16px"
+                    class="q-px-sm q-py-xs rounded"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? modeView
+                          ? '#C9D3DB '
+                          : '#787B7C'
+                        : 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: $q.dark.isActive
+                        ? modeView === false
+                          ? '#C9D3DB'
+                          : '#787B7C'
+                        : modeView === false
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+              </q-btn-toggle>
+            </div>
+          </div>
+
+          <q-tabs
+            dense
+            v-model="productAndServiceTab"
+            class="bordered-b q-px-md"
+            align="left"
+          >
+            <q-tab
+              name="service"
+              @click="
+                async () => {
+                  currentPageServiceAndProduct = 1;
+                  inputSearchProductAndService = '';
+                  currentStatus = 'All';
+                  // await fetchListOfService();
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'service'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
+              >
+                {{ $t('service') }}
+              </div>
+            </q-tab>
+            <q-tab
+              name="product"
+              @click="
+                async () => {
+                  currentPageServiceAndProduct = 1;
+                  inputSearchProductAndService = '';
+                  currentStatus = 'All';
+                  // await fetchListOfProduct();
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'product'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
+              >
+                {{ $t('product') }}
+              </div>
+            </q-tab>
+          </q-tabs>
+
+          <div
+            v-if="
+              (productAndServiceTab === 'product' && product?.length === 0) ||
+              (productAndServiceTab === 'service' && service?.length === 0)
+            "
+            class="flex justify-center items-center surface-1 col"
+          >
+            <NoData :not-found="!!inputSearchProductAndService" />
+          </div>
+          <!-- tab -->
+          <template v-else>
+            <div class="col flex scroll full-height q-pa-md surface-1">
+              <div class="full-width">
+                <q-table
+                  class="full-width"
+                  flat
+                  bordered
+                  :rows-per-page-options="[0]"
+                  :rows="{ product, service }[productAndServiceTab] || []"
+                  :columns="
+                    {
+                      product: tbColumn.product,
+                      service: tbColumn.service,
+                    }[productAndServiceTab]
+                  "
+                  :grid="modeView"
+                  card-container-class="row q-col-gutter-md"
+                  row-key="name"
+                  hide-pagination
+                  :visible-columns="
+                    {
+                      product: tbControl.product.fieldSelected,
+                      service: tbControl.service.fieldSelected,
+                    }[productAndServiceTab]
+                  "
+                >
+                  <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"
                     >
-                      {{ $t(col.label) }}
-                    </q-th>
-                    <q-th auto-width />
-                  </q-tr>
-                </template>
+                      <q-td
+                        v-if="
+                          {
+                            product: tbControl.product.fieldSelected,
 
-                <template v-slot:body="props">
-                  <q-tr
-                    :class="{
-                      'app-text-muted': props.row.status === 'INACTIVE',
-                    }"
-                    :props="props"
-                  >
-                    <q-td
-                      v-if="
-                        {
-                          product: tbControl.product.fieldSelected,
-
-                          service: tbControl.service.fieldSelected,
-                        }[productAndServiceTab].includes(
-                          { product: 'productName', service: 'serviceName' }[
-                            productAndServiceTab
-                          ],
-                        )
-                      "
-                    >
-                      <div class="row items-center">
-                        <div
-                          :class="{
-                            'status-active': props.row.status !== 'INACTIVE',
-                            'status-inactive': props.row.status === 'INACTIVE',
-                          }"
-                          style="
-                            width: 50px;
-                            display: flex;
-                            margin-bottom: var(--size-2);
-                          "
-                        >
+                            service: tbControl.service.fieldSelected,
+                          }[productAndServiceTab].includes(
+                            {
+                              product: 'productName',
+                              service: 'serviceName',
+                            }[productAndServiceTab],
+                          )
+                        "
+                      >
+                        <div class="row items-center">
                           <div
-                            class="table__icon"
-                            :class="`icon-color-${productAndServiceTab === 'product' ? 'green' : 'orange'}`"
+                            :class="{
+                              'status-active': props.row.status !== 'INACTIVE',
+                              'status-inactive':
+                                props.row.status === 'INACTIVE',
+                            }"
+                            style="
+                              width: 50px;
+                              display: flex;
+                              margin-bottom: var(--size-2);
+                            "
                           >
-                            <q-icon
-                              size="md"
-                              style="scale: 0.8"
-                              :name="
-                                productAndServiceTab === 'product'
-                                  ? 'mdi-folder'
-                                  : 'mdi-server-network'
-                              "
-                            />
+                            <div
+                              class="table__icon"
+                              :class="`icon-color-${productAndServiceTab === 'product' ? 'green' : 'orange'}`"
+                            >
+                              <q-icon
+                                size="md"
+                                style="scale: 0.8"
+                                :name="
+                                  productAndServiceTab === 'product'
+                                    ? 'mdi-folder'
+                                    : 'mdi-server-network'
+                                "
+                              />
+                            </div>
+                          </div>
+                          <div class="col">
+                            <div class="col">{{ props.row.name }}</div>
+                            <div class="col app-text-muted">
+                              {{ props.row.code }}
+                            </div>
                           </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="
-                        {
-                          product: tbControl.product.fieldSelected,
-                          service: tbControl.service.fieldSelected,
-                        }[productAndServiceTab].includes(
+                      </q-td>
+                      <q-td
+                        v-if="
                           {
-                            product: 'productDetail',
-                            service: 'serviceDetail',
-                          }[productAndServiceTab],
-                        )
-                      "
-                    >
-                      {{ props.row.detail }}
-                    </q-td>
-                    <q-td
-                      v-if="
-                        {
-                          product: tbControl.product.fieldSelected,
-                          service: tbControl.service.fieldSelected,
-                        }[productAndServiceTab].includes(
+                            product: tbControl.product.fieldSelected,
+                            service: tbControl.service.fieldSelected,
+                          }[productAndServiceTab].includes(
+                            {
+                              product: 'productDetail',
+                              service: 'serviceDetail',
+                            }[productAndServiceTab],
+                          )
+                        "
+                      >
+                        {{ props.row.detail }}
+                      </q-td>
+                      <q-td
+                        v-if="
                           {
-                            product: 'productProcessingTime',
-                            service: 'serviceWorkTotal',
-                          }[productAndServiceTab],
-                        )
-                      "
-                    >
-                      {{
-                        {
-                          product: props.row.process,
-                          service: props.row.work?.length,
-                        }[productAndServiceTab]
-                      }}
-                    </q-td>
-                    <q-td
-                      v-if="
-                        {
-                          product: tbControl.product.fieldSelected,
-                          service: tbControl.service.fieldSelected,
-                        }[productAndServiceTab].includes(
+                            product: tbControl.product.fieldSelected,
+                            service: tbControl.service.fieldSelected,
+                          }[productAndServiceTab].includes(
+                            {
+                              product: 'productProcessingTime',
+                              service: 'serviceWorkTotal',
+                            }[productAndServiceTab],
+                          )
+                        "
+                      >
+                        {{
                           {
-                            product: 'priceInformation',
-                            service: 'empty',
-                          }[productAndServiceTab],
-                        )
-                      "
-                    >
-                      <div
-                        class="row tags-color-green q-gutter-x-md no-wrap items-center text-right"
+                            product: props.row.process,
+                            service: props.row.work?.length,
+                          }[productAndServiceTab]
+                        }}
+                      </q-td>
+                      <q-td
+                        v-if="
+                          {
+                            product: tbControl.product.fieldSelected,
+                            service: tbControl.service.fieldSelected,
+                          }[productAndServiceTab].includes(
+                            {
+                              product: 'priceInformation',
+                              service: 'empty',
+                            }[productAndServiceTab],
+                          )
+                        "
                       >
                         <div
-                          class="tags col-3 column ellipsis-2-lines"
-                          style="min-width: 50px"
+                          class="row tags-color-green q-gutter-x-md no-wrap items-center text-right"
                         >
-                          <div class="col-4">{{ $t('salePrice') }}</div>
-                          <div class="col-4 text-weight-bold">
-                            {{ formatNumberDecimal(props.row.price || 0, 2) }}
+                          <div
+                            class="tags col-3 column ellipsis-2-lines"
+                            style="min-width: 50px"
+                          >
+                            <div class="col-4">{{ $t('salePrice') }}</div>
+                            <div class="col-4 text-weight-bold">
+                              {{ formatNumberDecimal(props.row.price || 0, 2) }}
+                            </div>
+                          </div>
+                          <div
+                            class="tags col-3 column ellipsis-2-lines"
+                            style="min-width: 50px"
+                          >
+                            <div class="col-4">{{ $t('agentPrice') }}</div>
+                            <div class="col-4 text-weight-bold">
+                              {{
+                                formatNumberDecimal(
+                                  props.row.agentPrice || 0,
+                                  2,
+                                )
+                              }}
+                            </div>
+                          </div>
+                          <div
+                            class="tags col-3 column ellipsis-2-lines"
+                            style="min-width: 50px"
+                          >
+                            <div class="col-4">
+                              {{ $t('processingPrice') }}
+                            </div>
+                            <div class="col-4 text-weight-bold">
+                              {{
+                                formatNumberDecimal(
+                                  props.row.serviceCharge || 0,
+                                  2,
+                                )
+                              }}
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="tags col-3 column ellipsis-2-lines"
-                          style="min-width: 50px"
-                        >
-                          <div class="col-4">{{ $t('agentPrice') }}</div>
-                          <div class="col-4 text-weight-bold">
-                            {{
-                              formatNumberDecimal(props.row.agentPrice || 0, 2)
-                            }}
-                          </div>
-                        </div>
-                        <div
-                          class="tags col-3 column ellipsis-2-lines"
-                          style="min-width: 50px"
-                        >
-                          <div class="col-4">{{ $t('processingPrice') }}</div>
-                          <div class="col-4 text-weight-bold">
-                            {{
-                              formatNumberDecimal(
-                                props.row.serviceCharge || 0,
-                                2,
-                              )
-                            }}
-                          </div>
-                        </div>
-                      </div>
-                    </q-td>
+                      </q-td>
 
-                    <q-td
-                      v-if="
-                        {
-                          product: tbControl.product.fieldSelected,
-                          service: tbControl.service.fieldSelected,
-                        }[productAndServiceTab].includes('createdAt')
-                      "
-                    >
-                      {{ dateFormat(props.row.createdAt) }}
-                    </q-td>
-                    <q-td>
-                      <q-btn
-                        icon="mdi-eye-outline"
-                        size="sm"
-                        dense
-                        round
-                        flat
-                        @click.stop="
+                      <q-td
+                        v-if="
+                          {
+                            product: tbControl.product.fieldSelected,
+                            service: tbControl.service.fieldSelected,
+                          }[productAndServiceTab].includes('createdAt')
+                        "
+                      >
+                        {{ dateFormat(props.row.createdAt) }}
+                      </q-td>
+                      <q-td>
+                        <q-btn
+                          icon="mdi-eye-outline"
+                          size="sm"
+                          dense
+                          round
+                          flat
+                          @click.stop="
+                            async () => {
+                              if (props.row.type === 'product') {
+                                currentIdProduct = props.row.id;
+                                assignFormDataProduct(props.row);
+                                dialogProductEdit = true;
+                              }
+                              if (props.row.type === 'service') {
+                                currentIdService = props.row.id;
+                                infoServiceEdit = false;
+                                assignFormDataProductService(props.row.id);
+                                dialogServiceEdit = true;
+                              }
+                              await fetchListOfOptionBranch();
+                            }
+                          "
+                        />
+
+                        <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="
+                                  async () => {
+                                    if (props.row.type === 'product') {
+                                      currentIdProduct = props.row.id;
+                                      assignFormDataProduct(props.row);
+                                      dialogProductEdit = true;
+                                    }
+                                    if (props.row.type === 'service') {
+                                      currentIdService = props.row.id;
+                                      infoServiceEdit = false;
+                                      assignFormDataProductService(
+                                        props.row.id,
+                                      );
+                                      dialogServiceEdit = true;
+                                    }
+                                    await fetchListOfOptionBranch();
+                                  }
+                                "
+                                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="
+                                  async () => {
+                                    if (props.row.type === 'product') {
+                                      currentIdProduct = props.row.id;
+                                      infoProductEdit = true;
+                                      assignFormDataProduct(props.row);
+                                      dialogProductEdit = true;
+                                    }
+                                    if (props.row.type === 'service') {
+                                      currentIdService = props.row.id;
+                                      infoServiceEdit = true;
+                                      assignFormDataProductService(
+                                        props.row.id,
+                                      );
+                                      dialogServiceEdit = true;
+                                    }
+
+                                    await fetchListOfOptionBranch();
+                                  }
+                                "
+                              >
+                                <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="
+                                  () => {
+                                    if (props.row.type === 'product') {
+                                      deleteTypeOfProduct(props.row.id);
+                                    }
+                                    if (props.row.type === 'service') {
+                                      deleteServiceById(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="
+                                        () => {
+                                          if (props.row.type === 'product') {
+                                            toggleStatusProduct(
+                                              props.row.id,
+                                              props.row.status,
+                                            );
+                                          }
+                                          if (props.row.type === 'service') {
+                                            toggleStatusService(
+                                              props.row.id,
+                                              props.row.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="{ row }">
+                    <div class="col-12 col-md-4 col-lg-2">
+                      <TotalProductCardComponent
+                        :data="row"
+                        :key="row.id"
+                        :title="row.name"
+                        :isDisabled="row.status === 'INACTIVE' ? true : false"
+                        @toggleStatus="
+                          () => {
+                            if (row.type === 'product') {
+                              toggleStatusProduct(row.id, row.status);
+                            }
+                            if (row.type === 'service') {
+                              toggleStatusService(row.id, row.status);
+                            }
+                          }
+                        "
+                        @menuViewDetail="
                           async () => {
-                            if (props.row.type === 'product') {
-                              currentIdProduct = props.row.id;
-                              assignFormDataProduct(props.row);
+                            if (row.type === 'product') {
+                              currentIdProduct = row.id;
+                              assignFormDataProduct(row);
                               dialogProductEdit = true;
                             }
-                            if (props.row.type === 'service') {
-                              currentIdService = props.row.id;
+                            if (row.type === 'service') {
+                              currentIdService = row.id;
                               infoServiceEdit = false;
-                              assignFormDataProductService(props.row.id);
+                              assignFormDataProductService(row.id);
                               dialogServiceEdit = true;
                             }
                             await fetchListOfOptionBranch();
                           }
                         "
+                        @menuEdit="
+                          async () => {
+                            if (row.type === 'product') {
+                              currentIdProduct = row.id;
+                              infoProductEdit = true;
+                              assignFormDataProduct(row);
+                              dialogProductEdit = true;
+                            }
+                            if (row.type === 'service') {
+                              currentIdService = row.id;
+                              infoServiceEdit = true;
+                              assignFormDataProductService(row.id);
+                              dialogServiceEdit = true;
+                            }
+
+                            await fetchListOfOptionBranch();
+                          }
+                        "
                       />
-
-                      <q-btn
-                        icon="mdi-dots-vertical"
-                        size="sm"
-                        dense
-                        round
-                        flat
-                        @click.stop
+                    </div>
+                  </template>
+                </q-table>
+              </div>
+            </div>
+          </template>
+          <!-- footer -->
+          <div
+            class="row items-center justify-between q-py-sm q-px-md surface-2"
+          >
+            <div class="col-4">
+              <div class="row items-center">
+                <div class="app-text-muted" style="width: 80px">
+                  {{ $t('showing') }}
+                </div>
+                <div>
+                  <q-btn-dropdown
+                    dense
+                    unelevated
+                    :label="pageSizeServiceAndProduct"
+                    class="bordered q-pl-md"
+                  >
+                    <q-list>
+                      <q-item
+                        v-for="v in [10, 30, 50, 100, 500, 1000]"
+                        :key="v"
+                        clickable
+                        v-close-popup
+                        @click="
+                          async () => {
+                            pageSizeServiceAndProduct = v;
+                            await fetchListOfProductAndService();
+                          }
+                        "
                       >
-                        <q-menu class="bordered">
-                          <q-list v-close-popup>
-                            <q-item
-                              :id="`view-detail-btn-${props.row.name}-view`"
-                              @click.stop="
-                                async () => {
-                                  if (props.row.type === 'product') {
-                                    currentIdProduct = props.row.id;
-                                    assignFormDataProduct(props.row);
-                                    dialogProductEdit = true;
-                                  }
-                                  if (props.row.type === 'service') {
-                                    currentIdService = props.row.id;
-                                    infoServiceEdit = false;
-                                    assignFormDataProductService(props.row.id);
-                                    dialogServiceEdit = true;
-                                  }
-                                  await fetchListOfOptionBranch();
-                                }
-                              "
-                              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="
-                                async () => {
-                                  if (props.row.type === 'product') {
-                                    currentIdProduct = props.row.id;
-                                    infoProductEdit = true;
-                                    assignFormDataProduct(props.row);
-                                    dialogProductEdit = true;
-                                  }
-                                  if (props.row.type === 'service') {
-                                    currentIdService = props.row.id;
-                                    infoServiceEdit = true;
-                                    assignFormDataProductService(props.row.id);
-                                    dialogServiceEdit = true;
-                                  }
-
-                                  await fetchListOfOptionBranch();
-                                }
-                              "
-                            >
-                              <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="
-                                () => {
-                                  if (props.row.type === 'product') {
-                                    deleteTypeOfProduct(props.row.id);
-                                  }
-                                  if (props.row.type === 'service') {
-                                    deleteServiceById(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="
-                                      () => {
-                                        if (props.row.type === 'product') {
-                                          toggleStatusProduct(
-                                            props.row.id,
-                                            props.row.status,
-                                          );
-                                        }
-                                        if (props.row.type === 'service') {
-                                          toggleStatusService(
-                                            props.row.id,
-                                            props.row.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="{ row }">
-                  <div class="col-12 col-md-4 col-lg-2">
-                    <TotalProductCardComponent
-                      :data="row"
-                      :key="row.id"
-                      :title="row.name"
-                      :isDisabled="row.status === 'INACTIVE' ? true : false"
-                      @toggleStatus="
-                        () => {
-                          if (row.type === 'product') {
-                            toggleStatusProduct(row.id, row.status);
-                          }
-                          if (row.type === 'service') {
-                            toggleStatusService(row.id, row.status);
-                          }
-                        }
-                      "
-                      @menuViewDetail="
-                        async () => {
-                          if (row.type === 'product') {
-                            currentIdProduct = row.id;
-                            assignFormDataProduct(row);
-                            dialogProductEdit = true;
-                          }
-                          if (row.type === 'service') {
-                            currentIdService = row.id;
-                            infoServiceEdit = false;
-                            assignFormDataProductService(row.id);
-                            dialogServiceEdit = true;
-                          }
-                          await fetchListOfOptionBranch();
-                        }
-                      "
-                      @menuEdit="
-                        async () => {
-                          if (row.type === 'product') {
-                            currentIdProduct = row.id;
-                            infoProductEdit = true;
-                            assignFormDataProduct(row);
-                            dialogProductEdit = true;
-                          }
-                          if (row.type === 'service') {
-                            currentIdService = row.id;
-                            infoServiceEdit = true;
-                            assignFormDataProductService(row.id);
-                            dialogServiceEdit = true;
-                          }
-
-                          await fetchListOfOptionBranch();
-                        }
-                      "
-                    />
-                  </div>
-                </template>
-              </q-table>
-            </div>
-          </div>
-        </template>
-        <!-- footer -->
-        <div class="row items-center justify-between q-py-sm q-px-md surface-2">
-          <div class="col-4">
-            <div class="row items-center">
-              <div class="app-text-muted" style="width: 80px">
-                {{ $t('showing') }}
-              </div>
-              <div>
-                <q-btn-dropdown
-                  dense
-                  unelevated
-                  :label="pageSizeServiceAndProduct"
-                  class="bordered q-pl-md"
-                >
-                  <q-list>
-                    <q-item
-                      v-for="v in [10, 30, 50, 100, 500, 1000]"
-                      :key="v"
-                      clickable
-                      v-close-popup
-                      @click="
-                        async () => {
-                          pageSizeServiceAndProduct = v;
-                          await fetchListOfProductAndService();
-                        }
-                      "
-                    >
-                      <q-item-section>
-                        <q-item-label>{{ v }}</q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-btn-dropdown>
+                        <q-item-section>
+                          <q-item-label>{{ v }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-btn-dropdown>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div class="col-4 row justify-center app-text-muted">
-            {{
-              $t('recordsPage', {
-                resultcurrentPage:
-                  productAndServiceTab === 'product'
-                    ? product?.length
-                    : service?.length,
-                total: total,
-              })
-            }}
-          </div>
-          <div class="col-4 row justify-end">
-            <PaginationComponent
-              v-model:current-page="currentPageServiceAndProduct"
-              v-model:max-page="maxPageServiceAndProduct"
-              :fetch-data="
-                async () => {
-                  await alternativeFetch();
-                  flowStore.rotate();
-                }
-              "
-            />
+            <div class="col-4 row justify-center app-text-muted">
+              {{
+                $t('recordsPage', {
+                  resultcurrentPage:
+                    productAndServiceTab === 'product'
+                      ? product?.length
+                      : service?.length,
+                  total: total,
+                })
+              }}
+            </div>
+            <div class="col-4 row justify-end">
+              <PaginationComponent
+                v-model:current-page="currentPageServiceAndProduct"
+                v-model:max-page="maxPageServiceAndProduct"
+                :fetch-data="
+                  async () => {
+                    await alternativeFetch();
+                    flowStore.rotate();
+                  }
+                "
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </div>
+    </template>
+  </q-splitter>
 
   <FormDialog
     v-model:modal="dialogInputForm"