diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index d9f8502b..2e3ee608 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -98,7 +98,7 @@ const { currentMyBranch } = storeToRefs(userBranch);
 
 const currentCustomerId = ref<string | undefined>();
 const refreshImageState = ref(false);
-const emptyCreateDialog = ref(true);
+const emptyCreateDialog = ref(false);
 const onCreateImageList = ref<{
   selectedImage: string;
   list: { url: string; imgFile: File | null; name: string }[];
@@ -120,95 +120,6 @@ const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
   },
 );
 
-const nodes = ref<Node[]>([
-  {
-    title: 'กลุ่มสินค้าและบริการที่ 1',
-    subtitle: 'TG01000000001',
-    selected: false,
-    type: 'group',
-    children: [
-      {
-        title:
-          'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
-        subtitle: 'TG01000000001',
-        selected: false,
-        type: 'type',
-        children: [
-          {
-            title: 'งาน 1',
-            subtitle: 'TG01000000001',
-            selected: false,
-            type: 'work',
-            children: [
-              {
-                title: 'สินค้า 1',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-              {
-                title: 'สินค้า 2',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-              {
-                title: 'สินค้า 3',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-
-  {
-    title: 'กลุ่มสินค้าและบริการที่ 2',
-    subtitle: 'TG01000000001',
-    selected: false,
-    type: 'group',
-    children: [
-      {
-        title:
-          'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
-        subtitle: 'TG01000000001',
-        selected: false,
-        type: 'type',
-        children: [
-          {
-            title: 'งาน 1',
-            subtitle: 'TG01000000001',
-            selected: false,
-            type: 'work',
-            children: [
-              {
-                title: 'สินค้า 1',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-              {
-                title: 'สินค้า 2',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-              {
-                title: 'สินค้า 3',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-]);
 const productServiceStore = useProductServiceStore();
 const router = useRouter();
 
@@ -509,78 +420,7 @@ async function getService(id: string, force = false) {
 }
 
 function convertToTree() {
-  const node = productGroup.value.map((g) => ({
-    id: g.id,
-    title: g.name,
-    subtitle: g.code,
-    detail: g.detail,
-    remark: g.remark,
-    type: 'group',
-    displayDropIcon: g._count.service + g._count.product !== 0,
-  }));
-  nodes.value = node;
-}
-
-async function openProductServiceTree(node: Node, anchestor?: Node[]) {
-  if (node.type === 'group') {
-    const curGroupNode = nodes.value.find((v) => v.id === node.id);
-    await getAllService(node.id);
-    if (!curGroupNode) return;
-
-    curGroupNode.children = serviceList.value[curGroupNode.id]?.map((t) => ({
-      id: t.id,
-      title: t.name,
-      subtitle: t.code,
-      detail: t.detail,
-      type: 'type',
-      displayDropIcon: t.work.length > 0,
-    }));
-  }
-
-  if (node.type === 'type' && anchestor && anchestor[0].children) {
-    const curTypeNode = anchestor[0].children.find((v) => v.id === node.id);
-    const curType = serviceList.value[anchestor[0].id]?.find(
-      (v) => v.id === node.id,
-    );
-    if (!curTypeNode) return;
-    const noNameWork = curType.work
-      .filter((v) => !v.name)
-      .flatMap((v) =>
-        v.productOnWork.map((p) => ({
-          id: p.product.id,
-          title: p.product.name,
-          subtitle: p.product.code,
-          detail: p.product.detail,
-          remark: p.product.remark,
-          type: 'product',
-          icon: 'mdi-shopping-outline',
-          bg: 'hsla(var(--teal-10-hsl)/0.1)',
-          fg: 'var(--teal-10)',
-        })),
-      );
-    const withNameWork = curType.work
-      .filter((v) => v.name)
-      .flatMap((w) => ({
-        id: w.id,
-        title: w.name,
-        subtitle: ' ',
-        attributes: {
-          additional: w.attributes.additional,
-          showTotalPrice: w.attributes.showTotalPrice,
-        },
-        type: 'work',
-        displayDropIcon: w.productOnWork.length > 0,
-        children: w.productOnWork.map((p) => ({
-          id: p.product.id,
-          title: p.product.name,
-          subtitle: p.product.code,
-          detail: p.product.detail,
-          remark: p.product.remark,
-          type: 'product',
-        })),
-      }));
-    curTypeNode.children = noNameWork.concat(withNameWork);
-  }
+  // TODO: convert quotation product service data to tree
 }
 
 const quotationStore = useQuotationStore();
@@ -1019,7 +859,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
     </section>
   </DialogForm>
 
-  <!-- add employee -->
+  <!-- add employee quotation -->
   <DialogForm
     :title="$t('general.select', { msg: $t('quotation.employeeList') })"
     v-model:modal="pageState.employeeModal"
@@ -1714,8 +1554,15 @@ watch(() => pageState.currentTab, fetchQuotationList);
 
   <ProductServiceForm
     v-model="pageState.productServiceModal"
-    v-model:nodes="nodes"
-    @open="openProductServiceTree"
+    v-model:product-group="productGroup"
+    v-model:product-list="productList"
+    v-model:service-list="serviceList"
+    @select-group="
+      async (id) => {
+        await getAllService(id);
+        await getAllProduct(id);
+      }
+    "
   ></ProductServiceForm>
 </template>
 
diff --git a/src/pages/05_quotation/ProductServiceForm.vue b/src/pages/05_quotation/ProductServiceForm.vue
index 1d54335e..38b7343f 100644
--- a/src/pages/05_quotation/ProductServiceForm.vue
+++ b/src/pages/05_quotation/ProductServiceForm.vue
@@ -1,8 +1,21 @@
 <script lang="ts" setup>
-import DialogForm from 'src/components/DialogForm.vue';
-import { onMounted, ref, watch } from 'vue';
-import TreeView from 'src/components/shared/TreeView.vue';
+import { computed, reactive, ref, watch } from 'vue';
 import useOptionStore from 'stores/options';
+import { moveItemUp, moveItemDown, deleteItem } from 'stores/utils';
+
+import DialogForm from 'src/components/DialogForm.vue';
+import TreeView from 'src/components/shared/TreeView.vue';
+import SelectZone from 'src/components/shared/SelectZone.vue';
+import SelectInput from 'src/components/shared/SelectInput.vue';
+import TotalProductCardComponent from 'src/components/04_product-service/TotalProductCardComponent.vue';
+import DeleteButton from 'src/components/button/DeleteButton.vue';
+import { isRoleInclude } from 'src/stores/utils';
+import {
+  ProductGroup,
+  ProductList,
+  Service,
+  Work,
+} from 'src/stores/product-service/types';
 
 type Node = {
   [key: string]: any;
@@ -13,45 +26,256 @@ type Node = {
   icon?: string;
   children?: Node[];
 };
-
-defineEmits<{
-  (e: 'open', node: Node, ancestorNode?: Node[]): void;
-}>();
+type ProductGroupId = string;
 
 const optionStore = useOptionStore();
+
+const emit = defineEmits<{
+  (e: 'selectGroup', id: string): void;
+}>();
+
 const model = defineModel<boolean>();
 const inputSearch = defineModel<string>('inputSearch');
-const nodes = defineModel<Node[]>('nodes', { default: [] });
+const productGroup = defineModel<ProductGroup[]>('productGroup', {
+  default: [],
+});
+const productList = defineModel<Partial<Record<ProductGroupId, ProductList[]>>>(
+  'productList',
+  { default: {} },
+);
+const serviceList = defineModel<Partial<Record<ProductGroupId, Service[]>>>(
+  'serviceList',
+  { default: {} },
+);
 
-const splitterModel = ref(20);
-const infoDrawer = ref(false);
-const currentTab = ref('1');
-const currentSelectedType = ref<'group' | 'type' | 'work' | 'product' | ''>('');
-const currentSelectedNode = ref<Node[]>([]);
+const priceDisplay = computed(() => ({
+  price: !isRoleInclude(['sale_agent']),
+  agentPrice: isRoleInclude([
+    'admin',
+    'head_of_admin',
+    'head_of_sale',
+    'system',
+    'owner',
+    'accountant',
+    'sale_agent',
+  ]),
+  serviceCharge: isRoleInclude([
+    'admin',
+    'head_of_admin',
+    'system',
+    'owner',
+    'accountant',
+  ]),
+}));
+
+const nodes = ref<Node[]>([]);
+const productServiceCard = ref();
+const splitterModel = ref(0);
+const selectedType = ref<'group' | 'type' | 'work' | 'product' | ''>('');
+const selectedNode = ref<Node[]>([]);
+const selectedProductGroup = ref('');
+const selectedItems = ref<[]>([]);
+const preSelectedItems = ref<[]>([]);
+const refSelectZone = ref<InstanceType<typeof SelectZone>>();
+
+const pageState = reactive({
+  addModal: false,
+  infoDrawer: false,
+  infoTab: '1',
+  productServiceTab: '1',
+});
 
 function triggerInfo() {
-  infoDrawer.value = !infoDrawer.value;
+  pageState.infoDrawer = !pageState.infoDrawer;
 }
 
-function toggleSelected(node: Node, ancestorNode?: Node[]) {
-  if (currentSelectedNode.value.includes(node)) {
-    currentSelectedNode.value = [];
+function triggerAddDialog() {
+  assignSelect(preSelectedItems.value, selectedItems.value);
+  pageState.addModal = true;
+}
+
+function toggleSelected(node: Node) {
+  if (selectedNode.value.includes(node)) {
+    selectedNode.value = [];
   } else {
-    currentSelectedNode.value = [];
-    currentSelectedNode.value.push(node);
+    selectedNode.value = [];
+    selectedNode.value.push(node);
   }
 }
 
+function toggleDelete(node?: Node, all?: boolean) {
+  if (all) {
+    selectedProductGroup.value = '';
+    nodes.value = [];
+    selectedItems.value = [];
+  } else {
+    const targetItem = selectedItems.value.find((i) => i.id === node?.id);
+    deleteItem(nodes.value, nodes.value.indexOf(node));
+    targetItem &&
+      deleteItem(selectedItems.value, selectedItems.value.indexOf(targetItem));
+  }
+}
+
+function toggleMove(node?: Node, to?: 'up' | 'down') {
+  const targetItem = selectedItems.value.find((i) => i.id === node?.id);
+  if (to === 'up' && targetItem) {
+    moveItemUp(nodes.value, nodes.value.indexOf(node));
+    moveItemUp(selectedItems.value, selectedItems.value.indexOf(targetItem));
+  } else if (to === 'down' && targetItem) {
+    moveItemDown(nodes.value, nodes.value.indexOf(node));
+    moveItemDown(selectedItems.value, selectedItems.value.indexOf(targetItem));
+  }
+}
+
+function mapCard() {
+  const data = {
+    service:
+      serviceList.value[selectedProductGroup.value]?.map((s) => ({
+        type: 'service',
+        id: s.id,
+        name: s.name,
+        code: s.code,
+        work: s.work,
+        attributes: s.attributes,
+        createAt: s.createdAt,
+        selectedImage: s.selectedImage,
+      })) || [],
+    product:
+      productList.value[selectedProductGroup.value]?.map((p) => ({
+        type: 'product',
+        id: p.id,
+        name: p.name,
+        code: p.code,
+        detail: p.detail,
+        remark: p.remark,
+        price: p.price,
+        agentPrice: p.agentPrice,
+        serviceCharge: p.serviceCharge,
+        process: p.process,
+        selectedImage: p.selectedImage,
+      })) || [],
+  };
+
+  productServiceCard.value = data;
+}
+
+function mapNode() {
+  assignSelect(selectedItems.value, preSelectedItems.value);
+  const node = selectedItems.value.map((v: Node) => {
+    if (v.type === 'service') {
+      return {
+        id: v.id,
+        title: v.name,
+        subtitle: v.code,
+        detail: v.detail,
+        attributes: {
+          additional: v.attributes.additional,
+        },
+        opened: v.work.length > 0,
+        type: 'type',
+        icon: 'mdi-server-outline',
+        bg: 'hsla(var(--orange-5-hsl)/0.1)',
+        fg: 'var(--orange-5)',
+        children: (function () {
+          const noNameObjects = v.work
+            .filter((w: Work) => !w.name)
+            .flatMap((w: Work) =>
+              w.productOnWork.map((p) => ({
+                id: p.product.id,
+                title: p.product.name,
+                subtitle: p.product.code || ' ',
+                detail: p.product.detail,
+                remark: p.product.remark,
+                icon: 'mdi-shopping-outline',
+                bg: 'hsla(var(--teal-10-hsl)/0.1)',
+                fg: 'var(--teal-10)',
+                type: 'product',
+              })),
+            );
+          const withNameObjects = v.work
+            .filter((w: Work) => w.name)
+            .flatMap((w: Work) => ({
+              id: w.id,
+              title: w.name,
+              subtitle: ' ',
+              attributes: w.attributes,
+              type: 'work',
+              opened: w.productOnWork.length > 0,
+              children: w.productOnWork.map((p) => ({
+                id: p.product.id,
+                title: p.product.name,
+                subtitle: p.product.code || ' ',
+                detail: p.product.detail,
+                remark: p.product.remark,
+                type: 'product',
+              })),
+            }));
+          return noNameObjects.concat(withNameObjects);
+        })(),
+      };
+    } else {
+      return {
+        id: v.id,
+        title: v.name,
+        subtitle: v.code,
+        detail: v.detail,
+        remark: v.remark,
+        type: 'product',
+        icon: 'mdi-shopping-outline',
+        bg: 'hsla(var(--teal-10-hsl)/0.1)',
+        fg: 'var(--teal-10)',
+      };
+    }
+  });
+
+  nodes.value = node;
+  pageState.addModal = false;
+}
+
+function assignSelect(to: [], from: []) {
+  const existingItems = new Set(to);
+
+  for (let i = to.length - 1; i >= 0; i--) {
+    if (!from.includes(to[i])) {
+      to.splice(i, 1);
+    }
+  }
+
+  const newItems = from.filter((item) => !existingItems.has(item));
+  to.push(...newItems);
+}
+
 watch(
-  () => currentSelectedNode.value,
+  () => selectedNode.value,
   (v) => {
     if (v.length > 0) {
-      currentSelectedType.value = v[0].type;
+      selectedType.value = v[0].type;
     } else {
-      currentSelectedType.value = '';
+      selectedType.value = '';
     }
   },
 );
+
+watch(
+  () => selectedProductGroup.value,
+  async (v) => {
+    if (v && v !== '') emit('selectGroup', v);
+    if (productList.value || serviceList.value) {
+      mapCard();
+    }
+    preSelectedItems.value = [];
+  },
+);
+
+watch(
+  () => [productList.value, serviceList.value],
+  () => {
+    if (productList.value || serviceList.value) {
+      mapCard();
+    }
+  },
+  { deep: true },
+);
 </script>
 <template>
   <div>
@@ -66,6 +290,7 @@ watch(
         v-model="splitterModel"
         :limits="[0, 30]"
         class="col"
+        disable
         before-class="overflow-hidden"
         after-class="overflow-hidden"
       >
@@ -84,12 +309,11 @@ watch(
               <nav
                 v-for="node in nodes"
                 :key="node.id"
-                :class="{ 'active-nav': currentSelectedNode.includes(node) }"
+                :class="{ 'active-nav': selectedNode.includes(node) }"
                 class="column q-py-xs q-px-md rounded q-mb-sm cursor-pointer"
                 @click.stop="
                   () => {
                     toggleSelected(node);
-                    $emit('open', node);
                     node.opened = !node.opened;
                   }
                 "
@@ -106,14 +330,14 @@ watch(
         <template v-slot:after>
           <section class="column full-height no-wrap">
             <header
-              class="row items-center q-py-sm q-px-md justify-between full-width surface-3 bordered-b"
+              class="row items-center q-py-sm q-px-md justify-between full-width surface-3 bordered-b no-wrap"
             >
               <q-input
                 for="input-search"
                 outlined
                 dense
                 :label="$t('general.search')"
-                class="q-mr-md col-12 col-md-4"
+                class="q-mr-md col-md-4"
                 :bg-color="$q.dark.isActive ? 'dark' : 'white'"
                 v-model="inputSearch"
                 debounce="200"
@@ -123,28 +347,42 @@ watch(
                 </template>
               </q-input>
 
-              <div>
+              <div class="row items-center q-gutter-x-sm">
+                <q-btn
+                  padding="4px"
+                  flat
+                  rounded
+                  icon="mdi-store-plus-outline"
+                  @click="triggerAddDialog"
+                  style="color: hsl(var(--text-mute))"
+                />
                 <q-btn
                   padding="4px"
-                  color="info"
                   flat
                   rounded
                   icon="mdi-information-outline"
                   @click="triggerInfo"
+                  style="color: hsl(var(--text-mute))"
                 />
               </div>
             </header>
 
             <article class="col">
-              <div style="height: 100%" class="relative-position scroll">
+              <div
+                style="height: 100%; overflow-y: auto; overflow-x: hidden"
+                class="no-wrap row relative-position"
+              >
                 <!-- SEC: tree view body -->
-                <section>
+                <section class="col">
                   <div class="full-height column">
                     <span
-                      v-if="false"
+                      v-if="nodes.length === 0 && !selectedProductGroup"
                       class="col column items-center justify-center app-text-muted"
                     >
-                      <q-avatar color="input-border" class="q-mb-md">
+                      <q-avatar
+                        style="background: var(--surface-0)"
+                        class="q-mb-md"
+                      >
                         <q-icon name="mdi-shopping" />
                       </q-avatar>
                       {{
@@ -155,40 +393,77 @@ watch(
                         })
                       }}
                     </span>
-                    <article class="q-pa-md" v-else>
+
+                    <article class="column" v-else>
+                      <section
+                        class="bordered-b q-py-sm q-px-lg row items-center"
+                      >
+                        <q-avatar
+                          size="24px"
+                          style="
+                            background: hsla(var(--pink-6-hsl) / 0.15);
+                            color: var(--pink-6);
+                          "
+                        >
+                          <q-icon name="mdi-folder-outline" />
+                        </q-avatar>
+                        <div class="column q-ml-md">
+                          <span style="font-weight: 600">
+                            {{
+                              productGroup.find(
+                                (g) => g.id === selectedProductGroup,
+                              )?.name || '-'
+                            }}
+                          </span>
+                          <span class="text-caption app-text-muted">
+                            {{
+                              productGroup.find(
+                                (g) => g.id === selectedProductGroup,
+                              )?.code || '-'
+                            }}
+                          </span>
+                        </div>
+                        <DeleteButton
+                          icon-only
+                          class="q-ml-auto"
+                          @click.stop="toggleDelete(undefined, true)"
+                        />
+                      </section>
+                      <span
+                        class="q-py-sm q-px-lg"
+                        style="background: hsla(var(--info-bg) / 0.1)"
+                      >
+                        {{
+                          $t('general.list', {
+                            msg: $t('productService.title'),
+                          })
+                        }}
+                      </span>
                       <TreeView
-                        class="full-width q-pt-sm"
+                        class="full-width q-py-sm q-px-md"
                         v-model:nodes="nodes"
                         expandable
                         selectable
-                        :selected-node="currentSelectedNode"
-                        @open="
-                          (n, ancestor) => {
-                            $emit('open', n, ancestor);
-                          }
-                        "
+                        :selected-node="selectedNode"
+                        @move-up="(node) => toggleMove(node, 'up')"
+                        @move-down="(node) => toggleMove(node, 'down')"
                         @select="toggleSelected"
+                        @delete="toggleDelete"
                         :decoration="[
                           {
                             level: 0,
-                            icon: 'mdi-folder-outline',
-                            bg: 'hsla(var(--pink-6-hsl)/0.1)',
-                            fg: 'var(--pink-6)',
-                          },
-                          {
-                            level: 1,
                             icon: 'mdi-server-outline',
                             bg: 'hsla(var(--orange-5-hsl)/0.1)',
                             fg: 'var(--orange-5)',
                           },
                           {
-                            level: 2,
+                            level: 1,
                             icon: 'mdi-briefcase-outline',
                             bg: 'hsla(var(--violet-11-hsl)/0.1)',
                             fg: 'var(--violet-11)',
                           },
                           {
-                            level: 3,
+                            level: 2,
                             icon: 'mdi-shopping-outline',
                             bg: 'hsla(var(--teal-10-hsl)/0.1)',
                             fg: 'var(--teal-10)',
@@ -200,14 +475,14 @@ watch(
                 </section>
 
                 <!-- SEC: info -->
-                <transition name="info-slide">
+                <transition name="info-slide" class="absolute-right">
                   <div
-                    v-if="infoDrawer"
-                    class="column no-wrap surface-1 full-height absolute-right"
-                    style="z-index: 1; width: 20vw"
+                    v-if="pageState.infoDrawer"
+                    class="column no-wrap surface-1"
+                    style="z-index: 1; width: 20vw; position: sticky"
                   >
                     <span
-                      v-if="currentSelectedType === ''"
+                      v-if="selectedType === ''"
                       class="col column items-center justify-center app-text-muted"
                     >
                       <q-img
@@ -230,16 +505,16 @@ watch(
                         inline-label
                         mobile-arrows
                         dense
-                        v-model="currentTab"
+                        v-model="pageState.infoTab"
                         align="left"
                         class="full-width bordered-b"
                         active-color="info"
                       >
-                        <q-tab name="1" @click="currentTab = '1'">
+                        <q-tab name="1" @click="pageState.infoTab = '1'">
                           <div
                             class="row text-capitalize"
                             :class="
-                              currentTab === 'detail'
+                              pageState.infoTab === 'detail'
                                 ? 'text-bold'
                                 : 'app-text-muted'
                             "
@@ -247,17 +522,17 @@ watch(
                             {{ $t('general.detail') }}
                           </div>
                         </q-tab>
-                        <q-tab name="2" @click="currentTab = '2'">
+                        <q-tab name="2" @click="pageState.infoTab = '2'">
                           <div
                             class="row text-capitalize"
                             :class="
-                              currentTab === 'remark'
+                              pageState.infoTab === 'remark'
                                 ? 'text-bold'
                                 : 'app-text-muted'
                             "
                           >
                             {{
-                              currentSelectedType !== 'work'
+                              selectedType !== 'work' && selectedType !== 'type'
                                 ? $t('general.remark')
                                 : $t('productService.service.properties')
                             }}
@@ -266,56 +541,57 @@ watch(
                       </q-tabs>
 
                       <div class="q-pa-md column scroll">
-                        <span v-if="currentTab === '1'">
+                        <span v-if="pageState.infoTab === '1'">
                           <span class="app-text-muted">
                             {{
                               $t('general.detail', {
                                 msg:
-                                  currentSelectedType === 'group'
+                                  selectedType === 'group'
                                     ? $t('productService.group.title')
-                                    : currentSelectedType === 'type'
+                                    : selectedType === 'type'
                                       ? $t('productService.type.title')
-                                      : currentSelectedType === 'work'
+                                      : selectedType === 'work'
                                         ? $t('productService.service.title2')
                                         : $t('productService.product.title'),
                               })
                             }}
                           </span>
                           <aside class="surface-3 q-pa-md">
-                            {{ currentSelectedNode[0].detail || '-' }}
+                            {{ selectedNode[0].detail || '-' }}
                           </aside>
                         </span>
 
-                        <span v-if="currentTab === '2'">
+                        <span v-if="pageState.infoTab === '2'">
                           <span class="app-text-muted">
                             {{
-                              currentSelectedType !== 'work'
+                              selectedType !== 'work' && selectedType !== 'type'
                                 ? $t('general.remark', {
                                     msg:
-                                      currentSelectedType === 'group'
+                                      selectedType === 'group'
                                         ? $t('productService.group.title')
-                                        : currentSelectedType === 'type'
-                                          ? $t('productService.type.title')
-                                          : $t('productService.product.title'),
+                                        : $t('productService.product.title'),
                                   })
-                                : `${$t('productService.service.properties')}${$t('productService.service.title2')}`
+                                : selectedType === 'work'
+                                  ? `${$t('productService.service.properties')}${$t('productService.service.title2')}`
+                                  : `${$t('productService.service.properties')}${$t('productService.service.title')}`
                             }}
                           </span>
                           <aside
-                            v-if="currentSelectedType !== 'work'"
+                            v-if="
+                              selectedType !== 'work' && selectedType !== 'type'
+                            "
                             class="surface-3 q-pa-md"
                           >
-                            {{ currentSelectedNode[0].remark || '-' }}
+                            {{ selectedNode[0].remark || '-' }}
                           </aside>
                           <aside v-else class="q-pt-md row q-gutter-sm">
                             <template
                               v-if="
-                                currentSelectedNode[0].attributes.additional
-                                  .length > 0
+                                selectedNode[0].attributes.additional.length > 0
                               "
                             >
                               <div
-                                v-for="att in currentSelectedNode[0].attributes
+                                v-for="att in selectedNode[0].attributes
                                   .additional"
                                 :key="att"
                                 class="bordered q-py-xs q-px-sm rounded"
@@ -338,6 +614,173 @@ watch(
         </template>
       </q-splitter>
     </DialogForm>
+
+    <!-- add product add service -->
+    <DialogForm
+      height="75vh"
+      submit-icon="mdi-check"
+      :hideCloseEvent="false"
+      bg-color="var(--surface-2)"
+      v-model:modal="pageState.addModal"
+      :title="$t('general.list', { msg: $t('productService.title') })"
+      :submit-label="$t('general.select', { msg: $t('productService.title') })"
+      :submit="
+        () => {
+          mapNode();
+        }
+      "
+      :close="
+        () => ((preSelectedItems = []), (pageState.productServiceTab = '1'))
+      "
+    >
+      <section class="col row">
+        <SelectZone
+          ref="refSelectZone"
+          no-padding
+          border-search-section
+          item-class="col-md-3 col-sm-6 col-12"
+          v-model:selected-item="preSelectedItems"
+          :items="
+            pageState.productServiceTab === '1'
+              ? productServiceCard && productServiceCard.service
+              : productServiceCard && productServiceCard.product
+          "
+          :no-items-icon="
+            selectedProductGroup
+              ? pageState.productServiceTab === '1'
+                ? 'mdi-server-outline'
+                : 'mdi-shopping-outline'
+              : 'mdi-folder-outline'
+          "
+          :no-items-label="
+            selectedProductGroup
+              ? $t('general.noData', {
+                  msg:
+                    pageState.productServiceTab === '1'
+                      ? $t('productService.service.title')
+                      : $t('productService.product.title'),
+                })
+              : $t('general.select', { msg: $t('productService.group.title') })
+          "
+        >
+          <template #top>
+            <div class="row items-center app-text-muted">
+              {{ $t('productService.group.title') }}
+              <SelectInput
+                id="product-group-select"
+                :placeholder="
+                  !selectedProductGroup
+                    ? $t('general.select', {
+                        msg: $t('productService.group.title'),
+                      })
+                    : ''
+                "
+                v-model="selectedProductGroup"
+                clearable
+                optionLabel="name"
+                optionValue="id"
+                class="q-pl-sm col-5"
+                :fillInput="false"
+                :hide-selected="false"
+                :option="productGroup"
+                style="min-height: 50px"
+              >
+                <template #option="{ scope }">
+                  <q-item
+                    v-if="scope.opt"
+                    v-bind="scope.itemProps"
+                    class="row items-center"
+                  >
+                    <q-item-section>
+                      {{ scope.opt.name }}
+                      <span class="app-text-muted text-caption">
+                        {{ scope.opt.code }}
+                      </span>
+                    </q-item-section>
+                  </q-item>
+                </template>
+
+                <template #selectedItem="{ scope }">
+                  <q-item-section v-if="scope.opt">
+                    {{ scope.opt.name }}
+                    <span class="app-text-muted text-caption">
+                      {{ scope.opt.code }}
+                    </span>
+                  </q-item-section>
+                </template>
+              </SelectInput>
+            </div>
+          </template>
+
+          <template #tab>
+            <q-tabs
+              inline-label
+              mobile-arrows
+              dense
+              v-model="pageState.productServiceTab"
+              align="left"
+              class="full-width bordered-b row"
+              active-color="info"
+            >
+              <q-tab name="1" @click="pageState.productServiceTab = '1'">
+                <div
+                  class="row text-capitalize"
+                  :class="
+                    pageState.productServiceTab === '1'
+                      ? 'text-bold'
+                      : 'app-text-muted'
+                  "
+                >
+                  {{ $t('productService.service.title') }}
+                </div>
+              </q-tab>
+              <q-tab name="2" @click="pageState.productServiceTab = '2'">
+                <div
+                  class="row text-capitalize"
+                  :class="
+                    pageState.productServiceTab === '2'
+                      ? 'text-bold'
+                      : 'app-text-muted'
+                  "
+                >
+                  {{ $t('productService.product.title') }}
+                </div>
+              </q-tab>
+
+              <q-checkbox
+                :label="$t('general.selectAll')"
+                class="q-ml-auto q-mr-md"
+                size="xs"
+                :model-value="
+                  selectedProductGroup && productServiceCard
+                    ? pageState.productServiceTab === '1'
+                      ? productServiceCard.service.length !== 0
+                        ? productServiceCard.service?.every((item) =>
+                            preSelectedItems.includes(item),
+                          )
+                        : false
+                      : productServiceCard.product.length !== 0
+                        ? productServiceCard.product?.every((item) =>
+                            preSelectedItems.includes(item),
+                          )
+                        : false
+                    : false
+                "
+                @click="() => refSelectZone?.select(undefined, true)"
+              ></q-checkbox>
+            </q-tabs>
+          </template>
+
+          <template #data="{ item }">
+            <TotalProductCardComponent
+              :priceDisplay="priceDisplay"
+              :title="item.name"
+              :data="item"
+            />
+          </template>
+        </SelectZone>
+      </section>
+    </DialogForm>
   </div>
 </template>
 <style scoped>