diff --git a/src/components/button/ImportButton.vue b/src/components/button/ImportButton.vue
new file mode 100644
index 00000000..363bb0c3
--- /dev/null
+++ b/src/components/button/ImportButton.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import MainButton from './MainButton.vue';
+
+defineEmits<{
+  (e: 'click', v: MouseEvent): void;
+}>();
+defineProps<{
+  iconOnly?: boolean;
+  solid?: boolean;
+  outlined?: boolean;
+  disabled?: boolean;
+  dark?: boolean;
+
+  label?: string;
+  icon?: string;
+}>();
+</script>
+
+<template>
+  <MainButton
+    @click="(e) => $emit('click', e)"
+    v-bind="{ ...$props, ...$attrs }"
+    :icon="icon || 'mdi-import'"
+    color="var(--info-bg)"
+    :title="iconOnly ? $t('general.import') : undefined"
+  >
+    {{ label || $t('general.import') }}
+  </MainButton>
+</template>
diff --git a/src/components/button/ViewButton.vue b/src/components/button/ViewButton.vue
index 070a268f..33d3868e 100644
--- a/src/components/button/ViewButton.vue
+++ b/src/components/button/ViewButton.vue
@@ -10,7 +10,6 @@ defineProps<{
   outlined?: boolean;
   disabled?: boolean;
   dark?: boolean;
-  size?: string;
 }>();
 </script>
 
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
index 8d873594..d9b59582 100644
--- a/src/components/button/index.ts
+++ b/src/components/button/index.ts
@@ -13,3 +13,4 @@ export { default as ViewButton } from './ViewButton.vue';
 export { default as PrintButton } from './PrintButton.vue';
 export { default as StateButton } from './StateButton.vue';
 export { default as NextButton } from './NextButton.vue';
