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

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

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