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">

src/components/02_personnel-management/FormPerson.vue

@@ -293,11 +293,15 @@ watch(
         :readonly="readonly"
         :label="$t('form.birthDate')"
         :disabled-dates="disabledAfterToday"
-        :rules="[
+        :rules="
+          employee
+            ? []
+            : [
                 (val: string) =>
                   !!val ||
                   $t('form.error.selectField', { field: $t('form.birthDate') }),
-        ]"
+              ]
+        "
       />
 
       <q-input

src/components/03_customer-management/FormEmployeePassport.vue

@@ -20,8 +20,8 @@ const issuePlace = defineModel<string>('issuePlace');
 const issueCountry = defineModel<string>('issueCountry');
 const issueDate = defineModel<Date | null | string>('issueDate');
 const type = defineModel<string>('type');
-const expireDate = defineModel<Date | string>('expireDate');
+const expireDate = defineModel<Date>('expireDate');
-const birthDate = defineModel<Date | string>('birthDate');
+const birthDate = defineModel<Date>('birthDate');
 const workerStatus = defineModel<string>('workerStatus');
 const nationality = defineModel<string>('nationality');
 const gender = defineModel<string>('gender');

src/components/03_customer-management/FormEmployeeVisa.vue

@@ -28,12 +28,12 @@ const arrivalAt = defineModel<string>('arrivalAt');
 const arrivalTMNo = defineModel<string>('arrivalTmNo');
 const arrivalTM = defineModel<string>('arrivalTm');
 const mrz = defineModel<string>('mrz');
-const entryCount = defineModel<number | string>('entryCount');
+const entryCount = defineModel<number>('entryCount');
 const issuePlace = defineModel<string>('issuePlace');
 const issueCountry = defineModel<string>('issueCountry');
 const issueDate = defineModel<Date | null | string>('visaIssueDate');
 const type = defineModel<string>('type');
-const expireDate = defineModel<Date | string>('expireDate');
+const expireDate = defineModel<Date>('expireDate');
 const remark = defineModel<string>('remark');
 const workerType = defineModel<string>('workerType');
 const number = defineModel<string>('number');