+export { default as ImportButton } from './ImportButton.vue';
diff --git a/src/components/shared/PersonCard.vue b/src/components/shared/PersonCard.vue
index f93c61c5..3abc14b0 100644
--- a/src/components/shared/PersonCard.vue
+++ b/src/components/shared/PersonCard.vue
@@ -99,6 +99,7 @@ defineEmits<{
         <q-img
           v-if="!$slots.img"
           :src="data.img ?? '/no-profile.png'"
+          loading="lazy"
           fit="cover"
           style="width: 100%; height: 100%; border-radius: 50%"
         >
diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 825b232f..bd4f4d76 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -136,6 +136,7 @@ export default {
     unavailable: 'Unavailable',
     selected: 'Selected {number} {msg}',
     next: 'Next',
+    import: 'Import',
   },
 
   menu: {
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 03678769..27836036 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -135,6 +135,7 @@ export default {
     individual: 'รายบุคคล',
     unavailable: 'ไม่พร้อมใช้งาน',
     selected: '{number} {msg}ถูกเลือก',
+    import: 'นำเข้า',
     next: 'ถัดไป',
   },
 
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 13784e9f..4dfdc1cb 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -74,6 +74,7 @@ import {
 import QuotationFormReceipt from './QuotationFormReceipt.vue';
 import QuotationFormProductSelect from './QuotationFormProductSelect.vue';
 import QuotationFormInfo from './QuotationFormInfo.vue';
+import QuotationFormWorkerAddDialog from './QuotationFormWorkerAddDialog.vue';
 import ProfileBanner from 'components/ProfileBanner.vue';
 import DialogForm from 'components/DialogForm.vue';
 import {
@@ -119,6 +120,7 @@ const optionStore = useOptionStore();
 const { t, locale } = useI18n();
 const ocrStore = useOcrStore();
 const $q = useQuasar();
+const openQuotation = ref<boolean>(false);
 
 const {
   currentFormData: quotationFormData,
@@ -174,7 +176,6 @@ const selectedInstallmentNo = ref<number[]>([]);
 const installmentAmount = ref<number>(0);
 const selectedInstallment = ref();
 const agentPrice = ref(false);
-
 const attachmentData = ref<
   {
     name: string;
@@ -415,6 +416,8 @@ async function fetchQuotation() {
     );
   }
 
+  assignWorkerToSelectedWorker();
+
   await assignToProductServiceList();
 
   await fetchStatus();
@@ -1416,10 +1419,28 @@ async function getWorkerFromCriteria(
                   </div>
                   <nav class="q-ml-auto">
                     <AddButton
-                      v-if="!readonly"
+                      v-if="
+                        !readonly &&
+                        (!quotationFormState.source ||
+                          quotationFormState.source?.quotationStatus ===
+                            'Issued' ||
+                          quotationFormState.source?.quotationStatus ===
+                            'Expired')
+                      "
                       icon-only
                       @click.stop="triggerSelectEmployeeDialog"
                     />
+                    <AddButton
+                      v-if="
+                        !!quotationFormState.source &&
+                        quotationFormState.source.quotationStatus !==
+                          'Issued' &&
+                        quotationFormState.source?.quotationStatus !== 'Expired'
+                      "
+                      @click.stop="openQuotation = !openQuotation"
+                      icon-only
+                      class="q-ml-auto"
+                    />
                   </nav>
                 </section>
               </template>
@@ -2733,6 +2754,18 @@ async function getWorkerFromCriteria(
   </DialogForm>
 
   <!-- NOTE: END - Employee Add Form -->
+
+  <QuotationFormWorkerAddDialog
+    v-if="quotationFormState.source"
+    :disabled-worker-id="selectedWorker.map((v) => v.id)"
+    :productServiceList="quotationFormState.source.productServiceList"
+    :quotation-id="quotationFormState.source.id"
+    v-model:open="openQuotation"
+    @success="
+      openQuotation = !openQuotation;
+      fetchQuotation();
+    "
+  />
 </template>
 
 <style scoped>
diff --git a/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue b/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue
new file mode 100644
index 00000000..237ffb9e
--- /dev/null
+++ b/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue
@@ -0,0 +1,610 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { QTableColumn, QTableSlots } from 'quasar';
+import { computed, reactive, ref, watch } from 'vue';
+import { calculateAge, dateFormatJS } from 'src/utils/datetime';
+
+import useOptionStore from 'src/stores/options';
+import useEmployeeStore from 'src/stores/employee';
+import { useQuotationStore } from 'src/stores/quotations';
+import { Employee } from 'src/stores/employee/types';
+
+import {
+  CancelButton,
+  BackButton,
+  NextButton,
+  ImportButton,
+  AddButton,
+} from 'components/button';
+import DialogContainer from 'components/dialog/DialogContainer.vue';
+import DialogHeader from 'components/dialog/DialogHeader.vue';
+import ImportWorker from './ImportWorker.vue';
+import PersonCard from 'src/components/shared/PersonCard.vue';
+import { QuotationFull } from 'src/stores/quotations/types';
+import { Lang } from 'src/utils/ui';
+import NoData from 'src/components/NoData.vue';
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+const { locale } = useI18n();
+const columns = [
+  {
+    name: '#check',
+    align: 'left',
+    label: '',
+    field: (_) => '#check',
+  },
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: (e: Employee & { _index: number }) => e._index + 1,
+  },
+  {
+    name: 'foreignRefNo',
+    align: 'center',
+    label: 'quotation.foreignRefNo',
+    field: (v: Employee) =>
+      v.employeePassport !== undefined
+        ? v.employeePassport[0]?.number || '-'
+        : '-',
+  },
+  {
+    name: 'employeeName',
+    align: 'left',
+    label: 'quotation.employeeName',
+    field: (v: Employee) =>
+      locale.value === Lang.English
+        ? `${v.firstNameEN} ${v.lastNameEN}`
+        : `${v.firstName} ${v.lastName}`,
+  },
+  {
+    name: 'birthDate',
+    align: 'left',
+    label: 'general.birthDate',
+    field: (v: Employee) => dateFormatJS({ date: v.dateOfBirth }),
+  },
+  {
+    name: 'age',
+    align: 'left',
+    label: 'general.age',
+    field: (v: Employee) => calculateAge(v.dateOfBirth),
+  },
+  {
+    name: 'nationality',
+    align: 'left',
+    label: 'general.nationality',
+    field: (v: Employee) => optionStore.mapOption(v.nationality),
+  },
+  {
+    name: 'documentExpireDate',
+    align: 'left',
+    label: 'quotation.documentExpireDate',
+    field: (v: Employee) =>
+      v.employeePassport !== undefined &&
+      v.employeePassport[0]?.expireDate !== undefined
+        ? dateFormatJS({ date: v.employeePassport[0]?.expireDate })
+        : '-',
+  },
+] satisfies QTableColumn[];
+
+const props = defineProps<{
+  customerBranchId?: string;
+  disabledWorkerId?: string[];
+  productServiceList: QuotationFull['productServiceList'];
+  quotationId: string;
+}>();
+
+const emits = defineEmits<{
+  (e: 'success'): void;
+}>();
+
+const optionStore = useOptionStore();
+const employeeStore = useEmployeeStore();
+const quotationStore = useQuotationStore();
+
+const open = defineModel<boolean>('open', { default: false });
+const workerSelected = ref<Employee[]>([]);
+const workerList = ref<Employee[]>([]);
+const importWorkerCriteria = ref<{
+  passport: string[] | null;
+  visa: string[] | null;
+}>({
+  passport: [],
+  visa: [],
+});
+
+type ProductServiceId = string;
+const productWorkerMap = ref<Record<ProductServiceId, Employee[]>>({});
+
+const state = reactive({
+  importWorker: false,
+  step: 1,
+  search: '',
+});
+
+const submitDisabled = computed(
+  () =>
+    Object.entries(productWorkerMap.value).some(
+      ([productServiceId, employee]) => {
+        const productService = props.productServiceList.find(
+          (item) => item.id === productServiceId,
+        );
+
+        if (!productService) return;
+
+        const limit = productService.amount;
+        const current = productService.worker.length + employee.length;
+
+        return current > limit;
+      },
+    ) ||
+    Object.values(productWorkerMap.value).every(
+      (employee) => employee.length === 0,
+    ),
+);
+
+function next() {
+  if (state.step >= 2) return addWorker();
+  state.step++;
+}
+
+function prev() {
+  if (state.step <= 0) return;
+  state.step--;
+}
+
+function clean() {
+  workerList.value = [];
+  workerSelected.value = [];
+  open.value = false;
+}
+
+function selectedIndex(item: Employee) {
+  return workerSelected.value.findIndex((v) => v.id === item.id);
+}
+
+function toggleSelect(item: Employee) {
+  if (props.disabledWorkerId?.some((id) => id === item.id)) return;
+
+  const index = selectedIndex(item);
+
+  if (index === -1) {
+    workerSelected.value.push(item);
+    productWorkerMap.value = props.productServiceList.reduce<
+      typeof productWorkerMap.value
+    >((acc, curr) => {
+      acc[curr.id] = (productWorkerMap.value[curr.id] || []).concat(item);
+      return acc;
+    }, {});
+  } else {
+    workerSelected.value.splice(index, 1);
+    productWorkerMap.value = props.productServiceList.reduce<
+      typeof productWorkerMap.value
+    >((acc, curr) => {
+      acc[curr.id] =
+        productWorkerMap.value[curr.id]?.filter((v) => v.id !== item.id) || [];
+      return acc;
+    }, {});
+  }
+}
+
+function toSubmitData(data: typeof productWorkerMap.value) {
+  type EmployeeId = string;
+  type ProductServiceId = string;
+  const ret: Record<EmployeeId, ProductServiceId[]> = {};
+  for (const [productServiceId, employee] of Object.entries(data)) {
+    employee.forEach((emp) => {
+      if (ret[emp.id]) {
+        ret[emp.id].push(productServiceId);
+      } else {
+        ret[emp.id] = [productServiceId];
+      }
+    });
+  }
+  return Object.entries(ret).map(([workerId, productServiceId]) => ({
+    workerId,
+    productServiceId,
+  }));
+}
+
+function getProductImageUrl(
+  item: QuotationFull['productServiceList'][number]['product'],
+) {
+  return `${API_BASE_URL}/product/${item.id}/image/${item.selectedImage}`;
+}
+
+function getEmployeeImageUrl(item: Employee) {
+  if (item.selectedImage) {
+    return `${API_BASE_URL}/employee/${item.id}/image/${item.selectedImage}`;
+  }
+  // NOTE: static image
+  return '/images/employee-avatar.png';
+}
+
+async function getWorkerList() {
+  const ret = await employeeStore.fetchList({
+    pageSize: 100,
+    query: state.search,
+    passport: true,
+    customerBranchId: props.customerBranchId,
+  });
+
+  if (!ret) return false;
+
+  workerList.value = ret.result;
+}
+
+async function addWorker() {
+  await quotationStore.addQuotationWorker(
+    props.quotationId,
+    toSubmitData(productWorkerMap.value),
+  );
+  emits('success');
+}
+
+async function getWorkerFromCriteria(
+  payload: typeof importWorkerCriteria.value,
+) {
+  const ret = await employeeStore.fetchList({
+    payload: {
+      passport: payload.passport || undefined,
+    },
+    pageSize: 99999, // must include all possible worker
+    page: 1,
+    passport: true,
+    customerBranchId: props.customerBranchId,
+  });
+
+  if (!ret) return false; // error, do not close dialog
+
+  workerSelected.value = ret.result.filter(
+    (lhs) => !props.disabledWorkerId?.find((rhs) => lhs.id === rhs),
+  );
+  workerSelected.value.forEach((item) => {
+    productWorkerMap.value = props.productServiceList.reduce<
+      typeof productWorkerMap.value
+    >((acc, curr) => {
+      acc[curr.id] = (productWorkerMap.value[curr.id] || []).concat(item);
+      return acc;
+    }, {});
+  });
+
+  if (workerSelected.value.length > 0) state.step = 2;
+
+  return true;
+}
+
+watch(() => state.search, getWorkerList);
+</script>
+
+<template>
+  <ImportWorker
+    v-model:open="state.importWorker"
+    v-model:data="importWorkerCriteria"
+    :import-worker="getWorkerFromCriteria"
+  />
+  <DialogContainer v-model="open" @open="getWorkerList" @close="clean">
+    <template #header>
+      <DialogHeader :title="$t('quotation.addWorker')">
+        <template #title-before>
+          <span class="q-mr-auto"></span>
+        </template>
+        <template #title-after>
+          <ImportButton
+            v-if="state.step === 1"
+            icon-only
+            class="q-ml-auto q-mr-xs"
+            @click="state.importWorker = true"
+            :label="$t('quotation.importWorker')"
+          />
+        </template>
+      </DialogHeader>
+    </template>
+    <div class="col scroll">
+      <q-tab-panels
+        class="surface-0 rounded full-height"
+        v-model="state.step"
+        animated
+      >
+        <q-tab-panel class="q-pa-none" :name="1">
+          <div class="column q-pa-md full-height">
+            <section class="row justify-end q-mb-md">
+              <q-input
+                for="input-search"
+                outlined
+                dense
+                :label="$t('general.search')"
+                :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+                v-model="state.search"
+                debounce="500"
+              >
+                <template #prepend>
+                  <q-icon name="mdi-magnify" />
+                </template>
+              </q-input>
+            </section>
+            <!-- wrapper -->
+            <div class="col scroll">
+              <section
+                :class="{ ['items-center']: workerList.length === 0 }"
+                class="row q-col-gutter-md"
+              >
+                <div
+                  style="display: inline-block; margin-inline: auto"
+                  v-if="workerList.length === 0"
+                >
+                  <NoData :not-found="!!state.search" />
+                </div>
+                <div
+                  v-for="(emp, index) in workerList.map((data) => ({
+                    ...data,
+                    _selectedIndex: selectedIndex(data),
+                  }))"
+                  class="col-2"
+                >
+                  <button
+                    class="selectable-item full-width"
+                    :class="{
+                      ['selectable-item__selected']: emp._selectedIndex !== -1,
+                      ['selectable-item__disabled']: disabledWorkerId?.some(
+                        (id) => id === emp.id,
+                      ),
+                    }"
+                    @click="toggleSelect(emp)"
+                  >
+                    <span class="selectable-item__pos">
+                      {{ emp._selectedIndex + 1 }}
+                    </span>
+                    <PersonCard
+                      no-action
+                      class="full-width"
+                      :prefix-id="'employee-' + index"
+                      :data="{
+                        name:
+                          locale === Lang.English
+                            ? `${emp.firstNameEN} ${emp.lastNameEN}`
+                            : `${emp.firstName} ${emp.lastName}`,
+                        code: emp.employeePassport?.at(0)?.number || '-',
+                        female: emp.gender === 'female',
+                        male: emp.gender === 'male',
+                        img: getEmployeeImageUrl(emp),
+                        fallbackImg: '/images/employee-avatar.png',
+                        detail: [
+                          {
+                            icon: 'mdi-passport',
+                            value: optionStore.mapOption(emp.nationality),
+                          },
+                          {
+                            icon: 'mdi-clock-outline',
+                            value: calculateAge(emp.dateOfBirth),
+                          },
+                        ],
+                      }"
+                    />
+                  </button>
+                </div>
+              </section>
+            </div>
+          </div>
+        </q-tab-panel>
+        <q-tab-panel class="q-pa-none" :name="2">
+          <div class="column no-wrap full-height q-pa-md">
+            <section class="q-mb-md">
+              <BackButton icon-only @click="prev" />
+            </section>
+            <section class="full-height scroll col">
+              <div class="rounded column" style="gap: var(--size-4)">
+                <q-expansion-item
+                  dense
+                  default-opened
+                  class="overflow-hidden rounded"
+                  switch-toggle-side
+                  expand-icon="mdi-chevron-down-circle"
+                  header-class="q-py-sm text-medium text-body items-center surface-1"
+                  v-for="{ id, amount, worker, product } in productServiceList"
+                >
+                  <template #header>
+                    <q-avatar class="q-mr-md" size="md">
+                      <q-img
+                        class="text-center"
+                        :ratio="1"
+                        :src="getProductImageUrl(product)"
+                      >
+                        <template #error>
+                          <q-icon
+                            class="full-width full-height"
+                            name="mdi-shopping-outline"
+                            :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
+                          />
+                        </template>
+                      </q-img>
+                    </q-avatar>
+                    <span>
+                      {{ product.name }}
+                      <div class="app-text-muted text-caption">
+                        {{ product.code }}
+                      </div>
+                    </span>
+                    <span
+                      class="q-ml-auto"
+                      :class="{
+                        ['app-text-negative']:
+                          worker.length + (productWorkerMap[id]?.length || 0) >
+                          amount,
+                        ['app-text-positive']:
+                          worker.length +
+                            (productWorkerMap[id]?.length || 0) ===
+                          amount,
+                        ['app-text-warning']:
+                          worker.length + (productWorkerMap[id]?.length || 0) <
+                          amount,
+                      }"
+                    >
+                      {{
+                        worker.length + (productWorkerMap[id]?.length || 0)
+                      }}/{{ amount }}
+                    </span>
+                  </template>
+
+                  <div class="q-pa-md surface-1">
+                    <q-table
+                      v-model:selected="productWorkerMap[id]"
+                      :rows-per-page-options="[0]"
+                      :rows="
+                        workerSelected.map((data, i) => ({
+                          ...data,
+                          _index: i,
+                        }))
+                      "
+                      :columns
+                      hide-bottom
+                      bordered
+                      flat
+                      hide-pagination
+                      selection="multiple"
+                      card-container-class="q-col-gutter-sm"
+                      class="full-width"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr
+                          style="background-color: hsla(var(--info-bg) / 0.07)"
+                          :props="props"
+                        >
+                          <q-th
+                            v-for="col in columns"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <template v-if="!col.name.startsWith('#')">
+                              {{ $t(col.label) }}
+                            </template>
+                            <template v-if="col.name === '#check'">
+                              <q-checkbox v-model="props.selected" size="sm" />
+                            </template>
+                          </q-th>
+                        </q-tr>
+                      </template>
+
+                      <template
+                        v-slot:body="props: {
+                          row: Employee & { _index: number };
+                        } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
+                      >
+                        <q-tr
+                          :class="{ dark: $q.dark.isActive }"
+                          class="text-center"
+                        >
+                          <q-td v-for="col in columns" :align="col.align">
+                            <!-- NOTE: custom column will starts with # -->
+                            <template v-if="!col.name.startsWith('#')">
+                              <q-avatar
+                                v-if="col.name === 'employeeName'"
+                                class="q-mr-sm"
+                                size="md"
+                              >
+                                <q-img
+                                  :src="getEmployeeImageUrl(props.row)"
+                                  :ratio="1"
+                                  class="text-center"
+                                />
+                              </q-avatar>
+                              <span>
+                                {{
+                                  typeof col.field === 'string'
+                                    ? props.row[col.field as keyof Employee]
+                                    : col.field(props.row)
+                                }}
+                              </span>
+                            </template>
+                            <template v-if="col.name === '#check'">
+                              <q-checkbox v-model="props.selected" size="sm" />
+                            </template>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </q-table>
+                  </div>
+                </q-expansion-item>
+              </div>
+            </section>
+          </div>
+          <!-- TODO: Select product for each worker -->
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+    <template #footer>
+      <CancelButton
+        class="q-ml-auto"
+        outlined
+        @click="clean"
+        v-if="state.step === 1"
+      />
+      <BackButton
+        class="q-ml-auto"
+        outlined
+        @click="prev"
+        v-if="state.step === 2"
+      />
+      <NextButton
+        class="q-ml-sm"
+        solid
+        @click="next"
+        :amount="workerSelected.length"
+        v-if="state.step === 1"
+        :disabled="workerSelected.length <= 0"
+      />
+      <AddButton
+        class="q-ml-sm"
+        solid
+        @click="next"
+        v-if="state.step === 2"
+        :disabled="submitDisabled"
+      />
+    </template>
+  </DialogContainer>
+</template>
+
+<style scoped>
+.selectable-item {
+  padding: 0;
+  appearance: none;
+  border: none;
+  background: transparent;
+  position: relative;
+  color: inherit;
+
+  & > .selectable-item__pos {
+    display: none;
+  }
+}
+
+.selectable-item__selected {
+  & > :deep(*) {
+    border: 1px solid var(--_color, var(--brand-1)) !important;
+  }
+
+  & > .selectable-item__pos {
+    display: block;
+    position: absolute;
+    margin: var(--size-2);
+    right: 0;
+    top: 0;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    color: var(--surface-1);
+    background: var(--brand-1);
+    color: currentColor;
+  }
+}
+
+.selectable-item__disabled {
+  filter: grayscale(1);
+  opacity: 0.5;
+
+  & :deep(*) {
+    cursor: not-allowed;
+  }
+}
+</style>
diff --git a/src/stores/quotations/index.ts b/src/stores/quotations/index.ts
index 8d9c7f4e..0038e3e0 100644
--- a/src/stores/quotations/index.ts
+++ b/src/stores/quotations/index.ts
@@ -11,6 +11,7 @@ import {
   QuotationStats,
   PaymentPayload,
   QuotationStatus,
+  QuotationAddWorkerPayload,
 } from './types';
 import { PaginationResult } from 'src/types';
 
