diff --git a/src/components/05_quotation/FormAbout.vue b/src/components/05_quotation/FormAbout.vue
index 21e14f87..0d7a5dac 100644
--- a/src/components/05_quotation/FormAbout.vue
+++ b/src/components/05_quotation/FormAbout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import useBranchStore from 'src/stores/branch';
 import useCustomerStore from 'src/stores/customer';
@@ -10,8 +10,8 @@ const { locale } = useI18n({ useScope: 'global' });
 const branchStore = useBranchStore();
 const customerStore = useCustomerStore();
 
-const branch = defineModel<string>('branch');
-const customer = defineModel<string>('customer');
+const branchId = defineModel<string>('branchId');
+const customerBranchId = defineModel<string>('customerBranchId');
 const agentPrice = defineModel<boolean>('agentPrice');
 
 const branchOption = ref();
@@ -23,7 +23,7 @@ defineProps<{
   separator?: boolean;
   employee?: boolean;
   title?: string;
-  prefixId: string;
+  inputOnly?: boolean;
 }>();
 
 defineEmits<{
@@ -37,37 +37,7 @@ async function filter(
 ) {
   update(
     async () => {
-      const res =
-        type === 'branch'
-          ? await branchStore.fetchList({
-              query: val,
-              pageSize: 30,
-            })
-          : await customerStore.fetchList({
-              query: val,
-              pageSize: 30,
-            });
-      if (res) {
-        if (type === 'branch') {
-          branchOption.value = res.result.map((v) => ({
-            value: v.id,
-            label: v.name,
-            labelEN: v.nameEN,
-          }));
-        } else if (type === 'customer') {
-          customerOption.value = res.result.map((v) => ({
-            value: v.id,
-            label:
-              v.customerType === 'CORP'
-                ? v.branch[0].registerName
-                : `${v.branch[0].firstName} ${v.branch[0].lastName}`,
-            labelEN:
-              v.customerType === 'CORP'
-                ? v.branch[0].registerNameEN
-                : `${v.branch[0].firstNameEN} ${v.branch[0].lastNameEN}`,
-          }));
-        }
-      }
+      await init(val, type);
     },
 
     (ref: QSelect) => {
@@ -78,10 +48,56 @@ async function filter(
     },
   );
 }
+
+async function init(val: string, type: 'branch' | 'customer') {
+  const res =
+    type === 'branch'
+      ? await branchStore.fetchList({
+          query: val,
+          pageSize: 30,
+        })
+      : await customerStore.fetchListCustomeBranch({
+          query: val,
+          registeredBranchId: branchId.value || undefined,
+          pageSize: 30,
+        });
+  if (res) {
+    if (type === 'branch') {
+      branchOption.value = res.result.map((v) => ({
+        value: v.id,
+        label: v.name,
+        labelEN: v.nameEN,
+      }));
+    } else if (type === 'customer') {
+      customerOption.value = res.result.map((v) => ({
+        value: v.id,
+        label: v.registerName || `${v.firstName} ${v.lastName}` || '-',
+        labelEN: v.registerNameEN || `${v.firstNameEN} ${v.lastNameEN}` || '-',
+      }));
+    }
+  }
+}
+
+onMounted(async () => {
+  await init('', 'branch');
+  await init('', 'customer');
+});
+
+// watch(
+//   () => branchId.value,
+//   async (v) => {
+//     if (v) {
+//       customerBranchId.value = '';
+//     }
+//   },
+// );
 </script>
 <template>
-  <div class="row col-12">
-    <div class="col-12 row items-center q-pb-sm text-weight-bold text-body1">
+  <div class="row">
+    <div
+      v-if="!inputOnly"
+      class="col-12 row items-center q-pb-sm text-weight-bold text-body1"
+    >
       <q-icon
         flat
         size="xs"
@@ -104,7 +120,7 @@ async function filter(
       <SelectInput
         :readonly
         incremental
-        v-model="branch"
+        v-model="branchId"
         id="quotation-branch"
         class="col-md col-12"
         :option="branchOption"
@@ -117,7 +133,7 @@ async function filter(
       <SelectInput
         :readonly
         incremental
-        v-model="customer"
+        v-model="customerBranchId"
         class="col-md col-12"
         id="quotation-customer"
         :option="customerOption"
diff --git a/src/components/05_quotation/ProductItem.vue b/src/components/05_quotation/ProductItem.vue
index 6f040810..3f5239d1 100644
--- a/src/components/05_quotation/ProductItem.vue
+++ b/src/components/05_quotation/ProductItem.vue
@@ -19,8 +19,9 @@ defineEmits<{
 withDefaults(
   defineProps<{
     rows: {
+      [key: string]: any;
       code: string;
-      list: string;
+      name: string;
       type: string;
       amount: number;
       pricePerUnit: number;
@@ -48,10 +49,10 @@ const columns = [
     field: 'code',
   },
   {
-    name: 'list',
+    name: 'name',
     align: 'left',
     label: 'productService.service.list',
-    field: 'list',
+    field: 'name',
   },
   {
     name: 'amount',
@@ -100,7 +101,7 @@ const columns = [
       button-delete
       :columns="columns"
       :rows="rows"
-      imgColumn="list"
+      imgColumn="name"
       :customColumn="['amount', 'pricePerUnit', 'discount', 'tax', 'sumPrice']"
       @delete="$emit('delete')"
     >
@@ -108,16 +109,8 @@ const columns = [
         <q-avatar class="q-mr-sm" size="md">
           <q-icon
             class="full-width full-height"
-            :name="
-              props.row.type === 'product'
-                ? 'mdi-shopping-outline'
-                : 'mdi-server-outline'
-            "
-            :style="`color: var(--${props.row.type === 'product' ? 'teal-10' : 'orange-5'}); background: ${
-              props.row.type === 'product'
-                ? `hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`
-                : `hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`
-            }`"
+            name="mdi-shopping-outline"
+            :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
           />
         </q-avatar>
       </template>
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index f7717c2e..6bd78dfa 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { pageTabs, fieldSelectedOption } from './constants';
+import { useQuotationForm } from './form';
+
 import { onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -35,6 +37,7 @@ import ItemCard from 'src/components/ItemCard.vue';
 import DialogForm from 'components/DialogForm.vue';
 import { AddButton } from 'src/components/button';
 import SideMenu from 'components/SideMenu.vue';
+import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 
 import {
   uploadFileListEmployee,
@@ -71,17 +74,7 @@ import {
 import QuotationView from './QuotationView.vue';
 import { watch } from 'vue';
 
-type Node = {
-  [key: string]: any;
-  opened?: boolean;
-  checked?: boolean;
-  bg?: string;
-  fg?: string;
-  icon?: string;
-  displayDropIcon?: boolean;
-  children?: Node[];
-};
-
+const quotationForm = useQuotationForm();
 const customerFormStore = useCustomerForm();
 const employeeFormStore = useEmployeeForm();
 const employeeStore = useEmployeeStore();
@@ -90,12 +83,14 @@ const flowStore = useFlowStore();
 const userBranch = useMyBranch();
 const ocrStore = useOcrStore();
 
+const { currentFormData: quotationFormData } = storeToRefs(quotationForm);
 const { state: customerFormState, currentFormData: customerFormData } =
   storeToRefs(customerFormStore);
 const { state: employeeFormState, currentFromDataEmployee } =
   storeToRefs(employeeFormStore);
 const { currentMyBranch } = storeToRefs(userBranch);
 
+const branchId = ref('');
 const currentCustomerId = ref<string | undefined>();
 const refreshImageState = ref(false);
 const emptyCreateDialog = ref(false);
@@ -360,7 +355,10 @@ function triggerAddQuotationDialog() {
 }
 
 function triggerQuotationDialog() {
-  window.open('/quotation/add-quotation', '_blank');
+  window.open(
+    `/quotation/add-quotation?branchId=${branchId.value}&customerBranchId=${quotationFormData.value.customerBranchId}&date=${Date.now()}`,
+    '_blank',
+  );
   // TODO: form and state controll
 }
 
@@ -484,7 +482,12 @@ watch(() => pageState.currentTab, fetchQuotationList);
 </script>
 
 <template>
-  {{ convertToTree() }}
+  <ButtonAddComponent
+    hide-icon
+    style="z-index: 999"
+    @click.stop="triggerAddQuotationDialog"
+  />
+
   <div class="column full-height no-wrap">
     <!-- SEC: stat -->
     <section class="text-body-2 q-mb-xs flex items-center">
@@ -721,7 +724,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
         </nav>
         <!-- SEC: body content -->
         <article
-          v-if="false"
+          v-if="!quotationData || quotationData.length === 0"
           class="col surface-2 flex items-center justify-center"
         >
           <CreateButton
@@ -832,6 +835,13 @@ watch(() => pageState.currentTab, fetchQuotationList);
     submit-icon="mdi-check"
     height="auto"
     width="60vw"
+    :submit="() => triggerQuotationDialog()"
+    :close="
+      () => {
+        branchId = '';
+        quotationFormData.customerBranchId = '';
+      }
+    "
   >
     <header class="q-mx-lg q-mt-lg">
       <ProfileBanner
@@ -852,7 +862,8 @@ watch(() => pageState.currentTab, fetchQuotationList);
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
         <FormAbout
-          prefixId="zxc"
+          v-model:branch-id="branchId"
+          v-model:customer-branch-id="quotationFormData.customerBranchId"
           @add-customer="triggerSelectTypeCustomerd()"
         />
       </div>
diff --git a/src/pages/05_quotation/ProductServiceForm.vue b/src/pages/05_quotation/ProductServiceForm.vue
index 38b7343f..809925db 100644
--- a/src/pages/05_quotation/ProductServiceForm.vue
+++ b/src/pages/05_quotation/ProductServiceForm.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, reactive, ref, watch } from 'vue';
-import useOptionStore from 'stores/options';
 import { moveItemUp, moveItemDown, deleteItem } from 'stores/utils';
+import useOptionStore from 'stores/options';
 
 import DialogForm from 'src/components/DialogForm.vue';
 import TreeView from 'src/components/shared/TreeView.vue';
@@ -32,6 +32,7 @@ const optionStore = useOptionStore();
 
 const emit = defineEmits<{
   (e: 'selectGroup', id: string): void;
+  (e: 'submit', nodes: Node[]): void;
 }>();
 
 const model = defineModel<boolean>();
@@ -186,6 +187,9 @@ function mapNode() {
                 subtitle: p.product.code || ' ',
                 detail: p.product.detail,
                 remark: p.product.remark,
+                price: p.product.price,
+                agentPrice: p.product.agentPrice,
+                serviceCharge: p.product.serviceCharge,
                 icon: 'mdi-shopping-outline',
                 bg: 'hsla(var(--teal-10-hsl)/0.1)',
                 fg: 'var(--teal-10)',
@@ -207,6 +211,9 @@ function mapNode() {
                 subtitle: p.product.code || ' ',
                 detail: p.product.detail,
                 remark: p.product.remark,
+                price: p.product.price,
+                agentPrice: p.product.agentPrice,
+                serviceCharge: p.product.serviceCharge,
                 type: 'product',
               })),
             }));
@@ -220,6 +227,9 @@ function mapNode() {
         subtitle: v.code,
         detail: v.detail,
         remark: v.remark,
+        price: v.price,
+        agentPrice: v.agentPrice,
+        serviceCharge: v.serviceCharge,
         type: 'product',
         icon: 'mdi-shopping-outline',
         bg: 'hsla(var(--teal-10-hsl)/0.1)',
@@ -285,6 +295,7 @@ watch(
       :title="$t('general.list', { msg: $t('productService.title') })"
       :submit-label="$t('general.select', { msg: $t('productService.title') })"
       submit-icon="mdi-check"
+      :submit="() => $emit('submit', nodes)"
     >
       <q-splitter
         v-model="splitterModel"
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 4f39f5d3..20ea68ae 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -1,25 +1,57 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { setLocale } from 'src/utils/datetime';
 import { QSelect, useQuasar } from 'quasar';
+import { onMounted, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
+import ProductServiceForm from './ProductServiceForm.vue';
 import WorkerItem from 'components/05_quotation/WorkerItem.vue';
 import QuotationFormInfo from './QuotationFormInfo.vue';
-import { AddButton, SaveButton } from 'components/button';
 import ToggleButton from 'src/components/button/ToggleButton.vue';
 import ProductItem from 'src/components/05_quotation/ProductItem.vue';
-import { setLocale } from 'src/utils/datetime';
-import { useI18n } from 'vue-i18n';
+import FormAbout from 'src/components/05_quotation/FormAbout.vue';
+import DialogForm from 'src/components/DialogForm.vue';
+import SelectZone from 'src/components/shared/SelectZone.vue';
+import PersonCard from 'src/components/shared/PersonCard.vue';
+import { AddButton, SaveButton } from 'components/button';
+import { storeToRefs } from 'pinia';
+import { useQuotationForm } from './form';
+import { dateFormat } from 'src/utils/datetime';
+import { Employee } from 'src/stores/employee/types';
+import {
+  ProductGroup,
+  ProductList,
+  Service,
+} from 'src/stores/product-service/types';
+import useProductServiceStore from 'src/stores/product-service';
+
+type Node = {
+  [key: string]: any;
+  opened?: boolean;
+  checked?: boolean;
+  bg?: string;
+  fg?: string;
+  icon?: string;
+  children?: Node[];
+};
 
 defineProps<{
   readonly?: boolean;
 }>();
 
+const productServiceStore = useProductServiceStore();
+const quotationForm = useQuotationForm();
 const { locale } = useI18n();
+const { currentFormData: quotationFormData } = storeToRefs(quotationForm);
 const $q = useQuasar();
 
+const date = ref();
+const rows = ref<Node[]>([]);
+const selectedEmployee = ref<Employee[]>([]);
 const selectedBranchIssuer = ref('');
 const selectedCustomer = ref('');
 const toggleWorker = ref(true);
+const branchId = ref('');
 
 const quotationNo = ref('');
 const actor = ref('');
@@ -32,6 +64,89 @@ const payType = ref('');
 const paySplitCount = ref(1);
 const payBank = ref('');
 
+const pageState = reactive({
+  hideStat: false,
+  inputSearch: '',
+  statusFilter: 'all',
+  fieldSelected: [],
+  gridView: false,
+
+  currentTab: 'all',
+  addModal: false,
+  quotationModal: false,
+  employeeModal: false,
+  productServiceModal: false,
+});
+
+type ProductGroupId = string;
+
+const productGroup = ref<ProductGroup[]>([]);
+const productList = ref<Partial<Record<ProductGroupId, ProductList[]>>>({});
+const serviceList = ref<Partial<Record<ProductGroupId, Service[]>>>({});
+
+type Id = string;
+const product = ref<Record<Id, ProductList>>({});
+const service = ref<Record<Id, Service>>({});
+
+const selectedGroup = ref<ProductGroup | null>(null);
+const selectedGroupSub = ref<'product' | 'service' | null>(null);
+const selectedProductServiceId = ref('');
+
+async function getAllProduct(
+  groupId: string,
+  opts?: { force?: false; page?: number; pageSize?: number },
+) {
+  selectedGroupSub.value = 'product';
+  if (!opts?.force && productList.value[groupId] !== undefined) return;
+  const ret = await productServiceStore.fetchListProduct({
+    page: opts?.page ?? 1,
+    pageSize: opts?.pageSize ?? 9999,
+    productGroupId: groupId,
+  });
+  if (ret) productList.value[groupId] = ret.result;
+}
+
+async function getAllService(
+  groupId: string,
+  opts?: { force?: false; page?: number; pageSize?: number },
+) {
+  selectedGroupSub.value = 'service';
+  if (!opts?.force && serviceList.value[groupId] !== undefined) return;
+  const ret = await productServiceStore.fetchListService({
+    page: opts?.page ?? 1,
+    pageSize: opts?.pageSize ?? 9999,
+    productGroupId: groupId,
+    fullDetail: true,
+  });
+  if (ret) serviceList.value[groupId] = ret.result;
+}
+
+function triggerSelectEmployeeDialog() {
+  pageState.employeeModal = true;
+  // TODO: form and state controll
+}
+
+function triggerProductServiceDialog() {
+  pageState.productServiceModal = true;
+  // TODO: form and state controll
+}
+
+function convertToTable(nodes: Node[]): Node[] {
+  const products: Node[] = [];
+
+  nodes.forEach((node) => {
+    if (node.type === 'product' && node.checked) {
+      products.push(node);
+    }
+
+    if (node.children && node.children.length !== 0) {
+      products.push(...convertToTable(node.children)); // Correctly push the converted children
+    }
+  });
+
+  return products;
+}
+
 function changeMode(mode: string) {
   if (mode === 'light') {
     localStorage.setItem('currentTheme', 'light');
@@ -60,6 +175,19 @@ function changeMode(mode: string) {
 }
 
 onMounted(async () => {
+  const ret = await productServiceStore.fetchListProductService({
+    page: 1,
+    pageSize: 9999,
+  });
+  if (ret) productGroup.value = ret.result;
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const queryDate = urlParams.get('date');
+  date.value = queryDate && new Date(Number(queryDate));
+  branchId.value = urlParams.get('branchId') || '';
+  quotationFormData.value.customerBranchId =
+    urlParams.get('customerBranchId') || '';
+
   const getCurLang = localStorage.getItem('currentLanguage');
   if (getCurLang === 'English') {
     locale.value = 'eng';
@@ -97,30 +225,20 @@ onMounted(async () => {
         <span class="column text-h6 text-bold q-ml-md">
           {{ $t('quotation.title') }}
           <span class="text-caption text-regular app-text-muted">
-            {{ $t('quotation.processOn', { msg: '27 มีนาคม 2567 16:00:01' }) }}
+            {{
+              $t('quotation.processOn', {
+                msg: `${dateFormat(date, true)} ${dateFormat(date, true, true)}`,
+              })
+            }}
           </span>
         </span>
       </div>
-      <q-select
-        v-model="selectedBranchIssuer"
-        :options="[{ label: 'Issuer 1', value: 'Issuer 1' }]"
-        :label="$t('quotation.branch')"
-        id="select-branch-issuer"
-        for="select-branch-issuer"
-        style="width: 300px"
-        class="q-mr-md"
-        outlined
-        dense
-      />
-      <q-select
-        v-model="selectedCustomer"
-        :options="[{ label: 'Customer 1', value: 'Customer 1' }]"
-        :label="$t('quotation.customer')"
-        id="select-customer"
-        for="select-customer"
-        style="width: 300px"
-        outlined
-        dense
+      <FormAbout
+        class="col-4"
+        input-only
+        v-model:branch-id="branchId"
+        v-model:customer-branch-id="quotationFormData.customerBranchId"
+        @add-customer="triggerSelectTypeCustomerd()"
       />
     </header>
 
@@ -164,7 +282,11 @@ onMounted(async () => {
                   toggleWorker ? $t('general.specify') : $t('general.noSpecify')
                 }}
               </div>
-              <AddButton icon-only class="q-ml-auto" @click.stop="" />
+              <AddButton
+                icon-only
+                class="q-ml-auto"
+                @click.stop="triggerSelectEmployeeDialog"
+              />
             </template>
 
             <div class="surface-1 q-pa-md full-width">
@@ -203,23 +325,22 @@ onMounted(async () => {
                   {{ $t('quotation.productList') }}
                 </span>
               </div>
-              <AddButton icon-only class="q-ml-auto" @click.stop="" />
+              <AddButton
+                icon-only
+                class="q-ml-auto"
+                @click.stop="triggerProductServiceDialog"
+              />
             </template>
             <div class="surface-1 q-pa-md full-width">
               <ProductItem
-                :rows="[
-                  {
-                    code: '123456',
-                    list: 'aaa',
-                    type: 'product',
-                    amount: 0,
-                    pricePerUnit: 0,
-                    discount: 0,
-                    tax: 0,
-                    sumPrice: 0,
-                  },
-                ]"
+                :rows="
+                  rows.map((p) => ({
+                    code: p.subtitle,
+                    name: p.title,
+                  }))
+                "
               />
+              {{ console.log(rows) }}
             </div>
           </q-expansion-item>
 
@@ -267,38 +388,6 @@ onMounted(async () => {
               />
             </div>
           </q-expansion-item>
-          <!-- <AppBox bordered style="padding: var(--size-3)">
-            <div class="row items-center q-mb-sm">
-              <span style="flex: 1">
-                {{ $t('quotation.employeeList') }}
-                <q-toggle
-                  v-model="toggleWorker"
-                  id="toggle-status"
-                  size="md"
-                  padding="none"
-                  class="q-ml-md"
-                  dense
-                />
-              </span>
-              <AddButton icon-only />
-            </div>
-
-            <AppBox class="surface-2 worker-list" v-if="toggleWorker" bordered>
-              <WorkerItem
-                v-for="_ in Array(20)"
-                :data="{
-                  no: 1,
-                  refNo: 'CC6613334',
-                  nationality: 'Thai',
-                  birthDate: '1 May 2001',
-                  age: '23 Years',
-                  fullName: 'Methapon Metanipat',
-                  docExpireDate: '16 May 2025',
-                }"
-                color="male"
-              />
-            </AppBox>
-          </AppBox> -->
         </div>
       </section>
 
@@ -335,6 +424,94 @@ onMounted(async () => {
         <SaveButton solid />
       </div>
     </footer>
+
+    <!-- SEC: Dialog -->
+    <!-- add employee quotation -->
+    <DialogForm
+      :title="$t('general.select', { msg: $t('quotation.employeeList') })"
+      v-model:modal="pageState.employeeModal"
+      :submit-label="$t('general.select', { msg: $t('quotation.employee') })"
+      submit-icon="mdi-check"
+      height="75vh"
+    >
+      <section class="col row scroll">
+        <SelectZone
+          v-model:selected-item="selectedEmployee"
+          :items="[
+            {
+              name: 'มิเคล่า สุวรรณดี',
+              gender: 'female',
+              telephoneNo: '0621249602',
+              code: 'CORP000000-1-01-240001',
+              birthDate: '16 ปี 11 เดือน 5 วัน',
+            },
+            {
+              name: 'มิลิเซนต์ สุวรรณดี',
+              gender: 'female',
+              telephoneNo: '0621249666',
+              code: 'CORP000000-1-01-240002',
+              birthDate: '19 ปี 2 เดือน 2 วัน',
+            },
+            {
+              name: 'ไรคาร์ด พวงศรี',
+              gender: 'male',
+              telephoneNo: '0621249777',
+              code: 'CORP000000-1-01-240003',
+              birthDate: '39 ปี 5 เดือน 2 วัน',
+            },
+          ]"
+        >
+          <template #top>
+            <AddButton
+              icon-only
+              @click="
+                () => {
+                  triggerCreateEmployee();
+                }
+              "
+            />
+          </template>
+          <template #data="{ item }">
+            <PersonCard
+              noAction
+              prefixId="asda"
+              class="full-width"
+              :data="{
+                name: item.name,
+                code: item.code,
+                female: item.gender === 'female',
+                male: item.gender === 'male',
+                img: '/images/employee-avatar.png',
+                detail: [
+                  { icon: 'mdi-phone-outline', value: item.telephoneNo },
+                  { icon: 'mdi-clock-outline', value: item.birthDate },
+                ],
+              }"
+            ></PersonCard>
+          </template>
+        </SelectZone>
+      </section>
+    </DialogForm>
+
+    <!-- add product service -->
+    <ProductServiceForm
+      v-model="pageState.productServiceModal"
+      v-model:product-group="productGroup"
+      v-model:product-list="productList"
+      v-model:service-list="serviceList"
+      @submit="
+        (nodes) => {
+          rows = convertToTable(nodes);
+          pageState.productServiceModal = false;
+        }
+      "
+      @select-group="
+        async (id) => {
+          await getAllService(id);
+          await getAllProduct(id);
+        }
+      "
+    ></ProductServiceForm>
   </div>
 </template>