diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 40eb848b..a8a4ff79 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -59,6 +59,7 @@ const {
   editProduct,
   deleteProduct,
 
+  fetchStatsService,
   fetchListService,
   fetchListServiceById,
   createService,
@@ -103,6 +104,7 @@ const { t } = useI18n();
 const inputSearch = ref<string>('');
 const searchTotalProduct = ref<string>('');
 
+const currentStatusProduct = ref<boolean>(false);
 const drawerInfo = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
 
@@ -352,6 +354,7 @@ async function deleteServiceById(serviceId?: string) {
       await fetchListOfService();
 
       dialogServiceEdit.value = false;
+      calculateStats();
     },
     cancel: () => {},
   });
@@ -371,7 +374,7 @@ async function deleteTypeOfProduct(id?: string) {
 
       dialogProductEdit.value = false;
 
-      stat.value[3].count = stat.value[3].count - 1;
+      calculateStats();
     },
     cancel: () => {},
   });
@@ -391,17 +394,15 @@ async function deleteProductById(productId?: string) {
         // Product Type
         await deleteProductServiceType(productId ?? currentIdType.value);
         await fetchListType();
-
-        stat.value[1].count = stat.value[1].count - 1;
       }
       if (productMode.value === 'group') {
         // Product Group
         const res = await deleteProductService(productId ?? currentId.value);
         if (res) {
-          stat.value[0].count = stat.value[0].count - 1;
         }
         await fetchListGroups();
       }
+      calculateStats();
       drawerInfo.value = false;
     },
     cancel: () => {},
@@ -651,15 +652,20 @@ function openPropertiesDialog(type: 'service' | 'work') {
   propertiesDialog.value = true;
 }
 
-onMounted(async () => {
+async function calculateStats() {
   const resStatsGroup = await fetchStatsProductGroup();
   const resStatsType = await fetchStatsProductType();
+  const resStatsService = await fetchStatsService();
   const resStatsProduct = await fetchStatsProduct();
 
   stat.value[0].count = resStatsGroup ?? 0;
   stat.value[1].count = resStatsType ?? 0;
+  stat.value[2].count = resStatsService ?? 0;
   stat.value[3].count = resStatsProduct ?? 0;
+}
 
+onMounted(async () => {
+  calculateStats();
   await fetchListGroups();
 });
 
@@ -922,11 +928,12 @@ watch(currentStatus, async () => {
               :date="new Date(v.updatedAt)"
               :status="v.status"
               :id="v.id"
-              :isDisabled="v.status === 'ACTIVE' || v.status === 'CREATED'"
+              :isDisabled="v.status === 'INACTIVE'"
               color="var(--purple-11-hsl)"
               @toggleStatus="toggleStatusType(v.id, v.status)"
               @viewCard="
                 () => {
+                  currentStatusProduct = v.status === 'INACTIVE';
                   clearFormGroup();
                   currentIdType = v.id;
                   assignFormDataGroup(v);
@@ -966,10 +973,11 @@ watch(currentStatus, async () => {
               :status="v.status"
               color="var(--pink-6-hsl)"
               :id="v.id"
-              :isDisabled="v.status === 'ACTIVE' || v.status === 'CREATED'"
+              :isDisabled="v.status === 'INACTIVE'"
               @toggleStatus="toggleStatusGroup(v.id, v.status)"
               @viewCard="
                 () => {
+                  currentStatusProduct = v.status === 'INACTIVE';
                   clearFormGroup();
                   assignFormDataGroup(v);
                   isEdit = false;
@@ -1035,7 +1043,7 @@ watch(currentStatus, async () => {
                   "
                   :color="productAndServiceTab === 'all' ? 'primary' : ''"
                   style="background-color: var(--surface-3)"
-                  label="2"
+                  :label="(service?.length ?? 0) + (product?.length ?? 0)"
                 />
               </div>
             </q-tab>
@@ -1057,7 +1065,7 @@ watch(currentStatus, async () => {
                   "
                   :color="productAndServiceTab === 'product' ? 'primary' : ''"
                   style="background-color: var(--surface-3)"
-                  label="2"
+                  :label="service?.length"
                 />
               </div>
             </q-tab>
@@ -1156,7 +1164,14 @@ watch(currentStatus, async () => {
             gap: var(--size-3);
           "
         >
-          <div v-for="i in product" :key="i.id">
+          <div
+            v-if="
+              productAndServiceTab === 'all' ||
+              productAndServiceTab === 'product'
+            "
+            v-for="i in product"
+            :key="i.id"
+          >
             <TotalProductCardComponent
               :data="i"
               :key="i.id"
@@ -1193,7 +1208,14 @@ watch(currentStatus, async () => {
             />
           </div>
 
-          <div v-for="i in service" :key="i.id">
+          <div
+            v-if="
+              productAndServiceTab === 'all' ||
+              productAndServiceTab === 'service'
+            "
+            v-for="i in service"
+            :key="i.id"
+          >
             <TotalProductCardComponent
               typeProduct="service"
               :code="i.code"
@@ -1243,6 +1265,7 @@ watch(currentStatus, async () => {
   </FormDialog>
 
   <DrawerInfo
+    :show-edit="!currentStatusProduct"
     ref="formDialogRef"
     v-model:drawerOpen="drawerInfo"
     :title="'test'"
@@ -1353,7 +1376,15 @@ watch(currentStatus, async () => {
           gap: var(--size-3);
         "
       >
-        <div v-for="i in product" :key="i.id">
+        <div
+          v-for="i in product?.filter((i) => {
+            if (i.status === 'INACTIVE') {
+              return false;
+            }
+            return true;
+          })"
+          :key="i.id"
+        >
           <TotalProductCardComponent
             :index="selectProduct.findIndex((v) => v.id === i.id)"
             :isAddProduct="!!selectProduct.find((v) => v.id === i.id)"