@@ -151,6 +152,18 @@ export const useQuotationStore = defineStore('quotation-store', () => {
     return null;
   }
 
+  /** This is meant to be use after quotation was accepted */
+  async function addQuotationWorker(
+    id: string,
+    payload: QuotationAddWorkerPayload,
+  ) {
+    const res = await api.post(`/quotation/${id}/add-worker`, payload);
+    if (res.status < 400) {
+      return res.data;
+    }
+    return null;
+  }
+
   const fileManager = manageAttachment(api, 'quotation');
 
   return {
@@ -166,6 +179,7 @@ export const useQuotationStore = defineStore('quotation-store', () => {
     editQuotation,
     deleteQuotation,
     changeStatus,
+    addQuotationWorker,
 
     ...fileManager,
   };
@@ -209,3 +223,5 @@ export const useQuotationPayment = defineStore('quotation-payment', () => {
     ...fileManager,
   };
 });
+
+export * from './types.ts';
diff --git a/src/stores/quotations/types.ts b/src/stores/quotations/types.ts
index af1ca691..353e3c37 100644
--- a/src/stores/quotations/types.ts
+++ b/src/stores/quotations/types.ts
@@ -273,6 +273,7 @@ export type QuotationFull = {
   }[];
 
   productServiceList: {
+    id: string;
     vat: number;
     pricePerUnit: number;
     discount: number;
@@ -318,15 +319,7 @@ export type QuotationFull = {
   code: string;
   statusOrder: number;
   status: Status;
-  quotationStatus:
-    | 'Issued'
-    | 'Accepted'
-    | 'Invoice'
-    | 'PaymentPending'
-    | 'PaymentInProcess'
-    | 'PaymentSuccess'
-    | 'ProcessComplete'
-    | 'Canceled';
+  quotationStatus: QuotationStatus;
 
   customerBranchId: string;
   customerBranch: CustomerBranchRelation;
@@ -429,6 +422,7 @@ export type PaymentPayload = {
 };
 
 export type ProductServiceList = {
+  id?: string;
   workerIndex: number[];
   vat?: number;
   pricePerUnit?: number;
@@ -447,3 +441,8 @@ export type PaySplit = {
   invoice?: boolean;
   invoiceId?: string;
 };
+
+export type QuotationAddWorkerPayload = {
+  workerId: string;
+  productServiceId: string[];
+}[];