From 1250eb6bc7745ed6360f5228b150a6258df683d4 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 17 Jul 2024 07:32:56 +0000
Subject: [PATCH] fix: 04 layout

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

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 0d877b40..6fc3b255 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -773,7 +773,7 @@ async function deleteProductById(productId?: string) {
     persistent: true,
     message: t('deleteConfirmMessage'),
     action: async () => {
-      if (editByTree !== undefined) {
+      if (editByTree.value !== undefined) {
         if (editByTree.value === 'type') {
           // Product Type
           await deleteProductServiceType(productId ?? currentIdType.value);
@@ -1343,7 +1343,7 @@ watch(inputSearchProductAndService, async () => {
     ></q-fab-action>
   </ButtonAddComponent>
 
-  <div class="full-height overflow-hidden">
+  <div class="full-height column no-wrap">
     <div class="text-body-2 q-mb-xs flex items-center">
       {{ $t('dataSum') }}
       <q-btn
@@ -1373,840 +1373,450 @@ watch(inputSearchProductAndService, async () => {
       </div>
     </transition>
 
-    <q-splitter
-      v-model="splitterModel"
-      :limits="[20, 100]"
-      style="width: 100%; height: 100%"
-      after-class="overflow-hidden"
+    <div
+      class="column col rounded bordered"
+      style="flex-wrap: nowrap; 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: ${$q.screen.lt.md ? '20%' : '56px'}`"
-          >
-            <div class="col">จัดการสาขาทั้งหมด</div>
-          </div>
-
-          <div class="col" style="position: relative">
+      <q-splitter
+        v-model="splitterModel"
+        :limits="[20, 100]"
+        style="width: 100%"
+        class="col"
+        after-class="overflow-hidden"
+      >
+        <template v-slot:before>
+          <div class="surface-1 column full-height">
             <div
-              class="q-pa-md scroll surface-1"
-              style="position: absolute; inset: 0"
+              class="row bordered-b surface-3 q-px-md q-py-sm text-weight-bold items-center"
+              :style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
             >
-              <q-tree
-                :nodes="treeProductTypeAndGroup"
-                node-key="id"
-                label-key="name"
-                children-key="children"
-                v-model:expanded="expandedTree"
+              <div class="col">จัดการสาขาทั้งหมด</div>
+            </div>
+
+            <div class="col" style="position: relative">
+              <div
+                class="q-pa-md scroll surface-1"
+                style="position: absolute; inset: 0"
               >
-                <template #default-header="{ node }">
-                  <div
-                    @click.stop="
-                      async () => {
-                        if (node.type === 'group' && node._count.type > 0) {
-                          pathGroupName = node.name;
-                          currentId = node.id;
-
-                          await fetchListType();
-                          expandedTree.push(node.id);
-                          flowStore.rotate();
-                        }
-                      }
-                    "
-                    class="column full-width items-center no-wrap"
-                    :class="{
-                      'cursor-pointer':
-                        node.type === 'group' && node._count.type > 0,
-                      'selector-tree':
-                        node.type === 'group' && node._count.type > 0,
-                    }"
-                  >
-                    <div class="col row full-width">
-                      <div class="col-9">{{ node.name }}</div>
-                      <div class="col no-wrap">
-                        <q-btn
-                          icon="mdi-eye-outline"
-                          :id="`btn-tree-eye-${node.name}`"
-                          size="sm"
-                          dense
-                          round
-                          flat
-                          @click.stop="
-                            () => {
-                              if (node.type === 'type') {
-                                editByTree = 'type';
-                                currentStatusProduct =
-                                  node.status === 'INACTIVE';
-                                clearFormGroup();
-                                currentIdType = node.id;
-                                assignFormDataGroup(node);
-                                isEdit = false;
-                                drawerInfo = true;
-                              }
-                              if (node.type === 'group') {
-                                editByTree = 'group';
-                                currentStatusProduct =
-                                  node.status === 'INACTIVE';
-                                clearFormGroup();
-                                assignFormDataGroup(node);
-                                isEdit = false;
-                                currentId = node.id;
-                                drawerInfo = true;
-                              }
-                            }
-                          "
-                        />
-
-                        <q-btn
-                          icon="mdi-dots-vertical"
-                          :id="`btn-tree-dots-${node.name}`"
-                          size="sm"
-                          dense
-                          round
-                          flat
-                          @click.stop
-                          :key="node.id"
-                        >
-                          <q-menu class="bordered">
-                            <q-list v-close-popup>
-                              <q-item
-                                v-close-popup
-                                clickable
-                                :id="`view-detail-btn-${node.name}-view`"
-                                @click.stop="
-                                  () => {
-                                    editByTree = node.type;
-                                    if (node.type === 'type') {
-                                      currentStatusProduct =
-                                        node.status === 'INACTIVE';
-                                      clearFormGroup();
-                                      currentIdType = node.id;
-                                      assignFormDataGroup(node);
-                                      isEdit = false;
-                                      drawerInfo = true;
-                                    }
-                                    if (node.type === 'group') {
-                                      currentStatusProduct =
-                                        node.status === 'INACTIVE';
-                                      clearFormGroup();
-                                      assignFormDataGroup(node);
-                                      isEdit = false;
-                                      currentId = node.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-${node.name}-edit`"
-                                v-close-popup
-                                clickable
-                                dense
-                                class="row q-py-sm"
-                                style="white-space: nowrap"
-                                @click.stop="
-                                  () => {
-                                    editByTree = node.type;
-                                    if (node.type === 'type') {
-                                      clearFormGroup();
-                                      currentIdType = node.id;
-                                      assignFormDataGroup(node);
-                                      isEdit = true;
-                                      drawerInfo = true;
-                                    }
-                                    if (node.type === 'group') {
-                                      clearFormGroup();
-                                      assignFormDataGroup(node);
-                                      isEdit = true;
-                                      currentId = node.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-${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.stop="
-                                  () => {
-                                    editByTree = node.type;
-
-                                    if (node.type === 'type') {
-                                      deleteProductById(node.id);
-                                    }
-                                    if (node.type === 'group') {
-                                      deleteProductById(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.stop="
-                                        async () => {
-                                          if (node.type === 'type') {
-                                            toggleStatusType(
-                                              node.id,
-                                              node.status,
-                                            );
-                                          }
-                                          if (node.type === 'group') {
-                                            toggleStatusGroup(
-                                              node.id,
-                                              node.status,
-                                            );
-                                          }
-                                        }
-                                      "
-                                      :model-value="node.status !== 'INACTIVE'"
-                                    />
-                                  </div>
-                                </q-item-section>
-                              </q-item>
-                            </q-list>
-                          </q-menu>
-                        </q-btn>
-                      </div>
-                    </div>
-
-                    <div class="col row full-width">
-                      <div class="col- app-text-muted">{{ node.code }}</div>
-                    </div>
-                  </div>
-                </template>
-              </q-tree>
-            </div>
-          </div>
-        </div>
-      </template>
-
-      <template v-slot:after>
-        <div class="column no-wrap full-height">
-          <!-- group/type -->
-          <div
-            v-if="productMode === 'group' || productMode === 'type'"
-            class="surface-2 items-center full-width full-height justify-between"
-          >
-            <div
-              class="q-px-md row bordered-b justify-between items-center"
-              :class="{ ' ': $q.screen.lt.md }"
-              :style="`height: ${$q.screen.lt.md ? '20%' : '56px'}`"
-            >
-              <q-input
-                :class="{ 'col-12': $q.screen.lt.md }"
-                outlined
-                dense
-                unelavated
-                :label="$t('search')"
-                class=""
-                :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-                v-model="inputSearch"
-                debounce="250"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="mdi-magnify" />
-                </template>
-              </q-input>
-
-              <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-tree
+                  :nodes="treeProductTypeAndGroup"
+                  node-key="id"
+                  label-key="name"
+                  children-key="children"
+                  v-model:expanded="expandedTree"
                 >
-                  <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
-              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="surface-1 col flex q-pa-md scroll full-width">
-                <q-table
-                  :style="`height: ${hideStat ? '60dvh' : '50vh'}`"
-                  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"
-                      @click="
+                  <template #default-header="{ node }">
+                    <div
+                      @click.stop="
                         async () => {
-                          filterStat.push(productMode);
-                          if (productMode === 'type') {
-                            pathTypeName = props.row.name;
-                            currentIdType = props.row.id;
-                            productMode = 'service';
-                            productAndServiceTab = 'service';
+                          if (node.type === 'group' && node._count.type > 0) {
+                            pathGroupName = node.name;
+                            currentId = node.id;
 
-                            await fetchListOfProduct();
-                            await fetchListOfService();
-                            await fetchListOfProductAndService();
-                            flowStore.rotate();
-                          }
-                          if (productMode === 'group') {
-                            pathGroupName = props.row.name;
-                            currentId = props.row.id;
-                            productMode = 'type';
                             await fetchListType();
+                            expandedTree.push(node.id);
                             flowStore.rotate();
                           }
                         }
                       "
+                      class="column full-width items-center no-wrap"
+                      :class="{
+                        'cursor-pointer':
+                          node.type === 'group' && node._count.type > 0,
+                        'selector-tree':
+                          node.type === 'group' && node._count.type > 0,
+                      }"
                     >
-                      <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="col row full-width">
+                        <div class="col-9">{{ node.name }}</div>
+                        <div class="col no-wrap">
+                          <q-btn
+                            icon="mdi-eye-outline"
+                            :id="`btn-tree-eye-${node.name}`"
+                            size="sm"
+                            dense
+                            round
+                            flat
+                            @click.stop="
+                              () => {
+                                if (node.type === 'type') {
+                                  editByTree = 'type';
+                                  currentStatusProduct =
+                                    node.status === 'INACTIVE';
+                                  clearFormGroup();
+                                  currentIdType = node.id;
+                                  assignFormDataGroup(node);
+                                  isEdit = false;
+                                  drawerInfo = true;
+                                }
+                                if (node.type === 'group') {
+                                  editByTree = 'group';
+                                  currentStatusProduct =
+                                    node.status === 'INACTIVE';
+                                  clearFormGroup();
+                                  assignFormDataGroup(node);
+                                  isEdit = false;
+                                  currentId = node.id;
+                                  drawerInfo = true;
+                                }
+                              }
                             "
+                          />
+
+                          <q-btn
+                            icon="mdi-dots-vertical"
+                            :id="`btn-tree-dots-${node.name}`"
+                            size="sm"
+                            dense
+                            round
+                            flat
+                            @click.stop
+                            :key="node.id"
                           >
-                            <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"
-                          :id="`btn-eye-${props.row.name}`"
-                          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"
-                          :id="`btn-dots-${props.row.name}`"
-                          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;
+                            <q-menu class="bordered">
+                              <q-list v-close-popup>
+                                <q-item
+                                  v-close-popup
+                                  clickable
+                                  :id="`view-detail-btn-${node.name}-view`"
+                                  @click.stop="
+                                    () => {
+                                      editByTree = node.type;
+                                      if (node.type === 'type') {
+                                        currentStatusProduct =
+                                          node.status === 'INACTIVE';
+                                        clearFormGroup();
+                                        currentIdType = node.id;
+                                        assignFormDataGroup(node);
+                                        isEdit = false;
+                                        drawerInfo = true;
+                                      }
+                                      if (node.type === 'group') {
+                                        currentStatusProduct =
+                                          node.status === 'INACTIVE';
+                                        clearFormGroup();
+                                        assignFormDataGroup(node);
+                                        isEdit = false;
+                                        currentId = node.id;
+                                        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>
+                                  "
+                                  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;
+                                <q-item
+                                  :id="`view-detail-btn-${node.name}-edit`"
+                                  v-close-popup
+                                  clickable
+                                  dense
+                                  class="row q-py-sm"
+                                  style="white-space: nowrap"
+                                  @click.stop="
+                                    () => {
+                                      editByTree = node.type;
+                                      if (node.type === 'type') {
+                                        clearFormGroup();
+                                        currentIdType = node.id;
+                                        assignFormDataGroup(node);
+                                        isEdit = true;
+                                        drawerInfo = true;
+                                      }
+                                      if (node.type === 'group') {
+                                        clearFormGroup();
+                                        assignFormDataGroup(node);
+                                        isEdit = true;
+                                        currentId = node.id;
 
-                                      drawerInfo = true;
+                                        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"
+                                  "
+                                >
+                                  <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-${node.name}-delete`"
+                                  dense
+                                  :clickable="node.status === 'CREATED'"
+                                  class="row"
                                   :class="{
-                                    'app-text-negative':
-                                      props.row.status === 'CREATED',
+                                    'surface-3': node.status !== 'CREATED',
+                                    'app-text-muted': node.status !== 'CREATED',
                                   }"
-                                />
-                                <span class="col-9 q-px-md flex items-center">
-                                  {{ $t('delete') }}
-                                </span>
-                              </q-item>
+                                  style="white-space: nowrap"
+                                  @click.stop="
+                                    () => {
+                                      editByTree = node.type;
 
-                              <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 (node.type === 'type') {
+                                        deleteProductById(node.id);
+                                      }
+                                      if (node.type === 'group') {
+                                        deleteProductById(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.stop="
+                                          async () => {
+                                            if (node.type === 'type') {
+                                              toggleStatusType(
+                                                node.id,
+                                                node.status,
+                                              );
+                                            }
+                                            if (node.type === 'group') {
+                                              toggleStatusGroup(
+                                                node.id,
+                                                node.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>
+                                        "
+                                        :model-value="
+                                          node.status !== 'INACTIVE'
+                                        "
+                                      />
+                                    </div>
+                                  </q-item-section>
+                                </q-item>
+                              </q-list>
+                            </q-menu>
+                          </q-btn>
+                        </div>
+                      </div>
+
+                      <div class="col row full-width">
+                        <div class="col- app-text-muted">{{ node.code }}</div>
+                      </div>
+                    </div>
                   </template>
+                </q-tree>
+              </div>
+            </div>
+          </div>
+        </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;
+        <template v-slot:after>
+          <div class="column no-wrap full-height">
+            <!-- group/type -->
+            <div
+              v-if="productMode === 'group' || productMode === 'type'"
+              class="surface-2 items-center full-width full-height column col"
+            >
+              <!-- tool bar -->
+              <div
+                class="row q-py-sm q-px-md justify-between full-width surface-3 bordered-b"
+              >
+                <q-input
+                  for="input-search"
+                  outlined
+                  :class="{ 'col-12': $q.screen.lt.md }"
+                  dense
+                  :label="$t('search')"
+                  class=""
+                  :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+                  v-model="inputSearch"
+                  debounce="200"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="mdi-magnify" />
+                  </template>
+                </q-input>
 
-                              drawerInfo = true;
-                            }
-                          }
-                        "
-                        @deleteCard="
-                          () => {
-                            if (productMode === 'type') {
-                              deleteProductById(props.row.id);
-                            }
-                            if (productMode === 'group') {
-                              deleteProductById(props.row.id);
-                            }
-                          }
-                        "
-                        @on-click="
+                <div
+                  class="row col-12 col-md-6"
+                  :class="{ 'q-pt-xs': $q.screen.lt.md }"
+                  style="white-space: nowrap"
+                >
+                  <q-select
+                    v-model="currentStatus"
+                    outlined
+                    dense
+                    option-value="value"
+                    option-label="label"
+                    class="col"
+                    map-options
+                    emit-value
+                    :options="[
+                      { label: $t('all'), value: 'All' },
+                      { label: $t('statusACTIVE'), value: 'ACTIVE' },
+                      {
+                        label: $t('statusINACTIVE'),
+                        value: 'INACTIVE',
+                      },
+                    ]"
+                  ></q-select>
+
+                  <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"
+                    class="col q-mx-sm"
+                    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
+                v-if="
+                  ((productMode === 'type' && productType?.length === 0) ||
+                    (productGroup?.length === 0 && productMode === 'group')) &&
+                  stat[0].count !== undefined
+                "
+                class="items-center justify-center full-width flex col"
+              >
+                <NoData :not-found="!!inputSearch" />
+              </div>
+
+              <template v-else>
+                <div class="surface-2 q-pa-md scroll col 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"
+                        @click="
                           async () => {
                             filterStat.push(productMode);
                             if (productMode === 'type') {
@@ -2229,874 +1839,1259 @@ watch(inputSearchProductAndService, async () => {
                             }
                           }
                         "
-                      />
-                    </div>
-                  </template>
-                </q-table>
-              </div>
-
-              <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-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"
+                            :id="`btn-eye-${props.row.name}`"
+                            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"
+                            :id="`btn-dots-${props.row.name}`"
+                            size="sm"
+                            dense
+                            round
+                            flat
+                            @click.stop
+                            :key="props.row.id"
                           >
-                            <q-item-section>
-                              <q-item-label>{{ v }}</q-item-label>
-                            </q-item-section>
-                          </q-item>
-                        </q-list>
-                      </q-btn-dropdown>
-                    </div>
-                  </div>
-                </div>
+                            <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>
 
-                <div class="col-4 row justify-center app-text-muted">
-                  {{
-                    $t('recordsPage', {
-                      resultcurrentPage: productGroup?.length,
-                      total: totalGroup,
-                    })
-                  }}
-                </div>
+                                <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;
 
-                <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>
+                                        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>
 
-              <div
-                v-if="productMode === 'type'"
-                class="row justify-between items-center 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="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;
+                                <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();
                               }
-                            "
-                          >
-                            <q-item-section>
-                              <q-item-label>{{ v }}</q-item-label>
-                            </q-item-section>
-                          </q-item>
-                        </q-list>
-                      </q-btn-dropdown>
+                            }
+                          "
+                        />
+                      </div>
+                    </template>
+                  </q-table>
+                </div>
+
+                <div
+                  v-if="productMode === 'group'"
+                  class="row items-center justify-between q-px-md q-py-sm full-width"
+                >
+                  <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 class="col-4 row justify-center app-text-muted">
-                  {{
-                    $t('recordsPage', {
-                      resultcurrentPage: productType?.length,
-                      total: totalType,
-                    })
-                  }}
+                <div
+                  v-if="productMode === 'type'"
+                  class="row justify-between items-center q-px-md q-py-sm full-width"
+                >
+                  <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>
-                <div class="col-4 row justify-end">
-                  <PaginationComponent
-                    v-model:current-page="currentPageType"
-                    v-model:max-page="maxPageType"
-                    :fetch-data="
+              </template>
+            </div>
+
+            <!-- product/service -->
+            <div
+              v-else-if="productMode === 'service'"
+              class="surface-1 col column no-wrap"
+              style="overflow: hidden"
+            >
+              <div
+                class="row justify-between items-center q-px-md q-py-sm surface-3 bordered-b"
+              >
+                <q-input
+                  :class="{ 'col-12': $q.screen.lt.md }"
+                  outlined
+                  dense
+                  unelavated
+                  :label="$t('search')"
+                  :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
+                  class="row col-12 col-md-6"
+                  :class="{ 'q-pt-xs': $q.screen.lt.md }"
+                  style="white-space: nowrap"
+                >
+                  <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 col"
+                    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"
+                    class="col q-mx-sm"
+                    :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>
+
+              <div class="surface-2 bordered-b q-px-md">
+                <q-tabs
+                  dense
+                  v-model="productAndServiceTab"
+                  active-color="info"
+                  align="left"
+                >
+                  <q-tab
+                    name="service"
+                    @click="
                       async () => {
-                        await fetchListType();
+                        currentPageServiceAndProduct = 1;
+                        inputSearchProductAndService = '';
+                        currentStatus = 'All';
+                        // await fetchListOfService();
                         flowStore.rotate();
                       }
                     "
-                  />
-                </div>
+                  >
+                    <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>
-            </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 ; height: ${$q.screen.lt.md ? '20%' : '56px'}`"
-            >
-              <q-input
-                :class="{ 'col-12': $q.screen.lt.md }"
-                outlined
-                dense
-                unelavated
-                :label="$t('search')"
-                class="q-mr-md"
-                :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-                v-model="inputSearchProductAndService"
-                debounce="250"
+              <div
+                v-if="
+                  (productAndServiceTab === 'product' &&
+                    product?.length === 0) ||
+                  (productAndServiceTab === 'service' && service?.length === 0)
+                "
+                class="flex justify-center items-center surface-2 col"
               >
-                <template v-slot:prepend>
-                  <q-icon name="mdi-magnify" />
-                </template>
-              </q-input>
-
-              <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>
+                <NoData :not-found="!!inputSearchProductAndService" />
               </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();
-                  }
-                "
-              >
+              <!-- tab -->
+              <template v-else>
                 <div
-                  class="row"
-                  :class="
-                    productAndServiceTab === 'service'
-                      ? 'text-bold'
-                      : 'app-text-muted'
-                  "
+                  class="flex scroll full-width q-pa-md surface-2 column col"
                 >
-                  {{ $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>
+                  <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>
 
-            <div
-              v-if="
-                (productAndServiceTab === 'product' && product?.length === 0) ||
-                (productAndServiceTab === 'service' && service?.length === 0)
-              "
-              class="flex justify-center items-center surface-1"
-              :style="`height: ${hideStat ? '60vh' : '49vh'}`"
-            >
-              <NoData :not-found="!!inputSearchProductAndService" />
-            </div>
-            <!-- tab -->
-            <template v-else>
-              <div class="flex scroll full-width q-pa-md surface-1">
-                <q-table
-                  class="full-width"
-                  :style="`height: ${hideStat ? '55vh' : '45vh'}`"
-                  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"
+                    <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>
-
-                  <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(
+                        <q-td
+                          v-if="
                             {
-                              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);
-                            "
-                          >
+                              product: tbControl.product.fieldSelected,
+
+                              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"
-                          :id="`btn-eye-${props.row.name}`"
-                          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"
+                            :id="`btn-eye-${props.row.name}`"
+                            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"
+                            :id="`btn-dots-${props.row.name}`"
+                            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-6 col-lg-4">
+                        <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();
                             }
                           "
-                        />
-
-                        <q-btn
-                          icon="mdi-dots-vertical"
-                          :id="`btn-dots-${props.row.name}`"
-                          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-6 col-lg-4">
-                      <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>
-            </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="
+                          @menuEdit="
                             async () => {
-                              pageSizeServiceAndProduct = v;
-                              await fetchListOfProductAndService();
+                              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-item-section>
-                            <q-item-label>{{ v }}</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-btn-dropdown>
+                        />
+                      </div>
+                    </template>
+                  </q-table>
+                </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>
+                    </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>
-      </template>
-    </q-splitter>
+        </template>
+      </q-splitter>
+    </div>
   </div>
 
   <FormDialog