@@ -157,7 +157,7 @@ watch(
         name="mdi-passport"
         style="background-color: var(--surface-3)"
       />
-      {{ $t(title) }}
+      {{ title }}
     </div>
 
     <div

src/components/03_customer-management/TableEmpoloyee.vue

@@ -141,9 +141,8 @@ defineEmits<{
                   <q-avatar size="md">
                     <q-img
                       :src="
-                        props.row.selectedImage
+                        `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}` ||
-                          ? `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}`
+                        `/images/employee-avatar-${props.row.gender}.png`
-                          : `/images/employee-avatar-${props.row.gender}.png`
                       "
                       class="text-center"
                       :ratio="1"
@@ -296,9 +295,9 @@ defineEmits<{
               $i18n.locale === 'eng'
                 ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
                 : `${props.row.firstName} ${props.row.lastName} `.trim(),
-            img: props.row.selectedImage
+            img:
-              ? `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}`
+              `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}` ||
-              : `/images/employee-avatar-${props.row.gender}.png`,
+              `/images/employee-avatar-${props.row.gender}.png`,
             fallbackImg: `/images/employee-avatar-${props.row.gender}.png`,
             male: props.row.gender === 'male',
             female: props.row.gender === 'female',

src/components/05_quotation/FormAbout.vue

@@ -2,18 +2,11 @@
 import SelectCustomer from '../shared/select/SelectCustomer.vue';
 import SelectBranch from '../shared/select/SelectBranch.vue';
 
-import { CustomerBranch } from 'src/stores/customer';
-import { ref } from 'vue';
-
 const branchId = defineModel<string>('branchId');
 const customerBranchId = defineModel<string>('customerBranchId');
 const agentPrice = defineModel<boolean>('agentPrice');
 const special = defineModel<boolean>('special');
 
-const customerBranchOption = defineModel<CustomerBranch>(
-  'customerBranchOption',
-);
-
 defineProps<{
   outlined?: boolean;
   readonly?: boolean;
@@ -74,12 +67,10 @@ defineEmits<{
         required
         :readonly
       />
-
       <SelectCustomer
         id="about-select-customer-branch-id"
         for="about-select-customer-branch-id"
         v-model:value="customerBranchId"
-        v-model:value-option="customerBranchOption"
         :label="$t('quotation.customer')"
         :creatable-disabled-text="`(${$t('form.error.selectField', {
           field: $t('quotation.branchVirtual'),

src/components/05_quotation/ProductItem.vue

@@ -58,15 +58,16 @@ const currentBtnOpen = ref<{ title: string; opened: boolean[] }[]>([
 
 function calcPrice(c: (typeof rows.value)[number]) {
   const originalPrice = c.pricePerUnit;
-  const finalPricePerUnit = precisionRound(
+  const finalPriceWithVat = precisionRound(
-    originalPrice +
+    originalPrice + originalPrice * (config.value?.vat || 0.07),
-      (c.product[props.agentPrice ? 'agentPriceCalcVat' : 'calcVat']
-        ? originalPrice * (config.value?.vat || 0.07)
-        : 0),
   );
-  const price = finalPricePerUnit * c.amount - c.discount;
+  const finalPriceNoVat = finalPriceWithVat / (1 + (config.value?.vat || 0.07));
 
-  return precisionRound(price);
+  const price = finalPriceNoVat * c.amount - c.discount;
+  const vat = c.product[props.agentPrice ? 'agentPriceCalcVat' : 'calcVat']
+    ? (finalPriceNoVat * c.amount - c.discount) * (config.value?.vat || 0.07)
+    : 0;
+  return precisionRound(price + vat);
 }
 
 const discount4Show = ref<string[]>([]);
@@ -434,20 +435,8 @@ watch(
               <q-td align="right">
                 {{
                   formatNumberDecimal(
-                    props.row.product[
-                      agentPrice ? 'agentPriceCalcVat' : 'calcVat'
-                    ]
-                      ? precisionRound(
-                          (props.row.pricePerUnit *
-                            (1 + (config?.vat || 0.07)) *
-                            props.row.amount -
-                            props.row.discount) /
-                            (1 + (config?.vat || 0.07)),
-                        )
-                      : precisionRound(
                     props.row.pricePerUnit * props.row.amount -
                       props.row.discount,
-                        ),
                     2,
                   )
                 }}
@@ -459,12 +448,9 @@ watch(
                       agentPrice ? 'agentPriceCalcVat' : 'calcVat'
                     ]
                       ? precisionRound(
-                          ((props.row.pricePerUnit *
+                          (props.row.pricePerUnit * props.row.amount -
-                            (1 + (config?.vat || 0.07)) *
+                            props.row.discount) *
-                            props.row.amount -
+                            (config?.vat || 0.07),
-                            props.row.discount) /
-                            (1 + (config?.vat || 0.07))) *
-                            0.07,
                         )
                       : 0,
                     2,

src/components/05_quotation/TableQuotation.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { QTableProps } from 'quasar';
-import { dateFormat, dateFormatJS } from 'src/utils/datetime';
+import { dateFormat } from 'src/utils/datetime';
 
 import { formatNumberDecimal } from 'stores/utils';
 
@@ -86,11 +86,11 @@ defineEmits<{
         </q-td>
 
         <q-td v-if="visibleColumns.includes('createdAt')">
-          {{ dateFormatJS({ date: props.row.createdAt }) }}
+          {{ dateFormat(props.row.createdAt) }}
         </q-td>
 
         <q-td v-if="visibleColumns.includes('dueDate')">
-          {{ dateFormatJS({ date: props.row.dueDate }) }}
+          {{ dateFormat(props.row.dueDate) }}
         </q-td>
 
         <q-td v-if="visibleColumns.includes('contactName')">

src/components/08_request-list/DataDisplay.vue

@@ -27,38 +27,26 @@ withDefaults(
       class="app-text-muted q-pr-sm"
       :width="iconSize || '2rem'"
     />
-    <span :id="`dd-wrapper-${label}`" class="row col">
+    <span class="row col">
-      <span
+      <span class="col-12 app-text-muted-2" style="font-size: 10px">
-        :id="`dd-label-${label}`"
-        class="col-12 app-text-muted-2"
-        style="font-size: 10px"
-      >
         {{ label }}
       </span>
-      <span :id="`dd-value-wrapper-${label}`" class="col-12 ellipsis">
+      <span class="col-12 ellipsis">
         <slot name="value">
           <span
             :class="{ 'link cursor-pointer': clickable }"
             v-if="typeof value === 'string'"
             @click="clickable ? $emit('labelClick', value, null) : undefined"
-            :id="`link-${value}`"
-            :for="`link-${value}`"
           >
             {{ value }}
             <q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
           </span>
-          <span
+          <span v-else :class="{ 'link cursor-pointer': clickable }">
-            :id="`dd-value-${label}`"
-            v-else
-            :class="{ 'link cursor-pointer': clickable }"
-          >
             <span
               v-for="(item, index) in value"
               :key="index"
               @click="$emit('labelClick', item, index)"
               class="link cursor-pointer"
-              :id="`link-${item}`"
-              :for="`link-${item}`"
             >
               {{ item }}
               <span v-if="index < value.length - 1">,&nbsp;</span>

src/components/DrawerInfo.vue

@@ -8,7 +8,7 @@ import {
   UndoButton,
 } from 'components/button';
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     title: string;
     category?: string;
@@ -42,11 +42,6 @@ const drawerOpen = defineModel<boolean>('drawerOpen', {
 const myForm = ref();
 
 function reset() {
-  if (props.beforeClose) {
-    drawerOpen.value = props.beforeClose
-      ? props.beforeClose()
-      : !drawerOpen.value;
-  }
   if (myForm.value) {
     myForm.value.resetValidation();
   }
@@ -67,6 +62,7 @@ async function onValidationError(ref: any) {
     @show="show"
     @before-hide="reset"
     @hide="close"
+    @update:model-value="(v) => (drawerOpen = beforeClose ? beforeClose() : v)"
     :width="$q.screen.gt.xs ? windowSize * 0.85 : windowSize"
     v-model="drawerOpen"
     behavior="mobile"

src/components/TreeComponent.vue

@@ -96,9 +96,7 @@ defineEmits<{
                   expandedTree[expandedTree.length - 1] === node.id,
               }"
             >
-              {{
+              {{ node.name }}
-                $i18n.locale === 'eng' ? node.nameEN || node.name : node.name
-              }}
             </span>
             <span class="app-text-muted text-caption ellipsis">
               {{ node.code }}

src/components/button/MainButton.vue

@@ -5,7 +5,6 @@ defineEmits<{
   (e: 'click', v: MouseEvent): void;
 }>();
 defineProps<{
-  id?: string;
   icon?: string;
   color: string;
   iconOnly?: boolean;
@@ -19,7 +18,6 @@ defineProps<{
 
 <template>
   <button
-    :id="id"
     @click="(e) => $emit('click', e)"
     class="main-btn"
     :class="{

src/components/button/SaveButton.vue

@@ -10,7 +10,6 @@ defineProps<{
   outlined?: boolean;
   disabled?: boolean;
   dark?: boolean;
-  color?: string;
 
   label?: string;
   icon?: string;
@@ -24,7 +23,7 @@ defineProps<{
     @click="(e) => $emit('click', e)"
     v-bind="{ ...$props, ...$attrs }"
     :icon="icon || 'mdi-content-save-outline'"
-    :color="color || '207 96% 32%'"
+    color="207 96% 32%"
     :title="iconOnly ? $t('general.save') : undefined"
   >
     {{ label || $t('general.save') }}

src/components/index.ts

@@ -16,4 +16,3 @@ export { default as SideMenu } from './SideMenu.vue';
 export { default as StatCardComponent } from './StatCardComponent.vue';
 export { default as TooltipComponent } from './TooltipComponent.vue';
 export { default as TreeComponent } from './TreeComponent.vue';
-export { default as PaginationPageSize } from './PaginationPageSize.vue';

src/components/shared/SelectInput.vue

@@ -13,7 +13,6 @@ let defaultFilter: (
 
 const props = withDefaults(
   defineProps<{
-    prefix?: string;
     id?: string;
     label?: string;
     option: T[];
@@ -72,7 +71,6 @@ watch(
 </script>
 <template>
   <q-select
-    :id="id"
     :placeholder="placeholder"
     outlined
     :clearable

src/components/shared/select/SelectBranch.vue

@@ -75,9 +75,9 @@ function setDefaultValue() {
 </script>
 <template>
   <SelectInput
+    for="select-hq-id"
     v-model="value"
     incremental
-    id="select-hq-id"
     :label
     :placeholder
     :readonly

src/components/shared/select/SelectBusinessType.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { getRole } from 'src/services/keycloak';
 
 import { createSelect, SelectProps } from './select';
 import SelectInput from '../SelectInput.vue';
@@ -94,103 +95,6 @@ function setDefaultValue() {
       {{ (lang ?? $i18n.locale) !== 'eng' ? opt.name : opt.nameEN }}
     </template>
 
-    <template #no-option v-if="creatable">
-      <q-item
-        :disable="creatableDisabled"
-        clickable
-        v-close-popup
-        @click.stop="$emit('create')"
-      >
-        <q-item-section>
-          <span class="row items-center">
-            <q-icon
-              name="mdi-plus-circle-outline"
-              class="q-mr-sm"
-              style="color: hsl(var(--positive-bg))"
-            />
-            <b>
-              {{ $t('general.add', { text: $t('businessType.title') }) }}
-            </b>
-            <span
-              v-if="creatableDisabled && creatableDisabledText"
-              class="app-text-muted q-pl-xs"
-              style="font-size: 80%"
-            >
-              {{ creatableDisabledText }}
-            </span>
-          </span>
-        </q-item-section>
-      </q-item>
-
-      <q-separator class="q-mx-sm" />
-    </template>
-
-    <template #before-options v-if="creatable">
-      <q-item
-        :disable="creatableDisabled"
-        clickable
-        v-close-popup
-        @click.stop="$emit('create')"
-        for="select-biz-type-add-new"
-        id="select-biz-type-add-new"
-      >
-        <q-item-section>
-          <span class="row items-center">
-            <q-icon
-              name="mdi-plus-circle-outline"
-              class="q-mr-sm"
-              style="color: hsl(var(--positive-bg))"
-            />
-            <b>
-              {{ $t('general.add', { text: $t('businessType.title') }) }}
-            </b>
-            <span
-              v-if="creatableDisabled && creatableDisabledText"
-              class="app-text-muted q-pl-xs"
-              style="font-size: 80%"
-            >
-              {{ creatableDisabledText }}
-            </span>
-          </span>
-        </q-item-section>
-      </q-item>
-
-      <q-separator class="q-mx-sm" />
-    </template>
-
-    <template #before-options v-if="creatable">
-      <q-item
-        :disable="creatableDisabled"
-        clickable
-        v-close-popup
-        @click.stop="$emit('create')"
-        for="select-business-type-add-new"
-        id="select-business-type-add-new"
-      >
-        <q-item-section>
-          <span class="row items-center">
-            <q-icon
-              name="mdi-plus-circle-outline"
-              class="q-mr-sm"
-              style="color: hsl(var(--positive-bg))"
-            />
-            <b>
-              {{ $t('general.add', { text: $t('menu.manage.businessType') }) }}
-            </b>
-            <span
-              v-if="creatableDisabled && creatableDisabledText"
-              class="app-text-muted q-pl-xs"
-              style="font-size: 80%"
-            >
-              {{ creatableDisabledText }}
-            </span>
-          </span>
-        </q-item-section>
-      </q-item>
-
-      <q-separator class="q-mx-sm" />
-    </template>
-
     <template #option="{ opt, scope }">
       <q-item v-bind="scope.itemProps">
         <span class="row items-center">

src/components/shared/select/SelectCustomer.vue

@@ -30,7 +30,6 @@ defineEmits<{
 type ExclusiveProps = {
   simple?: boolean;
   simpleBranchNo?: boolean;
-  selectFirstValue?: boolean;
 };
 
 const props = defineProps<SelectProps<typeof getList> & ExclusiveProps>();
@@ -65,14 +64,10 @@ onMounted(async () => {
     setFirstValue();
   }
 
-  if (props.selectFirstValue) {
+  await getSelectedOption();
-    setDefaultValue();
-  } else await getSelectedOption();
-});
 
-function setDefaultValue() {
+  valueOption.value = selectOptions.value.find((v) => v.id === value.value);
-  setFirstValue();
+});
-}
 </script>
 <template>
   <SelectInput
@@ -165,9 +160,11 @@ function setDefaultValue() {
     </template>
 
     <template #option="{ opt, scope }">
-      <q-item v-bind="scope.itemProps" class="q-mx-sm bodrder">
+      <q-item @click="valueOption = opt" v-bind="scope.itemProps">
         <SelectCustomerItem :data="opt" :simple :simple-branch-no />
       </q-item>
+
+      <q-separator class="q-mx-sm" />
     </template>
 
     <template #append v-if="clearable">
@@ -180,11 +177,3 @@ function setDefaultValue() {
     </template>
   </SelectInput>
 </template>
-
-<style scoped>
-.bodrder {
-  border-bottom: solid;
-  border-bottom-width: 1px;
-  border-color: var(--border-color);
-}
-</style>

src/components/shared/select/SelectUser.vue

@@ -26,7 +26,6 @@ defineEmits<{
 
 type ExclusiveProps = {
   selectFirstValue?: boolean;
-  prefix?: string;
 };
 
 const props = defineProps<SelectProps<typeof getList> & ExclusiveProps>();
@@ -72,7 +71,6 @@ function setDefaultValue() {
   <SelectInput
     v-model="value"
     incremental
-    :id="`${prefix || 'nome'}-select-user`"
     :label
     :placeholder
     :readonly

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 (!v || (cache && cache.find((opt) => opt[valueField] === v))) return;
-
-    if (cache && cache.find((opt) => opt[valueField] === v)) {
-      valueOption.value = cache.find((opt) => opt[valueField] === v);
-      return;
-    }
-
     getSelectedOption();
   });
 
@@ -69,26 +63,15 @@ export const createSelect = <T extends Record<string, any>>(
     const currentValue = value.value;
 
     if (!currentValue) return;
-
+    if (selectOptions.value.find((v) => v[valueField] === currentValue)) return;
     if (valueOption.value && valueOption.value[valueField] === currentValue) {
-      selectOptions.value.unshift(valueOption.value);
+      return selectOptions.value.unshift(valueOption.value);
-      selectOptions.value = selectOptions.value.filter((curr, idx, arr) => {
-        return (
-          arr.findIndex((item) => item[valueField] === curr[valueField]) === idx
-        );
-      });
-      return;
     }
 
     const ret = await getByValue(currentValue);
 
     if (ret) {
       selectOptions.value.unshift(ret);
-      selectOptions.value = selectOptions.value.filter((curr, idx, arr) => {
-        return (
-          arr.findIndex((item) => item[valueField] === curr[valueField]) === idx
-        );
-      });
       valueOption.value = ret;
     }
   }

src/components/shared/table/TableWorker.vue

@@ -145,7 +145,6 @@ function selectedIndex(item: Employee) {
           <template v-if="col.name === '#check'">
             <q-checkbox
               id="select-worker-all"
-              for="select-worker-all"
               v-model="props.selected"
               @update:model-value="(v) => handleUpdate()"
               size="sm"
@@ -201,7 +200,6 @@ function selectedIndex(item: Employee) {
               v-model="props.selected"
               size="sm"
               :id="`select-worker-${props.row.firstName}`"
-              :for="`select-worker-${props.row.firstName}`"
             />
           </template>
         </q-td>

src/components/upload-file/UploadFileCard.vue

@@ -54,11 +54,10 @@ onMounted(() => {
     @click="$emit('click')"
   >
     <q-icon :name="icon" size="lg" :style="`color: ${color}`" />
-    <div class="col column q-pl-md">
+    <article class="col column q-pl-md">
-      <div class="ellipsis full-width" style="max-width: 65vw !important">
+      <span class="ellipsis full-width">
         {{ name }}
-      </div>
+      </span>
-
       <span class="text-caption app-text-muted-2">
         {{
           uploading.loaded
@@ -80,7 +79,7 @@ onMounted(() => {
         />
         {{ idle ? `Pending` : progress !== 1 ? `Uploading...` : 'Completed' }}
       </span>
-    </div>
+    </article>
     <q-btn
       v-if="closeable"
       icon="mdi-close"

src/components/upload-file/UploadFileGroup.vue

@@ -45,9 +45,9 @@ const props = withDefaults(
     readonly?: boolean;
     showTitle?: boolean;
     ocr?: (
-      group: string,
+      group: any,
       file: File,
-    ) => Promise<{
+    ) => void | Promise<{
       status: boolean;
       group: string;
       meta: { name: string; value: string }[];
@@ -168,8 +168,8 @@ async function change(e: Event) {
           type: map['doc_type'],
           number: map['doc_number'],
           gender: map['sex'],
-          firstName: map['last_name'],
+          firstName: map['first_name'],
-          lastName: map['first_name'],
+          lastName: map['last_name'],
           issueDate: map['issue_date'],
           expireDate: map['expire_date'],
           issuePlace: map['nationality'],

src/css/quasar.variables.scss

@@ -198,10 +198,3 @@ i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-i
   .q-focus-helper {
   visibility: hidden;
 }
-
-.clear-btn {
-  opacity: 0.6;
-  &:hover {
-    opacity: 1;
-  }
-}

src/i18n/eng.ts

@@ -161,7 +161,6 @@ export default {
     documentStatus: 'Document Status',
     advanceSearch: 'Advance Search',
     totalPeople: '{meg} people',
-    price: 'Price {price} Baht',
   },
 
   menu: {
@@ -341,7 +340,7 @@ export default {
       requireLength: 'Please enter {msg} character',
       branchNameField: "Only letters, numbers, or the characters . , - ' &.",
       branchNameENField:
-        "Only English letters, numbers, or the characters . , - ' &. ( )",
+        "Only English letters, numbers, or the characters . , - ' &.",
       passportFormat: 'Please enter the passport number in the correct format.',
     },
     warning: {
@@ -508,7 +507,6 @@ export default {
         miss: 'MISS.',
       },
 
-      taxpayyerNo: 'Taxpayer Identification Number',
       citizenId: 'Citizen ID',
       religion: 'Religion',
       issueDate: 'Issue Date',
@@ -779,8 +777,6 @@ export default {
     seller: 'Seller',
     paymentChannels: 'Payment Channels',
     channelsThat: 'Channels That',
-    refNo: 'Reference Number',
-    bankAccount: 'Bank Account',
     bankAccountNumber: 'Bank Account Number',
     bankAccountName: 'Bank Account Name',
     inTheNameOf: 'In The Name Of',
@@ -1234,9 +1230,6 @@ export default {
       taskListNotPending: 'One or more task is not pending.',
       reqNotMet: 'Not Match',
       systemError: 'A system error occurred.',
-      taskOrderInvalid: 'Please select the product and the organization.',
-
-      flowAccountProductIdNotFound: 'Product not found in flow account',
     },
   },
 

src/i18n/tha.ts

@@ -161,7 +161,6 @@ export default {
     documentStatus: 'สถานะเอกสาร',
     advanceSearch: 'ค้นหาขั้นสูง',
     totalPeople: '{meg} คน',
-    price: 'ราคา {price} บาท',
   },
 
   menu: {
@@ -338,7 +337,7 @@ export default {
       letterAndNumOnly: 'โปรดใช้เฉพาะ _ ตัวอักษรภาษาอังกฤษและตัวเลขเท่านั้น',
       numOnly: 'โปรดใช้เฉพาะตัวเลขเท่านั้น',
       requireLength: 'กรุณากรอกให้ครบ {msg} หลัก',
-      branchNameField: "โปรดใช้ตัวอักษร ตัวเลข หรือ . , - ' ( ) & เท่านั้น",
+      branchNameField: "โปรดใช้ตัวอักษร ตัวเลข หรือ . , - ' & เท่านั้น",
       branchNameENField:
         "โปรดใช้ตัวอักษรภาษาอังกฤษ ตัวเลข หรือ . , - ' & เท่านั้น",
       passportFormat: 'กรุณากรอกหมายเลขพาสปอร์ตให้ถูกต้องตามรูปแบบ',
@@ -509,7 +508,6 @@ export default {
       religion: 'ศาสนา',
       issueDate: 'วันที่ออกหนังสือ',
       passportExpiryDate: 'วันหiมดอายุหนังสือเดินทาง',
-      taxpayyerNo: 'เลขที่ประจำตัวผู้เสียภาษี',
 
       ownerName: 'ชื่อนายจ้าง',
       firstName: 'ชื่อ ',
@@ -777,8 +775,6 @@ export default {
     seller: 'ผู้ขาย',
     paymentChannels: 'ช่องทางชำระเงิน',
     channelsThat: 'ช่องทางที่',
-    refNo: 'เลขที่อ้างอิง',
-    bankAccount: 'บัญชีธนาคาร',
     bankAccountNumber: 'เลขบัญชีธนาคาร',
     bankAccountName: 'ชื่อบัญชี',
     inTheNameOf: 'ในนาม',
@@ -803,7 +799,7 @@ export default {
     branch: 'สาขาที่ออกใบเสนอราคา',
     branchVirtual: 'จุดรับบริการที่ออกใบเสนอราคา',
     customer: 'ลูกค้า',
-    newCustomer: 'แรงงานใหม่',
+    newCustomer: 'ลูกค้าใหม่',
     employeeList: 'รายชื่อแรงงาน',
     employee: 'แรงงาน',
     employeeName: 'ชื่อ-นามสกุล แรงงาน',
@@ -1220,8 +1216,6 @@ export default {
         'มีงานหนึ่งงานหรือมากกว่าที่ไม่อยู่ในสถานะรอดำเนินการ',
       reqNotMet: 'ไม่ตรงกัน',
       systemError: 'ระบบเกิดข้อผิดพลาด',
-      taskOrderInvalid: 'โปรดเลือก สินค้าเเละสาขา',
-      flowAccountProductIdNotFound: 'ไม่พบสินค้าใน flow account',
     },
   },
 

src/layouts/MainLayout.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, computed, reactive } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
-import { getUserId, getUsername, getName, logout, getRole } from 'src/services/keycloak';
+import { getUserId, getUsername, logout, getRole } from 'src/services/keycloak';
 import { Icon } from '@iconify/vue';
 import { useI18n } from 'vue-i18n';
 import moment from 'moment';
@@ -39,7 +39,7 @@ const configStore = useConfigStore();
 const { data: notificationData } = storeToRefs(notificationStore);
 
 const { visible } = storeToRefs(loaderStore);
-const { t, locale } = useI18n({ useScope: 'global' });
+const { t } = useI18n({ useScope: 'global' });
 const userStore = useUserStore();
 
 const canvasModal = ref(false);
@@ -52,14 +52,8 @@ const unread = computed<number>(
 );
 const userImage = ref<string>();
 const userGender = ref('');
-const userName = ref({ th: '', en: '' });
 const canvasRef = ref();
 
-const displayName = computed(() => {
-  if (!userName.value.th && !userName.value.en) return getName() || 'Guest';
-  return locale.value === 'eng' ? userName.value.en : userName.value.th;
-});
-
 const language: {
   value: Lang;
   label: string;
@@ -167,15 +161,10 @@ onMounted(async () => {
   if (user === 'admin') return;
   if (uid) {
     const res = await userStore.fetchById(uid);
-    if (res) {
+    if (res && res.gender) {
-      if (res.gender) {
       userGender.value = res.gender;
       userImage.value = `${baseUrl}/user/${uid}/profile-image/${res.selectedImage}`;
     }
-      // เก็บชื่อทั้งสองภาษา
-      userName.value.th = `${res.firstName || ''} ${res.lastName || ''}`.trim();
-      userName.value.en = `${res.firstNameEN || ''} ${res.lastNameEN || ''}`.trim();
-    }
   }
 });
 </script>
@@ -495,7 +484,6 @@ onMounted(async () => {
             <!-- User -->
             <ProfileMenu
               id="btn-profile-menu"
-              :user-name="displayName"
               @logout="doLogout"
               @edit-personal-info="console.log('edit')"
               @signature="

src/layouts/ProfileMenu.vue

@@ -12,7 +12,6 @@ const filterRole = ref<string[]>();
 defineProps<{
   userImage?: string;
   gender?: string;
-  userName?: string;
 }>();
 
 const inputFile = document.createElement('input');
@@ -148,9 +147,9 @@ onMounted(async () => {
             class="text-weight-bold ellipsis"
             style="max-width: 9vw"
           >
-            {{ userName || getName() }}
+            {{ getName() }}
             <q-tooltip>
-              {{ userName || getName() }}
+              {{ getName() }}
             </q-tooltip>
           </span>
           <span
@@ -235,12 +234,12 @@ onMounted(async () => {
             style="margin-top: 58px"
           >
             <span v-if="isLoggedIn()">
-              {{ userName || getName() }}
+              {{ getName() }}
             </span>
             <span v-else>{{ 'Guest' }}</span>
             <q-tooltip>
               <span v-if="isLoggedIn()">
-                {{ userName || getName() }}
+                {{ getName() }}
               </span>
               <span v-else>{{ 'Guest' }}</span>
             </q-tooltip>

src/pages/03_customer-management/BranchPage.vue

@@ -18,8 +18,6 @@ import { CustomerBranch, CustomerType } from 'stores/customer/types';
 import { columnsEmployee } from './constant';
 import { useCustomerBranchForm, useEmployeeForm } from './form';
 
-import DialogEmployee from 'src/components/03_customer-management/DialogEmployee.vue';
-import DrawerEmployee from 'src/components/03_customer-management/DrawerEmployee.vue';
 import EmployerFormAuthorized from './components/employer/EmployerFormAuthorized.vue';
 import FloatingActionButton from 'components/FloatingActionButton.vue';
 import SideMenu from 'components/SideMenu.vue';
@@ -91,11 +89,6 @@ const prop = withDefaults(
     currentCitizenId?: string;
     gender: string;
     selectedImage: string;
-    fetchImageList: (
-      id: string,
-      selectedName: string,
-      type: 'customer' | 'employee',
-    ) => Promise<void>;
   }>(),
   {
     color: 'green',
@@ -103,6 +96,7 @@ const prop = withDefaults(
 );
 const currentBranchEmployee = ref<string>('');
 const listEmployee = ref<Employee[]>([]);
+
 const customerId = defineModel<string>('customerId', { required: true });
 
 defineEmits<{
@@ -112,6 +106,16 @@ defineEmits<{
   (e: 'dialog'): void;
 }>();
 
+onMounted(async () => {
+  customerBranchFormState.value.currentCustomerId = route.params
+    .customerId as string;
+  await fetchList();
+
+  branch.value?.forEach((v) => {
+    currentBtnOpen.value.push(false);
+  });
+});
+
 const columns = [
   {
     name: 'branchName',
@@ -253,6 +257,10 @@ async function fetchEmployee(opts: { branchId: string; pageSize?: number }) {
   }
 }
 
+onMounted(async () => {
+  await fetchList();
+});
+
 watch([customerId, inputSearch, currentStatus, pageSizeBranch], async () => {
   await fetchList();
 });
@@ -272,16 +280,6 @@ watch(
     }
   },
 );
-
-onMounted(async () => {
-  customerBranchFormState.value.currentCustomerId = route.params
-    .customerId as string;
-  await fetchList();
-
-  branch.value?.forEach((v) => {
-    currentBtnOpen.value.push(false);
-  });
-});
 </script>
 
 <template>
@@ -475,6 +473,7 @@ onMounted(async () => {
           <q-tr
             :class="{
               'app-text-muted': props.row.status === 'INACTIVE',
+              'cursor-pointer': props.row._count?.branch !== 0,
             }"
             :props="props"
             @click="$emit('viewDetail', props.row, props.rowIndex)"
@@ -548,13 +547,7 @@ onMounted(async () => {
               v-if="branchFieldSelected.includes('businessTypePure')"
               class="text-left"
             >
-              {{
+              {{ useOptionStore().mapOption(props.row.businessType) || '-' }}
-                props.row.businessType
-                  ? props.row.businessType[
-                      $i18n.locale === 'eng' ? 'nameEN' : 'name'
-                    ]
-                  : '-'
-              }}
             </q-td>
             <q-td
               v-if="branchFieldSelected.includes('totalEmployee')"
@@ -573,6 +566,8 @@ onMounted(async () => {
                     await fetchEmployee({
                       branchId: currentBranchEmployee,
                       pageSize: 999,
+                      passport: true,
+                      visa: true,
                     });
 
                     currentBtnOpen.map((v, i) => {
@@ -643,15 +638,10 @@ onMounted(async () => {
                   "
                   @history="(item) => {}"
                   @view="
-                    async (item) => {
+                    (item) => {
                       employeeFormState.drawerModal = true;
                       //employeeFormState.isEmployeeEdit = true;
                       employeeFormStore.assignFormDataEmployee(item.id);
-                      await fetchImageList(
-                        item.id,
-                        item.selectedImage || '',
-                        'employee',
-                      );
                     }
                   "
                 />
@@ -678,11 +668,9 @@ onMounted(async () => {
                     ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
                     : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
                 telephone: props.row.telephoneNo,
-                businessTypePure: props.row.businessType
+                businessTypePure: useOptionStore().mapOption(
-                  ? props.row.businessType[
+                  props.row.businessType,
-                      $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                ),
-                    ]
-                  : '-',
                 totalEmployee: props.row._count?.employee,
               }"
               :visible-columns="branchFieldSelected"
@@ -897,14 +885,15 @@ onMounted(async () => {
           </div>
           <EmployerFormBusiness
             dense
+            class="q-mb-xl"
             outlined
             prefix-id="employer-branch"
             :readonly="customerBranchFormState.dialogType === 'info'"
-            v-model:business-type-id="customerBranchFormData.businessTypeId"
+            v-model:bussiness-type="customerBranchFormData.businessType"
             v-model:job-position="customerBranchFormData.jobPosition"
             v-model:job-description="customerBranchFormData.jobDescription"
             v-model:pay-date="customerBranchFormData.payDate"
-            v-model:pay-date-en="customerBranchFormData.payDateEN"
+            v-model:pay-date-e-n="customerBranchFormData.payDateEN"
             v-model:wage-rate="customerBranchFormData.wageRate"
             v-model:wage-rate-text="customerBranchFormData.wageRateText"
           />
@@ -995,7 +984,7 @@ onMounted(async () => {
             v-model:email="customerBranchFormData.email"
             v-model:contact-tel="customerBranchFormData.contactTel"
             v-model:office-tel="customerBranchFormData.officeTel"
-            v-model:agent-user-id="customerBranchFormData.agentUserId"
+            v-model:agent="customerBranchFormData.agent"
           />
         </div>
       </div>
@@ -1011,18 +1000,6 @@ onMounted(async () => {
       />
     </template>
   </DialogFormContainer>
-
-  <DialogEmployee
-    :fetch-list-employee="fetchEmployee"
-    :fetch-image-list="fetchImageList"
-    current-tab="employer"
-  />
-
-  <DrawerEmployee
-    :fetch-list-employee="fetchEmployee"
-    :fetch-image-list="fetchImageList"
-    current-tab="employer"
-  />
 </template>
 
 <style scoped>

src/pages/03_customer-management/TabEmployee.vue

@@ -1,514 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
-import { useQuasar } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { storeToRefs } from 'pinia';
-
-import {
-  PaginationComponent,
-  PaginationPageSize,
-  ImageUploadDialog,
-  DialogForm,
-  NoData,
-} from 'src/components';
-import DialogEmployee from 'src/components/03_customer-management/DialogEmployee.vue';
-import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
-import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
-import DrawerEmployee from 'src/components/03_customer-management/DrawerEmployee.vue';
-
-import useFlowStore from 'src/stores/flow';
-import useEmployeeStore from 'src/stores/employee';
-import { Status } from 'src/stores/types';
-import { Employee, EmployeeHistory } from 'src/stores/employee/types';
-import { baseUrl, dialog, canAccess } from 'src/stores/utils';
-import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
-import { useCustomerForm, useEmployeeForm } from './form';
-import { columnsEmployee } from './constant';
-
-const $q = useQuasar();
-const flowStore = useFlowStore();
-const employeeStore = useEmployeeStore();
-const employeeFormStore = useEmployeeForm();
-const customerFormStore = useCustomerForm();
-const { t } = useI18n();
-const { state: employeeFormState, currentFromDataEmployee } =
-  storeToRefs(employeeFormStore);
-const { deleteEmployeeById } = employeeFormStore;
-const { state: customerFormState } = storeToRefs(customerFormStore);
-
-const employeeStats = defineModel('employeeStats', { default: 0 });
-
-const props = defineProps<{
-  currentTab: 'employee' | 'employer';
-  currentStatus: Status | 'All';
-  gridView: boolean;
-  inputSearch: string;
-  searchDate: string[];
-  fieldSelected: string[];
-  fetchImageList: (
-    id: string,
-    selectedName: string,
-    type: 'customer' | 'employee',
-  ) => Promise<void>;
-  triggerChangeStatus: (
-    id: string,
-    status: string,
-    employeeName?: string,
-  ) => void;
-}>();
-
-defineExpose({
-  openSpecificEmployee,
-  fetchListEmployee,
-  toggleStatusEmployee,
-});
-
-const listEmployee = ref<Employee[]>([]);
-const currentPageEmployee = ref<number>(1);
-const maxPageEmployee = ref<number>(1);
-const pageSize = ref<number>(30);
-const employeeHistoryDialog = ref(false);
-const employeeHistory = ref<EmployeeHistory[]>();
-
-const splitPercent = computed(() => ($q.screen.lt.md ? 0 : 15));
-
-async function fetchListEmployee(opt?: {
-  fetchStats?: boolean;
-  page?: number;
-  pageSize?: number;
-  customerId?: string;
-  mobileFetch?: boolean;
-}) {
-  const resultListEmployee = await employeeStore.fetchList({
-    customerId: opt?.customerId,
-    page: opt
-      ? opt.mobileFetch
-        ? 1
-        : opt.page || currentPageEmployee.value
-      : currentPageEmployee.value,
-    pageSize: opt
-      ? opt.mobileFetch
-        ? listEmployee.value.length +
-          (employeeStats.value === listEmployee.value.length ? 1 : 0)
-        : opt.pageSize || pageSize.value
-      : pageSize.value,
-    status:
-      props.currentStatus === 'All'
-        ? undefined
-        : props.currentStatus === 'ACTIVE'
-          ? 'ACTIVE'
-          : 'INACTIVE',
-    query: props.inputSearch,
-    passport: true,
-    visa: true,
-    startDate: props.searchDate[0],
-    endDate: props.searchDate[1],
-  });
-  if (resultListEmployee) {
-    maxPageEmployee.value = Math.ceil(
-      resultListEmployee.total / pageSize.value,
-    );
-    $q.screen.xs && !(opt && opt.mobileFetch)
-      ? listEmployee.value.push(...resultListEmployee.result)
-      : (listEmployee.value = resultListEmployee.result);
-  }
-
-  if (opt && opt.fetchStats)
-    employeeStats.value = await employeeStore.getStatsEmployee();
-}
-
-async function openHistory(id: string) {
-  const res = await employeeStore.getEditHistory(id);
-  employeeHistory.value = res.reverse();
-  employeeHistoryDialog.value = true;
-}
-
-async function editEmployeeFormPersonal(id: string) {
-  await employeeFormStore.assignFormDataEmployee(id);
-  await props.fetchImageList(
-    id,
-    currentFromDataEmployee.value.selectedImage || '',
-    'employee',
-  );
-
-  employeeFormState.value.isEmployeeEdit = true;
-  employeeFormState.value.dialogType = 'edit';
-  employeeFormState.value.drawerModal = true;
-}
-
-async function openSpecificEmployee(id: string) {
-  await employeeFormStore.assignFormDataEmployee(id);
-  await props.fetchImageList(
-    id,
-    currentFromDataEmployee.value.selectedImage || '',
-    'employee',
-  );
-  employeeFormState.value.dialogType = 'info';
-  employeeFormState.value.drawerModal = true;
-}
-
-async function toggleStatusEmployee(
-  id: string,
-  status: boolean,
-  employeeName: string,
-) {
-  const res = await employeeStore.editById(id, {
-    status: !status ? 'ACTIVE' : 'INACTIVE',
-    firstNameEN: employeeName,
-  });
-  if (res && employeeFormState.value.drawerModal) {
-    currentFromDataEmployee.value.status = res.status;
-  }
-
-  await employeeFormStore.assignFormDataEmployee(id);
-  await fetchListEmployee({ mobileFetch: $q.screen.xs });
-  flowStore.rotate();
-}
-
-watch(
-  () => [
-    props.inputSearch,
-    props.searchDate,
-    props.currentStatus,
-    pageSize.value,
-  ],
-  async () => {
-    currentPageEmployee.value = 1;
-    listEmployee.value = [];
-    await fetchListEmployee({ fetchStats: true });
-
-    customerFormState.value.currentCustomerId = undefined;
-    flowStore.rotate();
-  },
-);
-
-watch(
-  () => employeeFormState.value.currentCustomerBranch,
-  (e) => {
-    if (!e) return;
-    if (employeeFormState.value.formDataEmployeeSameAddr) {
-      currentFromDataEmployee.value.address = e.address;
-      currentFromDataEmployee.value.addressEN = e.addressEN;
-      currentFromDataEmployee.value.provinceId = e.provinceId;
-      currentFromDataEmployee.value.districtId = e.districtId;
-      currentFromDataEmployee.value.subDistrictId = e.subDistrictId;
-    }
-    currentFromDataEmployee.value.customerBranchId = e.id;
-  },
-);
-
-watch(
-  () => employeeFormState.value.formDataEmployeeSameAddr,
-  (isSame) => {
-    if (!employeeFormState.value.currentCustomerBranch) return;
-    if (isSame) {
-      currentFromDataEmployee.value.address =
-        employeeFormState.value.currentCustomerBranch.address;
-      currentFromDataEmployee.value.addressEN =
-        employeeFormState.value.currentCustomerBranch.addressEN;
-      currentFromDataEmployee.value.provinceId =
-        employeeFormState.value.currentCustomerBranch.provinceId;
-      currentFromDataEmployee.value.districtId =
-        employeeFormState.value.currentCustomerBranch.districtId;
-      currentFromDataEmployee.value.subDistrictId =
-        employeeFormState.value.currentCustomerBranch.subDistrictId;
-    }
-    currentFromDataEmployee.value.customerBranchId =
-      employeeFormState.value.currentCustomerBranch.id;
-  },
-);
-
-watch(
-  () => currentFromDataEmployee.value.dateOfBirth,
-  (v) => {
-    const isEdit =
-      employeeFormState.value.drawerModal &&
-      employeeFormState.value.isEmployeeEdit;
-    let currentFormDate = v && toISOStringWithTimezone(new Date(v));
-    let currentDate: string = '';
-
-    if (isEdit && employeeFormState.value.currentEmployee) {
-      currentDate = toISOStringWithTimezone(
-        new Date(employeeFormState.value.currentEmployee.dateOfBirth),
-      );
-    }
-
-    if (
-      employeeFormState.value.dialogModal ||
-      (isEdit && currentFormDate !== currentDate)
-    ) {
-      const age = calculateAge(
-        currentFromDataEmployee.value.dateOfBirth,
-        'year',
-      );
-      if (currentFromDataEmployee.value.dateOfBirth && Number(age) < 15) {
-        dialog({
-          color: 'warning',
-          icon: 'mdi-alert',
-          title: t('dialog.title.youngWorker15'),
-          cancelText: t('general.edit'),
-          persistent: true,
-          message: t('dialog.message.youngWorker15'),
-
-          cancel: async () => {
-            currentFromDataEmployee.value.dateOfBirth = null;
-            return;
-          },
-        });
-      }
-
-      if (
-        currentFromDataEmployee.value.dateOfBirth &&
-        Number(age) > 15 &&
-        Number(age) <= 18
-      ) {
-        dialog({
-          color: 'warning',
-          icon: 'mdi-alert',
-          title: t('dialog.title.youngWorker18'),
-          cancelText: t('general.cancel'),
-          actionText: t('general.confirm'),
-          persistent: true,
-          message: t('dialog.message.youngWorker18'),
-          action: () => {},
-          cancel: async () => {
-            currentFromDataEmployee.value.dateOfBirth = null;
-            return;
-          },
-        });
-      }
-    }
-  },
-);
-
-watch(
-  () => currentFromDataEmployee.value.image,
-  () => {
-    if (currentFromDataEmployee.value.image !== null)
-      employeeFormState.value.isImageEdit = true;
-  },
-);
-
-onMounted(async () => {
-  currentPageEmployee.value = 1;
-  listEmployee.value = [];
-  await fetchListEmployee({ fetchStats: true });
-});
-</script>
-<template>
-  <q-splitter
-    v-model="splitPercent"
-    :limits="[0, 100]"
-    class="col full-width"
-    before-class="overflow-hidden"
-    after-class="overflow-hidden"
-    :disable="$q.screen.lt.sm"
-  >
-    <template v-slot:before>
-      <div
-        class="column q-pa-md surface-1 full-height full-width"
-        style="gap: var(--size-1)"
-      >
-        <q-item
-          active
-          dense
-          active-class="employer-active"
-          class="no-padding items-center rounded full-width"
-          v-close-popup
-          clickable
-        >
-          <span class="q-px-md ellipsis">
-            {{ $t('general.all') }}
-          </span>
-        </q-item>
-      </div>
-    </template>
-
-    <template v-slot:after>
-      <div class="column full-height no-wrap">
-        <!-- employee -->
-        <template
-          v-if="listEmployee && employeeStats > 0 && currentTab === 'employee'"
-        >
-          <div
-            v-if="listEmployee.length === 0"
-            class="row col full-width items-center justify-center"
-            style="min-height: 250px"
-          >
-            <NoData :not-found="!!inputSearch" />
-          </div>
-
-          <article
-            v-if="listEmployee.length !== 0"
-            class="column scroll q-pa-md col"
-          >
-            <q-infinite-scroll
-              :offset="10"
-              @load="
-                (_, done) => {
-                  if (
-                    $q.screen.gt.xs ||
-                    currentPageEmployee === maxPageEmployee
-                  )
-                    return;
-                  currentPageEmployee = currentPageEmployee + 1;
-                  fetchListEmployee().then(() =>
-                    done(currentPageEmployee >= maxPageEmployee),
-                  );
-                }
-              "
-            >
-              <TableEmpoloyee
-                :hide-delete="!canAccess('customer', 'edit')"
-                v-model:page-size="pageSize"
-                v-model:current-page="currentPageEmployee"
-                :grid-view="gridView"
-                :list-employee="listEmployee"
-                :columns-employee="columnsEmployee"
-                :field-selected="fieldSelected"
-                @history="
-                  (item: any) => {
-                    openHistory(item.id);
-                  }
-                "
-                @view="
-                  async (item: any) => {
-                    employeeFormState.drawerModal = true;
-                    employeeFormState.isEmployeeEdit = false;
-                    employeeFormStore.assignFormDataEmployee(item.id);
-                    await fetchImageList(
-                      item.id,
-                      item.selectedImage || '',
-                      'employee',
-                    );
-                  }
-                "
-                @edit="(item: any) => editEmployeeFormPersonal(item.id)"
-                @delete="
-                  (item: any) => {
-                    deleteEmployeeById({
-                      id: item.id,
-                      fetch: async () =>
-                        await fetchListEmployee(
-                          currentTab === 'employer'
-                            ? {
-                                page: 1,
-                                pageSize: 999,
-                                customerId: customerFormState.currentCustomerId,
-                              }
-                            : {
-                                fetchStats: true,
-                                mobileFetch: $q.screen.xs,
-                              },
-                        ),
-                    });
-                  }
-                "
-                @toggle-status="
-                  async (item: any) => {
-                    triggerChangeStatus(item.id, item.status, item.firstNameEN);
-                  }
-                "
-              />
-              <template v-slot:loading>
-                <div
-                  v-if="
-                    $q.screen.lt.sm && currentPageEmployee !== maxPageEmployee
-                  "
-                  class="row justify-center"
-                >
-                  <q-spinner-dots color="primary" size="40px" />
-                </div>
-              </template>
-            </q-infinite-scroll>
-          </article>
-          <footer
-            v-if="listEmployee.length !== 0 && $q.screen.gt.xs"
-            class="row justify-between items-center q-px-md q-py-sm"
-          >
-            <div class="row col-4 items-center">
-              <div
-                class="app-text-muted"
-                style="width: 80px"
-                v-if="$q.screen.gt.sm"
-              >
-                {{ $t('general.recordPerPage') }}
-              </div>
-
-              <div><PaginationPageSize v-model="pageSize" /></div>
-            </div>
-
-            <div class="col-4 flex justify-center app-text-muted">
-              {{
-                $q.screen.gt.sm
-                  ? $t('general.recordsPage', {
-                      resultcurrentPage: listEmployee.length,
-                      total: employeeStats,
-                    })
-                  : $t('general.ofPage', {
-                      current: listEmployee.length,
-                      total: employeeStats,
-                    })
-              }}
-            </div>
-
-            <div class="col-4 flex justify-end">
-              <PaginationComponent
-                v-model:current-page="currentPageEmployee"
-                v-model:max-page="maxPageEmployee"
-                :fetch-data="
-                  async () => {
-                    await fetchListEmployee();
-                    flowStore.rotate();
-                  }
-                "
-              />
-            </div>
-          </footer>
-        </template>
-      </div>
-    </template>
-  </q-splitter>
-
-  <!-- add employee -->
-  <DialogEmployee
-    :fetch-list-employee="fetchListEmployee"
-    :fetch-image-list="fetchImageList"
-    :current-tab="currentTab"
-  />
-
-  <!-- ลูกจ้าง edit employee -->
-  <DrawerEmployee
-    :fetch-list-employee="fetchListEmployee"
-    :fetch-image-list="fetchImageList"
-    :current-tab="currentTab"
-    @change-status="
-      (s) =>
-        triggerChangeStatus(
-          currentFromDataEmployee.id,
-          s,
-          currentFromDataEmployee.firstNameEN,
-        )
-    "
-  />
-
-  <DialogForm
-    :title="$t('general.historyEdit')"
-    hide-footer
-    v-model:modal="employeeHistoryDialog"
-  >
-    <div class="q-pa-md">
-      <HistoryEditComponent
-        v-if="employeeHistory"
-        v-model:history-list="employeeHistory"
-      />
-    </div>
-  </DialogForm>
-</template>
-
-<style scoped>
-.employer-active {
-  background-color: hsla(var(--info-bg) / 0.1);
-  color: hsl(var(--info-bg));
-}
-</style>

src/pages/03_customer-management/components/employer/EmployerFormAbout.vue

@@ -140,7 +140,7 @@ watch(
           :rules="[
             (val) => !!val || $t('form.error.required'),
             (val) =>
-              /^[A-Za-z0-9ก-๙\s&.,'()-]+$/.test(val) ||
+              /^[A-Za-z0-9ก-๙\s&.,'-]+$/.test(val) ||
               $t('form.error.branchNameField'),
           ]"
         />
@@ -336,7 +336,6 @@ watch(
             (v) => (typeof v === 'string' ? (prefixName = v) : '')
           "
           @clear="prefixName = ''"
-          :rules="[(val: string) => !!val || $t('form.error.required')]"
         >
           <template v-slot:no-option>
             <q-item>

src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue

@@ -2,7 +2,6 @@
 import useOptionStore from 'stores/options';
 import SelectBranch from 'src/components/shared/select/SelectBranch.vue';
 import { isRoleInclude } from 'src/stores/utils';
-import SelectBusinessType from 'src/components/shared/select/SelectBusinessType.vue';
 
 withDefaults(
   defineProps<{
@@ -143,10 +142,15 @@ const telephoneNo = defineModel<string>('telephoneNo', { default: '' });
           for="input-tax"
           v-model="legalPersonNo"
         />
-        <SelectBusinessType
+        <q-input
+          dense
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
           class="col-6 col-md-3"
-          v-model:value="businessType"
+          :label="$t('customer.table.businessTypePure')"
-          :readonly
+          for="input-business-type"
+          :model-value="optionStore.mapOption(businessType)"
         />
       </div>
 
@@ -175,10 +179,15 @@ const telephoneNo = defineModel<string>('telephoneNo', { default: '' });
           :label="$t('personnel.form.citizenId')"
           for="input-citizen-id"
         />
-        <SelectBusinessType
+        <q-input
+          dense
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
           class="col-6 col-md-3"
-          v-model:value="businessType"
+          :label="$t('customer.table.businessTypePure')"
-          :readonly
+          for="input-first-name-en"
+          :model-value="optionStore.mapOption(businessType)"
         />
       </div>
 

src/pages/03_customer-management/components/employer/EmployerFormBranch.vue

@@ -7,8 +7,6 @@ import { CustomerCreate } from 'stores/customer/types';
 import EmployerFormAbout from './EmployerFormAbout.vue';
 import EmployerFormAuthorized from './EmployerFormAuthorized.vue';
 import { waitAll } from 'src/stores/utils';
-import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
-import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
 import {
   FormCitizen,
   CorpFormBusinessRegistration,

src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue

@@ -10,25 +10,10 @@ import { useI18n } from 'vue-i18n';
 import ThaiBahtText from 'thai-baht-text';
 import SelectBusinessType from 'src/components/shared/select/SelectBusinessType.vue';
 
-import BusinessTypeDialog from 'src/pages/16_business-type-management/BusinessTypeDialog.vue';
-
-import useBusinessTypeStore from 'src/stores/business-type';
-
 const { locale } = useI18n({ useScope: 'global' });
 
 const rawOption = ref();
 
-const businessTypeDialog = ref<boolean>(false);
-const formDataBusinessType = ref<{
-  name: string;
-  nameEN: string;
-}>({
-  name: '',
-  nameEN: '',
-});
-
-const useBusinessType = useBusinessTypeStore();
-
 const businessTypeId = defineModel<string>('businessTypeId');
 const jobPosition = defineModel<string>('jobPosition');
 const jobDescription = defineModel<string>('jobDescription');
@@ -44,8 +29,6 @@ const typeBusinessENOption = ref([]);
 const jobPositionOption = ref([]);
 const jobPositionENOption = ref([]);
 
-const keySelect = ref<number>(0);
-
 defineProps<{
   title?: string;
   dense?: boolean;
@@ -55,20 +38,6 @@ defineProps<{
   showTitle?: boolean;
 }>();
 
-function resetFormBusinessType() {
-  businessTypeDialog.value = false;
-  formDataBusinessType.value = { name: '', nameEN: '' };
-}
-
-async function submitBusinessType() {
-  const res = await useBusinessType.create(formDataBusinessType.value);
-  if (res) {
-    businessTypeId.value = res.id;
-    resetFormBusinessType();
-    keySelect.value++;
-  }
-}
-
 onMounted(async () => {
   const resultOption = await fetch('/option/option.json');
   rawOption.value = await resultOption.json();
@@ -152,24 +121,16 @@ let jobPositionENFilter = selectFilterOptionRefMod(
     </div>
 
     <SelectBusinessType
-      :key="keySelect"
       class="col-md-6 col-12"
       v-model:value="businessTypeId"
       :readonly
-      creatable
       lang="tha"
-      :rules="[(val: string) => !!val || $t('form.error.required')]"
-      @create="() => (businessTypeDialog = true)"
     />
     <SelectBusinessType
-      :key="keySelect"
       class="col-md-6 col-12"
       v-model:value="businessTypeId"
-      :readonly
-      creatable
       lang="eng"
-      :rules="[(val: string) => !!val || $t('form.error.required')]"
+      :readonly
-      @create="() => (businessTypeDialog = true)"
     />
 
     <q-select
@@ -321,12 +282,4 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       "
     />
   </div>
-
-  <BusinessTypeDialog
-    ref="refBusinessTypeDialog"
-    @close="resetFormBusinessType()"
-    @submit="submitBusinessType()"
-    v-model="businessTypeDialog"
-    v-model:data="formDataBusinessType"
-  />
 </template>

src/pages/03_customer-management/components/employer/EmployerFormContact.vue

@@ -9,6 +9,8 @@ const contactName = defineModel<string>('contactName');
 const email = defineModel<string>('email');
 const contactTel = defineModel<string>('contactTel');
 const officeTel = defineModel<string>('officeTel');
+const agent = defineModel<string>('agent');
+
 const agentUserId = defineModel<string>('agentUserId');
 </script>
 
@@ -107,6 +109,7 @@ const agentUserId = defineModel<string>('agentUserId');
         />
       </template>
     </q-input>
+
     <SelectAgent
       :label="$t('customer.form.agent')"
       v-model:value="agentUserId"

src/pages/03_customer-management/form.ts

@@ -22,10 +22,6 @@ import { useRoute } from 'vue-router';
 
 export const useCustomerForm = defineStore('form-customer', () => {
   const customerStore = useCustomerStore();
-  const onCreateImageList = ref<{
-    selectedImage: string;
-    list: { url: string; imgFile: File | null; name: string }[];
-  }>({ selectedImage: '', list: [] });
 
   const { t } = useI18n();
   const flowStore = useFlowStore();
@@ -34,8 +30,6 @@ export const useCustomerForm = defineStore('form-customer', () => {
 
   const registerAbleBranchOption = ref<{ id: string; name: string }[]>();
 
-  const currentBranchRootId = ref<string>('');
-
   const tabFieldRequired = ref<{
     [key: string]: (keyof CustomerBranchCreate)[];
   }>({
@@ -88,7 +82,6 @@ export const useCustomerForm = defineStore('form-customer', () => {
     formDataOcr: Record<string, any>;
     isImageEdit: boolean;
     currentCustomerId?: string;
-    imageList: { list: string[]; selectedImage: string };
   }>({
     dialogType: 'info',
     dialogOpen: false,
@@ -105,7 +98,6 @@ export const useCustomerForm = defineStore('form-customer', () => {
     treeFile: [],
     formDataOcr: {},
     isImageEdit: false,
-    imageList: { list: [], selectedImage: '' },
   });
 
   watch(
@@ -168,7 +160,6 @@ export const useCustomerForm = defineStore('form-customer', () => {
     state.value.editCustomerCode = data.code;
     state.value.customerImageUrl = `${baseUrl}/customer/${id}/image/${data.selectedImage}`;
     state.value.defaultCustomerImageUrl = `${baseUrl}/customer/${id}/image/${data.selectedImage}`;
-    currentBranchRootId.value = data.branch[0].id || '';
 
     resetFormData.registeredBranchId = data.registeredBranchId;
     resetFormData.status = data.status;
@@ -264,6 +255,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
   async function addCurrentCustomerBranch() {
     if (currentFormData.value.customerBranch?.some((v) => !v.id)) return;
     currentFormData.value.customerBranch?.push({
+      id: '',
       customerId: '',
       branchCode:
         currentFormData.value.customerBranch.length !== 0
@@ -503,14 +495,11 @@ export const useCustomerForm = defineStore('form-customer', () => {
   }
 
   return {
-    onCreateImageList,
     tabFieldRequired,
     registerAbleBranchOption,
     state,
     resetFormData,
     currentFormData,
-    currentBranchRootId,
-
     isFormDataDifferent,
     resetForm,
     assignFormData,
@@ -790,7 +779,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         }
       | undefined;
     ocr: boolean;
-    imageList: { list: string[]; selectedImage: string };
   }>({
     currentBranchId: '',
     isImageEdit: false,
@@ -815,7 +803,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     infoEmployeePersonCard: [],
     formDataEmployeeOwner: undefined,
     ocr: false,
-    imageList: { list: [], selectedImage: '' },
   });
 
   const defaultFormData: EmployeeCreate & { image?: File } = {
@@ -968,7 +955,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     state.value.currentIndexVisa = -1;
     state.value.currentIndexCheckup = -1;
     state.value.currentIndexWorkHistory = -1;
-    state.value.imageList = { list: [], selectedImage: '' };
     // state.value.currentTab = 'personalInfo';
     if (clean) {
       state.value.formDataEmployeeOwner = undefined;
@@ -1398,10 +1384,12 @@ export const useEmployeeForm = defineStore('form-employee', () => {
                 statusSave: true,
               })),
         ),
-        employeeOtherInfo: structuredClone({
+        employeeOtherInfo: structuredClone(
-          ...(payload.employeeOtherInfo ?? {}),
+          {
-          statusSave: true,
+            ...payload.employeeOtherInfo,
-        }),
+            statusSave: !!payload.employeeOtherInfo?.id ? true : false,
+          } || {},
+        ),
         employeeWork: structuredClone(
           payload.employeeWork?.length === 0
             ? state.value.dialogModal
@@ -1675,7 +1663,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     state,
     currentFromDataEmployee,
     resetEmployeeData,
-
     addPassport,
     addVisa,
     addCheckup,

src/pages/04_product-service/MainPage.vue

@@ -102,8 +102,6 @@ const {
   deleteWork,
 
   importProduct,
-
-  productExport,
 } = productServiceStore;
 
 const { workNameItems } = storeToRefs(productServiceStore);
@@ -1171,7 +1169,6 @@ function clearFormService() {
   profileSubmit.value = false;
   imageProduct.value = undefined;
   profileFileImg.value = null;
-  serviceTab.value = 1;
 }
 
 function sameFormService() {
@@ -1899,25 +1896,6 @@ async function submitWorkName(
   else await editWork(workId, data);
 }
 
-async function triggerExport() {
-  productExport({
-    pageSize: 100_000,
-    productGroupId: currentIdGroup.value,
-    query: !!inputSearchProductAndService.value
-      ? inputSearchProductAndService.value
-      : undefined,
-    status:
-      currentStatus.value === 'INACTIVE'
-        ? 'INACTIVE'
-        : currentStatus.value === 'ACTIVE'
-          ? 'ACTIVE'
-          : undefined,
-
-    startDate: searchDate.value[0] ? new Date(searchDate.value[0]) : undefined,
-    endDate: searchDate.value[1] ? new Date(searchDate.value[1]) : undefined,
-  });
-}
-
 watch(
   () => formService.value.attributes.workflowId,
   async (a, b) => {
@@ -2251,6 +2229,7 @@ watch(
                     </AdvanceSearch>
                   </template>
                 </q-input>
+
                 <div class="row col-md-6" style="white-space: nowrap">
                   <q-select
                     v-show="$q.screen.gt.sm"
@@ -2801,13 +2780,6 @@ watch(
                       }
                     "
                   />
-
-                  <SaveButton
-                    icon-only
-                    :icon="'material-symbols:download'"
-                    color="var(--info-bg)"
-                    @click.stop="triggerExport()"
-                  />
                 </div>
 
                 <div class="row col-md-6" style="white-space: nowrap">
@@ -4385,7 +4357,6 @@ watch(
 
   <!-- add service -->
   <DialogForm
-    v-if="dialogService"
     hide-footer
     no-address
     no-app-box
@@ -4751,7 +4722,6 @@ watch(
   <!-- edit service edit package-->
   <!-- :edit="!(formDataProductService.status === 'INACTIVE')" -->
   <DialogForm
-    v-if="dialogServiceEdit"
     hide-footer
     no-address
     height="95vh"

src/pages/05_quotation/MainPage.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch, computed } from 'vue';
+import { onMounted, reactive, ref, watch, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
@@ -60,6 +60,7 @@ const flowStore = useFlowStore();
 const userBranch = useMyBranch();
 const navigatorStore = useNavigator();
 const customerStore = useCustomerStore();
+
 const {
   fetchListOfOptionBranch,
   customerFormUndo,
@@ -75,7 +76,6 @@ const {
 const {
   state: customerFormState,
   currentFormData: customerFormData,
-  currentBranchRootId,
   registerAbleBranchOption,
   tabFieldRequired,
 } = storeToRefs(customerFormStore);
@@ -89,8 +89,6 @@ const fieldSelectedOption = computed(() => {
       value: v.name,
     }));
 });
-
-const keyAddDialog = ref<number>(0);
 const special = ref(false);
 const branchId = ref('');
 const agentPrice = ref<boolean>(false);
@@ -275,10 +273,6 @@ const customerNameInfo = computed(() => {
   return name || '-';
 });
 
-function handleWindowFocus() {
-  fetchQuotationList();
-}
-
 onMounted(async () => {
   pageState.gridView = $q.screen.lt.md ? true : false;
   navigatorStore.current.title = 'quotation.title';
@@ -316,12 +310,6 @@ onMounted(async () => {
   }
 
   flowStore.rotate();
-
-  window.addEventListener('focus', handleWindowFocus);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('focus', handleWindowFocus);
 });
 
 async function fetchQuotationList(mobileFetch?: boolean) {
@@ -777,13 +765,8 @@ async function filterBySellerId() {
                       :worker-count="item.row._count.worker"
                       :worker-max="item.row.workerMax || item.row._count.worker"
                       :customer-name="
-                        item.row.customerBranch.customer.customerType === 'CORP'
+                        item.row.customerBranch.registerName ||
-                          ? $i18n.locale === 'tha'
+                        `${item.row.customerBranch.firstName || '-'} ${item.row.customerBranch.lastName || ''}`
-                            ? item.row.customerBranch.registerName
-                            : item.row.customerBranch.registerNameEN
-                          : $i18n.locale === 'tha'
-                            ? `${item.row.customerBranch.firstName || '-'} ${item.row.customerBranch.lastName || ''}`
-                            : `${item.row.customerBranch.firstNameEN || '-'} ${item.row.customerBranch.lastNameEN || ''}`
                       "
                       :reporter="
                         $i18n.locale === 'eng'
@@ -882,7 +865,6 @@ async function filterBySellerId() {
   <!-- NOTE: START - Quotation Form, Add Quotation -->
 
   <DialogForm
-    :key="keyAddDialog"
     :title="$t('general.add', { text: $t('quotation.title') })"
     v-model:modal="pageState.addModal"
     :submit-label="$t('general.add', { text: $t('quotation.title') })"
@@ -892,14 +874,13 @@ async function filterBySellerId() {
     :submit="
       () => {
         quotationFormState.mode = 'create';
-        quotationFormData.customerBranchId = currentBranchRootId;
         triggerQuotationDialog({ statusDialog: 'create' });
       }
     "
     :close="
       () => {
         branchId = '';
-        currentBranchRootId = '';
+        quotationFormData.customerBranchId = '';
       }
     "
     :beforeClose="
@@ -949,7 +930,7 @@ async function filterBySellerId() {
           v-model:agent-price="agentPrice"
           v-model:branch-id="branchId"
           v-model:special="special"
-          v-model:customer-branch-id="currentBranchRootId"
+          v-model:customer-branch-id="quotationFormData.customerBranchId"
           @add-customer="triggerSelectTypeCustomerd()"
         />
       </div>
@@ -1018,7 +999,6 @@ async function filterBySellerId() {
       () => {
         customerFormState.dialogModal = false;
         onCreateImageList = { selectedImage: '', list: [] };
-        keyAddDialog++;
       }
     "
   >
@@ -1210,7 +1190,7 @@ async function filterBySellerId() {
               customerFormData.customerBranch[0].legalPersonNo
             "
             v-model:business-type="
-              customerFormData.customerBranch[0].businessTypeId
+              customerFormData.customerBranch[0].businessType
             "
             v-model:job-position="
               customerFormData.customerBranch[0].jobPosition
@@ -1291,6 +1271,7 @@ async function filterBySellerId() {
                         res = await customerStore.createBranch({
                           ...customerFormData.customerBranch[idx],
                           customerId: customerFormState.editCustomerId || '',
+                          id: undefined,
                         });
                       }
                       if (res) {

src/pages/05_quotation/PaymentForm.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { baseUrl, dialog } from 'stores/utils';
-import { QFile, QMenu } from 'quasar';
 import { storeToRefs } from 'pinia';
+import { useConfigStore } from 'stores/config';
+import { formatNumberDecimal } from 'stores/utils';
+import { MainButton } from 'components/button';
+
 import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n();
+
+import { reactive, ref } from 'vue';
 import { useQuotationPayment } from 'src/stores/quotations';
 import {
   PaymentPayload,
@@ -12,25 +18,16 @@ import {
   QuotationPaymentData,
 } from 'src/stores/quotations/types';
 import { dateFormatJS } from 'src/utils/datetime';
-import { DebitNote } from 'src/stores/debit-note';
+import { QFile, QMenu } from 'quasar';
-import { baseUrl, dialog, formatNumberDecimal } from 'stores/utils';
-import { useConfigStore } from 'stores/config';
-import useBranchStore from 'src/stores/branch';
-import useOptionStore from 'src/stores/options';
-
 import UploadFileCard from 'src/components/upload-file/UploadFileCard.vue';
-import SelectInput from 'src/components/shared/SelectInput.vue';
+import { onMounted } from 'vue';
-import { SaveButton, EditButton, UndoButton } from 'components/button';
+import { DebitNote } from 'src/stores/debit-note';
 
-const { t } = useI18n();
-const { fetchListBankByBranch } = useBranchStore();
-const { mapOption } = useOptionStore();
 const configStore = useConfigStore();
 const quotationPayment = useQuotationPayment();
 const { data: config } = storeToRefs(configStore);
 
 const prop = defineProps<{
-  branchId: string;
   data?: Quotation | QuotationFull | DebitNote;
   readonly?: boolean;
   isDebitNote?: boolean;
@@ -41,16 +38,8 @@ const firstCodePayment = defineModel<string>('firstCodePayment');
 const refQFile = ref<InstanceType<typeof QFile>[]>([]);
 const refQMenu = ref<InstanceType<typeof QMenu>[]>([]);
 const paymentData = ref<QuotationPaymentData[]>([]);
-const accountOpt = ref<{ label: string; value: string }[]>([]);
+const submitPaymentData = ref<QuotationPaymentData[]>([]);
-const formPaymentMethod = ref<
+const payAll = ref<boolean>(false);
-  {
-    id: string;
-    channel: string | null;
-    reference: string | null;
-    account: string | null;
-    isEdit?: boolean;
-  }[]
->([]);
 const paymentStatusOpts = [
   {
     status: 'PaymentInProcess',
@@ -183,7 +172,7 @@ async function selectStatus(
       payment.paymentStatus = status;
       const payload = {
         paymentStatus: payment.paymentStatus,
-        date: new Date(),
+        date: new Date(payment.date),
         amount: payment.amount,
       };
       const res = await quotationPayment.updateQuotationPayment(
@@ -199,30 +188,18 @@ async function selectStatus(
   refQMenu.value[index].hide();
 }
 
-async function triggerSubmit(id: string) {
+async function triggerSubmit() {
-  const index = paymentData.value.findIndex((p) => p.id === id);
+  submitPaymentData.value.forEach(async (p) => {
-  if (index === -1) return;
-
-  const p = paymentData.value[index];
-
     const payload: PaymentPayload = {
       paymentStatus: p.paymentStatus,
       date: new Date(p.date),
       amount: p.amount,
-    account: formPaymentMethod.value[index].account,
-    channel: formPaymentMethod.value[index].channel,
-    reference: formPaymentMethod.value[index].reference,
     };
-
     await quotationPayment.updateQuotationPayment(p.id, payload);
-  formPaymentMethod.value[index].isEdit = false;
+  });
-  setTimeout(async () => {
-    await fetchData();
-    await getSlipList(paymentData.value[index], index);
-  }, 300);
 }
 
-async function fetchData() {
+onMounted(async () => {
   if (!prop.data) return;
   const ret = await quotationPayment.getQuotationPayment({
     quotationId: prop.isDebitNote === true ? undefined : prop.data.id,
@@ -232,13 +209,6 @@ async function fetchData() {
   });
   if (ret) {
     paymentData.value = ret.result;
-    formPaymentMethod.value = ret.result.map((p, i) => ({
-      id: p.id,
-      channel: p.channel,
-      reference: p.reference,
-      account: p.account,
-      isEdit: formPaymentMethod.value[i]?.isEdit || false,
-    }));
     slipFile.value = paymentData.value.map((v, i) => {
       if (i === 0) {
         firstCodePayment.value = v.code;
@@ -249,31 +219,17 @@ async function fetchData() {
       };
     });
   }
-}
-
-async function fetchBankOption() {
-  const bankOption = await fetchListBankByBranch(prop.branchId);
-  accountOpt.value = bankOption
-    .map((b) => {
-      const name =
-        `${b.accountName} ${mapOption(b.bankName)} ${mapOption(b.accountType)} ${b.accountNumber}`.trim();
-      if (!name) return;
-
-      return {
-        label: name,
-        value: name,
-      };
-    })
-    .filter((i) => !!i);
-}
-
-onMounted(async () => {
-  await fetchData();
-  await fetchBankOption();
 });
 </script>
 <template>
-  <div class="column no-wrap">
+  <q-form
+    greedy
+    @submit.prevent
+    @validation-success="triggerSubmit"
+    class="column full-height"
+    v-if="data"
+  >
+    <div class="col column no-wrap">
       <!-- PRICE DETAIL -->
       <section class="bordered rounded surface-1" style="overflow: hidden">
         <q-expansion-item
@@ -337,8 +293,10 @@ onMounted(async () => {
               <span class="q-ml-auto" style="color: var(--foreground)">
                 ฿
                 {{
-                formatNumberDecimal(data.totalPrice - data.totalDiscount, 2) ||
+                  formatNumberDecimal(
-                '0.00'
+                    data.totalPrice - data.totalDiscount,
+                    2,
+                  ) || '0.00'
                 }}
               </span>
             </span>
@@ -529,7 +487,7 @@ onMounted(async () => {
         <!-- payment item -->
         <section class="row">
           <div
-          v-for="(payment, i) in paymentData"
+            v-for="(p, i) in paymentData"
             :key="i"
             class="bordered rounded surface-1 q-mb-md col-12"
             style="overflow: hidden"
@@ -538,7 +496,7 @@ onMounted(async () => {
               hide-expand-icon
               v-model="state.payExpansion[i]"
               header-style="padding:0px"
-            @before-show="getSlipList(payment, i)"
+              @before-show="getSlipList(p, i)"
             >
               <template v-slot:header>
                 <div class="column full-width">
@@ -547,7 +505,7 @@ onMounted(async () => {
                   >
                     <span class="text-weight-medium column">
                       {{ $t('quotation.periodNo') }} {{ i + 1 }}
-                    {{ monthDisplay(payment.createdAt) }}
+                      {{ monthDisplay(p.createdAt) }}
                       <!-- {{ monthDisplay(p.date) }} -->
                       <!-- <span -->
                       <!--   class="text-caption app-text-muted-2" -->
@@ -571,29 +529,25 @@ onMounted(async () => {
                         padding="4px 8px"
                         class="rounded text-capitalize text-weight-regular payment-wait row items-center"
                         :class="{
-                        'payment-pending':
+                          'payment-pending': p.paymentStatus === 'PaymentWait',
-                          payment.paymentStatus === 'PaymentWait',
                           'payment-process':
-                          payment.paymentStatus === 'PaymentInProcess',
+                            p.paymentStatus === 'PaymentInProcess',
-                        'payment-retry':
+                          'payment-retry': p.paymentStatus === 'PaymentRetry',
-                          payment.paymentStatus === 'PaymentRetry',
                           'payment-success':
-                          payment.paymentStatus === 'PaymentSuccess',
+                            p.paymentStatus === 'PaymentSuccess',
                         }"
                       >
                         <q-icon
                           size="xs"
                           :name="
                             paymentStatusOpts.find(
-                            (s) => s.status === payment.paymentStatus,
+                              (s) => s.status === p.paymentStatus,
                             )?.icon || 'mdi-hand-coin-outline'
                           "
                           class="q-pr-sm"
                         />
                         <span>
-                        {{
+                          {{ $t(`quotation.receiptDialog.${p.paymentStatus}`) }}
-                          $t(`quotation.receiptDialog.${payment.paymentStatus}`)
-                        }}
                         </span>
                         <q-icon
                           v-if="!readonly"
@@ -614,16 +568,16 @@ onMounted(async () => {
                               <q-item
                                 :id="`btn-payment-${opts.status}`"
                                 v-if="
-                                (payment.paymentStatus === 'PaymentWait' &&
+                                  (p.paymentStatus === 'PaymentWait' &&
                                     opts.status !== 'PaymentRetry') ||
-                                (payment.paymentStatus === 'PaymentInProcess' &&
+                                  (p.paymentStatus === 'PaymentInProcess' &&
                                     opts.status !== 'PaymentInProcess') ||
-                                (payment.paymentStatus === 'PaymentRetry' &&
+                                  (p.paymentStatus === 'PaymentRetry' &&
                                     opts.status !== 'PaymentRetry')
                                 "
                                 clickable
                                 class="row items-center"
-                              @click="selectStatus(payment, opts.status, i)"
+                                @click="selectStatus(p, opts.status, i)"
                               >
                                 <q-icon
                                   :name="opts.icon"
@@ -645,7 +599,7 @@ onMounted(async () => {
                       class="q-px-sm q-ml-auto"
                       style="color: var(--foreground)"
                     >
-                    {{ formatNumberDecimal(payment.amount, 2) }}
+                      {{ formatNumberDecimal(p.amount, 2) }}
                     </span>
                     <q-btn
                       dense
@@ -654,125 +608,15 @@ onMounted(async () => {
                       padding="0"
                       id="btn-show-file"
                       :icon="`mdi-chevron-${state.payExpansion[i] ? 'down' : 'up'}`"
-                    @click.stop="state.payExpansion[i] = !state.payExpansion[i]"
+                      @click.stop="
+                        state.payExpansion[i] = !state.payExpansion[i]
+                      "
                     />
                   </section>
                 </div>
               </template>
 
-            <!-- วิธีการรับชำระ -->
-            <template v-if="payment.paymentStatus === 'PaymentSuccess'">
-              <section
-                class="q-px-md q-py-xs text-weight-medium row items-center"
-                style="background-color: hsla(var(--info-bg) / 0.1)"
-              >
-                {{ $t('quotation.receiptDialog.paymentMethod') }}
-              </section>
-
-              <q-form
-                class="column full-height"
-                @submit.prevent
-                @submit="triggerSubmit(payment.id)"
-              >
               <div
-                  class="surface-2 q-px-md q-py-sm row q-col-gutter-sm items-center"
-                >
-                  <SelectInput
-                    id="input-payment-channel"
-                    for="input-payment-channel"
-                    :readonly="
-                      readonly ||
-                      (!formPaymentMethod[i].isEdit && !!payment.channel)
-                    "
-                    v-model="formPaymentMethod[i].channel"
-                    class="col-md-2 col-6"
-                    :rules="[
-                      (val: string) => !!val || $t('form.error.required'),
-                    ]"
-                    :option="[
-                      {
-                        label: $t('creditNote.label.Cash'),
-                        value: 'Cash',
-                      },
-                      {
-                        label: $t('creditNote.label.BankTransfer'),
-                        value: 'BankTransfer',
-                      },
-                    ]"
-                    :label="$t('quotation.receiptDialog.paymentMethod')"
-                    @update:model-value="
-                      () => {
-                        if (formPaymentMethod[i].channel === 'Cash') {
-                          formPaymentMethod[i].reference = null;
-                          formPaymentMethod[i].account = null;
-                        }
-                      }
-                    "
-                  />
-                  <q-input
-                    v-if="formPaymentMethod[i].channel === 'BankTransfer'"
-                    dense
-                    outlined
-                    class="col-md-3 col-6"
-                    v-model="formPaymentMethod[i].reference"
-                    :readonly="
-                      readonly ||
-                      (!formPaymentMethod[i].isEdit && !!payment.channel)
-                    "
-                    :label="$t('quotation.refNo')"
-                    :rules="[
-                      (val: string) => !!val || $t('form.error.required'),
-                    ]"
-                    hide-bottom-space
-                  />
-                  <SelectInput
-                    v-if="formPaymentMethod[i].channel === 'BankTransfer'"
-                    id="select-payment-account"
-                    for="select-payment-account"
-                    :readonly="
-                      readonly ||
-                      (!formPaymentMethod[i].isEdit && !!payment.channel)
-                    "
-                    v-model="formPaymentMethod[i].account"
-                    class="col"
-                    :option="accountOpt"
-                    :label="$t('quotation.bankAccount')"
-                    :rules="[
-                      (val: string) => !!val || $t('form.error.required'),
-                    ]"
-                  />
-                  <div class="q-ml-auto">
-                    <UndoButton
-                      v-if="formPaymentMethod[i].isEdit"
-                      icon-only
-                      @click="
-                        () => {
-                          formPaymentMethod[i].isEdit = false;
-                          formPaymentMethod[i].channel = payment.channel;
-                          formPaymentMethod[i].reference = payment.reference;
-                          formPaymentMethod[i].account = payment.account;
-                        }
-                      "
-                    />
-                    <SaveButton
-                      v-if="!payment.channel || formPaymentMethod[i].isEdit"
-                      icon-only
-                      type="submit"
-                    />
-                    <EditButton
-                      v-if="
-                        payment.channel && formPaymentMethod[i].isEdit === false
-                      "
-                      icon-only
-                      @click="formPaymentMethod[i].isEdit = true"
-                    />
-                  </div>
-                </div>
-              </q-form>
-            </template>
-
-            <!-- อัปโหลดใบเสร็จ -->
-            <section
                 class="q-px-md q-py-xs text-weight-medium row items-center"
                 style="background-color: hsla(var(--info-bg) / 0.1)"
               >
@@ -781,7 +625,7 @@ onMounted(async () => {
                     msg: $t('quotation.receiptDialog.slip'),
                   })
                 }}
-            </section>
+              </div>
               <div class="surface-2 q-pa-md">
                 <div
                   class="upload-section column rounded q-py-md full-height items-center justify-center no-wrap"
@@ -808,9 +652,7 @@ onMounted(async () => {
                     ref="refQFile"
                     v-show="false"
                     v-model="slipFile[i].file"
-                  @update:model-value="
+                    @update:model-value="triggerUpload(p, i, slipFile[i].file)"
-                    triggerUpload(payment, i, slipFile[i].file)
-                  "
                   />
                 </div>
               </div>
@@ -830,12 +672,12 @@ onMounted(async () => {
                     :name="d.name"
                     :progress="d.progress"
                     :uploading="{ loaded: d.loaded, total: d.total }"
-                  :url="`/payment/${payment.id}/attachment/${d.name}`"
+                    :url="`/quotation/${data.id}/payment/${p.id}/attachment/${d.name}`"
                     icon="mdi-file-image-outline"
                     color="hsl(var(--text-mute))"
                     clickable
-                  @click="triggerViewSlip(payment, d.name)"
+                    @click="triggerViewSlip(p, d.name)"
-                  @close="triggerDelete(payment, d.name, i)"
+                    @close="triggerDelete(p, d.name, i)"
                   />
                 </div>
               </section>
@@ -844,6 +686,7 @@ onMounted(async () => {
         </section>
       </section>
     </div>
+  </q-form>
 </template>
 <style scoped>
 .bg-color-orange {

src/pages/05_quotation/QuotationForm.vue

@@ -80,8 +80,6 @@ import { RouterLink, useRoute } from 'vue-router';
 import { initLang, initTheme, Lang } from 'src/utils/ui';
 import { convertTemplate } from 'src/utils/string-template';
 
-import { CustomerBranch } from 'src/stores/customer';
-
 type Node = {
   [key: string]: any;
   opened?: boolean;
@@ -96,8 +94,6 @@ type ProductGroupId = string;
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
-const customerBranchOption = ref<CustomerBranch>();
-
 const employeeStore = useEmployeeStore();
 const route = useRoute();
 const useReceiptStore = useReceipt();
@@ -161,7 +157,49 @@ const selectedWorker = ref<
     }[];
   })[]
 >([]);
-const selectedWorkerItem = ref([]);
+const selectedWorkerItem = computed(() => {
+  return [
+    ...selectedWorker.value.map((e) => ({
+      foreignRefNo: e.employeePassport
+        ? e.employeePassport[0]?.number || '-'
+        : '-',
+      employeeName:
+        locale.value === Lang.English
+          ? `${e.firstNameEN} ${e.lastNameEN}`
+          : e.firstName
+            ? `${e.firstName} ${e.lastName}`
+            : `${e.firstNameEN} ${e.lastNameEN}`,
+      birthDate: dateFormatJS({ date: e.dateOfBirth }),
+      gender: e.gender,
+      age: calculateAge(e.dateOfBirth),
+      nationality: optionStore.mapOption(e.nationality),
+      documentExpireDate:
+        e.employeePassport !== undefined &&
+        e.employeePassport[0]?.expireDate !== undefined
+          ? dateFormatJS({ date: e.employeePassport[0]?.expireDate })
+          : '-',
+      imgUrl: e.selectedImage
+        ? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
+        : '',
+      status: e.status,
+    })),
+
+    ...newWorkerList.value.map((v: any) => ({
+      foreignRefNo: v.passportNo,
+      employeeName:
+        locale.value === Lang.English
+          ? `${v.firstNameEN} ${v.lastNameEN}`
+          : `${v.firstName} ${v.lastName}`,
+      birthDate: dateFormatJS({ date: v.dateOfBirth }),
+      gender: v.gender,
+      age: calculateAge(v.dateOfBirth),
+      nationality: optionStore.mapOption(v.nationality),
+      documentExpireDate: '-',
+      imgUrl: '',
+      status: 'CREATED',
+    })),
+  ];
+});
 const firstCodePayment = ref('');
 const selectedProductGroup = ref('');
 const selectedInstallmentNo = ref<number[]>([]);
@@ -196,7 +234,7 @@ function getPrice(
 ) {
   if (filterHook) list = list.filter(filterHook);
 
-  const value = list.reduce(
+  return list.reduce(
     (a, c) => {
       if (
         selectedInstallmentNo.value.length > 0 &&
@@ -206,25 +244,32 @@ function getPrice(
         return a;
       }
 
+      const originalPrice = c.pricePerUnit;
+      const finalPriceWithVat = precisionRound(
+        originalPrice * (1 + (config.value?.vat || 0.07)),
+      );
+      const finalPriceNoVat =
+        finalPriceWithVat / (1 + (config.value?.vat || 0.07));
+
+      const price = finalPriceNoVat * c.amount;
+      const vat =
+        (finalPriceNoVat * c.amount - c.discount) * (config.value?.vat || 0.07);
+
       const calcVat =
         c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
-      const vatFactor = calcVat ? (config.value?.vat ?? 0.07) : 0;
 
-      const pricePerUnit =
+      a.totalPrice = precisionRound(a.totalPrice + price);
-        precisionRound(c.pricePerUnit * (1 + vatFactor)) / (1 + vatFactor);
+      a.totalDiscount = precisionRound(a.totalDiscount + Number(c.discount));
-
+      a.vat = calcVat ? precisionRound(a.vat + vat) : a.vat;
-      const price =
-        (pricePerUnit * c.amount * (1 + vatFactor) - c.discount) /
-        (1 + vatFactor);
-      const vat = price * vatFactor;
-
-      a.totalPrice = precisionRound(a.totalPrice + price + c.discount);
-      a.totalDiscount = precisionRound(a.totalDiscount + c.discount);
-      a.vat = precisionRound(a.vat + vat);
       a.vatExcluded = calcVat
         ? a.vatExcluded
         : precisionRound(a.vatExcluded + price);
-      a.finalPrice = precisionRound(a.totalPrice - a.totalDiscount + a.vat);
+      a.finalPrice = precisionRound(
+        a.totalPrice -
+          a.totalDiscount +
+          a.vat -
+          Number(quotationFormData.value.discount || 0),
+      );
 
       return a;
     },
@@ -236,8 +281,6 @@ function getPrice(
       finalPrice: 0,
     },
   );
-
-  return value;
 }
 
 const summaryPrice = computed(() => getPrice(productServiceList.value));
@@ -516,7 +559,7 @@ async function convertDataToFormSubmit() {
     ),
   );
 
-  selectedWorkerItem.value.forEach((v, i) => {
+  selectedWorker.value.forEach((v, i) => {
     if (v.attachment !== undefined) {
       v.attachment.forEach((value) => {
         fileItemNewWorker.value.push({
@@ -533,7 +576,7 @@ async function convertDataToFormSubmit() {
 
   quotationFormData.value.worker = JSON.parse(
     JSON.stringify([
-      ...selectedWorkerItem.value.map((v) => {
+      ...selectedWorker.value.map((v) => {
         {
           return v.id;
         }
@@ -676,13 +719,19 @@ function handleUpdateProductTable(
   // handleChangePayType(quotationFormData.value.payCondition);
   // calc price
   const calc = (c: QuotationPayload['productServiceList'][number]) => {
-    const calcVat =
+    const originalPrice = c.pricePerUnit || 0;
-      c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
+    const finalPriceWithVat = precisionRound(
-    const vatFactor = calcVat ? (config.value?.vat ?? 0.07) : 0;
+      originalPrice * (1 + (config.value?.vat || 0.07)),
-    const pricePerUnit =
+    );
-      precisionRound(c.pricePerUnit * (1 + vatFactor)) / (1 + vatFactor);
+    const finalPriceNoVat =
-    const price = pricePerUnit * c.amount * (1 + vatFactor) - c.discount;
+      finalPriceWithVat / (1 + (config.value?.vat || 0.07));
-    return precisionRound(price);
+
+    const price = finalPriceNoVat * c.amount;
+    const vat = c.product.calcVat
+      ? (finalPriceNoVat * c.amount - (c.discount || 0)) *
+        (config.value?.vat || 0.07)
+      : 0;
+    return precisionRound(price + vat);
   };
 
   // installment
@@ -735,16 +784,21 @@ function toggleDeleteProduct(index: number) {
 
   // cal curr amount
   if (currPaySplit && currTempPaySplit) {
-    const calcVat =
+    const price = agentPrice.value
-      currProduct.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
+      ? currProduct.product.agentPrice
-    const vatFactor = calcVat ? (config.value?.vat ?? 0.07) : 0;
+      : currProduct.product.price;
+    const pricePerUnit = currProduct.product.vatIncluded
+      ? price / (1 + (config.value?.vat || 0.07))
+      : price;
+    const vat =
+      (pricePerUnit * currProduct.amount - currProduct.discount) *
+      (config.value?.vat || 0.07);
+    const finalPrice =
+      pricePerUnit * currProduct.amount +
+      vat -
+      Number(currProduct.discount || 0);
 
-    const price = precisionRound(
+    currTempPaySplit.amount = currPaySplit.amount - finalPrice;
-      currProduct.pricePerUnit * currProduct.amount * (1 + vatFactor) -
-        currProduct.discount,
-    );
-
-    currTempPaySplit.amount = currPaySplit.amount - price;
     currPaySplit.amount = currTempPaySplit.amount;
   }
 
@@ -766,40 +820,7 @@ function toggleDeleteProduct(index: number) {
 }
 
 async function assignWorkerToSelectedWorker() {
-  selectedWorkerItem.value = quotationFormData.value.worker.map((e) => {
+  selectedWorker.value = quotationFormData.value.worker;
-    return {
-      id: e.id,
-      foreignRefNo: e.employeePassport
-        ? e.employeePassport[0]?.number || '-'
-        : '-',
-      employeeName:
-        locale.value === Lang.English
-          ? `${e.firstNameEN} ${e.lastNameEN}`
-          : `${e.firstName || e.firstNameEN} ${e.lastName || e.lastNameEN}`,
-      birthDate: dateFormatJS({ date: e.dateOfBirth }),
-      gender: e.gender,
-      age: calculateAge(e.dateOfBirth),
-      nationality: optionStore.mapOption(e.nationality),
-      documentExpireDate:
-        e.employeePassport !== undefined &&
-        e.employeePassport[0]?.expireDate !== undefined
-          ? dateFormatJS({ date: e.employeePassport[0]?.expireDate })
-          : '-',
-      imgUrl: e.selectedImage
-        ? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
-        : '',
-      employeePassport: e.employeePassport,
-      status: e.status,
-      workerNew: false,
-      lastNameEN: e.lastNameEN,
-      lastName: e.lastName,
-      middleNameEN: e.middleNameEN,
-      middleName: e.middleName,
-      firstNameEN: e.firstNameEN,
-      firstName: e.firstName,
-      namePrefix: e.namePrefix,
-    };
-  });
 }
 
 function convertToTable(nodes: Node[]) {
@@ -832,7 +853,8 @@ function convertToTable(nodes: Node[]) {
   tempTableProduct.value = JSON.parse(JSON.stringify(list));
 
   if (nodes.length > 0) {
-    quotationFormData.value.paySplit = Array.from(
+    quotationFormData.value.paySplit = Array.apply(
+      null,
       new Array(quotationFormData.value.paySplitCount),
     ).map((_, i) => ({
       no: i + 1,
@@ -858,21 +880,21 @@ function convertToTable(nodes: Node[]) {
 
 function convertEmployeeToTable(selected: Employee[]) {
   productServiceList.value.forEach((v) => {
-    if (selectedWorkerItem.value.length === 0 && v.amount === 1) v.amount -= 1;
+    if (selectedWorker.value.length === 0 && v.amount === 1) v.amount -= 1;
 
     v.amount = Math.max(
-      v.amount + selected.length - selectedWorkerItem.value.length,
+      v.amount + selected.length - selectedWorker.value.length,
       1,
     );
 
     const oldWorkerId: string[] = [];
     const newWorkerIndex: number[] = [];
 
-    selectedWorkerItem.value.forEach((item, i) => {
+    selectedWorker.value.forEach((item, i) => {
       if (v.workerIndex.includes(i)) oldWorkerId.push(item.id);
     });
     selected.forEach((item, i) => {
-      if (selectedWorkerItem.value.find((n) => item.id === n.id)) return;
+      if (selectedWorker.value.find((n) => item.id === n.id)) return;
       newWorkerIndex.push(i);
     });
 
@@ -885,7 +907,7 @@ function convertEmployeeToTable(selected: Employee[]) {
   pageState.employeeModal = false;
   quotationFormData.value.workerMax = Math.max(
     quotationFormData.value.workerMax || 1,
-    selectedWorkerItem.value.length,
+    selectedWorker.value.length,
   );
 }
 
@@ -958,71 +980,6 @@ function viewProductFile(data: ProductRelation) {
   pageState.imageDialogUrl = base64 ? base64[1] : '';
 }
 
-function combineWorker(newWorker: any, oldWorker: any) {
-  selectedWorkerItem.value = [
-    ...oldWorker.map((e) => ({
-      id: e.id,
-      foreignRefNo: e.employeePassport
-        ? e.employeePassport[0]?.number || '-'
-        : '-',
-      employeeName:
-        locale.value === Lang.English
-          ? `${e.firstNameEN} ${e.lastNameEN}`
-          : `${e.firstName || e.firstNameEN} ${e.lastName || e.lastNameEN}`,
-      birthDate: dateFormatJS({ date: e.dateOfBirth }),
-      gender: e.gender,
-      age: calculateAge(e.dateOfBirth),
-      nationality: optionStore.mapOption(e.nationality),
-      documentExpireDate:
-        e.employeePassport !== undefined &&
-        e.employeePassport[0]?.expireDate !== undefined
-          ? dateFormatJS({ date: e.employeePassport[0]?.expireDate })
-          : '-',
-      imgUrl: e.selectedImage
-        ? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
-        : '',
-
-      employeePassport: e.employeePassport,
-      status: e.status,
-      workerNew: false,
-      lastNameEN: e.lastNameEN,
-      lastName: e.lastName,
-      middleNameEN: e.middleNameEN,
-      middleName: e.middleName,
-      firstNameEN: e.firstNameEN,
-      firstName: e.firstName,
-      namePrefix: e.namePrefix,
-    })),
-
-    ...newWorker.map((v: any) => ({
-      id: v.id,
-      foreignRefNo: v.passportNo || '-',
-      employeeName:
-        locale.value === Lang.English
-          ? `${v.firstNameEN} ${v.lastNameEN}`
-          : `${v.firstName || v.firstNameEN} ${v.lastName || v.lastNameEN}`,
-      birthDate: dateFormatJS({ date: v.dateOfBirth }),
-      gender: v.gender,
-      age: calculateAge(v.dateOfBirth),
-      nationality: optionStore.mapOption(v.nationality),
-      documentExpireDate: '-',
-      imgUrl: '',
-      status: 'CREATED',
-
-      lastNameEN: v.lastNameEN,
-      lastName: v.lastName,
-      middleNameEN: v.middleNameEN,
-      middleName: v.middleName,
-      firstNameEN: v.firstNameEN,
-      firstName: v.firstName,
-      namePrefix: v.namePrefix,
-
-      dateOfBirth: v.dateOfBirth,
-      workerNew: true,
-    })),
-  ];
-}
-
 const sessionData = ref<Record<string, any>>();
 
 onMounted(async () => {
@@ -1094,7 +1051,7 @@ watch(
   () => quotationFormData.value.customerBranchId,
   async (v) => {
     if (!v) return;
-    selectedWorkerItem.value = [];
+    selectedWorker.value = [];
   },
 );
 
@@ -1110,15 +1067,6 @@ watch(
 
 const productServiceNodes = ref<ProductTree>([]);
 
-watch(customerBranchOption, () => {
-  if (!customerBranchOption.value) return;
-
-  quotationFormData.value.contactName =
-    customerBranchOption.value.contactName || '';
-  quotationFormData.value.contactTel =
-    customerBranchOption.value.contactTel || '';
-});
-
 watch(
   () => productServiceList.value,
   () => {
@@ -1126,13 +1074,6 @@ watch(
   },
 );
 
-watch(customerBranchOption, () => {
-  if (!customerBranchOption.value) return;
-
-  quotationFormData.value.contactName = customerBranchOption.value.contactName;
-  quotationFormData.value.contactTel = customerBranchOption.value.contactTel;
-});
-
 // async function searchEmployee(text: string) {
 //   let query: string | undefined = text;
 //   let pageSize = 50;
@@ -1154,19 +1095,7 @@ watch(customerBranchOption, () => {
 // }
 
 function storeDataLocal() {
-  const tempProductService = productService.value.map((v) => {
+  quotationFormData.value.productServiceList = productService.value;
-    return {
-      ...v,
-      vat: v.product[agentPrice ? 'agentPriceCalcVat' : 'calcVat']
-        ? precisionRound(
-            ((v.pricePerUnit * (1 + (config?.value.vat || 0.07)) * v.amount -
-              v.discount) /
-              (1 + (config?.value.vat || 0.07))) *
-              0.07,
-          )
-        : 0,
-    };
-  });
 
   localStorage.setItem(
     'quotation-preview',
@@ -1175,7 +1104,7 @@ function storeDataLocal() {
         codeInvoice: code.value,
         codePayment: firstCodePayment.value,
         ...quotationFormData.value,
-        productServiceList: tempProductService,
+        productServiceList: productService.value,
       },
       meta: {
         source: {
@@ -1195,7 +1124,7 @@ function storeDataLocal() {
           workName: quotationFormData.value.workName,
           dueDate: quotationFormData.value.dueDate,
         },
-        selectedWorker: selectedWorkerItem.value,
+        selectedWorker: selectedWorker.value,
         createdBy: quotationFormState.value.createdBy('tha'),
         agentPrice: agentPrice.value,
       },
@@ -1280,10 +1209,10 @@ async function getWorkerFromCriteria(
   if (!ret) return false; // error, do not close dialog
 
   const deduplicate = ret.result.filter(
-    (a) => !selectedWorkerItem.value.find((b) => a.id === b.id),
+    (a) => !selectedWorker.value.find((b) => a.id === b.id),
   );
 
-  convertEmployeeToTable([...deduplicate, ...selectedWorkerItem.value]);
+  convertEmployeeToTable([...deduplicate, ...selectedWorker.value]);
 
   return true;
 }
@@ -1590,7 +1519,6 @@ function covertToNode() {
                       v-model:customer-branch-id="
                         quotationFormData.customerBranchId
                       "
-                      v-model:customer-branch-option="customerBranchOption"
                       :readonly="readonly"
                     />
                   </template>
@@ -1673,15 +1601,15 @@ function covertToNode() {
                     (v) =>
                       (quotationFormData.workerMax = Math.max(
                         v,
-                        selectedWorkerItem.length,
+                        selectedWorker.length,
                       ))
                   "
                   :employee-amount="
-                    quotationFormData.workerMax || selectedWorkerItem.length
+                    quotationFormData.workerMax || selectedWorker.length
                   "
                   :readonly="readonly"
                   :rows="selectedWorkerItem"
-                  @delete="(i) => deleteItem(selectedWorkerItem, i)"
+                  @delete="(i) => deleteItem(selectedWorker, i)"
                 />
               </div>
             </q-expansion-item>
@@ -1925,10 +1853,10 @@ function covertToNode() {
                             installments: quotationFormData.paySplit,
                           },
                           'quotation-labor': {
-                            name: selectedWorkerItem.map(
+                            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(),
+                                `${v.employeePassport.length !== 0 ? v.employeePassport[0].number + '_' : ''}  ${v.namePrefix}.${v.firstNameEN ? `${v.firstNameEN} ${v.lastNameEN}` : `${v.firstName} ${v.lastName}`}  `.toUpperCase(),
                             ),
                           },
                         })
@@ -2018,7 +1946,6 @@ function covertToNode() {
                 view !== View.Receipt &&
                 view !== View.Complete
               "
-              :branch-id="quotationFull.registeredBranchId"
               :readonly="
                 isRoleInclude(['sale', 'head_of_sale']) ||
                 !canAccess('quotation', 'edit')
@@ -2469,12 +2396,13 @@ function covertToNode() {
     <!-- add employee quotation -->
 
     <QuotationFormWorkerSelect
-      :preselect-worker="selectedWorkerItem"
+      :preselect-worker="selectedWorker"
       :customerBranchId="quotationFormData.customerBranchId"
       v-model:open="pageState.employeeModal"
+      v-model:new-worker-list="newWorkerList"
       @success="
         (v) => {
-          combineWorker(v.newWorker, v.worker);
+          selectedWorker = v.worker;
         }
       "
     />
@@ -2517,7 +2445,7 @@ function covertToNode() {
   <!-- add Worker -->
   <QuotationFormWorkerAddDialog
     v-if="quotationFormState.source"
-    :disabled-worker-id="selectedWorkerItem.map((v) => v.id)"
+    :disabled-worker-id="selectedWorker.map((v) => v.id)"
     :product-service-list="quotationFormState.source.productServiceList"
     :quotation-id="quotationFormState.source.id"
     :customer-branch-id="quotationFormState.source.customerBranchId"

src/pages/05_quotation/QuotationFormInfo.vue

@@ -234,7 +234,6 @@ watch(
           <section class="row q-col-gutter-sm col-12 items-center">
             <SelectInput
               class="col-md-6 col-12"
-              id="select-pay-type"
               :label="$t('quotation.payType')"
               :option="
                 taskOrder
@@ -242,6 +241,7 @@ watch(
                   : payTypeOption
               "
               :readonly="readonly || debitNote"
+              id="pay-type"
               :model-value="payType"
               @update:model-value="
                 (v) => {
@@ -275,7 +275,6 @@ watch(
                 </div>
                 <q-input
                   v-model="paySplitCount"
-                  id="input-pay-split-count"
                   :readonly="readonly || payType === 'Split'"
                   class="col-3"
                   type="number"
@@ -312,7 +311,6 @@ watch(
                 <q-input
                   :readonly="readonly"
                   :label="$t('general.name')"
-                  :id="`input-period-name-${i}`"
                   v-if="payType === 'SplitCustom'"
                   v-model="period.name"
                   class="col q-mx-sm"
@@ -322,7 +320,6 @@ watch(
                 <q-input
                   :readonly="readonly || payType === 'Split'"
                   class="col q-mx-sm"
-                  :id="`input-period-amount-${i}`"
                   :label="$t('quotation.amount')"
                   :model-value="
                     amount4Show[i] || commaInput(period.amount.toString())
@@ -380,7 +377,6 @@ watch(
 
           <DatePicker
             v-if="payType === 'BillFull'"
-            id="datepicker-bill-date"
             :readonly
             class="col-12"
             :label="$t('quotation.callDueDate')"
@@ -450,9 +446,7 @@ watch(
           <span class="q-ml-auto">
             {{
               formatNumberDecimal(
-                summaryPrice.totalPrice -
+                summaryPrice.totalPrice - summaryPrice.totalDiscount,
-                  summaryPrice.totalDiscount -
-                  summaryPrice.vatExcluded,
                 2,
               )
             }}
@@ -488,11 +482,7 @@ watch(
       <div class="q-pa-sm row surface-2 items-center text-weight-bold">
         {{ $t('quotation.totalPriceBaht') }}
 
-        <span
+        <span class="q-ml-auto" style="color: var(--brand-1)">
-          class="q-ml-auto"
-          style="color: var(--brand-1)"
-          id="value-final-price"
-        >
           {{
             payType === 'SplitCustom' && view === View.Invoice
               ? formatNumberDecimal(Math.max(installmentAmount || 0, 0), 2) || 0

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 ||
+                              )?.name || '-'
-                              selectedProductGroupOption?.name ||
-                              '-'
                             }}
                           </span>
                           <span class="text-caption app-text-muted">
                             {{
                               productGroup.find(
                                 (g) => g.id === selectedProductGroup,
-                              )?.code ||
+                              )?.code || '-'
-                              selectedProductGroupOption?.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', {

src/pages/05_quotation/QuotationFormWorkerAddDialog.vue

@@ -341,13 +341,12 @@ watch(() => state.search, getWorkerList);
               >
                 <div
                   style="display: inline-block; margin-inline: auto"
-                  v-if="workerList.length === 0 && state.search"
+                  v-if="workerList.length === 0"
                 >
                   <NoData :not-found="!!state.search" />
                 </div>
 
                 <TableWorker
-                  v-else
                   v-model:selected="workerSelected"
                   :rows="workerList"
                   :disabledWorkerId

src/pages/05_quotation/QuotationFormWorkerSelect.vue

@@ -113,7 +113,7 @@ const props = withDefaults(
   defineProps<{
     customerBranchId?: string;
     disabledWorkerId?: string[];
-    preselectWorker?: (Employee & { workerNew: boolean })[];
+    preselectWorker?: Employee[];
   }>(),
   {},
 );
@@ -133,7 +133,7 @@ const optionStore = useOptionStore();
 const employeeStore = useEmployeeStore();
 
 const open = defineModel<boolean>('open', { default: false });
-const newWorkerList = ref<
+const newWorkerList = defineModel<
   (EmployeeWorker & {
     attachment?: {
       name?: string;
@@ -143,7 +143,7 @@ const newWorkerList = ref<
       _meta?: Record<string, any>;
     }[];
   })[]
->([]);
+>('newWorkerList', { default: [] });
 const workerSelected = ref<Employee[]>([]);
 const workerList = ref<Employee[]>([]);
 const importWorkerCriteria = ref<{
@@ -208,13 +208,7 @@ function getEmployeeImageUrl(item: Employee) {
 
 function init() {
   if (props.preselectWorker) {
-    workerSelected.value = JSON.parse(
+    workerSelected.value = JSON.parse(JSON.stringify(props.preselectWorker));
-      JSON.stringify(props.preselectWorker.filter((v) => !v.workerNew)),
-    );
-
-    newWorkerList.value = JSON.parse(
-      JSON.stringify(props.preselectWorker.filter((v) => v.workerNew)),
-    );
   }
   getWorkerList();
 }
@@ -614,14 +608,11 @@ watch(
           solid
           id="btn-success"
           @click="
-            () => {
+            (emits('success', {
-              $emit('success', {
               worker: workerSelected,
               newWorker: newWorkerList,
-              });
+            }),
-
+            (open = false))
-              open = false;
-            }
           "
         >
           {{ $t('general.select', { msg: $t('quotation.employeeList') }) }}
@@ -643,11 +634,9 @@ watch(
         if (employeeFormState.currentTab === 'personalInfo') {
           const currentEmployeeId =
             await employeeFormStore.submitPersonal(onCreateImageList);
-          newWorkerList.push(
           quotationForm.injectNewEmployee({
             data: { ...currentFromDataEmployee, id: currentEmployeeId },
-            }),
+          });
-          );
           employeeFormState.isEmployeeEdit = false;
           employeeFormState.dialogType = 'info';
         }

src/pages/05_quotation/form.ts

@@ -69,7 +69,6 @@ export const useQuotationForm = defineStore('form-quotation', () => {
         file?: File;
         _meta?: Record<string, any>;
       }[];
-      workerNew: boolean;
     })[]
   >([]);
 
@@ -221,7 +220,7 @@ export const useQuotationForm = defineStore('form-quotation', () => {
     },
     callback?: () => void,
   ) {
-    const temp = {
+    newWorkerList.value.push({
       //passportNo: obj.data.passportNo,
       //documentExpireDate: obj.data.documentExpireDate,
       id: obj.data.id,
@@ -236,12 +235,9 @@ export const useQuotationForm = defineStore('form-quotation', () => {
       gender: obj.data.gender,
       dateOfBirth: obj.data.dateOfBirth,
       attachment: obj.data.attachment,
-      workerNew: true,
+    });
-    };
 
     callback?.();
-
-    return temp;
   }
 
   function dialogDelete(callback: () => void) {

src/pages/05_quotation/preview/ViewForm.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia';
-import { onMounted, nextTick, ref, watch, toRaw } from 'vue';
+import { onMounted, nextTick, ref, watch } from 'vue';
 import { precisionRound } from 'src/utils/arithmetic';
 import { useI18n } from 'vue-i18n';
 import ThaiBahtText from 'thai-baht-text';
@@ -175,8 +175,6 @@ enum View {
 const view = ref<View>(View.Quotation);
 
 onMounted(async () => {
-  await configStore.getConfig();
-
   const currentDocumentType = new URL(window.location.href).searchParams.get(
     'type',
   );
@@ -261,6 +259,18 @@ onMounted(async () => {
     productList.value =
       (data?.value?.productServiceList ?? data.value?.productServiceList).map(
         (v) => {
+          const originalPrice = v.pricePerUnit;
+          const finalPriceWithVat = precisionRound(
+            originalPrice * (1 + (config.value?.vat || 0.07)),
+          );
+          const finalPriceNoVat =
+            finalPriceWithVat / (1 + (config.value?.vat || 0.07));
+
+          const price = finalPriceNoVat * v.amount - v.discount;
+          const vat =
+            (finalPriceNoVat * v.amount - v.discount) *
+            (config.value?.vat || 0.07);
+
           return {
             id: v.product.id,
             code: v.product.code,
@@ -269,8 +279,8 @@ onMounted(async () => {
             pricePerUnit: v.pricePerUnit || 0,
             discount: v.discount || 0,
             vat: v.vat || 0,
-            value: 0,
+            value: precisionRound(price + (v.product.calcVat ? vat : 0)),
-            calcVat: v.vat > 0,
+            calcVat: v.product.calcVat,
             product: v.product,
           };
         },
@@ -282,17 +292,23 @@ onMounted(async () => {
     []
   ).reduce(
     (a, c) => {
-      const calcVat = c.vat > 0;
+      const originalPrice = c.pricePerUnit;
-      const vatFactor = calcVat ? (config.value?.vat ?? 0.07) : 0;
+      const finalPriceWithVat = precisionRound(
-      const pricePerUnit =
+        originalPrice * (1 + (config.value?.vat || 0.07)),
-        precisionRound(c.pricePerUnit * (1 + vatFactor)) / (1 + vatFactor);
+      );
-      const price =
+      const finalPriceNoVat =
-        (pricePerUnit * c.amount * (1 + vatFactor) - c.discount) /
+        finalPriceWithVat / (1 + (config.value?.vat || 0.07));
-        (1 + vatFactor);
 
-      a.totalPrice = precisionRound(a.totalPrice + price + c.discount);
+      const price = finalPriceNoVat * c.amount;
+      const vat =
+        (finalPriceNoVat * c.amount - c.discount) * (config.value?.vat || 0.07);
+
+      const calcVat =
+        c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
+
+      a.totalPrice = precisionRound(a.totalPrice + price);
       a.totalDiscount = precisionRound(a.totalDiscount + Number(c.discount));
-      a.vat = calcVat ? precisionRound(a.vat + c.vat) : a.vat;
+      a.vat = calcVat ? precisionRound(a.vat + vat) : a.vat;
       a.vatExcluded = calcVat
         ? a.vatExcluded
         : precisionRound(a.vatExcluded + price);
@@ -318,12 +334,16 @@ onMounted(async () => {
 
 function calcPrice(c: Product) {
   const originalPrice = c.pricePerUnit;
-  const finalPricePerUnit = precisionRound(
+  const finalPriceWithVat = precisionRound(
-    originalPrice +
+    originalPrice + originalPrice * (config.value?.vat || 0.07),
-      (c.calcVat ? originalPrice * (config.value?.vat || 0.07) : 0),
   );
-  const price = finalPricePerUnit * c.amount - c.discount;
+  const finalPriceNoVat = finalPriceWithVat / (1 + (config.value?.vat || 0.07));
-  return precisionRound(price);
+
+  const price = finalPriceNoVat * c.amount - c.discount;
+  const vat = c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat']
+    ? (finalPriceNoVat * c.amount - c.discount) * (config.value?.vat || 0.07)
+    : 0;
+  return precisionRound(price + vat);
 }
 
 async function closeTab() {
@@ -407,15 +427,31 @@ function print() {
             <td>{{ v.detail }}</td>
             <td style="text-align: right">{{ v.amount }}</td>
             <td style="text-align: right">
-              {{ formatNumberDecimal(v.pricePerUnit, 2) }}
+              {{
+                formatNumberDecimal(
+                  v.pricePerUnit +
+                    (v.product[agentPrice ? 'agentPriceCalcVat' : 'calcVat']
+                      ? v.pricePerUnit * (config?.vat || 0.07)
+                      : 0),
+                  2,
+                )
+              }}
             </td>
             <td style="text-align: right">
-              <template v-if="v.discount !== 0">
+              {{ formatNumberDecimal(v.discount, 2) }}
-                {{ formatNumberDecimal(v.discount, 2) }} ฿
-              </template>
             </td>
             <td style="text-align: right">
-              {{ Math.round((v.vat > 0 ? config?.vat || 0.07 : 0) * 100) }}%
+              {{
+                formatNumberDecimal(
+                  v.product[agentPrice ? 'agentPriceCalcVat' : 'calcVat']
+                    ? precisionRound(
+                        (v.pricePerUnit * v.amount - v.discount) *
+                          (config?.vat || 0.07),
+                      )
+                    : 0,
+                  2,
+                )
+              }}
             </td>
             <td style="text-align: right">
               {{ formatNumberDecimal(calcPrice(v), 2) }}
@@ -475,9 +511,7 @@ function print() {
             <td class="text-right">
               {{
                 formatNumberDecimal(
-                  summaryPrice.totalPrice -
+                  summaryPrice.totalPrice - summaryPrice.totalDiscount,
-                    summaryPrice.totalDiscount -
-                    summaryPrice.vatExcluded,
                   2,
                 )
               }}
@@ -566,7 +600,7 @@ function print() {
                   details?.worker.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(),
+                      `${v.namePrefix}. ${v.firstNameEN ? `${v.firstNameEN} ${v.lastNameEN}` : `${v.firstName} ${v.lastName}`}  `.toUpperCase(),
                   ) || [],
               },
             }) || '-'

src/pages/05_quotation/preview/ViewHeader.vue

@@ -79,8 +79,8 @@ function titleMode(mode: View): string {
             })
           }}
         </span>
-        <span>{{ $t('branch.form.taxNo') }} {{ branch.taxNo }}</span>
+        <span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
-        <span>{{ $t('taskOrder.telephone') }} {{ branch.telephoneNo }}</span>
+        <span>เบอร์โทร {{ branch.telephoneNo }}</span>
         <span>{{ branch.webUrl }}</span>
       </article>
       <article>
@@ -105,18 +105,8 @@ function titleMode(mode: View): string {
             })
           }}
         </span>
-        <span>
+        <span>เลขประจำตัวผู้เสียภาษี {{ customer.citizenId }}</span>
-          {{
+        <span>เบอร์โทร {{ customer.telephoneNo }}</span>
-            customer.customer.customerType === 'CORP'
-              ? `${$t('customer.form.legalPersonNo')} `
-              : `${$t('customer.form.taxpayyerNo')} `
-          }}{{
-            customer.customer.customerType === 'CORP'
-              ? customer.codeCustomer
-              : customer.citizenId
-          }}
-        </span>
-        <span>{{ $t('taskOrder.telephone') }} {{ customer.telephoneNo }}</span>
       </article>
     </section>
     <section class="detail-quotation-info">

src/pages/08_request-list/DocumentExpansion.vue

@@ -61,7 +61,6 @@ const props = withDefaults(
     readonly?: boolean;
     listDocument: string[];
     currentId: { customer: string; employee: string };
-    prefix?: string;
   }>(),
   {
     listDocument: () => [],
@@ -245,14 +244,14 @@ function changeCustomerTab(opts: { tab: 'customer' | 'employee' }) {
       <nav class="q-ml-auto row" v-if="!readonly">
         <CancelButton
           v-if="state.isEdit"
-          :id="`btn-docs-${props.prefix || 'nome'}-info-basic-undo`"
+          id="btn-info-basic-undo"
           icon-only
           type="button"
           @click.stop="triggerCancel"
         />
         <EditButton
           v-if="!state.isEdit"
-          :id="`btn-docs-${props.prefix || 'nome'}-info-basic-edit`"
+          id="btn-info-basic-edit"
           icon-only
           @click.stop="triggerEdit"
           type="button"

src/pages/08_request-list/DutyExpansion.vue

@@ -11,7 +11,6 @@ import { useRequestList } from 'src/stores/request-list';
 const props = defineProps<{
   readonly?: boolean;
   step: Step;
-  prefix?: string;
 }>();
 
 const requestListStore = useRequestList();
@@ -101,21 +100,21 @@ function assignToForm() {
       <nav class="q-ml-auto row" v-if="!readonly">
         <UndoButton
           v-if="state.isEdit"
-          :id="`btn-duty-${props.prefix || 'nome'}-info-basic-undo`"
+          id="btn-info-basic-undo"
           icon-only
           type="button"
           @click.stop="triggerUndo"
         />
         <SaveButton
           v-if="state.isEdit"
-          :id="`btn-duty-${props.prefix || 'nome'}-info-basic-save`"
+          id="btn-info-basic-save"
           icon-only
           type="submit"
           @click.stop="triggerSubmit"
         />
         <EditButton
           v-if="!state.isEdit"
-          :id="`btn-duty-${props.prefix || 'nome'}-info-basic-edit`"
+          id="btn-info-basic-edit"
           icon-only
           @click.stop="triggerEdit"
           type="button"

src/pages/08_request-list/FormExpansion.vue

@@ -12,7 +12,6 @@ const props = defineProps<{
   readonly?: boolean;
   step: Step;
   requestWorkId: string;
-  prefix?: string;
 }>();
 
 const requestListStore = useRequestList();
@@ -91,21 +90,21 @@ function assignToForm() {
       <nav class="q-ml-auto row" v-if="!readonly">
         <UndoButton
           v-if="state.isEdit"
-          :id="`btn-form-${props.prefix || 'nome'}-info-basic-undo`"
+          id="btn-info-basic-undo"
           icon-only
           type="button"
           @click.stop="triggerUndo"
         />
         <SaveButton
           v-if="state.isEdit"
-          :id="`btn-form-${props.prefix || 'nome'}-info-basic-save`"
+          id="btn-info-basic-save"
           icon-only
           type="submit"
           @click.stop="triggerSubmit"
         />
         <EditButton
           v-if="!state.isEdit"
-          :id="`btn-form-${props.prefix || 'nome'}-info-basic-edit`"
+          id="btn-info-basic-edit"
           icon-only
           @click.stop="triggerEdit"
           type="button"

src/pages/08_request-list/FormResponsibleUser.vue

@@ -12,7 +12,6 @@ const responsibleUserId = defineModel<string>('responsibleUserId', {
 defineProps<{
   readonly?: boolean;
   districtId?: string;
-  prefix?: string;
 }>();
 
 watch(responsibleUserLocal, (lhs, rhs) => {
@@ -28,8 +27,6 @@ watch(responsibleUserLocal, (lhs, rhs) => {
         :label="$t('requestList.localEmployee')"
         :disable="readonly"
         class="col"
-        :id="`${prefix || 'nome'}-radio-local-employee`"
-        :for="`${prefix || 'nome'}-radio-local-employee`"
       />
       <q-radio
         v-model="responsibleUserLocal"
@@ -37,8 +34,6 @@ watch(responsibleUserLocal, (lhs, rhs) => {
         :label="$t('requestList.nonLocalEmployee')"
         :disable="readonly"
         class="col"
-        :id="`${prefix || 'nome'}-radio-non-local-employee`"
-        :for="`${prefix || 'nome'}-radio-non-local-employee`"
       />
       <div class="col" />
       <div class="offset-md-7"></div>
@@ -57,8 +52,6 @@ watch(responsibleUserLocal, (lhs, rhs) => {
         }"
         :readonly
         :label="$t('general.select', { msg: $t('personnel.MESSENGER') })"
-        :id="`${prefix || 'nome'}-select-user`"
-        :for="`${prefix || 'nome'}-select-user`"
       />
     </div>
   </div>

src/pages/08_request-list/MainPage.vue

@@ -95,7 +95,6 @@ function triggerCancel(id: string) {
       const res = await requestListStore.cancelRequest(id);
       if (res) {
         fetchList();
-        fetchStats();
       }
     },
   });

src/pages/08_request-list/MessengerExpansion.vue

@@ -14,7 +14,6 @@ const props = defineProps<{
   step: Step;
   responsibleAreaDistrictId?: string;
   defaultMessenger?: string;
-  prefix?: string;
 }>();
 
 const emit = defineEmits<{
@@ -117,21 +116,21 @@ function assignToForm() {
       <nav class="q-ml-auto row" v-if="!readonly">
         <UndoButton
           v-if="state.isEdit"
-          :id="`btn-messenger-${props.prefix || 'nome'}-info-basic-undo`"
+          id="btn-info-basic-undo"
           icon-only
           type="button"
           @click.stop="triggerUndo"
         />
         <SaveButton
           v-if="state.isEdit"
-          :id="`btn-messenger-${props.prefix || 'nome'}-info-basic-save`"
+          id="btn-info-basic-save"
           icon-only
           type="submit"
           @click.stop="(e) => refForm?.submit(e)"
         />
         <EditButton
           v-if="!state.isEdit"
-          :id="`btn-messenger-${props.prefix || 'nome'}-info-basic-edit`"
+          id="btn-info-basic-edit"
           icon-only
           @click.stop="triggerEdit"
           type="button"
@@ -158,7 +157,6 @@ function assignToForm() {
             v-model:responsible-user-local="formData.responsibleUserLocal"
             v-model:responsible-user-id="formData.responsibleUserId"
             :district-id="responsibleAreaDistrictId"
-            :prefix
           />
         </q-form>
       </section>

src/pages/08_request-list/ProductExpansion.vue

@@ -83,8 +83,6 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
 </script>
 <template>
   <q-expansion-item
-    :id="`expansion-${product?.name || name}`"
-    :for="`expansion-${product?.name || name}`"
     dense
     :class="{ 'status-unpaid': !paySuccess }"
     class="overflow-hidden"
@@ -148,8 +146,6 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
         <div class="q-ml-auto q-gutter-y-xs">
           <div class="justify-end flex">
             <q-btn-dropdown
-              :id="`btn-dropdown-${product?.name || name}`"
-              :for="`btn-dropdown-${product?.name || name}`"
               :disable="
                 readonly || changeableStatus(status?.workStatus).length === 0
               "
@@ -201,8 +197,6 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
               <q-list dense>
                 <q-item
                   v-for="(value, index) in changeableStatus(status?.workStatus)"
-                  :id="`btn-dropdown-${product?.name || name}-${value}`"
-                  :for="`btn-dropdown-${product?.name || name}-${value}`"
                   :key="index"
                   clickable
                   v-close-popup
@@ -278,14 +272,14 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
 
 :deep(
     i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
-) {
+  ) {
   color: var(--brand-1);
 }
 
 :deep(
     .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
       .q-focus-helper
-) {
+  ) {
   visibility: hidden;
 }
 

src/pages/08_request-list/PropertiesExpansion.vue

@@ -28,7 +28,6 @@ const props = withDefaults(
     readonly?: boolean;
     propertiesToShow: (PropString | PropNumber | PropDate | PropOptions)[];
     requestListData: RequestData;
-    prefix?: string;
   }>(),
   {
     id: '',
@@ -129,7 +128,7 @@ defineEmits<{
       <nav class="q-ml-auto row" v-if="!readonly">
         <UndoButton
           v-if="state.isEdit"
-          :id="`btn-properties-${props.prefix || 'nome'}-info-basic-undo`"
+          id="btn-info-basic-undo"
           icon-only
           type="button"
           @click.stop="triggerUndo"
@@ -137,14 +136,13 @@ defineEmits<{
         <SaveButton
           v-if="state.isEdit"
           id="btn-info-basic-save"
-          :id="`btn-properties-${props.prefix || 'nome'}-info-basic-save`"
           icon-only
           type="submit"
           @click.stop="triggerSubmit"
         />
         <EditButton
           v-if="!state.isEdit"
-          :id="`btn-properties-${props.prefix || 'nome'}-info-basic-edit`"
+          id="btn-info-basic-edit"
           icon-only
           @click.stop="triggerEdit"
           type="button"

src/pages/08_request-list/RequestListView.vue

@@ -881,7 +881,6 @@ function toEmployee(employee: RequestData['employee']) {
                     :readonly="value._readonly"
                     ref="refDocumentExpansion"
                     :attributes="value.attributes"
-                    :prefix="value.productService.product.name"
                     @change-status="
                       (opt) => {
                         triggerChangeStatusFile({
@@ -929,7 +928,6 @@ function toEmployee(employee: RequestData['employee']) {
                   <MessengerExpansion
                     v-if="value._messengerExpansion"
                     :readonly="value._readonly"
-                    :prefix="value.productService.product.name"
                     :default-messenger="
                       value.stepStatus[pageState.currentStep - 1]
                         ? undefined
@@ -955,7 +953,6 @@ function toEmployee(employee: RequestData['employee']) {
                   <DutyExpansion
                     v-if="value._dutyExpansion"
                     :readonly="value._readonly"
-                    :prefix="value.productService.product.name"
                     :step="{
                       step: pageState.currentStep,
                       requestWorkId: value.id || '',
@@ -969,7 +966,6 @@ function toEmployee(employee: RequestData['employee']) {
                     v-if="value._formExpansion"
                     :request-work-id="value.id"
                     :readonly="value._readonly"
-                    :prefix="value.productService.product.name"
                     :step="{
                       step: pageState.currentStep,
                       requestWorkId: value.id || '',
@@ -983,7 +979,6 @@ function toEmployee(employee: RequestData['employee']) {
                     :request-list-data="data"
                     :id="value.id"
                     :readonly="value._readonly"
-                    :prefix="value.productService.product.name"
                     :properties-to-show="
                       value.productService.work?.attributes.workflowStep[
                         pageState.currentStep - 1
@@ -1013,7 +1008,6 @@ function toEmployee(employee: RequestData['employee']) {
         v-if="
           productsList.some((v) => v._messengerExpansion) &&
           !(
-            data.requestDataStatus === RequestDataStatus.Completed ||
             data.requestDataStatus === RequestDataStatus.Canceled ||
             (responsibleList &&
               !responsibleList[pageState.currentStep]?.user.find(

src/pages/08_request-list/TableRequestList.vue

@@ -190,8 +190,6 @@ function handleCheckAll() {
       >
         <q-th v-if="checkable">
           <q-checkbox
-            :for="`list-checkbox-all`"
-            :id="`list-checkbox-all`"
             v-if="selected.length > 0"
             :model-value="
               selected.length ===
@@ -231,8 +229,6 @@ function handleCheckAll() {
       >
         <q-td v-if="checkable">
           <q-checkbox
-            :for="`list-checkbox-${props.rowIndex + 1}`"
-            :id="`list-checkbox-${props.rowIndex + 1}`"
             :disable="
               selected.length > 0 &&
               !listSameArea.includes(
@@ -318,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}`
@@ -328,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>

src/pages/09_task-order/MainPage.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // NOTE: Library
-import { computed, onMounted, onUnmounted, reactive, watch, ref } from 'vue';
+import { computed, onMounted, reactive, watch, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
@@ -86,7 +86,6 @@ async function fetchTaskOrderList(opts?: { page?: number; pageSize?: number }) {
     });
   }
   if (res) {
-    taskOrderStore.getTaskOrderStats();
     data.value = res.result;
     pageState.total = res.total;
     pageMax.value = Math.ceil(res.total / pageSize.value);
@@ -147,10 +146,6 @@ async function deleteTaskOrder(id: string) {
   });
 }
 
-function handleWindowFocus() {
-  fetchTaskOrderList();
-}
-
 onMounted(async () => {
   pageState.gridView = $q.screen.lt.md ? true : false;
   navigatorStore.current.title = 'taskOrder.title';
@@ -161,12 +156,6 @@ onMounted(async () => {
   if (route.query['tab'] && typeof route.query['tab'] === 'string') {
     pageState.currentTab = route.query['tab'];
   }
-
-  window.addEventListener('focus', handleWindowFocus);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('focus', handleWindowFocus);
 });
 
 watch(
@@ -229,11 +218,7 @@ watch(
           color: hsl(var(--info-bg));
         "
       >
-        {{
+        {{ Object.values(stats).reduce((s, v) => s + v, 0) }}
-          pageState.isMessenger
-            ? pageState.total
-            : stats[pageState.currentTab as TaskOrderStatus]
-        }}
       </q-badge>
       <q-btn
         class="q-ml-sm"

src/pages/09_task-order/SelectReadyRequestWork.vue

@@ -295,7 +295,6 @@ function assignTempGroup() {
           class="bordered-b"
         >
           <q-expansion-item
-            :id="`expansion-product-${product.code}`"
             dense
             class="overflow-hidden"
             switch-toggle-side
@@ -349,7 +348,6 @@ function assignTempGroup() {
               </FormGroupHead>
               <div class="q-pa-md full-width">
                 <TableEmployee
-                  :id="`table-employee-${product.code}`"
                   checkbox-on
                   check-all
                   select-ready
@@ -373,15 +371,9 @@ function assignTempGroup() {
     </section>
 
     <template #footer>
-      <CancelButton
+      <CancelButton class="q-ml-auto" outlined @click="close" />
-        id="btn-dialog-cancel"
-        class="q-ml-auto"
-        outlined
-        @click="close"
-      />
       <SaveButton
         :label="$t('general.select')"
-        id="btn-dialog-select"
         class="q-ml-sm"
         icon="mdi-check"
         solid

src/pages/09_task-order/TableEmployee.vue

@@ -225,7 +225,6 @@ function disableCheckAll() {
 <template>
   <q-table
     flat
-    id="table-employee"
     bordered
     row-key="id"
     v-bind="props"
@@ -274,7 +273,6 @@ function disableCheckAll() {
       >
         <q-th v-if="checkboxOn" class="relative-position">
           <q-checkbox
-            id="checkbox-check-all"
             v-if="checkAll"
             :disable="disableCheckAll()"
             :model-value="
@@ -307,7 +305,6 @@ function disableCheckAll() {
             class="absolute-right row items-center"
           >
             <q-btn
-              id="btn-change-all-status"
               flat
               dense
               rounded
@@ -342,7 +339,6 @@ function disableCheckAll() {
                     {{ $t(`taskOrder.status.Complete`) }}
                   </q-item>
                   <q-item
-                    id="menu-item-redo"
                     clickable
                     v-close-popup
                     class="items-center"
@@ -362,7 +358,6 @@ function disableCheckAll() {
                     {{ $t(`taskOrder.status.Redo`) }}
                   </q-item>
                   <q-item
-                    id="menu-item-restart"
                     clickable
                     v-close-popup
                     class="items-center"
@@ -384,7 +379,6 @@ function disableCheckAll() {
                 </q-list>
                 <q-list v-if="!validate" dense>
                   <q-item
-                    id="menu-item-success"
                     clickable
                     v-close-popup
                     class="items-center"
@@ -404,7 +398,6 @@ function disableCheckAll() {
                     {{ $t(`taskOrder.status.Success`) }}
                   </q-item>
                   <q-item
-                    id="menu-item-failed"
                     clickable
                     v-close-popup
                     class="items-center"
@@ -487,7 +480,6 @@ function disableCheckAll() {
         <q-td>
           <span
             class="cursor-pointer link"
-            :id="`link-request-list-${props.row.request.code}`"
             @click="goToRequestList(props.row.request.id)"
           >
             {{ props.row.request.code }}
@@ -497,7 +489,6 @@ function disableCheckAll() {
         <q-td>
           <span
             class="cursor-pointer link"
-            :id="`link-quotation-${props.row.request.quotation?.code}`"
             @click="goToQuotation(props.row.request.quotation)"
           >
             {{ props.row.request.quotation?.code }}
@@ -505,11 +496,7 @@ function disableCheckAll() {
         </q-td>
 
         <q-td v-if="stepOn" class="text-left">
-          <div
+          <div v-if="props.row._template" class="column text-left">
-            v-if="props.row._template"
-            class="column text-left"
-            :id="`template-step-${props.row.request.code}`"
-          >
             <span>{{ props.row._template.templateName }}</span>
             <span class="app-text-muted text-caption">
               {{ $t('flow.stepNo', { msg: props.row._template.step }) }}
@@ -535,10 +522,7 @@ function disableCheckAll() {
                 </template>
               </q-img>
             </q-avatar>
-            <div
+            <div class="column text-left q-ml-sm">
-              class="column text-left q-ml-sm"
-              :id="`employee-name-${props.row.request.employee?.code}`"
-            >
               <div>
                 {{ getEmployeeName(props.row, { locale: $i18n.locale }) }}
               </div>
@@ -548,7 +532,6 @@ function disableCheckAll() {
               </div>
             </div>
             <Icon
-              :id="`icon-gender-${props.row.request.employee?.code}`"
               class="q-ml-md"
               :class="`app-text-${props.row.request.employee?.gender}`"
               :icon="`material-symbols:${props.row.request.employee?.gender}`"
@@ -556,18 +539,13 @@ function disableCheckAll() {
             />
           </div>
         </q-td>
-        <q-td :id="`employee-age-${props.row.request.employee?.code}`">
+        <q-td>{{ calculateAge(props.row.request.employee?.dateOfBirth) }}</q-td>
-          {{ calculateAge(props.row.request.employee?.dateOfBirth) }}
+        <q-td>
-        </q-td>
-        <q-td :id="`employee-nationality-${props.row.request.employee?.code}`">
           {{
             useOptionStore().mapOption(props.row.request.employee?.nationality)
           }}
         </q-td>
-        <q-td
+        <q-td>
-          :id="`quotation-due-date-${props.row.request.quotation?.code}`"
-          v-if="!statusOn"
-        >
           {{
             dateFormatJS({
               date: props.row.request.quotation?.dueDate,
@@ -577,16 +555,13 @@ function disableCheckAll() {
             })
           }}
         </q-td>
-        <q-td
+        <q-td>
-          :id="`expiration-date-${props.row.request.quotation?.code}`"
-          v-if="!statusOn"
-        >
           <ExpirationDate
             :expiration-date="new Date(props.row.request.quotation?.dueDate)"
           />
         </q-td>
 
-        <q-td v-if="!statusOn">
+        <q-td>
           <BadgeComponent
             v-if="props.row.request.quotation?.urgent"
             icon="mdi-fire"

src/pages/09_task-order/TableTaskOrder.vue

@@ -114,7 +114,6 @@ const emit = defineEmits<{
 </script>
 <template>
   <q-table
-    id="table-task-order"
     v-bind="props"
     :columns="column"
     bordered
@@ -134,11 +133,7 @@ const emit = defineEmits<{
         :props="props"
       >
         <q-th v-if="selection !== 'none'">
-          <q-checkbox
+          <q-checkbox v-model="props.selected" size="sm" />
-            id="checkbox-select-all-task"
-            v-model="props.selected"
-            size="sm"
-          />
         </q-th>
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           {{ col.label && $t(col.label) }}
@@ -154,21 +149,13 @@ const emit = defineEmits<{
     >
       <q-tr class="text-center" :class="{ urgent: props.row.urgent }">
         <q-td v-if="selection !== 'none'">
-          <q-checkbox
+          <q-checkbox v-model="props.selected" size="sm" />
-            :id="`checkbox-task-${props.row.code}`"
-            v-model="props.selected"
-            size="sm"
-          />
         </q-td>
         <q-td v-if="visibleColumns.includes('order')">
           {{ props.rowIndex + 1 }}
         </q-td>
-        <q-td
+        <q-td v-if="visibleColumns.includes('taskName')" class="text-left">
-          v-if="visibleColumns.includes('taskName')"
+          <div>
-          class="text-left"
-          :id="`task-name-${props.row.code}`"
-        >
-          <div :id="`task-name-div-${props.row.code}`">
             {{ props.row.taskName || '-' }}
             <q-tooltip :delay="300">
               {{ props.row.taskName || '-' }}
@@ -183,51 +170,31 @@ const emit = defineEmits<{
             }}
           </div>
         </q-td>
-        <q-td
+        <q-td v-if="visibleColumns.includes('issueBranch')">
-          v-if="visibleColumns.includes('issueBranch')"
-          :id="`task-issue-branch-${props.row.code}`"
-        >
           {{
             $i18n.locale === 'eng'
               ? props.row.registeredBranch.nameEN || '-'
               : props.row.registeredBranch.name || '-'
           }}
         </q-td>
-        <q-td
+        <q-td v-if="visibleColumns.includes('institution')">
-          v-if="visibleColumns.includes('institution')"
-          :id="`task-institution-${props.row.code}`"
-        >
           {{
             $i18n.locale === 'eng'
               ? props.row.institution.nameEN || '-'
               : props.row.institution.name || '-'
           }}
         </q-td>
-        <q-td
+        <q-td v-if="visibleColumns.includes('createdAt')">
-          v-if="visibleColumns.includes('createdAt')"
-          :id="`task-created-at-${props.row.code}`"
-        >
           {{ dateFormatJS({ date: props.row.createdAt }) || '-' }}
           {{ dateFormatJS({ date: props.row.createdAt, timeOnly: true }) }}
         </q-td>
-        <q-td
+        <q-td v-if="visibleColumns.includes('createdBy')" class="text-left">
-          v-if="visibleColumns.includes('createdBy')"
-          class="text-left"
-          :id="`task-created-by-${props.row.code}`"
-        >
           {{ getCreatedByName(props.row, $i18n) }}
         </q-td>
-        <q-td
+        <q-td v-if="visibleColumns.includes('contactTel')">
-          v-if="visibleColumns.includes('contactTel')"
-          :id="`task-contact-tel-${props.row.code}`"
-        >
           {{ props.row.contactTel || '-' }}
         </q-td>
-        <q-td
+        <q-td v-if="visibleColumns.includes('contactName')" class="text-left">
-          v-if="visibleColumns.includes('contactName')"
-          class="text-left"
-          :id="`task-contact-name-${props.row.code}`"
-        >
           {{ props.row.contactName || '-' }}
         </q-td>
         <q-td v-if="visibleColumns.includes('taskStatus')">
@@ -235,12 +202,11 @@ const emit = defineEmits<{
             hide-icon
             :hsla-color="taskOrderStatus(props.row.taskOrderStatus, 'color')"
             :title="$t(taskOrderStatus(props.row.taskOrderStatus, 'status'))"
-            :id="`badge-task-status-${props.row.code}`"
           />
         </q-td>
         <q-td v-if="selection === 'none'">
           <q-btn
-            :id="`btn-view-task-${props.row.code}`"
+            :id="`btn-eye-${props.row.taskName}`"
             icon="mdi-eye-outline"
             size="sm"
             dense
@@ -255,7 +221,7 @@ const emit = defineEmits<{
               canAccess('taskOrder', 'edit')
             "
             :hide-delete="!canAccess('taskOrder', 'create')"
-            :idName="`btn-kebab-${props.row.code}`"
+            :idName="`btn-kebab-${props.row.taskName}`"
             status="'ACTIVE'"
             hide-toggle
             @view="$emit('view', props.row)"
@@ -267,7 +233,6 @@ const emit = defineEmits<{
           <q-btn
             dense
             flat
-            :id="`btn-sub-row-${props.row.code}`"
             class="rounded"
             @click.stop="
               () => {

src/pages/09_task-order/TaskStatusComponent.vue

@@ -60,25 +60,16 @@ function inactiveCheck() {
 </script>
 <template>
   <div
-    :id="`readonly-status-${status}`"
-    :for="`readonly-status-${status}`"
     v-if="readonly"
     class="row rounded bordered surface-2 items-center justify-center q-pa-xs no-wrap"
     :style="`color: hsl(var(--${currStatus?.color}-bg))`"
   >
-    <q-icon
+    <q-icon :name="currStatus?.icon" class="q-pr-xs" size="xs" />
-      :id="`readonly-status-icon-${status}`"
+    {{ $t(`taskOrder.status.${status}`) }}
-      :name="currStatus?.icon"
-      class="q-pr-xs"
-      size="xs"
-    />
-    <span :id="`readonly-status-label-${status}`">{{ $t(`taskOrder.status.${status}`) }}</span>
   </div>
 
   <div v-else class="row items-center justify-center no-wrap">
     <q-btn-dropdown
-      :id="`btn-dropdown-status-${status}`"
-      :for="`btn-dropdown-status-${status}`"
       dense
       unelevated
       :label="
@@ -119,8 +110,6 @@ function inactiveCheck() {
     >
       <q-list v-if="!noAction" dense>
         <q-item
-          :for="`menu-item-status-${v.value}`"
-          :id="`menu-item-status-${v.value}`"
           v-for="(v, index) in type === 'order'
             ? {
                 Success: taskStatusOrderToggle.filter(
@@ -158,8 +147,6 @@ function inactiveCheck() {
     </q-btn-dropdown>
 
     <q-btn
-      :id="`btn-failed-remark-${status}`"
-      :for="`btn-failed-remark-${status}`"
       v-if="currStatus?.value === TaskStatus.Failed"
       flat
       dense
@@ -201,7 +188,7 @@ function inactiveCheck() {
 :deep(
     .hide-icon
       i.q-icon.mdi.mdi-chevron-down.q-btn-dropdown__arrow.q-btn-dropdown__arrow-container
-) {
+  ) {
   display: none;
 }
 </style>

src/pages/09_task-order/document_view/MainPage.vue

@@ -202,44 +202,40 @@ onMounted(async () => {
     })
     .reduce(
       (a, c) => {
-        const vatFactor = c.product.serviceChargeCalcVat
+        const priceNoVat = c.product.serviceChargeVatIncluded
-          ? (config.value?.vat ?? 0.07)
+          ? c.pricePerUnit / (1 + (config.value?.vat || 0.07))
-          : 0;
+          : c.pricePerUnit;
+        const adjustedPriceWithVat = precisionRound(
+          priceNoVat * (1 + (config.value?.vat || 0.07)),
+        );
+        const adjustedPriceNoVat =
+          adjustedPriceWithVat / (1 + (config.value?.vat || 0.07));
+        const priceDiscountNoVat = adjustedPriceNoVat * c.amount - c.discount;
 
-        const pricePerUnit =
+        const rawVatTotal = priceDiscountNoVat * (config.value?.vat || 0.07);
-          precisionRound(c.product.serviceCharge * (1 + vatFactor)) /
+        const rawVat = rawVatTotal / c.amount;
-          (1 + vatFactor);
-
-        const amount = c.amount;
-        const discount = c.discount || 0;
-
-        const price =
-          (pricePerUnit * amount * (1 + vatFactor) - discount) /
-          (1 + vatFactor);
-
-        const vat = price * vatFactor;
 
         product.value.push({
           id: c.product.id,
           code: c.product.code,
           detail: c.product.name,
-          priceUnit: precisionRound(pricePerUnit),
+          priceUnit: precisionRound(priceNoVat),
           amount: c.amount,
           discount: c.discount,
-          vat: c.product.serviceChargeCalcVat ? precisionRound(vat) : 0,
+          vat: c.product.serviceChargeCalcVat ? precisionRound(rawVat) : 0,
           value: precisionRound(
-            pricePerUnit * c.amount +
+            priceNoVat * c.amount +
-              (c.product.serviceChargeCalcVat ? vat : 0),
+              (c.product.serviceChargeCalcVat ? rawVatTotal : 0),
           ),
         });
 
-        a.totalPrice = precisionRound(a.totalPrice + price + discount);
+        a.totalPrice = a.totalPrice + priceDiscountNoVat;
-        a.totalDiscount = precisionRound(a.totalDiscount + discount);
+        a.totalDiscount = a.totalDiscount + Number(c.discount);
-        a.vat = precisionRound(a.vat + vat);
+        a.vat = c.product.calcVat ? a.vat + rawVatTotal : a.vat;
-        a.vatExcluded = c.product.serviceChargeCalcVat
+        a.vatExcluded = c.product.calcVat
           ? a.vatExcluded
-          : precisionRound(a.vatExcluded + price);
+          : precisionRound(a.vatExcluded + priceDiscountNoVat);
-        a.finalPrice = precisionRound(a.totalPrice - a.totalDiscount + a.vat);
+        a.finalPrice = a.totalPrice - a.totalDiscount + a.vat;
         return a;
       },
       {
@@ -315,7 +311,7 @@ function closeAble() {
           border-bottom: 2px solid var(--main);
         "
       >
-        {{ $t('preview.productList') }}
+        {{ $t('taskOrder.goodReceipt') }}
       </span>
 
       <table ref="elements" class="q-mb-sm" cellpadding="0" style="width: 100%">
@@ -339,9 +335,7 @@ function closeAble() {
               {{ formatNumberDecimal(v.priceUnit, 2) }}
             </td>
             <td style="text-align: right">
-              <template v-if="v.discount !== 0">
+              {{ formatNumberDecimal(v.discount, 2) }}
-                {{ formatNumberDecimal(v.discount, 2) }} ฿
-              </template>
             </td>
             <td style="text-align: right">
               {{ formatNumberDecimal(v.vat, 2) }}
@@ -352,6 +346,7 @@ function closeAble() {
           </tr>
         </tbody>
       </table>
+
       <table
         style="width: 40%; margin-left: auto"
         class="q-mb-md"
@@ -403,9 +398,7 @@ function closeAble() {
             <td class="text-right">
               {{
                 formatNumberDecimal(
-                  summaryPrice.totalPrice -
+                  summaryPrice.totalPrice - summaryPrice.totalDiscount,
-                    summaryPrice.totalDiscount -
-                    summaryPrice.vatExcluded,
                   2,
                 )
               }}

src/pages/09_task-order/document_view/ViewHeader.vue

@@ -64,8 +64,8 @@ defineProps<{
             })
           }}
         </span>
-        <span>{{ $t('branch.form.taxNo') }} {{ branch.taxNo }}</span>
+        <span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
-        <span>{{ $t('taskOrder.telephone') }} {{ branch.telephoneNo }}</span>
+        <span>เบอร์โทร {{ branch.telephoneNo }}</span>
         <span>{{ branch.webUrl }}</span>
       </article>
       <article>

src/pages/09_task-order/expansion/AdditionalFileExpansion.vue

@@ -25,7 +25,6 @@ const fileData = defineModel<
 </script>
 <template>
   <q-expansion-item
-    id="expansion-additional-file"
     dense
     class="overflow-hidden bordered full-width"
     switch-toggle-side
@@ -42,7 +41,6 @@ const fileData = defineModel<
 
     <main class="q-px-md q-py-sm surface-1">
       <UploadFileSection
-        id="upload-additional-file"
         multiple
         :layout="$q.screen.gt.sm ? 'column' : 'row'"
         :readonly

src/pages/09_task-order/expansion/DocumentExpansion.vue

@@ -22,7 +22,6 @@ const contactTel = defineModel<string>('contactTel');
 </script>
 <template>
   <q-expansion-item
-    id="expansion-document"
     default-opened
     dense
     class="overflow-hidden bordered full-width"
@@ -39,16 +38,13 @@ const contactTel = defineModel<string>('contactTel');
 
     <main class="q-px-md q-py-sm surface-1 row q-col-gutter-sm">
       <SelectBranch
-        id="select-issue-branch"
         :readonly
-        required
         class="col-md-4 col-12"
         :label="`${$t('taskOrder.issueBranch')}${$i18n.locale === 'tha' ? $t('taskOrder.title') : ''}`"
         v-model:value="registeredBranchId"
         auto-select-on-single
       />
       <SelectInstitution
-        id="select-agencies"
         :readonly
         required
         class="col-md-4 col-12"
@@ -59,7 +55,6 @@ const contactTel = defineModel<string>('contactTel');
         auto-select-on-single
       />
       <DatePicker
-        id="datepicker-issue-date"
         :label="$t('taskOrder.issueDate')"
         class="col-md-2 col-6"
         :model-value="issueDate || new Date(Date.now())"
@@ -67,7 +62,6 @@ const contactTel = defineModel<string>('contactTel');
         :disabled="!readonly"
       />
       <q-input
-        id="input-task-code"
         :label="$t('taskOrder.code')"
         outlined
         dense
@@ -78,7 +72,6 @@ const contactTel = defineModel<string>('contactTel');
       />
 
       <q-input
-        id="input-task-name"
         :readonly
         :label="$t('general.name', { msg: $t('taskOrder.title') })"
         outlined
@@ -87,7 +80,6 @@ const contactTel = defineModel<string>('contactTel');
         v-model="taskName"
       />
       <q-input
-        id="input-contact-name"
         :readonly
         :label="$t('taskOrder.contactName')"
         outlined
@@ -96,7 +88,6 @@ const contactTel = defineModel<string>('contactTel');
         v-model="contactName"
       />
       <q-input
-        id="input-contact-tel"
         :readonly
         :label="$t('general.telephone')"
         outlined
@@ -105,7 +96,6 @@ const contactTel = defineModel<string>('contactTel');
         v-model="contactTel"
       />
       <q-input
-        id="input-made-by"
         :readonly
         :label="$t('taskOrder.madeBy')"
         outlined

src/pages/09_task-order/expansion/PaymentExpansion.vue

@@ -32,7 +32,6 @@ const summaryPrice = defineModel<{
 </script>
 <template>
   <q-expansion-item
-    id="expansion-payment"
     dense
     class="overflow-hidden bordered full-width"
     switch-toggle-side
@@ -48,7 +47,6 @@ const summaryPrice = defineModel<{
 
     <main class="q-px-md q-py-sm surface-1">
       <QuotationFormInfo
-        id="form-info-payment"
         task-order
         :task-order-complete="complete"
         v-model:pay-type="payType"

src/pages/09_task-order/expansion/ProductExpansion.vue

@@ -14,10 +14,6 @@ import { storeToRefs } from 'pinia';
 import BadgeComponent from 'src/components/BadgeComponent.vue';
 import { TaskStatus } from 'src/stores/task-order/types';
 
-import { useTaskOrderForm } from '../form';
-
-const taskOrderFormStore = useTaskOrderForm();
-
 const currentBtnOpen = ref<boolean[]>([]);
 const configStore = useConfigStore();
 const { data: config } = storeToRefs(configStore);
@@ -65,28 +61,60 @@ function openList(index: number) {
 }
 
 function calcPricePerUnit(product: RequestWork['productService']['product']) {
-  return product.serviceCharge;
+  const val = props.creditNote
+    ? props.agentPrice
+      ? product.agentPrice
+      : product.price
+    : product.serviceCharge;
+
+  if (
+    product[
+      props.creditNote
+        ? props.agentPrice
+          ? 'agentPriceCalcVat'
+          : 'calcVat'
+        : 'serviceChargeCalcVat'
+    ]
+  ) {
+    return val / (1 + (config.value?.vat || 0.07));
+  } else {
+    return val;
+  }
 }
 
 function calcPrice(
   product: RequestWork['productService']['product'],
   amount: number,
 ) {
-  const vatFactor = product.serviceChargeCalcVat
+  const pricePerUnit = props.creditNote
-    ? (config.value?.vat ?? 0.07)
+    ? props.agentPrice
-    : 0;
+      ? product.agentPrice
-
+      : product.price
+    : product.serviceCharge;
   const discount =
     taskProduct.value.find((v) => v.productId === product.id)?.discount || 0;
+  const priceNoVat = product[
+    props.creditNote
+      ? props.agentPrice
+        ? 'agentPriceVatIncluded'
+        : 'vatIncluded'
+      : 'serviceChargeVatIncluded'
+  ]
+    ? pricePerUnit / (1 + (config.value?.vat || 0.07))
+    : pricePerUnit;
+  const priceDiscountNoVat = priceNoVat * amount - discount;
 
-  const pricePerUnit = precisionRound(product.serviceCharge);
+  const rawVatTotal = product[
+    props.creditNote
+      ? props.agentPrice
+        ? 'agentPriceCalcVat'
+        : 'calcVat'
+      : 'serviceChargeCalcVat'
+  ]
+    ? priceDiscountNoVat * (config.value?.vat || 0.07)
+    : 0;
 
-  const price =
+  return precisionRound(priceNoVat * amount + rawVatTotal);
-    (pricePerUnit * amount * (1 + vatFactor) - discount) / (1 + vatFactor);
-
-  const vat = price * vatFactor;
-
-  return price + vat;
 }
 
 function taskOrderStatus(value: TaskStatus) {
@@ -111,7 +139,6 @@ function taskOrderStatus(value: TaskStatus) {
 </script>
 <template>
   <q-expansion-item
-    id="expansion-product-list"
     dense
     class="overflow-hidden bordered full-width"
     switch-toggle-side
@@ -124,11 +151,9 @@ function taskOrderStatus(value: TaskStatus) {
       <span
         class="row items-center justify-between full-width"
         style="min-height: 31.01px"
-        id="header-product-list"
       >
         {{ $t('general.information', { msg: $t('taskOrder.productList') }) }}
         <AddButton
-          id="btn-add-product"
           icon-only
           @click.stop="$emit('addProduct')"
           v-if="!readonly"
@@ -138,7 +163,6 @@ function taskOrderStatus(value: TaskStatus) {
 
     <main class="q-px-md q-py-sm surface-1">
       <q-table
-        id="table-product-list"
         :columns="
           creditNote
             ? productColumn.filter(
@@ -184,7 +208,7 @@ function taskOrderStatus(value: TaskStatus) {
           } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
         >
           <q-tr class="text-center">
-            <q-td :id="`product-order-${props.rowIndex}`">
+            <q-td>
               {{ props.rowIndex + 1 }}
             </q-td>
             <q-td>
@@ -210,21 +234,20 @@ function taskOrderStatus(value: TaskStatus) {
             </q-td>
             <q-td class="text-left" v-if="!creditNote">
               <BadgeComponent
-                :id="`badge-status-${props.row.product.code}`"
                 hide-icon
                 :hsla-color="taskOrderStatus(props.row.product.taskStatus)"
                 :title="`${$t(`taskOrder.status.${props.row.product.taskStatus}`)} ${!!props.row.product.totalNotStatusComplete ? $t('general.totalPeople', { meg: props.row.product.totalNotStatusComplete }) : ''}`"
               />
             </q-td>
 
-            <q-td :id="`product-amount-${props.row.product.code}`">
+            <q-td>
               {{ props.row.list.length }}
             </q-td>
-            <q-td :id="`product-price-per-unit-${props.row.product.code}`" class="text-right">
+            <q-td class="text-right">
               {{
                 formatNumberDecimal(
                   calcPricePerUnit(props.row.product) +
-                    (props.row.product.serviceChargeCalcVat
+                    (props.row.product.calcVat
                       ? calcPricePerUnit(props.row.product) *
                         (config?.vat || 0.07)
                       : 0),
@@ -235,7 +258,6 @@ function taskOrderStatus(value: TaskStatus) {
             <!-- TODO: display price detail -->
             <q-td align="center" v-if="!creditNote">
               <q-input
-                :id="`input-discount-${props.row.product.code}`"
                 :readonly
                 :bg-color="readonly ? 'transparent' : ''"
                 dense
@@ -273,49 +295,37 @@ function taskOrderStatus(value: TaskStatus) {
               />
             </q-td>
             <!-- before vat -->
-            <q-td
+            <q-td class="text-right" v-if="!creditNote">
-              :id="`product-price-before-vat-${props.row.product.code}`"
-              class="text-right"
-              v-if="!creditNote"
-            >
               {{
                 formatNumberDecimal(
-                  props.row.product.serviceChargeCalcVat
+                  calcPricePerUnit(props.row.product) * props.row.list.length -
-                    ? (calcPricePerUnit(props.row.product) *
+                    (taskProduct.find(
-                        props.row.list.length *
-                        (1 + (config?.vat || 0.07))) /
-                        (1 + (config?.vat || 0.07))
-                    : calcPricePerUnit(props.row.product) *
-                        props.row.list.length -
-                        taskProduct.find(
                       (v) => v.productId === props.row.product.id,
-                        )?.discount || 0,
+                    )?.discount || 0),
+                  2,
                 )
               }}
             </q-td>
             <!-- vat -->
-            <q-td
+            <q-td class="text-right" v-if="!creditNote">
-              :id="`product-vat-${props.row.product.code}`"
-              class="text-right"
-              v-if="!creditNote"
-            >
               {{
                 formatNumberDecimal(
-                  props.row.product.serviceChargeCalcVat
+                  props.row.product.calcVat
-                    ? ((calcPricePerUnit(props.row.product) *
+                    ? precisionRound(
-                        props.row.list.length *
+                        (calcPricePerUnit(props.row.product) *
-                        (1 + (config?.vat || 0.07)) -
+                          props.row.list.length -
-                        taskProduct.find(
+                          (taskProduct.find(
                             (v) => v.productId === props.row.product.id,
-                        )?.discount || 0) /
+                          )?.discount || 0)) *
-                        (1 + (config?.vat || 0.07))) *
+                          (config?.vat || 0.07),
-                        0.07
+                      )
                     : 0,
+                  2,
                 )
               }}
             </q-td>
             <!-- total -->
-            <q-td :id="`product-total-price-${props.row.product.code}`" class="text-right">
+            <q-td class="text-right">
               {{
                 formatNumberDecimal(
                   calcPrice(props.row.product, props.row.list.length),
@@ -325,7 +335,6 @@ function taskOrderStatus(value: TaskStatus) {
             </q-td>
             <q-td>
               <q-btn
-                :id="`btn-toggle-employee-${props.row.product.code}`"
                 dense
                 flat
                 class="rounded"
@@ -349,7 +358,6 @@ function taskOrderStatus(value: TaskStatus) {
           <q-tr v-show="currentBtnOpen[props.rowIndex]" :props="props">
             <q-td colspan="100%" style="padding: 16px">
               <TableEmployee
-                :id="`table-employee-in-product-${props.row.product.code}`"
                 :step-on="!creditNote"
                 :status-on="creditNote"
                 :rows="props.row.list"
@@ -367,9 +375,7 @@ function taskOrderStatus(value: TaskStatus) {
             })
           }}
         </span>
-        <div class="surface-3 q-px-sm rounded" id="total-product-count">
+        <div class="surface-3 q-px-sm rounded">{{ taskList.length }}</div>
-          {{ taskList.length }}
-        </div>
       </div>
     </main>
   </q-expansion-item>

src/pages/09_task-order/expansion/RemarkExpansion.vue

@@ -33,7 +33,6 @@ const getToolbarConfig = computed(() => {
 </script>
 <template>
   <q-expansion-item
-    id="expansion-remark"
     dense
     class="overflow-hidden bordered full-width"
     switch-toggle-side
@@ -49,7 +48,6 @@ const getToolbarConfig = computed(() => {
 
     <main class="surface-1 q-pa-md full-width">
       <q-editor
-        id="editor-remark"
         dense
         :readonly="readonly || !remarkWrite"
         :model-value="
@@ -92,7 +90,6 @@ const getToolbarConfig = computed(() => {
         <template v-if="!readonly" v-slot:toggle>
           <div class="text-caption row no-wrap q-px-sm">
             <MainButton
-              id="btn-remark-view"
               :solid="!remarkWrite"
               icon="mdi-eye-outline"
               color="0 0% 40%"
@@ -105,7 +102,6 @@ const getToolbarConfig = computed(() => {
               {{ $t('general.view', { msg: $t('general.example') }) }}
             </MainButton>
             <MainButton
-              id="btn-remark-edit"
               :solid="remarkWrite"
               icon="mdi-pencil-outline"
               color="0 0% 40%"

src/pages/09_task-order/expansion/receive/InfoMessengerExpansion.vue

@@ -47,17 +47,11 @@ defineProps<{
       <div class="row q-col-gutter-sm q-px-md q-py-sm">
         <DataDisplay
           class="col-md col-6"
-          id="dd-recipient"
           :label="$t('taskOrder.recipientOrSender')"
         >
           <template #value>
             <q-avatar size="md" class="q-mr-xs">
-              <q-img
+              <q-img class="text-center" :ratio="1" :src="contactUrl">
-                :id="`img-avatar-${contactName}`"
-                class="text-center"
-                :ratio="1"
-                :src="contactUrl"
-              >
                 <template #error>
                   <div
                     class="no-padding full-width full-height flex items-center justify-center"
@@ -65,7 +59,6 @@ defineProps<{
                   >
                     <q-img
                       v-if="gender"
-                      :id="`img-gender-${contactName}`"
                       :src="
                         gender === 'male'
                           ? '/no-img-man.png'
@@ -74,7 +67,6 @@ defineProps<{
                     />
                     <q-icon
                       v-else
-                      :id="`icon-avatar-${contactName}`"
                       size="sm"
                       name="mdi-account-outline"
                       style="color: white"
@@ -89,21 +81,18 @@ defineProps<{
 
         <DataDisplay
           class="col-md col-6"
-          id="dd-telephone"
           :label="$t('general.telephone')"
           :value="contactTel || '-'"
         />
 
         <DataDisplay
           class="col-md col-6"
-          id="dd-email"
           :label="$t('form.email')"
           :value="email || '-'"
         />
 
         <DataDisplay
           class="col-md col-6"
-          id="dd-work-start-date"
           :label="$t('taskOrder.workStartDate')"
         >
           <template #value>
@@ -117,7 +106,6 @@ defineProps<{
 
         <DataDisplay
           class="col-md col-6"
-          id="dd-work-submission-date"
           :label="$t('taskOrder.workSubmissionDate')"
         >
           <template #value>
@@ -129,14 +117,9 @@ defineProps<{
           </template>
         </DataDisplay>
 
-        <DataDisplay
+        <DataDisplay class="col-md col-6" :label="$t('general.status')">
-          id="dd-status"
-          class="col-md col-6"
-          :label="$t('general.status')"
-        >
           <template #value>
             <BadgeComponent
-              :id="`badge-status-${contactName}`"
               v-if="status"
               hide-icon
               :title="

src/pages/09_task-order/order_view/MainPage.vue

@@ -128,33 +128,32 @@ function getPrice(
     })[];
   }[],
 ) {
-  const value = list.reduce(
+  return list.reduce(
     (a, c) => {
-      const vatFactor = c.product.serviceChargeCalcVat
+      const pricePerUnit = c.product.serviceCharge;
-        ? (config.value?.vat ?? 0.07)
-        : 0;
-
-      const pricePerUnit =
-        precisionRound(c.product.serviceCharge * (1 + vatFactor)) /
-        (1 + vatFactor);
-
       const amount = c.list.length;
       const discount =
         taskProduct.value.find((v) => v.productId === c.product.id)?.discount ||
         0;
+      const priceNoVat = c.product.serviceChargeVatIncluded
+        ? pricePerUnit / (1 + (config.value?.vat || 0.07))
+        : pricePerUnit;
+      const adjustedPriceWithVat = precisionRound(
+        priceNoVat * (1 + (config.value?.vat || 0.07)),
+      );
+      const adjustedPriceNoVat =
+        adjustedPriceWithVat / (1 + (config.value?.vat || 0.07));
+      const priceDiscountNoVat = adjustedPriceNoVat * amount - discount;
 
-      const price =
+      const rawVatTotal = priceDiscountNoVat * (config.value?.vat || 0.07);
-        (pricePerUnit * amount * (1 + vatFactor) - discount) / (1 + vatFactor);
 
-      const vat = price * vatFactor;
+      a.totalPrice = a.totalPrice + priceDiscountNoVat;
-
+      a.totalDiscount = a.totalDiscount + Number(discount);
-      a.totalPrice = precisionRound(a.totalPrice + price + discount);
+      a.vat = c.product.serviceChargeCalcVat ? a.vat + rawVatTotal : a.vat;
-      a.totalDiscount = precisionRound(a.totalDiscount + discount);
-      a.vat = precisionRound(a.vat + vat);
       a.vatExcluded = c.product.serviceChargeCalcVat
         ? a.vatExcluded
-        : precisionRound(a.vatExcluded + price);
+        : precisionRound(a.vatExcluded + priceDiscountNoVat);
-      a.finalPrice = precisionRound(a.totalPrice - a.totalDiscount + a.vat);
+      a.finalPrice = a.totalPrice - a.totalDiscount + a.vat;
       return a;
     },
     {
@@ -165,8 +164,6 @@ function getPrice(
       finalPrice: 0,
     },
   );
-
-  return value;
 }
 
 function getTemplateData(
@@ -814,7 +811,7 @@ watch(
     >
       <section class="banner" :class="{ dark: $q.dark.isActive }"></section>
       <div style="flex: 1" class="row items-center">
-        <RouterLink to="/task-order" id="link-task-order">
+        <RouterLink to="/task-order">
           <q-img src="/icons/favicon-512x512.png" width="3rem" />
         </RouterLink>
         <span class="column text-h6 text-bold q-ml-md">
@@ -863,7 +860,6 @@ watch(
             <!-- TODO: replace step and status -->
             <StateButton
               v-for="i in statusTabForm"
-              :id="`btn-status-${i.title}`"
               :key="i.title"
               :label="$t(`taskOrder.${i.title}`)"
               :status-active="i.active?.()"
@@ -917,7 +913,6 @@ watch(
             "
           >
             <DocumentExpansion
-              id="expansion-document"
               :readonly="!['create', 'edit'].includes(state.mode || '')"
               v-model:registered-branch-id="currentFormData.registeredBranchId"
               v-model:institution-id="currentFormData.institutionId"
@@ -937,7 +932,6 @@ watch(
             />
           </q-form>
           <ProductExpansion
-            id="expansion-product"
             ref="refProductExpansion"
             v-if="
               view === TaskOrderStatus.Pending ||
@@ -950,7 +944,6 @@ watch(
           />
 
           <PaymentExpansion
-            id="expansion-payment"
             v-model:summary-price="summaryPrice"
             :complete="view === TaskOrderStatus.Complete"
             v-if="
@@ -960,7 +953,6 @@ watch(
           />
 
           <AdditionalFileExpansion
-            id="expansion-additional-file"
             :readonly="!['create', 'edit'].includes(state.mode || '')"
             v-if="
               view === TaskOrderStatus.Pending ||
@@ -1019,7 +1011,6 @@ watch(
           />
           <!-- TODO: blind remark, urgent -->
           <RemarkExpansion
-            id="expansion-remark"
             v-if="
               view === TaskOrderStatus.Pending ||
               view === TaskOrderStatus.Complete
@@ -1044,7 +1035,6 @@ watch(
             "
           >
             <InfoMessengerExpansion
-              :id="`expansion-messenger-${messengerIndex}`"
               v-for="(v, messengerIndex) in messengerListGroup"
               :key="messengerIndex"
               :gender="getMessengerName(v.responsibleUser, { gender: true })"
@@ -1080,7 +1070,6 @@ watch(
                   class="bordered-b"
                 >
                   <q-expansion-item
-                    :id="`expansion-product-${productIndex}`"
                     dense
                     class="overflow-hidden"
                     switch-toggle-side
@@ -1254,7 +1243,6 @@ watch(
       <nav class="row justify-end">
         <MainButton
           class="q-mr-auto"
-          id="btn-view-example"
           v-if="currentFormData.id"
           outlined
           icon="mdi-play-box-outline"
@@ -1269,16 +1257,10 @@ watch(
           {{ $t('general.view', { msg: $t('general.example') }) }}
         </MainButton>
         <div class="row" style="gap: var(--size-2)">
-          <UndoButton
+          <UndoButton outlined @click="undo()" v-if="state.mode === 'edit'" />
-            id="btn-undo"
-            outlined
-            @click="undo()"
-            v-if="state.mode === 'edit'"
-          />
           <CancelButton
             v-if="state.mode !== 'edit'"
             :label="$t('dialog.action.close')"
-            id="btn-close"
             outlined
             @click="closeTab()"
           />
@@ -1290,14 +1272,12 @@ watch(
             "
           >
             <SaveButton
-              id="btn-save"
               v-if="state.mode && ['create', 'edit'].includes(state.mode)"
               @click="() => formDocument.submit()"
               solid
             />
             <EditButton
               v-else
-              id="btn-edit"
               class="no-print"
               @click="state.mode = 'edit'"
               solid
@@ -1305,7 +1285,6 @@ watch(
           </template>
           <SaveButton
             v-if="
-              canAccess('taskOrder', 'edit') &&
               state.mode !== 'create' &&
               view === TaskOrderStatus.Validate &&
               fullTaskOrder?.taskOrderStatus !== TaskOrderStatus.Pending &&
@@ -1344,7 +1323,6 @@ watch(
             "
             :label="$t('taskOrder.confirmEndWork')"
             icon="mdi-check"
-            id="btn-confirm-end-work"
             solid
           ></SaveButton>
         </div>
@@ -1354,7 +1332,6 @@ watch(
 
   <!-- SEC: Dialog -->
   <SelectReadyRequestWork
-    id="dialog-select-request-work"
     :task-list-group="taskListGroup"
     :fetch-params="{ readyToTask: true }"
     v-model:open="pageState.productDialog"

src/pages/09_task-order/receive_view/FailRemarkDialog.vue

@@ -98,7 +98,6 @@ function tooltip(id: string) {
     <main class="q-py-sm q-px-md scroll">
       <q-select
         :readonly
-        id="select-fail-task"
         dense
         outlined
         multiple
@@ -132,7 +131,6 @@ function tooltip(id: string) {
       >
         <template #selected-item="scope">
           <q-chip
-            :id="`chip-fail-task-${taskStatusList[scope.index].code}`"
             dense
             :removable="!readonly"
             @remove="scope.removeAtIndex(scope.index)"
@@ -172,7 +170,6 @@ function tooltip(id: string) {
 
         <template #option="scope">
           <q-item
-            :id="`option-fail-task-${scope.opt.request.code}`"
             clickable
             v-bind="scope.itemProps"
             class="row items-start col-12 no-padding"
@@ -233,7 +230,6 @@ function tooltip(id: string) {
 
       <SelectInput
         :readonly
-        id="select-fail-type"
         :option="[
           {
             label: $t('taskOrder.documentSubmitFailed'),
@@ -264,7 +260,6 @@ function tooltip(id: string) {
 
       <div v-if="failedType === 'other'" class="q-mt-sm rounded">
         <q-editor
-          id="editor-fail-comment"
           dense
           flat
           v-model="failedComment"
@@ -284,18 +279,8 @@ function tooltip(id: string) {
     </main>
 
     <template #footer v-if="!readonly">
-      <CancelButton
+      <CancelButton class="q-ml-auto" outlined @click="$emit('close')" />
-        id="btn-fail-remark-cancel"
+      <SaveButton class="q-ml-sm" solid @click="submit" />
-        class="q-ml-auto"
-        outlined
-        @click="$emit('close')"
-      />
-      <SaveButton
-        id="btn-fail-remark-save"
-        class="q-ml-sm"
-        solid
-        @click="submit"
-      />
     </template>
   </DialogFormContainer>
 </template>

src/pages/10_invoice/MainPage.vue

@@ -394,14 +394,8 @@ watch(
                       {
                         label: $t('general.customer'),
                         value:
-                          item.row.quotation.customerBranch.customer
+                          item.row.quotation.customerBranch.registerName ||
-                            .customerType === 'CORP'
+                          `${item.row.quotation.customerBranch?.firstName || '-'} ${item.row.quotation.customerBranch?.lastName || ''}`,
-                            ? $i18n.locale === 'tha'
-                              ? item.row.quotation.customerBranch.registerName
-                              : item.row.quotation.customerBranch.registerNameEN
-                            : $i18n.locale === 'tha'
-                              ? `${item.row.quotation.customerBranch?.firstName || '-'} ${item.row.quotation.customerBranch?.lastName || ''}`
-                              : `${item.row.quotation.customerBranch?.firstNameEN || '-'} ${item.row.quotation.customerBranch?.lastNameEN || ''}`,
                       },
                       {
                         label: $t('taskOrder.issueDate'),

src/pages/10_invoice/TableInvoice.vue

@@ -83,16 +83,11 @@ defineEmits<{
           <!-- NOTE: custom column will starts with # -->
           <template v-if="!col.name.startsWith('#')">
             <span>
-              <template v-if="typeof col.field === 'function'">
               {{
-                  typeof col.field(props.row) === 'object'
+                typeof col.field === 'string'
-                    ? col.field(props.row)[$i18n.locale]
+                  ? props.row[col.field as keyof Invoice]
                   : col.field(props.row)
               }}
-              </template>
-              <template v-else>
-                {{ props.row[col.field as keyof Invoice] }}
-              </template>
             </span>
           </template>
           <template v-if="col.name === '#order'">

src/pages/10_invoice/constants.ts

@@ -29,16 +29,7 @@ export const columns = [
     name: 'customer',
     align: 'center',
     label: 'general.customer',
-    field: (v: Invoice) =>
+    field: (v: Invoice) => v.quotation.customerBranch.registerName,
-      v.quotation.customerBranch.customer.customerType === 'CORP'
-        ? {
-            tha: v.quotation.customerBranch.registerName,
-            eng: v.quotation.customerBranch.registerNameEN,
-          }
-        : {
-            tha: `${v.quotation.customerBranch.firstName || ''} ${v.quotation.customerBranch.lastName || ''}`,
-            eng: `${v.quotation.customerBranch.firstNameEN || ''} ${v.quotation.customerBranch.lastNameEN || ''}`,
-          },
   },
 
   {

src/pages/11_credit-note/FormPage.vue

@@ -31,7 +31,6 @@ import {
   EditButton,
   UndoButton,
 } from 'src/components/button';
-import { precisionRound } from 'src/utils/arithmetic';
 import { DebitNote, useDebitNote } from 'src/stores/debit-note';
 import { RequestWork } from 'src/stores/request-list/types';
 import { storeToRefs } from 'pinia';
@@ -41,8 +40,6 @@ import { useI18n } from 'vue-i18n';
 import { QForm } from 'quasar';
 import { getName } from 'src/services/keycloak';
 
-import { RequestWorkStatus } from 'src/stores/request-list/types';
-
 const route = useRoute();
 const router = useRouter();
 const creditNote = useCreditNote();
@@ -52,7 +49,6 @@ const configStore = useConfigStore();
 const { data: config } = storeToRefs(configStore);
 const { t } = useI18n();
 
-const agentPrice = ref<boolean>(false);
 const refForm = ref<InstanceType<typeof QForm>>();
 const creditNoteData = ref<CreditNote>();
 const quotationData = ref<DebitNote | QuotationFull>();
@@ -210,23 +206,22 @@ function getPrice(
 ) {
   return list.reduce(
     (a, c) => {
-      const value = creditNote.getfinalPriceCredit(c.list || []);
+      const pricePerUnit =
+        c.product.pricePerUnit - c.product.discount / c.product.amount;
+      const amount = c.list.length;
+      const priceNoVat = pricePerUnit;
+      const priceDiscountNoVat = priceNoVat * amount;
 
-      a.totalPrice = precisionRound(a.totalPrice + value.totalPrice);
+      const rawVatTotal = priceDiscountNoVat * (config.value?.vat || 0.07);
-      a.totalDiscount = precisionRound(a.totalDiscount + value.totalDiscount);
-      a.vat = precisionRound(a.vat + value.vat);
-      a.vatIncluded = precisionRound(a.vatIncluded + value.vatIncluded);
-      a.vatExcluded = precisionRound(a.vatExcluded + value.vatExcluded);
-      a.finalPrice = precisionRound(a.finalPrice + value.finalPrice);
 
+      a.totalPrice = a.totalPrice + priceDiscountNoVat;
+      a.vat = c.product.vat !== 0 ? a.vat + rawVatTotal : a.vat;
+      a.finalPrice = a.totalPrice + a.vat;
       return a;
     },
     {
       totalPrice: 0,
-      totalDiscount: 0,
       vat: 0,
-      vatIncluded: 0,
-      vatExcluded: 0,
       finalPrice: 0,
     },
   );
@@ -301,8 +296,6 @@ async function getQuotation() {
   if (!ret) return;
 
   quotationData.value = ret;
-
-  agentPrice.value = quotationData.value.agentPrice;
 }
 
 async function submit() {

src/pages/11_credit-note/MainPage.vue

@@ -134,11 +134,6 @@ onMounted(async () => {
 
   creditNote.getCreditNoteStats().then((res) => res && (stats.value = res));
   getList();
-
-  window.addEventListener('focus', () => {
-    creditNote.getCreditNoteStats().then((res) => res && (stats.value = res));
-    getList();
-  });
 });
 
 watch(
@@ -411,12 +406,10 @@ watch(
                       value:
                         item.row.quotation.customerBranch.customer
                           .customerType === 'CORP'
-                          ? $i18n.locale === 'tha'
                           ? item.row.quotation.customerBranch.registerName
-                            : item.row.quotation.customerBranch.registerNameEN
                           : $i18n.locale === 'tha'
-                            ? `${item.row.quotation.customerBranch.firstName || ''} ${item.row.quotation.customerBranch.lastName || ''}`
+                            ? `${item.row.quotation.customerBranch.firstName} ${item.row.quotation.customerBranch.lastName}`
-                            : `${item.row.quotation.customerBranch.firstNameEN || ''} ${item.row.quotation.customerBranch.lastNameEN || ''}`,
+                            : `${item.row.quotation.customerBranch.firstNameEN} ${item.row.quotation.customerBranch.lastNameEN}`,
                     },
                     {
                       label: $t('requestList.quotationCode'),

src/pages/11_credit-note/TableCreditNote.vue

@@ -8,7 +8,7 @@ import { columns } from './constants';
 import KebabAction from 'src/components/shared/KebabAction.vue';
 
 const creditNote = useCreditNote();
-const { data, page, pageSize } = storeToRefs(creditNote);
+const { data, page } = storeToRefs(creditNote);
 
 const prop = defineProps<{
   grid: boolean;
@@ -26,14 +26,7 @@ const visible = computed(() =>
 <template>
   <q-table
     :rows-per-page-options="[0]"
-    :rows="
+    :rows="data.map((item, i) => ({ ...item, _index: i, _page: page }))"
-      data.map((item, i) => ({
-        ...item,
-        _index: i,
-        _page: page,
-        _pageSize: pageSize,
-      }))
-    "
     :columns="visible"
     :grid
     hide-bottom
@@ -59,7 +52,7 @@ const visible = computed(() =>
 
     <template
       v-slot:body="props: {
-        row: CreditNote & { _index: number; _page: number; _pageSize: number };
+        row: CreditNote & { _index: number; _page: number };
       } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
     >
       <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">

src/pages/11_credit-note/constants.ts

@@ -32,9 +32,8 @@ export const columns = [
     name: 'order',
     align: 'center',
     label: 'general.order',
-    field: (
+    field: (data: CreditNote & { _index: number; _page: number }) =>
-      data: CreditNote & { _index: number; _page: number; _pageSize: number },
+      data._page * (data._index + 1),
-    ) => (data._page - 1) * data._pageSize + (data._index + 1),
   },
   {
     name: 'code',

src/pages/11_credit-note/document-view/MainPage.vue

@@ -237,12 +237,30 @@ onMounted(async () => {
 });
 
 function calcPricePerUnit(product: RequestWork['productService']['product']) {
-  return agentPrice.value ? product.agentPrice : product.price;
+  return product.vatIncluded
+    ? (agentPrice.value ? product.agentPrice : product.price) /
+        (1 + (config.value?.vat || 0.07))
+    : agentPrice.value
+      ? product.agentPrice
+      : product.price;
 }
 
-function calcPrice(c: RequestWork[]): number {
+function calcPrice(
-  const price = creditNoteStore.getfinalPriceCredit(c);
+  product: RequestWork['productService']['product'],
-  return price.finalPrice;
+  amount: number,
+  vat: number = 0,
+) {
+  const pricePerUnit = agentPrice.value ? product.agentPrice : product.price;
+
+  const priceNoVat = product.vatIncluded
+    ? pricePerUnit / (1 + (config.value?.vat || 0.07))
+    : pricePerUnit;
+  const priceDiscountNoVat = priceNoVat * amount - 0;
+
+  const rawVatTotal =
+    vat === 0 ? 0 : priceDiscountNoVat * (config.value?.vat || 0.07);
+
+  return precisionRound(priceNoVat * amount + rawVatTotal);
 }
 
 watch(elements, () => {});
@@ -309,15 +327,31 @@ function closeAble() {
             <th>{{ $t('preview.pricePerUnit') }}</th>
             <th>{{ $t('preview.value') }}</th>
           </tr>
+          {{ console.log(chunks) }}
+          {{ console.log(chunk) }}
           <tr v-for="(v, i) in chunk" :key="i">
             <td class="text-center">{{ i + 1 }}</td>
             <td>{{ v.product.product.code }}</td>
             <td>{{ v.product.product.name }}</td>
-            <td style="text-align: right">
+            <td style="text-align: center">
-              {{ formatNumberDecimal(calcPricePerUnit(v.product.product), 2) }}
+              {{
+                formatNumberDecimal(
+                  calcPricePerUnit(v.product.product) +
+                    (v.product.product.calcVat
+                      ? calcPricePerUnit(v.product.product) *
+                        (config?.vat || 0.07)
+                      : 0),
+                  2,
+                )
+              }}
             </td>
-            <td style="text-align: right">
+            <td style="text-align: center">
-              {{ formatNumberDecimal(calcPrice(v.list), 2) }}
+              {{
+                formatNumberDecimal(
+                  calcPrice(v.product.product, v.list.length, v.product.vat),
+                  2,
+                )
+              }}
             </td>
           </tr>
         </tbody>
@@ -375,8 +409,8 @@ function closeAble() {
               {{
                 formatNumberDecimal(
                   summaryPrice.totalPrice -
-                    summaryPrice.totalDiscount -
+                    summaryPrice.totalDiscount +
-                    summaryPrice.vatExcluded,
+                    summaryPrice.vat,
                   2,
                 )
               }}

src/pages/11_credit-note/document-view/ViewHeader.vue

@@ -79,8 +79,8 @@ function titleMode(mode: View): string {
             })
           }}
         </span>
-        <span>{{ $t('branch.form.taxNo') }} {{ branch.taxNo }}</span>
+        <span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
-        <span>{{ $t('taskOrder.telephone') }} {{ branch.telephoneNo }}</span>
+        <span>เบอร์โทร {{ branch.telephoneNo }}</span>
         <span>{{ branch.webUrl }}</span>
       </article>
       <article>
@@ -105,18 +105,8 @@ function titleMode(mode: View): string {
             })
           }}
         </span>
-        <span>
+        <span>เลขประจำตัวผู้เสียภาษี {{ customer.citizenId }}</span>
-          {{
+        <span>เบอร์โทร {{ customer.telephoneNo }}</span>
-            customer.customer.customerType === 'CORP'
-              ? `${$t('customer.form.legalPersonNo')} `
-              : `${$t('customer.form.taxpayyerNo')} `
-          }}{{
-            customer.customer.customerType === 'CORP'
-              ? customer.codeCustomer
-              : customer.citizenId
-          }}
-        </span>
-        <span>{{ $t('taskOrder.telephone') }} {{ customer.telephoneNo }}</span>
       </article>
     </section>
     <section class="detail-quotation-info">

src/pages/11_credit-note/expansion/ProductExpansion.vue

@@ -12,13 +12,10 @@ import { baseUrl, formatNumberDecimal } from 'src/stores/utils';
 import { precisionRound } from 'src/utils/arithmetic';
 import { productColumn } from '../constants';
 
-import { useCreditNote } from 'src/stores/credit-note';
-
 const configStore = useConfigStore();
 const { data: config } = storeToRefs(configStore);
 
 const currentExpanded = ref<boolean[]>([]);
-const creditNote = useCreditNote();
 
 defineProps<{
   readonly?: boolean;
@@ -47,22 +44,15 @@ function calcPricePerUnit(product: RequestWork['productService']) {
   return product.pricePerUnit - product.discount / product.amount;
 }
 
-function calcVat(c: RequestWork['productService']) {
+function calcPrice(c: RequestWork['productService'], amount: number) {
-  const vatFactor = c.product.serviceChargeCalcVat
+  const pricePerUnit = c.pricePerUnit - c.discount / c.amount;
-    ? (config.value?.vat ?? 0.07)
+  const priceNoVat = pricePerUnit;
-    : 0;
+  const priceDiscountNoVat = priceNoVat * amount;
 
-  const price = precisionRound(
+  const rawVatTotal =
-    c.pricePerUnit * (1 + vatFactor) - c.discount / (1 + vatFactor),
+    c.vat === 0 ? 0 : priceDiscountNoVat * (config.value?.vat || 0.07);
-  );
 
-  const vat = (price / (1 + vatFactor)) * vatFactor;
+  return precisionRound(priceNoVat * amount + rawVatTotal);
-  return vat;
-}
-
-function calcPrice(c: RequestWork[]) {
-  const price = creditNote.getfinalPriceCredit(c);
-  return price.finalPrice;
 }
 </script>
 <template>
@@ -172,7 +162,12 @@ function calcPrice(c: RequestWork[]) {
 
             <!-- total -->
             <q-td class="text-right">
-              {{ formatNumberDecimal(calcPrice(props.row.list), 2) }}
+              {{
+                formatNumberDecimal(
+                  calcPrice(props.row.product, props.row.list.length),
+                  2,
+                )
+              }}
             </q-td>
             <q-td>
               <q-btn

src/pages/12_debit-note/FormPage.vue

@@ -209,7 +209,47 @@ const selectedWorker = ref<
     }[];
   })[]
 >([]);
-const selectedWorkerItem = ref([]);
+const selectedWorkerItem = computed(() => {
+  return [
+    ...selectedWorker.value.map((e) => ({
+      foreignRefNo: e.employeePassport
+        ? e.employeePassport[0]?.number || '-'
+        : '-',
+      employeeName:
+        locale.value === Lang.English
+          ? `${e.firstNameEN} ${e.lastNameEN}`
+          : `${e.firstName || e.firstNameEN} ${e.lastName || e.lastNameEN}`,
+      birthDate: dateFormatJS({ date: e.dateOfBirth }),
+      gender: e.gender,
+      age: calculateAge(e.dateOfBirth),
+      nationality: optionStore.mapOption(e.nationality),
+      documentExpireDate:
+        e.employeePassport !== undefined &&
+        e.employeePassport[0]?.expireDate !== undefined
+          ? dateFormatJS({ date: e.employeePassport[0]?.expireDate })
+          : '-',
+      imgUrl: e.selectedImage
+        ? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
+        : '',
+      status: e.status,
+    })),
+
+    ...newWorkerList.value.map((v: any) => ({
+      foreignRefNo: v.passportNo || '-',
+      employeeName:
+        locale.value === Lang.English
+          ? `${v.firstNameEN} ${v.lastNameEN}`
+          : `${v.firstName || v.firstNameEN} ${v.lastName || v.lastNameEN}`,
+      birthDate: dateFormatJS({ date: v.dateOfBirth }),
+      gender: v.gender,
+      age: calculateAge(v.dateOfBirth),
+      nationality: optionStore.mapOption(v.nationality),
+      documentExpireDate: '-',
+      imgUrl: '',
+      status: 'CREATED',
+    })),
+  ];
+});
 
 const selectedInstallmentNo = ref<number[]>([]);
 const installmentAmount = ref<number>(0);
@@ -334,39 +374,7 @@ function assignProductServiceList() {
 
 function assignSelectedWorker() {
   if (debitNoteData.value)
-    selectedWorkerItem.value = debitNoteData.value.worker.map((e) => {
+    selectedWorker.value = debitNoteData.value.worker.map((v) => v.employee);
-      return {
-        id: e.employee.id,
-        foreignRefNo: e.employee.employeePassport
-          ? e.employee.employeePassport[0]?.number || '-'
-          : '-',
-        employeeName:
-          locale.value === Lang.English
-            ? `${e.employee.firstNameEN} ${e.employee.lastNameEN}`
-            : `${e.employee.firstName || e.employee.firstNameEN} ${e.employee.lastName || e.employee.lastNameEN}`,
-        birthDate: dateFormatJS({ date: e.employee.dateOfBirth }),
-        gender: e.employee.gender,
-        age: calculateAge(e.employee.dateOfBirth),
-        nationality: optionStore.mapOption(e.employee.nationality),
-        documentExpireDate:
-          e.employee.employeePassport !== undefined &&
-          e.employee.employeePassport[0]?.expireDate !== undefined
-            ? dateFormatJS({ date: e.employee.employeePassport[0]?.expireDate })
-            : '-',
-        imgUrl: e.employee.selectedImage
-          ? `${API_BASE_URL}/employee/${e.id}/image/${e.employee.selectedImage}`
-          : '',
-        status: e.employee.status,
-        workerNew: false,
-        lastNameEN: e.employee.lastNameEN,
-        lastName: e.employee.lastName,
-        middleNameEN: e.employee.middleNameEN,
-        middleName: e.employee.middleName,
-        firstNameEN: e.employee.firstNameEN,
-        firstName: e.employee.firstName,
-        namePrefix: e.employee.namePrefix,
-      };
-    });
 }
 
 async function assignFormData(id: string) {
@@ -378,7 +386,7 @@ async function assignFormData(id: string) {
   selectedProductGroup.value =
     data.productServiceList[0]?.product.productGroup?.id || '';
 
-  (previousValue = {
+  ((previousValue = {
     id: data.id || undefined,
     debitNoteQuotationId: data.debitNoteQuotationId || undefined,
     productServiceList: structuredClone(
@@ -404,7 +412,7 @@ async function assignFormData(id: string) {
     quotationId: data.debitNoteQuotationId,
     remark: data.remark || undefined,
   }),
-    (currentFormData.value = structuredClone(previousValue));
+    (currentFormData.value = structuredClone(previousValue)));
 
   assignProductServiceList();
   assignSelectedWorker();
@@ -426,7 +434,6 @@ async function getQuotation(id?: string) {
     const data = await quotationStore.getQuotation(quotationId);
     if (!!data) {
       quotationData.value = data;
-      agentPrice.value = quotationData.value.agentPrice;
     }
   }
 }
@@ -542,28 +549,25 @@ function getPrice(
         return a;
       }
 
-      const calcVat =
+      const price = precisionRound(c.pricePerUnit * c.amount);
-        c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
+      const vat =
+        precisionRound(
+          (c.pricePerUnit * (c.discount ? c.amount : 1) - c.discount) *
+            (config.value?.vat || 0.07),
+        ) * (!c.discount ? c.amount : 1);
 
-      const vatFactor = calcVat ? (config.value?.vat ?? 0.07) : 0;
+      a.totalPrice = precisionRound(a.totalPrice + price);
-
+      a.totalDiscount = precisionRound(a.totalDiscount + Number(c.discount));
-      const pricePerUnit = precisionRound(
+      a.vat = c.product.calcVat ? precisionRound(a.vat + vat) : a.vat;
-        (c.pricePerUnit * (1 + vatFactor)) / (1 + vatFactor),
-      );
-
-      const price = precisionRound(
-        (pricePerUnit * c.amount * (1 + vatFactor) - c.discount) /
-          (1 + vatFactor),
-      );
-      const vat = price * vatFactor;
-
-      a.totalPrice = precisionRound(a.totalPrice + price + c.discount);
-      a.totalDiscount = precisionRound(a.totalDiscount + c.discount);
-      a.vat = precisionRound(a.vat + vat);
       a.vatExcluded = c.product.calcVat
         ? a.vatExcluded
-        : precisionRound(a.vatExcluded + price);
+        : precisionRound(a.vat + vat);
-      a.finalPrice = precisionRound(a.totalPrice - a.totalDiscount + a.vat);
+      a.finalPrice = precisionRound(
+        a.totalPrice -
+          a.totalDiscount +
+          a.vat -
+          Number(currentFormData.value.discount || 0),
+      );
 
       return a;
     },
@@ -571,7 +575,6 @@ function getPrice(
       totalPrice: 0,
       totalDiscount: 0,
       vat: 0,
-      vatIncluded: 0,
       vatExcluded: 0,
       finalPrice: 0,
     },
@@ -805,11 +808,15 @@ async function submit() {
 
     worker: JSON.parse(
       JSON.stringify([
-        ...selectedWorkerItem.value.map((v) => {
+        ...selectedWorker.value.map((v) => {
           {
             return v.id;
           }
         }),
+        ...newWorkerList.value.map((v) => {
+          const { attachment, ...payload } = v;
+          return pageState.mode === 'edit' ? payload.id : payload;
+        }),
       ]),
     ),
     dueDate: currentFormData.value.dueDate,
@@ -862,7 +869,6 @@ async function exampleReceipt(id: string) {
 
 function storeDataLocal() {
   //  quotationFormData.value.productServiceList = productServiceList.value;
-  //
 
   localStorage.setItem(
     'debit-note-preview',
@@ -871,7 +877,6 @@ function storeDataLocal() {
         ...currentFormData.value,
         customerBranchId: quotationData.value?.customerBranchId,
         registeredBranchId: quotationData.value?.registeredBranchId,
-        agentPrice: quotationData.value.agentPrice,
       },
       meta: {
         source: {
@@ -888,7 +893,7 @@ function storeDataLocal() {
           dueDate: currentFormData.value.dueDate,
         },
         productServicelist: productService.value,
-        selectedWorker: selectedWorkerItem.value,
+        selectedWorker: selectedWorker.value,
         createdBy: getName(),
       },
     }),
@@ -913,69 +918,6 @@ function closeAble() {
   return window.opener !== null;
 }
 
-function combineWorker(newWorker: any, oldWorker: any) {
-  selectedWorkerItem.value = [
-    ...oldWorker.map((e) => ({
-      id: e.id,
-      foreignRefNo: e.employeePassport
-        ? e.employeePassport[0]?.number || '-'
-        : '-',
-      employeeName:
-        locale.value === Lang.English
-          ? `${e.firstNameEN} ${e.lastNameEN}`
-          : `${e.firstName || e.firstNameEN} ${e.lastName || e.lastNameEN}`,
-      birthDate: dateFormatJS({ date: e.dateOfBirth }),
-      gender: e.gender,
-      age: calculateAge(e.dateOfBirth),
-      nationality: optionStore.mapOption(e.nationality),
-      documentExpireDate:
-        e.employeePassport !== undefined &&
-        e.employeePassport[0]?.expireDate !== undefined
-          ? dateFormatJS({ date: e.employeePassport[0]?.expireDate })
-          : '-',
-      imgUrl: e.selectedImage
-        ? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
-        : '',
-      status: e.status,
-      workerNew: false,
-      lastNameEN: e.lastNameEN,
-      lastName: e.lastName,
-      middleNameEN: e.middleNameEN,
-      middleName: e.middleName,
-      firstNameEN: e.firstNameEN,
-      firstName: e.firstName,
-      namePrefix: e.namePrefix,
-    })),
-
-    ...newWorker.map((v: any) => ({
-      id: v.id,
-      foreignRefNo: v.passportNo || '-',
-      employeeName:
-        locale.value === Lang.English
-          ? `${v.firstNameEN} ${v.lastNameEN}`
-          : `${v.firstName || v.firstNameEN} ${v.lastName || v.lastNameEN}`,
-      birthDate: dateFormatJS({ date: v.dateOfBirth }),
-      gender: v.gender,
-      age: calculateAge(v.dateOfBirth),
-      nationality: optionStore.mapOption(v.nationality),
-      documentExpireDate: '-',
-      imgUrl: '',
-      status: 'CREATED',
-
-      lastNameEN: v.lastNameEN,
-      lastName: v.lastName,
-      middleNameEN: v.middleNameEN,
-      middleName: v.middleName,
-      firstNameEN: v.firstNameEN,
-      firstName: v.firstName,
-      namePrefix: v.namePrefix,
-
-      dateOfBirth: v.dateOfBirth,
-      workerNew: true,
-    })),
-  ];
-}
-
 watch(
   () => pageState.mode,
   () => toggleMode(pageState.mode),
@@ -1104,11 +1046,7 @@ async function submitAccepted() {
               :status-active="i.active?.()"
               :status-done="i.status === 'done'"
               :status-waiting="i.status === 'waiting'"
-              @click="
+              @click="i.handler()"
-                () => {
-                  if (pageState.mode !== 'create') i.handler();
-                }
-              "
             />
           </nav>
           <!-- #TODO  add goToQuotation as @goto-quotation-->
@@ -1139,7 +1077,6 @@ async function submitAccepted() {
           <PaymentForm
             v-if="view === QuotationStatus.PaymentPending"
             is-debit-note
-            :branch-id="quotationData?.registeredBranchId"
             :readonly="isRoleInclude(['sale', 'head_of_sale'])"
             :data="debitNoteData"
             @fetch-status="
@@ -1161,7 +1098,7 @@ async function submitAccepted() {
             "
             :row-worker="selectedWorkerItem"
             @add-worker="() => (pageState.employeeModal = true)"
-            @delete="(i) => deleteItem(selectedWorkerItem, i)"
+            @delete="(i) => deleteItem(selectedWorker, i)"
           />
 
           <!-- #TODO add  openProductDialog at @add-product-->
@@ -1381,7 +1318,7 @@ async function submitAccepted() {
           <SaveButton
             v-if="pageState.mode !== 'info'"
             :disabled="
-              selectedWorkerItem.length === 0 || productService.length === 0
+              selectedWorkerItem.length === 0 && productService.length === 0
             "
             @click="submit"
             solid
@@ -1426,12 +1363,13 @@ async function submitAccepted() {
   <!-- add employee quotation -->
 
   <QuotationFormWorkerSelect
-    :preselect-worker="selectedWorkerItem"
+    :preselect-worker="selectedWorker"
     :customerBranchId="quotationData?.customerBranchId"
     v-model:open="pageState.employeeModal"
+    v-model:new-worker-list="newWorkerList"
     @success="
       (v) => {
-        combineWorker(v.newWorker, v.worker);
+        selectedWorker = v.worker;
       }
     "
   />

src/pages/12_debit-note/MainPage.vue

@@ -143,15 +143,6 @@ onMounted(async () => {
   });
 
   getList();
-
-  window.addEventListener('focus', () => {
-    debitNote.getDebitNoteStats().then((res) => {
-      if (res) {
-        stats.value = res;
-      }
-    });
-    getList();
-  });
 });
 
 watch(
@@ -420,7 +411,7 @@ watch(
                   @delete="() => triggerDelete(item.row.id)"
                   :title="item.row.debitNoteQuotation?.workName"
                   :code="item.row.code"
-                  :status="$t(`debitNote.stats.${item.row.quotationStatus}`)"
+                  :status="$t(`quotation.status.${item.row.quotationStatus}`)"
                   :badge-color="hslaColors[item.row.quotationStatus] || ''"
                   :custom-data="[
                     {
@@ -434,12 +425,10 @@ watch(
                       label: $t('quotation.customer'),
                       value:
                         item.row.customerBranch.customer.customerType === 'CORP'
-                          ? $i18n.locale === 'tha'
                           ? item.row.customerBranch.registerName
-                            : item.row.customerBranch.registerNameEN
                           : $i18n.locale === 'tha'
-                            ? `${item.row.customerBranch.firstName || ''} ${item.row.customerBranch.lastName || ''}`
+                            ? `${item.row.customerBranch.firstName} ${item.row.customerBranch.lastName}`
-                            : `${item.row.customerBranch.firstNameEN || ''} ${item.row.customerBranch.lastNameEN || ''}`,
+                            : `${item.row.customerBranch.firstNameEN} ${item.row.customerBranch.lastNameEN}`,
                     },
                     {
                       label: $t('requestList.quotationCode'),

src/pages/12_debit-note/document-view/MainPage.vue

@@ -82,8 +82,6 @@ const data = ref<
 >();
 
 const productServiceList = ref<ProductServiceList[]>([]);
-const selectedInstallmentNo = ref<number[]>([]);
-const agentPrice = ref<boolean>(false);
 
 const summaryPrice = ref<SummaryPrice>({
   totalPrice: 0,
@@ -219,8 +217,6 @@ onMounted(async () => {
     }
 
     productServiceList.value = parsed.meta.productServicelist;
-    selectedInstallmentNo.value = parsed.meta.selectedInstallmentNo;
-    agentPrice.value = parsed.meta.agentPrice;
 
     productList.value =
       productServiceList.value?.map((v) => ({
@@ -228,56 +224,40 @@ onMounted(async () => {
         code: v.product.code,
         detail: v.product.name,
         amount: v.amount || 0,
-        priceUnit:
+        priceUnit: v.pricePerUnit || 0,
-          v.pricePerUnit +
-          (v.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat']
-            ? v.pricePerUnit * (config.value?.vat || 0.07)
-            : 0),
         discount: v.discount || 0,
         vat: v.vat || 0,
         value: precisionRound(
-          (v.pricePerUnit +
+          (v.pricePerUnit || 0) * v.amount -
-            (v.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat']
+            (v.discount || 0) +
-              ? v.pricePerUnit * (config.value?.vat || 0.07)
+            (v.product.calcVat
-              : 0)) *
+              ? ((v.pricePerUnit || 0) * v.amount - (v.discount || 0)) *
-            v.amount -
+                (config.value?.vat || 0.07)
-            v.discount,
+              : 0),
         ),
       })) || [];
   }
 
   summaryPrice.value = (productServiceList.value || []).reduce(
     (a, c) => {
-      if (
+      const price = precisionRound((c.pricePerUnit || 0) * c.amount);
-        selectedInstallmentNo.value?.length > 0 &&
+      const vat = precisionRound(
-        c.installmentNo &&
+        ((c.pricePerUnit || 0) * c.amount - (c.discount || 0)) *
-        !selectedInstallmentNo.value?.includes(c.installmentNo)
+          (config.value?.vat || 0.07),
-      ) {
-        return a;
-      }
-
-      const calcVat =
-        c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
-
-      const vatFactor = calcVat ? (config.value?.vat ?? 0.07) : 0;
-
-      const pricePerUnit = precisionRound(
-        (c.pricePerUnit * (1 + vatFactor)) / (1 + vatFactor),
       );
 
-      const price = precisionRound(
+      a.totalPrice = precisionRound(a.totalPrice + price);
-        (pricePerUnit * c.amount * (1 + vatFactor) - c.discount) /
+      a.totalDiscount = precisionRound(a.totalDiscount + Number(c.discount));
-          (1 + vatFactor),
+      a.vat = c.product.calcVat ? precisionRound(a.vat + vat) : a.vat;
-      );
-      const vat = price * vatFactor;
-
-      a.totalPrice = precisionRound(a.totalPrice + price + c.discount);
-      a.totalDiscount = precisionRound(a.totalDiscount + c.discount);
-      a.vat = precisionRound(a.vat + vat);
       a.vatExcluded = c.product.calcVat
         ? a.vatExcluded
-        : precisionRound(a.vatExcluded + price);
+        : precisionRound(a.vat + vat);
-      a.finalPrice = precisionRound(a.totalPrice - a.totalDiscount + a.vat);
+      a.finalPrice = precisionRound(
+        a.totalPrice -
+          a.totalDiscount +
+          a.vat -
+          Number(data.value?.discount || 0),
+      );
 
       return a;
     },
@@ -369,9 +349,7 @@ function print() {
               {{ formatNumberDecimal(v.priceUnit, 2) }}
             </td>
             <td style="text-align: right">
-              <template v-if="v.discount !== 0">
+              {{ formatNumberDecimal(v.discount, 2) }}
-                {{ formatNumberDecimal(v.discount, 2) }} ฿
-              </template>
             </td>
             <td style="text-align: right">
               {{ formatNumberDecimal(v.vat, 2) }}
@@ -435,8 +413,8 @@ function print() {
               {{
                 formatNumberDecimal(
                   summaryPrice.totalPrice -
-                    summaryPrice.totalDiscount -
+                    summaryPrice.totalDiscount +
-                    summaryPrice.vatExcluded,
+                    summaryPrice.vat,
                   2,
                 )
               }}

src/pages/12_debit-note/document-view/ViewHeader.vue

@@ -79,8 +79,8 @@ function titleMode(mode: View): string {
             })
           }}
         </span>
-        <span>{{ $t('branch.form.taxNo') }} {{ branch.taxNo }}</span>
+        <span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
-        <span>{{ $t('taskOrder.telephone') }} {{ branch.telephoneNo }}</span>
+        <span>เบอร์โทร {{ branch.telephoneNo }}</span>
         <span>{{ branch.webUrl }}</span>
       </article>
       <article>
@@ -105,18 +105,8 @@ function titleMode(mode: View): string {
             })
           }}
         </span>
-        <span>
+        <span>เลขประจำตัวผู้เสียภาษี {{ customer.citizenId }}</span>
-          {{
+        <span>เบอร์โทร {{ customer.telephoneNo }}</span>
-            customer.customer.customerType === 'CORP'
-              ? `${$t('customer.form.legalPersonNo')} `
-              : `${$t('customer.form.taxpayyerNo')} `
-          }}{{
-            customer.customer.customerType === 'CORP'
-              ? customer.codeCustomer
-              : customer.citizenId
-          }}
-        </span>
-        <span>{{ $t('taskOrder.telephone') }} {{ customer.telephoneNo }}</span>
       </article>
     </section>
     <section class="detail-quotation-info">

src/pages/13_receipt/MainPage.vue

@@ -343,16 +343,9 @@ watch(
                       {
                         label: $t('general.customer'),
                         value:
-                          item.row.invoice.quotation.customerBranch.customer
+                          item.row.invoice.quotation.customerBranch
-                            .customerType === 'CORP'
+                            .registerName ||
-                            ? $i18n.locale === 'tha'
+                          `${item.row.invoice.quotation.customerBranch?.firstName || '-'} ${item.row.invoice.quotation.customerBranch?.lastName || ''}`,
-                              ? item.row.invoice.quotation.customerBranch
-                                  .registerName
-                              : item.row.invoice.quotation.customerBranch
-                                  .registerNameEN
-                            : $i18n.locale === 'tha'
-                              ? `${item.row.invoice.quotation.customerBranch?.firstName || '-'} ${item.row.invoice.quotation.customerBranch?.lastName || ''}`
-                              : `${item.row.invoice.quotation.customerBranch?.firstNameEN || '-'} ${item.row.invoice.quotation.customerBranch?.lastNameEN || ''}`,
                       },
                       {
                         label: $t('taskOrder.issueDate'),

src/pages/16_business-type-management/MainPage.vue

@@ -45,7 +45,7 @@ const fieldSelected = ref<('no' | 'name' | 'nameEN')[]>([
 const fieldSelectedOption = ref<{ label: string; value: string }[]>([
   {
     label: 'general.order',
-    value: 'no',
+    value: 'orderNumber',
   },
 
   {
@@ -312,6 +312,25 @@ watch(
             </q-input>
 
             <div class="row col-md-5 justify-end" style="white-space: nowrap">
+              <q-select
+                v-if="$q.screen.gt.sm"
+                v-model="statusFilter"
+                outlined
+                dense
+                option-value="value"
+                option-label="label"
+                class="col"
+                :class="{ 'offset-md-5': pageState.gridView }"
+                map-options
+                emit-value
+                :for="'field-select-status'"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                :options="[
+                  { label: $t('general.all'), value: 'all' },
+                  { label: $t('general.active'), value: 'statusACTIVE' },
+                  { label: $t('general.inactive'), value: 'statusINACTIVE' },
+                ]"
+              />
               <q-select
                 v-if="!pageState.gridView"
                 id="select-field"
@@ -576,18 +595,10 @@ watch(
                         ></q-badge>
                       </q-avatar>
                       <span class="text-weight-bold column q-pl-md">
-                        {{
+                        {{ props.row.name }}
-                          $i18n.locale === 'tha'
-                            ? props.row.name
-                            : props.row.nameEN
-                        }}
 
                         <span class="text-caption app-text-muted-2">
-                          {{
+                          {{ props.row.nameEN }}
-                            $i18n.locale === 'tha'
-                              ? props.row.nameEN
-                              : props.row.name
-                          }}
                         </span>
                       </span>
                       <nav