diff --git a/src/components/TreeCompoent.vue b/src/components/TreeCompoent.vue
index 7f110ca6..12eb7718 100644
--- a/src/components/TreeCompoent.vue
+++ b/src/components/TreeCompoent.vue
@@ -1,15 +1,8 @@
 <script setup lang="ts">
 import { BranchWithChildren } from 'stores/branch/types';
-const nodes = defineModel<
-  (
-    | {
-        id: string;
-        name: string;
-        children: [];
-      }
-    | BranchWithChildren
-  )[]
->('nodes', { default: [] });
+const nodes = defineModel<(any | BranchWithChildren)[]>('nodes', {
+  default: [],
+});
 
 const expandedTree = defineModel<string[]>('expandedTree', { default: [] });
 
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 70d440f9..934d5ca9 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -27,6 +27,7 @@ import FormServiceProperties from 'components/04_product-service/FormServiceProp
 import InfoForm from 'components/02_personnel-management/InfoForm.vue';
 import NoData from 'components/NoData.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
+import TreeCompoent from 'src/components/TreeCompoent.vue';
 
 import useFlowStore from 'src/stores/flow';
 import useMyBranchStore from 'src/stores/my-branch';
@@ -1476,7 +1477,118 @@ watch(
 
             <div class="col full-width scroll">
               <div class="q-pa-md">
-                <q-tree
+                <TreeCompoent
+                  :nodes="treeProductTypeAndGroup"
+                  v-model:expanded-tree="expandedTree"
+                  node-key="id"
+                  label-key="name"
+                  children-key="children"
+                  type-tree="product"
+                  @select="
+                    async (v) => {
+                      if (v.type === 'group') {
+                        if (currentIdGrop !== v.id) {
+                          filterStat.push('group');
+                          await enterGroup(v.id, v.name);
+                          return;
+                        }
+
+                        if (currentIdGrop === v.id) {
+                          expandedTree = [];
+                          filterStat = [];
+                          expandedTree = expandedTree.filter((i) => v.id !== i);
+                          currentIdGrop = '';
+                          currentIdType = '';
+                          productMode = 'group';
+
+                          return;
+                        }
+                      }
+                      if (v.type === 'type') {
+                        if (currentIdType !== v.id) {
+                          filterStat.push('group', 'type');
+                          await enterType(v.id, v.name);
+                          return;
+                        }
+                        if (currentIdType === v.id) {
+                          filterStat = filterStat.filter((item) => {
+                            return item !== 'type';
+                          });
+                          currentIdType = '';
+                          productMode = 'type';
+                          expandedTree.pop();
+                          return;
+                        }
+                      }
+                    }
+                  "
+                  @view="
+                    (v) => {
+                      if (v.type === 'type') {
+                        editByTree = 'type';
+                        currentStatusProduct = v.status === 'INACTIVE';
+                        clearFormGroup();
+                        currentIdType = v.id;
+                        assignFormDataGroup(v);
+                        isEdit = false;
+                        drawerInfo = true;
+                      }
+                      if (v.type === 'group') {
+                        editByTree = 'group';
+                        currentStatusProduct = v.status === 'INACTIVE';
+                        clearFormGroup();
+                        assignFormDataGroup(v);
+                        isEdit = false;
+                        currentIdGrop = v.id;
+                        drawerInfo = true;
+                      }
+                    }
+                  "
+                  @edit="
+                    (v) => {
+                      editByTree = v.type;
+                      if (v.type === 'type') {
+                        clearFormGroup();
+                        currentIdType = v.id;
+                        assignFormDataGroup(v);
+                        isEdit = true;
+                        drawerInfo = true;
+                      }
+                      if (v.type === 'group') {
+                        clearFormGroup();
+                        assignFormDataGroup(v);
+                        isEdit = true;
+                        currentIdGrop = v.id;
+
+                        drawerInfo = true;
+                      }
+                    }
+                  "
+                  @delete="
+                    (v) => {
+                      editByTree = v.type;
+
+                      if (v.type === 'type') {
+                        deleteProductById(v.id);
+                      }
+                      if (v.type === 'group') {
+                        deleteProductById(v.id);
+                      }
+                    }
+                  "
+                  @change-status="
+                    async (v) => {
+                      if (v.type === 'type') {
+                        triggerChangeStatus(v.id, v.status, v.type);
+                      }
+                      if (v.type === 'group') {
+                        triggerChangeStatus(v.id, v.status, v.type);
+                      }
+                    }
+                  "
+                />
+
+                <!-- <q-tree
                   :nodes="treeProductTypeAndGroup"
                   color="transparent"
                   node-key="id"
@@ -1781,7 +1893,7 @@ watch(
                       </div>
                     </div>
                   </template>
-                </q-tree>
+                </q-tree> -->
               </div>
             </div>
           </div>