28 changed files with 132 additions and 646 deletions
--- a/src/components/01_branch-management/FormBranchInformation.vue
+++ b/src/components/01_branch-management/FormBranchInformation.vue
@ -159,6 +159,42 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
          ]"
          for="input-name-en"
        />
+
+        <q-select
+          v-if="
+            typeBranch !== 'headOffice' &&
+            isRoleInclude(['head_of_admin', 'head_of_account'])
+          "
+          outlined
+          use-input
+          fill-input
+          emit-value
+          map-options
+          hide-selected
+          hide-bottom-space
+          input-debounce="0"
+          option-label="label"
+          option-value="value"
+          class="col-2"
+          dense
+          for="input-branch-status"
+          :readonly="readonly || isRoleInclude(['head_of_account'])"
+          :options="['Virtual', 'Branch']"
+          :hide-dropdown-icon="readonly"
+          :label="$t('general.branchStatus')"
+          :model-value="virtual ? 'Virtual' : 'Branch'"
+          @update:model-value="(v) => (virtual = v === 'Virtual')"
+          :rules="[(val) => val && val.length > 0]"
+          :error-message="$t('form.error.required')"
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey">
+                {{ $t('general.noData') }}
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
      </div>

      <div class="col-12 row q-col-gutter-sm">
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@ -262,7 +262,7 @@ function deleteFile(name: string) {
      </div>

      <q-file
-        v-if="userType && !readonly"
+        v-if="userType"
        ref="attachmentRef"
        for="input-attachment"
        :dense="dense"
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@ -54,7 +54,6 @@ defineProps<{
  employeeOwnerOption?: CustomerBranch[];
  prefixId: string;
  showBtnSave?: boolean;
-  disableCustomerSelect?: boolean;
 }>();

 defineEmits<{
@ -118,16 +117,12 @@ defineEmits<{

    <div class="col-12 row" style="gap: var(--size-2)">
      <SelectCustomer
-        id="form-select-customer-branch-id"
-        for="form-select-customer-branch-id"
        v-model:value="customerBranchId"
        v-model:value-option="currentCustomerBranch"
        :label="$t('customer.form.branchCode')"
        class="col-12 field-two"
-        simple
        required
        :readonly
-        :disabled="disableCustomerSelect && !readonly"
      />

      <q-input
--- a/src/components/05_quotation/FormAbout.vue
+++ b/src/components/05_quotation/FormAbout.vue
@ -68,8 +68,6 @@ defineEmits<{
        :readonly
      />
      <SelectCustomer
-        id="about-select-customer-branch-id"
-        for="about-select-customer-branch-id"
        v-model:value="customerBranchId"
        :label="$t('quotation.customer')"
        :creatable-disabled-text="`(${$t('form.error.selectField', {
@ -90,14 +88,14 @@ defineEmits<{

 <style scoped>
 :deep(
-  label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-one
-) {
+    label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-one
+  ) {
  padding-right: 4px;
 }

 :deep(
-  label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-two
-) {
+    label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-two
+  ) {
  padding-left: 4px;
 }
 </style>
--- a/src/components/07_agencies-management/FormBasicInfoAgencies.vue
+++ b/src/components/07_agencies-management/FormBasicInfoAgencies.vue
@ -1,10 +1,6 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 import SelectInput from '../shared/SelectInput.vue';
 import useOptionStore from 'src/stores/options';
-import { Icon } from '@iconify/vue/dist/iconify.js';
-import { useInstitution } from 'src/stores/institution';

 const optionStore = useOptionStore();

@ -14,11 +10,6 @@ defineProps<{
  readonly?: boolean;
  onDrawer?: boolean;
 }>();
-const emit = defineEmits<{
-  (e: 'deleteAttachment', name: string): void;
-}>();
-
-const attachmentRef = ref();

 const group = defineModel('group', { default: '' });
 const name = defineModel('name', { default: '' });
@ -26,19 +17,8 @@ const nameEn = defineModel('nameEn', { default: '' });
 const contactName = defineModel('contactName', { default: '' });
 const email = defineModel('email', { default: '' });
 const contactTel = defineModel('contactTel', { default: '' });
-const attachment = defineModel<File[]>('attachment');
-const attachmentList =
-  defineModel<{ name: string; url: string }[]>('attachmentList');

 type Options = { label: string; value: string };
-
-function openNewTab(url: string) {
-  window.open(url, '_blank');
-}
-
-function deleteAttachment(name: string) {
-  emit('deleteAttachment', name);
-}
 </script>
 <template>
  <div class="row col-12">
@ -182,78 +162,6 @@ function deleteAttachment(name: string) {
          />
        </template>
      </q-input>
-
-      <q-file
-        v-if="!readonly"
-        ref="attachmentRef"
-        for="input-attachment"
-        dense
-        outlined
-        multiple
-        append
-        :readonly
-        :label="$t('personnel.form.attachment')"
-        class="col"
-        v-model="attachment"
-      >
-        <template v-slot:prepend>
-          <Icon
-            icon="material-symbols:attach-file"
-            width="20px"
-            style="color: var(--brand-1)"
-          />
-        </template>
-        <template v-slot:file="file">
-          <div class="row full-width items-center">
-            <span class="col ellipsis">
-              {{ file.file.name }}
-            </span>
-            <q-btn
-              dense
-              rounded
-              flat
-              padding="2 2"
-              class="app-text-muted"
-              icon="mdi-close-circle"
-              @click.stop="attachmentRef.removeAtIndex(file.index)"
-            />
-          </div>
-        </template>
-      </q-file>
-
-      <div v-if="attachmentList && attachmentList?.length > 0" class="col-12">
-        <q-list bordered separator class="rounded" style="padding: 0">
-          <q-item
-            id="attachment-file"
-            for="attachment-file"
-            v-for="item in attachmentList"
-            clickable
-            :key="item.url"
-            class="items-center row"
-            @click="() => openNewTab(item.url)"
-          >
-            <q-item-section>
-              <div class="row items-center justify-between">
-                <div class="col">
-                  {{ item.name }}
-                </div>
-                <q-btn
-                  v-if="!readonly"
-                  id="delete-file"
-                  rounded
-                  flat
-                  dense
-                  unelevated
-                  size="md"
-                  icon="mdi-trash-can-outline"
-                  class="app-text-negative"
-                  @click.stop="deleteAttachment(item.name)"
-                />
-              </div>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </div>
    </div>
  </div>
 </template>
--- a/src/components/form/AddressForm.vue
+++ b/src/components/form/AddressForm.vue
@ -12,7 +12,7 @@ import { formatAddress } from 'src/utils/address';
 import useOptionStore from 'stores/options';

 const optionStore = useOptionStore();
-const props = defineProps<{
+defineProps<{
  title?: string;
  addressTitle?: string;
  addressTitleEN?: string;
@ -30,7 +30,6 @@ const props = defineProps<{

  useEmployment?: boolean;
  useWorkPlace?: boolean;
-  useForeignAddress?: boolean;
 }>();

 const addressStore = useAddressStore();
@ -58,25 +57,6 @@ const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
 const zipCode = defineModel<string | null | undefined>('zipCode');
 const sameWithEmployer = defineModel<boolean>('sameWithEmployer');

-const provinceTextEN = defineModel<string | null | undefined>(
-  'provinceTextEn',
-  {
-    default: '',
-  },
-);
-const districtTextEN = defineModel<string | null | undefined>(
-  'districtTextEn',
-  {
-    default: '',
-  },
-);
-const subDistrictTextEN = defineModel<string | null | undefined>(
-  'subDistrictTextEn',
-  {
-    default: '',
-  },
-);
-
 const homeCode = defineModel<string | null | undefined>('homeCode');
 const employmentOffice = defineModel<string | null | undefined>(
  'employmentOffice',
@ -84,7 +64,6 @@ const employmentOffice = defineModel<string | null | undefined>(
 const employmentOfficeEN = defineModel<string | null | undefined>(
  'employmentOfficeEn',
 );
-const addressForeign = defineModel<boolean>('addressForeign');

 const addrOptions = reactive<{
  provinceOps: Province[];
@ -99,18 +78,14 @@ const addrOptions = reactive<{
 const area = ref<Office[]>([]);

 const fullAddress = computed(() => {
-  const province = addressForeign.value
-    ? { id: '1', name: provinceId.value }
-    : provinceOptions.value.find((v) => v.id === provinceId.value);
-  const district = addressForeign.value
-    ? { id: '1', name: districtId.value }
-    : districtOptions.value.find((v) => v.id === districtId.value);
-  const sDistrict = addressForeign.value
-    ? { id: '1', name: subDistrictId.value }
-    : subDistrictOptions.value.find((v) => v.id === subDistrictId.value);
+  const province = provinceOptions.value.find((v) => v.id === provinceId.value);
+  const district = districtOptions.value.find((v) => v.id === districtId.value);
+  const sDistrict = subDistrictOptions.value.find(
+    (v) => v.id === subDistrictId.value,
+  );

-  if (province?.name && district?.name && sDistrict?.name) {
-    const fullAddressText = formatAddress({
+  if (province && district && sDistrict) {
+    const fullAddress = formatAddress({
      address: address.value,
      addressEN: addressEN.value,
      moo: moo.value ? moo.value : '',
@ -122,26 +97,21 @@ const fullAddress = computed(() => {
      province: province as unknown as Province,
      district: district as unknown as District,
      subDistrict: sDistrict as unknown as SubDistrict,
-      zipCode: addressForeign.value ? zipCode.value || ' ' : undefined,
    });
-    return fullAddressText;
+    return fullAddress;
  }
  return '-';
 });

 const fullAddressEN = computed(() => {
-  const province = addressForeign.value
-    ? { nameEN: provinceTextEN.value }
-    : provinceOptions.value.find((v) => v.id === provinceId.value);
-  const district = addressForeign.value
-    ? { nameEN: districtTextEN.value }
-    : districtOptions.value.find((v) => v.id === districtId.value);
-  const sDistrict = addressForeign.value
-    ? { nameEN: subDistrictTextEN.value }
-    : subDistrictOptions.value.find((v) => v.id === subDistrictId.value);
+  const province = provinceOptions.value.find((v) => v.id === provinceId.value);
+  const district = districtOptions.value.find((v) => v.id === districtId.value);
+  const sDistrict = subDistrictOptions.value.find(
+    (v) => v.id === subDistrictId.value,
+  );

-  if (province?.nameEN && district?.nameEN && sDistrict?.nameEN) {
-    const fullAddressText = formatAddress({
+  if (province && district && sDistrict) {
+    const fullAddress = formatAddress({
      address: address.value,
      addressEN: addressEN.value,
      moo: moo.value ? moo.value : '',
@ -154,9 +124,8 @@ const fullAddressEN = computed(() => {
      district: district as unknown as District,
      subDistrict: sDistrict as unknown as SubDistrict,
      en: true,
-      zipCode: addressForeign.value ? zipCode.value || ' ' : undefined,
    });
-    return fullAddressText;
+    return fullAddress;
  }
  return '-';
 });
@ -180,7 +149,7 @@ async function fetchProvince() {
 }

 async function fetchDistrict() {
-  if (!provinceId.value || addressForeign.value) return;
+  if (!provinceId.value) return;

  const result = await addressStore.fetchDistrictByProvinceId(provinceId.value);
  if (result) addrOptions.districtOps = result;
@ -199,7 +168,7 @@ async function fetchDistrict() {
 }

 async function fetchSubDistrict() {
-  if (!districtId.value || addressForeign.value) return;
+  if (!districtId.value) return;
  const result = await addressStore.fetchSubDistrictByProvinceId(
    districtId.value,
  );
@ -286,16 +255,6 @@ onMounted(async () => {
  await fetchSubDistrict();
 });

-function clearAddress() {
-  provinceId.value = null;
-  districtId.value = null;
-  subDistrictId.value = null;
-  provinceTextEN.value = null;
-  districtTextEN.value = null;
-  subDistrictTextEN.value = null;
-  zipCode.value = null;
-}
-
 watch(provinceId, fetchDistrict);
 watch(districtId, fetchSubDistrict);

@ -354,15 +313,6 @@ watchEffect(async () => {
          {{ $t('customerEmployee.form.addressCustom') }}
        </span>
      </div>
-
-      <div v-if="useForeignAddress" class="text-caption q-ml-md app-text-muted">
-        <q-checkbox
-          size="xs"
-          v-model="addressForeign"
-          @update:model-value="clearAddress"
-        />
-        {{ $t('personnel.form.addressForeign') }}
-      </div>
    </div>

    <div class="col-12 row q-col-gutter-y-md">
@ -499,24 +449,7 @@ watchEffect(async () => {
            (v) => (typeof v === 'string' ? (street = v) : '')
          "
        />
-        <q-input
-          v-if="addressForeign"
-          outlined
-          hide-bottom-space
-          class="col-md-3 col-6"
-          v-model="provinceId"
-          :dense="dense"
-          :label="$t('form.province')"
-          :readonly="readonly || sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `input-province-${indexId}` : 'input-province'}`"
-          :rules="
-            disabledRule
-              ? []
-              : [(val) => (val && val.length > 0) || $t('form.error.required')]
-          "
-        />
        <q-select
-          v-else
          autocomplete="off"
          outlined
          clearable
@ -560,24 +493,7 @@ watchEffect(async () => {
          </template>
        </q-select>

-        <q-input
-          v-if="addressForeign"
-          outlined
-          hide-bottom-space
-          class="col-md-3 col-6"
-          v-model="districtId"
-          :dense="dense"
-          :label="$t('form.district')"
-          :readonly="readonly || sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `input-district-${indexId}` : 'input-district'}`"
-          :rules="
-            disabledRule
-              ? []
-              : [(val) => (val && val.length > 0) || $t('form.error.required')]
-          "
-        />
        <q-select
-          v-else
          autocomplete="off"
          outlined
          clearable
@ -620,25 +536,7 @@ watchEffect(async () => {
            </q-item>
          </template>
        </q-select>
-
-        <q-input
-          v-if="addressForeign"
-          outlined
-          hide-bottom-space
-          class="col-md-3 col-6"
-          v-model="subDistrictId"
-          :dense="dense"
-          :label="$t('form.district')"
-          :readonly="readonly || sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `input-sub-district-${indexId}` : 'input-sub-district'}`"
-          :rules="
-            disabledRule
-              ? []
-              : [(val) => (val && val.length > 0) || $t('form.error.required')]
-          "
-        />
        <q-select
-          v-else
          autocomplete="off"
          outlined
          clearable
@ -682,27 +580,17 @@ watchEffect(async () => {
          </template>
        </q-select>
        <q-input
-          :key="Number(addressForeign)"
-          hide-bottom-space
          :for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`"
          :dense="dense"
          outlined
-          :disable="!addressForeign && !readonly && !sameWithEmployer"
-          :readonly="!addressForeign || readonly"
+          :disable="!readonly && !sameWithEmployer"
+          readonly
          :label="$t('form.zipCode')"
          class="col-md-3 col-6"
          :model-value="
-            !addressForeign
-              ? (addrOptions.subDistrictOps
-                  ?.filter((x) => x.id === subDistrictId)
-                  .map((x) => x.zipCode)[0] ?? '')
-              : zipCode
-          "
-          @update:model-value="(v) => (zipCode = v.toString())"
-          :rules="
-            !addressForeign
-              ? []
-              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+            addrOptions.subDistrictOps
+              ?.filter((x) => x.id === subDistrictId)
+              .map((x) => x.zipCode)[0] ?? ''
          "
        />
        <q-input
@ -801,24 +689,7 @@ watchEffect(async () => {
            (v) => (typeof v === 'string' ? (streetEN = v) : '')
          "
        />
-        <q-input
-          v-if="addressForeign"
-          outlined
-          hide-bottom-space
-          class="col-md-3 col-6"
-          v-model="provinceTextEN"
-          :dense="dense"
-          label="Province"
-          :readonly="readonly || sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `input-province-en-${indexId}` : 'input-province-en'}`"
-          :rules="
-            disabledRule
-              ? []
-              : [(val) => (val && val.length > 0) || $t('form.error.required')]
-          "
-        />
        <q-select
-          v-else
          autocomplete="off"
          outlined
          clearable
@ -861,25 +732,7 @@ watchEffect(async () => {
            </q-item>
          </template>
        </q-select>
-
-        <q-input
-          v-if="addressForeign"
-          outlined
-          hide-bottom-space
-          class="col-md-3 col-6"
-          v-model="districtTextEN"
-          :dense="dense"
-          label="District"
-          :readonly="readonly || sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `input-district-en-${indexId}` : 'input-district-en'}`"
-          :rules="
-            disabledRule
-              ? []
-              : [(val) => (val && val.length > 0) || $t('form.error.required')]
-          "
-        />
        <q-select
-          v-else
          autocomplete="off"
          outlined
          clearable
@ -922,25 +775,7 @@ watchEffect(async () => {
            </q-item>
          </template>
        </q-select>
-
-        <q-input
-          v-if="addressForeign"
-          outlined
-          hide-bottom-space
-          class="col-md-3 col-6"
-          v-model="subDistrictTextEN"
-          :dense="dense"
-          label="Sub-District"
-          :readonly="readonly || sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `input-sub-district-en-${indexId}` : 'input-sub-district-en'}`"
-          :rules="
-            disabledRule
-              ? []
-              : [(val) => (val && val.length > 0) || $t('form.error.required')]
-          "
-        />
        <q-select
-          v-else
          autocomplete="off"
          outlined
          clearable
@ -984,28 +819,19 @@ watchEffect(async () => {
          </template>
        </q-select>
        <q-input
-          :key="Number(addressForeign)"
          hide-bottom-space
          :for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`"
          :dense="dense"
          outlined
-          :readonly="!addressForeign || readonly"
-          :disable="!addressForeign && !readonly && !sameWithEmployer"
+          readonly
+          :disable="!readonly && !sameWithEmployer"
          zip="zip-en"
          label="Zip Code"
          class="col-md-3 col-6"
          :model-value="
-            !addressForeign
-              ? (addrOptions.subDistrictOps
-                  ?.filter((x) => x.id === subDistrictId)
-                  .map((x) => x.zipCode)[0] ?? '')
-              : zipCode
-          "
-          @update:model-value="(v) => (zipCode = v.toString())"
-          :rules="
-            !addressForeign
-              ? []
-              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+            addrOptions.subDistrictOps
+              ?.filter((x) => x.id === subDistrictId)
+              .map((x) => x.zipCode)[0] ?? ''
          "
        />
        <q-input
--- a/src/components/shared/select/SelectBusinessType.vue
+++ b/src/components/shared/select/SelectBusinessType.vue
@ -79,7 +79,7 @@ function setDefaultValue() {
    v-model="value"
    incremental
    option-value="id"
-    :label="label || $t('menu.manage.businessType')"
+    :label
    :placeholder
    :readonly
    :disable="disabled"
@ -92,13 +92,21 @@ function setDefaultValue() {
    @filter="filter"
  >
    <template #selected-item="{ opt }">
-      {{ (lang ?? $i18n.locale) !== 'eng' ? opt.name : opt.nameEN }}
+      {{
+        (lang ?? $i18n.locale) !== 'eng'
+          ? opt.name + ' ' + opt.name
+          : opt.nameEN + ' ' + opt.nameEN
+      }}
    </template>

    <template #option="{ opt, scope }">
      <q-item v-bind="scope.itemProps">
        <span class="row items-center">
-          {{ (lang ?? $i18n.locale) !== 'eng' ? opt.name : opt.nameEN }}
+          {{
+            (lang ?? $i18n.locale) !== 'eng'
+              ? opt.name + ' ' + opt.name
+              : opt.nameEN + ' ' + opt.nameEN
+          }}
        </span>
      </q-item>

--- a/src/components/shared/select/select.ts
+++ b/src/components/shared/select/select.ts
@ -35,13 +35,7 @@ export const createSelect = <T extends Record<string, any>>(
  let previousSearch = '';

  watch(value, (v) => {
-    if (!v) return;
-
-    if (cache && cache.find((opt) => opt[valueField] === v)) {
-      valueOption.value = cache.find((opt) => opt[valueField] === v);
-      return;
-    }
-
+    if (!v || (cache && cache.find((opt) => opt[valueField] === v))) return;
    getSelectedOption();
  });

@ -69,15 +63,7 @@ export const createSelect = <T extends Record<string, any>>(
    const currentValue = value.value;

    if (!currentValue) return;
-
-    const option = selectOptions.value.find(
-      (v) => v[valueField] === currentValue,
-    );
-
-    if (option) {
-      valueOption.value = option;
-      return;
-    }
+    if (selectOptions.value.find((v) => v[valueField] === currentValue)) return;
    if (valueOption.value && valueOption.value[valueField] === currentValue) {
      return selectOptions.value.unshift(valueOption.value);
    }
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@ -476,7 +476,6 @@ export default {
      blacklist: 'Black list',
      contactName: 'Contact Person',
      contactTel: 'Contact Number',
-      addressForeign: 'Use foreign address',
    },
  },
  customer: {
@ -928,7 +927,6 @@ export default {
    contactName: 'Contact Person',
    contactTel: 'Contact Number',
    bankInfo: 'Bank Information',
-    attachment: 'Attachment',
  },

  requestList: {
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@ -472,7 +472,6 @@ export default {
      blacklist: 'แบล็คลิสต์',
      contactName: 'ชื่อผู้ติดต่อ',
      contactTel: 'เบอร์โทรศัพท์ผู้ติดต่อ',
-      addressForeign: 'ใช้ที่อยู่ต่างประเทศ',
    },
  },
  customer: {
@ -799,7 +798,7 @@ export default {
    branch: 'สาขาที่ออกใบเสนอราคา',
    branchVirtual: 'จุดรับบริการที่ออกใบเสนอราคา',
    customer: 'ลูกค้า',
-    newCustomer: 'แรงงานใหม่',
+    newCustomer: 'ลูกค้าใหม่',
    employeeList: 'รายชื่อแรงงาน',
    employee: 'แรงงาน',
    employeeName: 'ชื่อ-นามสกุล แรงงาน',
@ -925,7 +924,6 @@ export default {
    contactName: 'ชื่อผู้ติดต่อ',
    contactTel: 'เบอร์โทรผู้ติดต่อ',
    bankInfo: 'ข้อมูลธนาคาร',
-    attachment: 'เอกสารเพิ่มเติม',
  },

  requestList: {
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@ -157,14 +157,6 @@ const defaultFormData = {
  contactTel: '',
  remark: '',
  agencyStatus: '',
-  addressForeign: false,
-  provinceText: null,
-  districtText: null,
-  subDistrictText: null,
-  provinceTextEN: null,
-  districtTextEN: null,
-  subDistrictTextEN: null,
-  zipCodeText: null,
 };

 const formData = ref<UserCreate>({
@ -217,14 +209,6 @@ const formData = ref<UserCreate>({
  contactTel: '',
  remark: '',
  agencyStatus: '',
-  addressForeign: false,
-  provinceText: null,
-  districtText: null,
-  subDistrictText: null,
-  provinceTextEN: null,
-  districtTextEN: null,
-  subDistrictTextEN: null,
-  zipCodeText: null,
 });

 const fieldSelectedOption = ref<{ label: string; value: string }[]>([
@ -447,28 +431,6 @@ async function onSubmit(excludeDialog?: boolean) {
      ...formData.value,
      checkpointEN: formData.value.checkpoint,
      status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
-      provinceId: formData.value.addressForeign
-        ? null
-        : formData.value.provinceId,
-      districtId: formData.value.addressForeign
-        ? null
-        : formData.value.districtId,
-      subDistrictId: formData.value.addressForeign
-        ? null
-        : formData.value.subDistrictId,
-
-      provinceText: formData.value.addressForeign
-        ? formData.value.provinceId
-        : null,
-      districtText: formData.value.addressForeign
-        ? formData.value.districtId
-        : null,
-      subDistrictText: formData.value.addressForeign
-        ? formData.value.subDistrictId
-        : null,
-      zipCodeText: formData.value.addressForeign
-        ? formData.value.zipCode
-        : null,
    } as const;

    await userStore.editById(currentUser.value.id, formDataEdit);
@ -500,31 +462,7 @@ async function onSubmit(excludeDialog?: boolean) {
        : '';
    formData.value.checkpointEN = formData.value.checkpoint;
    const result = await userStore.create(
-      {
-        ...formData.value,
-        provinceId: formData.value.addressForeign
-          ? null
-          : formData.value.provinceId,
-        districtId: formData.value.addressForeign
-          ? null
-          : formData.value.districtId,
-        subDistrictId: formData.value.addressForeign
-          ? null
-          : formData.value.subDistrictId,
-
-        provinceText: formData.value.addressForeign
-          ? formData.value.provinceId
-          : null,
-        districtText: formData.value.addressForeign
-          ? formData.value.districtId
-          : null,
-        subDistrictText: formData.value.addressForeign
-          ? formData.value.subDistrictId
-          : null,
-        zipCodeText: formData.value.addressForeign
-          ? formData.value.zipCode
-          : null,
-      },
+      formData.value,
      onCreateImageList.value,
    );

@ -622,20 +560,12 @@ async function assignFormData(idEdit: string) {
    currentUser.value = foundUser;
    formData.value = {
      branchId: foundUser.branch[0]?.id,
-      provinceId: foundUser.addressForeign
-        ? foundUser.provinceText
-        : foundUser.provinceId,
-      districtId: foundUser.addressForeign
-        ? foundUser.districtText
-        : foundUser.districtId,
-      subDistrictId: foundUser.addressForeign
-        ? foundUser.subDistrictText
-        : foundUser.subDistrictId,
+      provinceId: foundUser.provinceId,
+      districtId: foundUser.districtId,
+      subDistrictId: foundUser.subDistrictId,
      telephoneNo: foundUser.telephoneNo,
      email: foundUser.email,
-      zipCode: foundUser.addressForeign
-        ? foundUser.zipCodeText
-        : foundUser.zipCode,
+      zipCode: foundUser.zipCode,
      gender: foundUser.gender,
      addressEN: foundUser.addressEN,
      address: foundUser.address,
@ -689,10 +619,6 @@ async function assignFormData(idEdit: string) {
        (foundUser.citizenExpire && new Date(foundUser.citizenExpire)) || null,
      remark: foundUser.remark || '',
      agencyStatus: foundUser.agencyStatus || '',
-      addressForeign: foundUser.addressForeign || false,
-      provinceTextEN: foundUser.provinceTextEN,
-      districtTextEN: foundUser.districtTextEN,
-      subDistrictTextEN: foundUser.subDistrictTextEN,
    };

    formData.value.status === 'ACTIVE' || 'CREATED'
@ -819,17 +745,7 @@ watch(

 watch(
  () => formData.value.userType,
-  async (type) => {
-    if (type !== 'AGENCY') {
-      formData.value.addressForeign = false;
-      formData.value.provinceId = null;
-      formData.value.districtId = null;
-      formData.value.subDistrictId = null;
-      formData.value.provinceTextEN = null;
-      formData.value.districtTextEN = null;
-      formData.value.subDistrictTextEN = null;
-      formData.value.zipCodeText = null;
-    }
+  async () => {
    if (!infoDrawerEdit.value) return;
    formData.value.registrationNo = null;
    formData.value.startDate = null;
@ -1897,15 +1813,10 @@ watch(
              v-model:district-id="formData.districtId"
              v-model:sub-district-id="formData.subDistrictId"
              v-model:zip-code="formData.zipCode"
-              v-model:address-foreign="formData.addressForeign"
-              v-model:province-text-en="formData.provinceTextEN"
-              v-model:district-text-en="formData.districtTextEN"
-              v-model:sub-district-text-en="formData.subDistrictTextEN"
              :readonly="!infoDrawerEdit"
              prefix-id="drawer-info-personnel"
              :title="'personnel.form.addressInformation'"
              dense
-              :use-foreign-address="formData.userType === 'AGENCY'"
              class="q-mb-xl"
            />
            <FormByType
@ -2131,13 +2042,8 @@ watch(
            v-model:district-id="formData.districtId"
            v-model:sub-district-id="formData.subDistrictId"
            v-model:zip-code="formData.zipCode"
-            v-model:address-foreign="formData.addressForeign"
-            v-model:province-text-en="formData.provinceTextEN"
-            v-model:district-text-en="formData.districtTextEN"
-            v-model:sub-district-text-en="formData.subDistrictTextEN"
            prefix-id="drawer-info-personnel"
            dense
-            :use-foreign-address="formData.userType === 'AGENCY'"
            class="q-mb-xl"
          />
          <FormByType
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@ -1266,19 +1266,15 @@ const emptyCreateDialog = ref(false);
                            class="ellipsis"
                          >
                            {{
-                              props.row.branch[0].businessType
-                                ? props.row.branch[0].businessType[
-                                    $i18n.locale === 'eng' ? 'nameEN' : 'name'
-                                  ]
-                                : '-'
+                              props.row.branch[0].businessType[
+                                $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                              ]
                            }}
                            <q-tooltip>
                              {{
-                                props.row.branch[0].businessType
-                                  ? props.row.branch[0].businessType[
-                                      $i18n.locale === 'eng' ? 'nameEN' : 'name'
-                                    ]
-                                  : '-'
+                                props.row.branch[0].businessType[
+                                  $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                                ]
                              }}
                            </q-tooltip>
                          </q-td>
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@ -2313,7 +2313,6 @@ function covertToNode() {
        >
          <MainButton
            solid
-            :disabled="selectedInstallment.length === 0"
            icon="mdi-account-multiple-check-outline"
            class="q-ml-sm"
            color="207 96% 32%"
--- a/src/pages/05_quotation/QuotationFormInfo.vue
+++ b/src/pages/05_quotation/QuotationFormInfo.vue
@ -240,7 +240,7 @@ watch(
                  ? payTypeOption.filter((v) => v.value === 'Full')
                  : payTypeOption
              "
-              :readonly="readonly || debitNote"
+              :readonly
              id="pay-type"
              :model-value="payType"
              @update:model-value="
--- a/src/pages/05_quotation/QuotationFormProductSelect.vue
+++ b/src/pages/05_quotation/QuotationFormProductSelect.vue
@ -51,8 +51,6 @@ const emit = defineEmits<{
 const selectedProductGroup = defineModel<string>('selectedProductGroup', {
  default: '',
 });
-
-const selectedProductGroupOption = ref<ProductGroup | undefined>();
 const model = defineModel<boolean>();
 const inputSearch = defineModel<string>('inputSearch');
 const productGroup = defineModel<ProductGroup[]>('productGroup', {
@ -571,18 +569,14 @@ watch(
                            {{
                              productGroup.find(
                                (g) => g.id === selectedProductGroup,
-                              )?.name ||
-                              selectedProductGroupOption?.name ||
-                              '-'
+                              )?.name || '-'
                            }}
                          </span>
                          <span class="text-caption app-text-muted">
                            {{
                              productGroup.find(
                                (g) => g.id === selectedProductGroup,
-                              )?.code ||
-                              selectedProductGroupOption?.code ||
-                              '-'
+                              )?.code || '-'
                            }}
                          </span>
                        </div>
@ -868,13 +862,13 @@ watch(
              <span class="q-pr-sm">
                {{ $t('productService.group.title') }}
              </span>
+
              <SelectProductGroup
                class="col-md-4 col-12"
                :class="{ 'q-mb-sm': $q.screen.lt.md }"
                id="product-group-select"
                clearable
                v-model:value="selectedProductGroup"
-                v-model:value-option="selectedProductGroupOption"
                :placeholder="
                  !selectedProductGroup
                    ? $t('general.select', {
--- a/src/pages/05_quotation/QuotationFormWorkerSelect.vue
+++ b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
@ -21,7 +21,6 @@ import useOcrStore from 'stores/ocr';

 // NOTE: Import Components
 import {
-  AddButton,
  SaveButton,
  EditButton,
  UndoButton,
@ -54,9 +53,6 @@ import { SideMenu } from 'src/components';
 import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
 import { AddressForm } from 'src/components/form';
 import ExpirationDate from 'src/components/03_customer-management/ExpirationDate.vue';
-import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormEmployeeHealthCheck.vue';
-import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormEmployeeWorkHistory.vue';
-import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';

 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;

@ -667,7 +663,6 @@ watch(
    :show="
      () => {
        employeeFormStore.resetFormDataEmployee(true);
-        setCurrentBranchId();
      }
    "
    :before-close="
@ -1040,7 +1035,6 @@ watch(
            </div>

            <BasicInformation
-              disable-customer-select
              no-action
              id="form-information"
              prefix-id="form-employee"
--- a/src/pages/07_agencies-management/AgenciesDialog.vue
+++ b/src/pages/07_agencies-management/AgenciesDialog.vue
@ -82,7 +82,6 @@ const emit = defineEmits<{
  (e: 'addImage'): void;
  (e: 'removeImage'): void;
  (e: 'submitImage', name: string): void;
-  (e: 'deleteAttachment', name: string): void;
 }>();

 const data = defineModel<InstitutionPayload>('data', {
@ -122,9 +121,6 @@ const formBankBook = defineModel<BankBook[]>('formBankBook', {
    },
  ],
 });
-const attachment = defineModel<File[]>('attachment');
-const attachmentList =
-  defineModel<{ name: string; url: string }[]>('attachmentList');

 function viewImage() {
  imageState.imageDialog = true;
@ -352,7 +348,6 @@ watch(
          v-model:contact-name="data.contactName"
          v-model:email="data.contactEmail"
          v-model:contact-tel="data.contactTel"
-          v-model:attachment="attachment"
        />
        <AddressForm
          id="agencies-form-address-info"
@ -555,9 +550,6 @@ watch(
              v-model:contact-name="data.contactName"
              v-model:email="data.contactEmail"
              v-model:contact-tel="data.contactTel"
-              v-model:attachment="attachment"
-              :attachment-list="attachmentList"
-              @delete-attachment="(name) => $emit('deleteAttachment', name)"
            />
            <AddressForm
              id="agencies-address-info"
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@ -115,8 +115,6 @@ const blankFormData: InstitutionPayload = {
  ],
 };

-const attachment = ref<File[]>([]);
-const attachmentList = ref<{ name: string; url: string }[]>([]);
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
 const refAgenciesDialog = ref();
 const formData = ref<InstitutionPayload>(structuredClone(blankFormData));
@ -147,8 +145,6 @@ function resetForm() {
  pageState.addModal = false;
  pageState.viewDrawer = false;
  currAgenciesData.value = undefined;
-  attachment.value = [];
-  attachmentList.value = [];
  formData.value = structuredClone(blankFormData);
 }

@ -158,7 +154,7 @@ function undo() {
  pageState.isDrawerEdit = false;
 }

-async function assignFormData(data: Institution) {
+function assignFormData(data: Institution) {
  currAgenciesData.value = data;
  formData.value = {
    group: data.group,
@ -191,8 +187,6 @@ async function assignFormData(data: Institution) {
      bankUrl: `${baseUrl}/institution/${data.id}/bank-qr/${v.id}?ts=${Date.now()}`,
    })),
  };
-
-  await fetchAttachment();
 }

 async function submit(opt?: { selectedImage: string }) {
@ -234,29 +228,18 @@ async function submit(opt?: { selectedImage: string }) {
    );

    if (ret) {
-      attachment.value.forEach(async (file) => {
-        await institutionStore.putAttachment({
-          parentId: ret.id || '',
-          name: file.name,
-          file: file,
-        });
-      });
      pageState.isDrawerEdit = false;
      currAgenciesData.value = ret;
      formData.value.selectedImage = ret.selectedImage;
      await fetchData($q.screen.xs);
-      attachment.value = [];

      if (refAgenciesDialog.value && opt?.selectedImage) {
        refAgenciesDialog.value.clearImageState();
      }
-      setTimeout(async () => {
-        await fetchAttachment();
-      }, 300);
      return;
    }
  } else {
-    const res = await institutionStore.createInstitution(
+    await institutionStore.createInstitution(
      {
        ...payload,
        code: formData.value.group || '',
@ -264,16 +247,6 @@ async function submit(opt?: { selectedImage: string }) {
      imageListOnCreate.value,
    );

-    if (!res) return;
-
-    attachment.value.forEach(async (file) => {
-      await institutionStore.putAttachment({
-        parentId: res.id || '',
-        name: file.name,
-        file: file,
-      });
-    });
-
    await fetchData($q.screen.xs);
    pageState.addModal = false;
    return;
@ -373,49 +346,6 @@ async function changeStatus(id?: string) {
  }
 }

-async function deleteAttachment(attachmentName: string) {
-  dialog({
-    color: 'negative',
-    icon: 'mdi-trash-can-outline',
-    title: t('dialog.title.confirmDelete', {
-      msg: t('personnel.form.attachment'),
-    }),
-    actionText: t('general.delete'),
-    persistent: true,
-    message: t('dialog.message.confirmDelete'),
-    action: async () => {
-      if (!currAgenciesData.value?.id) return;
-      institutionStore.delAttachment({
-        parentId: currAgenciesData.value?.id,
-        name: attachmentName,
-      });
-      setTimeout(async () => {
-        await fetchAttachment();
-      }, 300);
-    },
-    cancel: () => {},
-  });
-}
-
-async function fetchAttachment() {
-  const resAttachment = await institutionStore.listAttachment({
-    parentId: currAgenciesData.value.id,
-  });
-
-  if (!resAttachment) return;
-
-  attachmentList.value = await Promise.all(
-    resAttachment.map(async (f) => ({
-      name: f,
-      url: await institutionStore.getAttachment({
-        parentId: currAgenciesData.value.id,
-        name: f,
-        download: false,
-      }),
-    })),
-  );
-}
-
 onMounted(async () => {
  navigatorStore.current.title = 'agencies.title';
  navigatorStore.current.path = [{ text: 'agencies.caption', i18n: true }];
@ -1046,7 +976,6 @@ watch(
      }
    "
    @change-status="triggerChangeStatus"
-    @delete-attachment="deleteAttachment"
    :readonly="!pageState.isDrawerEdit"
    :isEdit="pageState.isDrawerEdit"
    :hide-action="!canAccess('agencies', 'edit')"
@ -1056,8 +985,6 @@ watch(
    v-model:form-bank-book="formData.bank"
    v-model:image-list-on-create="imageListOnCreate"
    v-model:deletes-status-qr-code-bank-imag="deletesStatusQrCodeBankImag"
-    v-model:attachment="attachment"
-    :attachment-list="attachmentList"
  />
 </template>
 <style scoped>
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@ -314,7 +314,7 @@ function handleCheckAll() {
          /> -->
          <AvatarGroup
            :data="[
-              ...(responsiblePerson(props.row.quotation)?.user.map((v) => ({
+              ...responsiblePerson(props.row.quotation).user.map((v) => ({
                name:
                  $i18n.locale === 'eng'
                    ? `${v.firstNameEN} ${v.lastNameEN}`
@ -324,11 +324,11 @@ function handleCheckAll() {
                    ? `/no-img-man.png`
                    : `/no-img-female.png`
                  : `${baseUrl}/user/${v.id}/profile-image/${v.selectedImage}`,
-              })) || []),
-              ...(responsiblePerson(props.row.quotation)?.group.map((g) => ({
+              })),
+              ...responsiblePerson(props.row.quotation).group.map((g) => ({
                name: `${$t('general.group')} ${g.group}`,
                imgUrl: '/img-group.png',
-              })) || []),
+              })),
            ]"
          ></AvatarGroup>
        </q-td>
--- a/src/pages/11_credit-note/FormPage.vue
+++ b/src/pages/11_credit-note/FormPage.vue
@ -96,7 +96,7 @@ const pageState = reactive({
  mode: 'view' as 'view' | 'edit' | 'info',
 });

-const defaultRemark = '';
+const defaultRemark = '#[quotation-labor]<br/><br/>#[quotation-payment]';

 const formData = ref<CreditNotePayload>({
  quotationId: '',
@ -798,7 +798,16 @@ onMounted(async () => {
            :default-remark="defaultRemark"
            :items="[]"
            :readonly="pageState.mode === 'info'"
-          ></RemarkExpansion>
+          >
+            <template #hint>
+              {{ $t('general.hintRemark') }}
+              <code>#[quotation-labor]</code>
+              {{ $t('general.quotationLabor') }}
+              {{ $t('general.or') }}
+              <code>#[quotation-payment]</code>
+              {{ $t('general.quotationPayment') }}
+            </template>
+          </RemarkExpansion>

          <QuotationFormReceipt
            v-if="creditNoteData && view === CreditNoteStatus.Success"
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@ -218,7 +218,7 @@ const selectedWorkerItem = computed(() => {
      employeeName:
        locale.value === Lang.English
          ? `${e.firstNameEN} ${e.lastNameEN}`
-          : `${e.firstName || e.firstNameEN} ${e.lastName || e.lastNameEN}`,
+          : `${e.firstName} ${e.lastName}`,
      birthDate: dateFormatJS({ date: e.dateOfBirth }),
      gender: e.gender,
      age: calculateAge(e.dateOfBirth),
@ -235,11 +235,11 @@ const selectedWorkerItem = computed(() => {
    })),

    ...newWorkerList.value.map((v: any) => ({
-      foreignRefNo: v.passportNo || '-',
+      foreignRefNo: v.passportNo,
      employeeName:
        locale.value === Lang.English
          ? `${v.firstNameEN} ${v.lastNameEN}`
-          : `${v.firstName || v.firstNameEN} ${v.lastName || v.lastNameEN}`,
+          : `${v.firstName} ${v.lastName}`,
      birthDate: dateFormatJS({ date: v.dateOfBirth }),
      gender: v.gender,
      age: calculateAge(v.dateOfBirth),
@ -815,7 +815,7 @@ async function submit() {
        }),
        ...newWorkerList.value.map((v) => {
          const { attachment, ...payload } = v;
-          return pageState.mode === 'edit' ? payload.id : payload;
+          return payload;
        }),
      ]),
    ),
@ -1046,11 +1046,7 @@ async function submitAccepted() {
              :status-active="i.active?.()"
              :status-done="i.status === 'done'"
              :status-waiting="i.status === 'waiting'"
-              @click="
-                () => {
-                  if (pageState.mode !== 'create') i.handler();
-                }
-              "
+              @click="i.handler()"
            />
          </nav>
          <!-- #TODO  add goToQuotation as @goto-quotation-->
@ -1138,10 +1134,10 @@ async function submitAccepted() {
              view === QuotationStatus.Accepted
            "
            :total-price="summaryPrice.finalPrice"
-            :pay-split="[]"
            class="q-mb-md"
            v-model:pay-type="currentFormData.payCondition"
            v-model:pay-split-count="currentFormData.paySplitCount"
+            v-model:pay-split="currentFormData.paySplit"
            v-model:final-discount="currentFormData.discount"
            v-model:pay-bill-date="currentFormData.payBillDate"
            v-model:summary-price="summaryPrice"
@ -1196,6 +1192,7 @@ async function submitAccepted() {
            "
          />

+          <!-- TODO: bind remark -->
          <RemarkExpansion
            v-if="
              view === QuotationStatus.Issued ||
@ -1203,8 +1200,6 @@ async function submitAccepted() {
              view === QuotationStatus.PaymentPending
            "
            :readonly="readonly"
-            :final-price="summaryPrice.finalPrice"
-            :selected-worker
            v-model:remark="currentFormData.remark"
          />

--- a/src/pages/12_debit-note/document-view/MainPage.vue
+++ b/src/pages/12_debit-note/document-view/MainPage.vue
@ -492,8 +492,9 @@ function print() {
          v-html="
            convertTemplate(data?.remark || '', {
              'quotation-payment': {
-                paymentType: 'Full',
+                paymentType: data?.payCondition || 'Full',
                amount: summaryPrice.finalPrice,
+                installments: data?.paySplit,
              },
              'quotation-labor': {
                name:
--- a/src/pages/12_debit-note/expansion/RemarkExpansion.vue
+++ b/src/pages/12_debit-note/expansion/RemarkExpansion.vue
@ -1,21 +1,9 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { convertTemplate } from 'src/utils/string-template';
-import { RequestWork } from 'src/stores/request-list';
-import { Employee } from 'src/stores/employee/types';
-
 defineProps<{
  readonly?: boolean;
-  items?: {
-    product: RequestWork['productService']['product'];
-    list: RequestWork[];
-  }[];
-  finalPrice?: number;
-  selectedWorker?: Employee[];
 }>();

 const remark = defineModel<string>('remark', { default: '' });
-const remarkWrite = ref<boolean>(false);
 </script>
 <template>
  <q-expansion-item
@ -36,23 +24,7 @@ const remarkWrite = ref<boolean>(false);
      <q-editor
        dense
        :readonly="readonly"
-        :model-value="
-          !remarkWrite || readonly
-            ? convertTemplate(remark || '', {
-                'quotation-payment': {
-                  paymentType: 'Full',
-                  amount: finalPrice,
-                },
-                'quotation-labor': {
-                  name: selectedWorker.map(
-                    (v, i) =>
-                      `${i + 1}. ` +
-                      `${v.employeePassport.length !== 0 ? v.employeePassport[0].number + '_' : ''}  ${v.namePrefix}.${v.firstNameEN ? `${v.firstNameEN} ${v.lastNameEN}` : `${v.firstName} ${v.lastName}`}  `.toUpperCase(),
-                  ),
-                },
-              })
-            : remark || ''
-        "
+        :model-value="remark"
        min-height="5rem"
        class="full-width"
        toolbar-bg="input-border"
@ -76,36 +48,7 @@ const remarkWrite = ref<boolean>(false);
            remark = v;
          }
        "
-      >
-        <template v-if="!readonly" v-slot:toggle>
-          <div class="text-caption row no-wrap q-px-sm">
-            <MainButton
-              :solid="!remarkWrite"
-              icon="mdi-eye-outline"
-              color="0 0% 40%"
-              @click="remarkWrite = false"
-              style="padding: 0 var(--size-2); cursor: pointer"
-              :style="{
-                color: remarkWrite ? 'hsl(0 0% 40%)' : undefined,
-              }"
-            >
-              {{ $t('general.view', { msg: $t('general.example') }) }}
-            </MainButton>
-            <MainButton
-              :solid="remarkWrite"
-              icon="mdi-pencil-outline"
-              color="0 0% 40%"
-              @click="remarkWrite = true"
-              style="padding: 0 var(--size-2); cursor: pointer"
-              :style="{
-                color: !remarkWrite ? 'hsl(0 0% 40%)' : undefined,
-              }"
-            >
-              {{ $t('general.edit') }}
-            </MainButton>
-          </div>
-        </template>
-      </q-editor>
+      />
    </main>
  </q-expansion-item>
 </template>
--- a/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue
+++ b/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue
@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { AddButton } from 'components/button';
-import ToggleButton from 'src/components/button/ToggleButton.vue';
 import WorkerItem from 'src/components/05_quotation/WorkerItem.vue';

 defineProps<{
@ -49,8 +48,8 @@ const toggleWorker = defineModel<boolean>('toggleWorker');
            {{ $t('quotation.employeeList') }}
          </span>
          <template v-if="!readonly">
-            <!-- <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
-            {{ toggleWorker ? $t('general.specify') : $t('general.noSpecify') }} -->
+            <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
+            {{ toggleWorker ? $t('general.specify') : $t('general.noSpecify') }}
          </template>
        </div>
        <nav class="q-ml-auto">
--- a/src/stores/institution/index.ts
+++ b/src/stores/institution/index.ts
@ -5,11 +5,9 @@ import { api } from 'src/boot/axios';
 import { PaginationResult } from 'src/types';
 import useFlowStore from '../flow';
 import { Status } from '../types';
-import { baseUrl, manageAttachment, manageFile, manageMeta } from '../utils';

 export const useInstitution = defineStore('institution-store', () => {
  const flowStore = useFlowStore();
-  const attachmentManager = manageAttachment(api, 'institution');

  const data = ref<Institution[]>([]);
  const page = ref<number>(1);
@ -202,7 +200,6 @@ export const useInstitution = defineStore('institution-store', () => {
  }

  return {
-    ...attachmentManager,
    data,
    page,
    pageMax,
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@ -61,14 +61,6 @@ export type User = {
  contactTel?: string;
  remark?: string;
  agencyStatus?: AgencyStatus;
-  addressForeign?: boolean;
-  provinceText?: string | null;
-  districtText?: string | null;
-  subDistrictText?: string | null;
-  provinceTextEN?: string | null;
-  districtTextEN?: string | null;
-  subDistrictTextEN?: string | null;
-  zipCodeText?: string | null;
 };

 export type UserCreate = {
@ -121,14 +113,6 @@ export type UserCreate = {
  contactTel?: string;
  remark?: string;
  agencyStatus?: AgencyStatus | string;
-  addressForeign?: boolean;
-  provinceText?: string | null;
-  districtText?: string | null;
-  subDistrictText?: string | null;
-  provinceTextEN?: string | null;
-  districtTextEN?: string | null;
-  subDistrictTextEN?: string | null;
-  zipCodeText?: string | null;
 };

 export enum AgencyStatus {
--- a/src/utils/address.ts
+++ b/src/utils/address.ts
@ -14,7 +14,6 @@ export function formatAddress(opt: {
  district?: District | null;
  subDistrict?: SubDistrict | null;
  en?: boolean;
-  zipCode?: string;
 }) {
  const { t } = useI18n();
  let addressParts: string[];
@ -59,9 +58,7 @@ export function formatAddress(opt: {
    // );
  }

-  if (opt.subDistrict && !opt.zipCode)
-    addressParts.push(`${opt.subDistrict.zipCode}`);
-  if (opt.zipCode) addressParts.push(`${opt.zipCode}`);
+  if (opt.subDistrict) addressParts.push(`${opt.subDistrict.zipCode}`);

  return addressParts.join(' ');
 }
--- a/src/utils/string-template.ts
+++ b/src/utils/string-template.ts
@ -74,7 +74,7 @@ const templates = {
            const branch = v.request.quotation.customerBranch;
            return (
              `${i + 1}. ` +
-              ` ${v.request.code}_${branch.customer.customerType === 'PERS' ? `${branch.namePrefix}. ${branch.firstNameEN} ${branch.lastNameEN} `.toUpperCase() : branch.registerName}_` +
+              ` ${v.request.code}_${branch.customer.customerType === 'PERS' ? `นายจ้าง ${branch.namePrefix}. ${branch.firstNameEN} ${branch.lastNameEN} `.toUpperCase() : branch.registerName}_` +
              `${employee.namePrefix}. ${employee.firstNameEN} ${employee.lastNameEN} `.toUpperCase() +
              `${!!v.failedType && v.failedType !== 'other' ? `${i18n.global.t(`taskOrder.${v.failedType}`)}` : !!v.failedComment ? v.failedComment : ''}`
            );