diff --git a/src/components/TreeCompoent.vue b/src/components/TreeCompoent.vue
new file mode 100644
index 00000000..7f110ca6
--- /dev/null
+++ b/src/components/TreeCompoent.vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { BranchWithChildren } from 'stores/branch/types';
+const nodes = defineModel<
+  (
+    | {
+        id: string;
+        name: string;
+        children: [];
+      }
+    | BranchWithChildren
+  )[]
+>('nodes', { default: [] });
+
+const expandedTree = defineModel<string[]>('expandedTree', { default: [] });
+
+withDefaults(
+  defineProps<{
+    typeTree: 'product' | 'branch';
+    color?: string;
+    nodeKey?: string;
+    labelKey?: string;
+    childrenKey: string;
+  }>(),
+  {
+    color: 'transparent',
+    nodeKey: 'id',
+    labelKey: 'name',
+  },
+);
+</script>
+
+<template>
+  <q-tree
+    :nodes="nodes"
+    :color="color"
+    :node-key="nodeKey"
+    :label-key="labelKey"
+    :children-key="childrenKey"
+    v-model:expanded="expandedTree"
+    style="color: var(--foreground)"
+  >
+    <template #default-header="{ node }">
+      <div
+        class="full-width q-py-xs"
+        :class="{
+          'clickable-node': typeTree === 'product' || node.isHeadOffice,
+          'cursor-pointer': node.type === 'group' || node.type === 'type',
+          'active-node': expandedTree[expandedTree.length - 1] === node.id,
+        }"
+        v-touch-hold.mouse="() => $emit('handleHold', node)"
+        @click.stop="
+          async () => {
+            $emit('select', node);
+          }
+        "
+      >
+        <div class="row col items-center justify-between full-width no-wrap">
+          <q-icon
+            v-if="
+              (node.type === 'group' && node._count.type > 0) ||
+              (node.isHeadOffice && node._count.branch !== 0)
+            "
+            name="mdi-triangle-down"
+            size="12px"
+            class="app-text-muted q-mr-md q-ml-sm"
+            :style="`rotate: ${expandedTree[0] === node.id ? '0deg' : '30deg'}`"
+          />
+          <div
+            class="col row"
+            :class="{ 'q-pl-sm': node.type === 'type' }"
+            :style="`padding-left:${node.type === 'group' && node._count.type === 0 ? '36px' : ''}`"
+          >
+            <span
+              class="ellipsis col-12"
+              style="white-space: nowrap"
+              :class="{
+                'text-weight-bold':
+                  expandedTree[expandedTree.length - 1] === node.id,
+                'app-text-info':
+                  expandedTree[expandedTree.length - 1] === node.id,
+              }"
+            >
+              {{ node.name }}
+            </span>
+            <span class="app-text-muted text-caption ellipsis">
+              {{ node.code }}
+            </span>
+          </div>
+
+          <div
+            class="row q-gutter-xs items-center no-wrap app-text-muted-2"
+            v-if="$q.screen.gt.xs"
+          >
+            <slot></slot>
+            <q-btn
+              v-if="typeTree === 'product'"
+              icon="mdi-eye-outline"
+              :id="`btn-tree-eye-${node.name}`"
+              size="sm"
+              dense
+              round
+              flat
+              @click.stop="() => $emit('view', node)"
+            />
+
+            <q-btn
+              v-if="node.isHeadOffice && typeTree === 'branch'"
+              :id="`create-sub-branch-btn-${node.name}`"
+              @click.stop="$emit('create', node)"
+              icon="mdi-file-plus"
+              class="app-text-muted-2"
+              size="sm"
+              dense
+              round
+              flat
+            />
+
+            <q-btn
+              icon="mdi-dots-vertical"
+              :id="`btn-tree-dots-${node.name}`"
+              size="sm"
+              dense
+              round
+              flat
+              @click.stop
+              :key="node.id"
+            >
+              <q-menu class="bordered">
+                <q-list>
+                  <q-item
+                    v-close-popup
+                    clickable
+                    :id="`view-detail-btn-${node.name}-view`"
+                    @click.stop="() => $emit('view', node)"
+                    dense
+                    class="row q-py-sm"
+                    style="white-space: nowrap"
+                  >
+                    <q-icon
+                      name="mdi-eye-outline"
+                      class="col-3"
+                      size="xs"
+                      style="color: hsl(var(--green-6-hsl))"
+                    />
+                    <span class="col-9 q-px-md flex items-center">
+                      {{ $t('viewDetail') }}
+                    </span>
+                  </q-item>
+
+                  <q-item
+                    :id="`view-detail-btn-${node.name}-edit`"
+                    v-close-popup
+                    clickable
+                    dense
+                    class="row q-py-sm"
+                    style="white-space: nowrap"
+                    @click.stop="() => $emit('edit', node)"
+                  >
+                    <q-icon
+                      name="mdi-pencil-outline"
+                      class="col-3"
+                      size="xs"
+                      style="color: hsl(var(--cyan-6-hsl))"
+                    />
+                    <span class="col-9 q-px-md flex items-center">
+                      {{ $t('edit') }}
+                    </span>
+                  </q-item>
+                  <q-item
+                    v-close-popup
+                    :id="`view-detail-btn-${node.name}-delete`"
+                    dense
+                    :clickable="node.status === 'CREATED'"
+                    class="row"
+                    :class="{
+                      'surface-3': node.status !== 'CREATED',
+                      'app-text-muted': node.status !== 'CREATED',
+                    }"
+                    style="white-space: nowrap"
+                    @click.stop="() => $emit('delete', node)"
+                  >
+                    <q-icon
+                      name="mdi-trash-can-outline"
+                      size="xs"
+                      class="col-3"
+                      :class="{
+                        'app-text-negative': node.status === 'CREATED',
+                      }"
+                    />
+                    <span class="col-9 q-px-md flex items-center">
+                      {{ $t('delete') }}
+                    </span>
+                  </q-item>
+
+                  <q-item dense>
+                    <q-item-section class="q-py-sm">
+                      <div class="q-pa-sm surface-2 rounded">
+                        <q-toggle
+                          :id="`view-detail-btn-${node.name}-status`"
+                          dense
+                          size="sm"
+                          :label="
+                            node.status !== 'INACTIVE'
+                              ? $t('switchOnLabel')
+                              : $t('switchOffLabel')
+                          "
+                          @click.stop="() => $emit('changeStatus', node)"
+                          :model-value="node.status !== 'INACTIVE'"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
+        </div>
+      </div>
+    </template>
+  </q-tree>
+</template>
+
+<style scoped lang="scss"></style>