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