From f18d34b02db7bba8eaab7a5c72b04cf07933ab81 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 10 Feb 2025 09:43:46 +0700
Subject: [PATCH 01/40] fix: add validation rules for group selection in
 FormBasicInfoAgencies component

---
 src/components/07_agencies-management/FormBasicInfoAgencies.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/07_agencies-management/FormBasicInfoAgencies.vue b/src/components/07_agencies-management/FormBasicInfoAgencies.vue
index 40b0ceb8..dbf9d568 100644
--- a/src/components/07_agencies-management/FormBasicInfoAgencies.vue
+++ b/src/components/07_agencies-management/FormBasicInfoAgencies.vue
@@ -46,6 +46,7 @@ type Options = { label: string; value: string };
             (lhs: Options, rhs: Options) => lhs.value.localeCompare(rhs.value),
           )
         "
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
         v-model="group"
       >
         <template v-slot:option="{ scope, opt }">

From 4994792597ecdeca80f2e9c5f24fb288c7c826b5 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 10 Feb 2025 11:34:36 +0700
Subject: [PATCH 02/40] feat: 07 => implement status toggle functionality in
 AgenciesDialog and MainPage components

---
 .../07_agencies-management/AgenciesDialog.vue | 21 ++++-
 src/pages/07_agencies-management/MainPage.vue | 80 ++++++++++++++++++-
 src/stores/institution/index.ts               |  3 +-
 3 files changed, 97 insertions(+), 7 deletions(-)

diff --git a/src/pages/07_agencies-management/AgenciesDialog.vue b/src/pages/07_agencies-management/AgenciesDialog.vue
index 8e0826a6..3e2d4c77 100644
--- a/src/pages/07_agencies-management/AgenciesDialog.vue
+++ b/src/pages/07_agencies-management/AgenciesDialog.vue
@@ -199,16 +199,23 @@ watch(
       <ProfileBanner
         prefix="dialog"
         active
+        use-toggle
         hide-fade
-        hide-active
+        :toggle-title="$t('status.title')"
         :icon="'ph-building-office'"
         :img="imageState.imageUrl || null"
         :title="data.name"
         :caption="data.code"
         :color="`hsla(var(--green-8-hsl)/1)`"
         :bg-color="`hsla(var(--green-8-hsl)/0.1)`"
+        v-model:toggle-status="data.status"
         @view="viewImage"
         @edit="editImage"
+        @update:toggle-status="
+          () => {
+            data.status = data.status === 'CREATED' ? 'INACTIVE' : 'CREATED';
+          }
+        "
       />
     </div>
 
@@ -317,9 +324,10 @@ watch(
       >
         <ProfileBanner
           :prefix="data.name"
-          active
           hide-fade
-          hide-active
+          use-toggle
+          :active="data.status !== 'INACTIVE'"
+          :toggle-title="$t('status.title')"
           :icon="'ph-building-office'"
           :title="data.name"
           :caption="data.code"
@@ -330,8 +338,10 @@ watch(
               imageState.refreshImageState ? `?ts=${Date.now()}` : '',
             ) || null
           "
+          v-model:toggle-status="data.status"
           @view="viewImage"
           @edit="editImage"
+          @update:toggle-status="$emit('changeStatus')"
         />
       </div>
 
@@ -354,7 +364,10 @@ watch(
             }"
             style="position: absolute; z-index: 999; top: 0; right: 0"
           >
-            <div v-if="true" class="surface-1 row rounded">
+            <div
+              v-if="data.status !== 'INACTIVE'"
+              class="surface-1 row rounded"
+            >
               <UndoButton
                 v-if="isEdit"
                 id="btn-info-basic-undo"
diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index 748353a8..1a4feaac 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -97,6 +97,7 @@ const blankFormData: InstitutionPayload = {
   districtId: '',
   provinceId: '',
   selectedImage: '',
+  status: 'CREATED',
 };
 
 const refAgenciesDialog = ref();
@@ -155,6 +156,7 @@ function assignFormData(data: Institution) {
     districtId: data.districtId,
     provinceId: data.provinceId,
     selectedImage: data.selectedImage,
+    status: data.status,
   };
 }
 
@@ -175,6 +177,7 @@ async function submit(opt?: { selectedImage: string }) {
     subDistrictId: formData.value.subDistrictId,
     districtId: formData.value.districtId,
     provinceId: formData.value.provinceId,
+    status: formData.value.status,
   };
   if (
     (pageState.isDrawerEdit && currAgenciesData.value?.id) ||
@@ -250,6 +253,54 @@ async function fetchData(mobileFetch?: boolean) {
   }
 }
 
+async function triggerChangeStatus(data?: Institution) {
+  const targetId = (data && data.id) || currAgenciesData.value?.id;
+  const targetStatus = (data && data.status) || currAgenciesData.value?.status;
+  if (data) assignFormData(data);
+  if (targetId === undefined || targetStatus === undefined) return;
+
+  return await new Promise((resolve, reject) => {
+    dialog({
+      color: targetStatus !== 'INACTIVE' ? 'warning' : 'info',
+      icon:
+        targetStatus !== 'INACTIVE'
+          ? 'mdi-alert'
+          : 'mdi-message-processing-outline',
+      title: t('dialog.title.confirmChangeStatus'),
+      actionText:
+        targetStatus !== 'INACTIVE' ? t('general.close') : t('general.open'),
+      message:
+        targetStatus !== 'INACTIVE'
+          ? t('dialog.message.confirmChangeStatusOff')
+          : t('dialog.message.confirmChangeStatusOn'),
+      action: async () => {
+        await changeStatus(targetId).then(resolve).catch(reject);
+      },
+      cancel: () => {},
+    });
+  });
+}
+
+async function changeStatus(id?: string) {
+  const targetId = id || currAgenciesData.value?.id;
+  if (targetId === undefined) return;
+
+  formData.value.status =
+    formData.value.status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE';
+
+  const res = await institutionStore.editInstitution({
+    id: targetId,
+    ...formData.value,
+  });
+  if (res) {
+    formData.value.status = res.status;
+    if (currAgenciesData.value) {
+      currAgenciesData.value.status = res.status;
+    }
+    await fetchData();
+  }
+}
+
 onMounted(async () => {
   navigatorStore.current.title = 'agencies.title';
   navigatorStore.current.path = [{ text: 'agencies.caption', i18n: true }];
@@ -540,6 +591,18 @@ watch(
                             </div>
                           </template>
                         </q-img>
+
+                        <q-badge
+                          class="absolute-bottom-right no-padding"
+                          style="
+                            border-radius: 50%;
+                            min-width: 8px;
+                            min-height: 8px;
+                          "
+                          :style="{
+                            background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                          }"
+                        ></q-badge>
                       </q-avatar>
                       <span class="col q-pl-md">
                         <div>
@@ -606,7 +669,6 @@ watch(
                       "
                     />
                     <KebabAction
-                      hide-toggle
                       :id-name="props.row.id"
                       :status="props.row.status"
                       @view="
@@ -622,6 +684,7 @@ watch(
                         }
                       "
                       @delete="() => triggerDelete(props.row.id)"
+                      @change-status="() => triggerChangeStatus(props.row)"
                     />
                   </q-td>
                 </q-tr>
@@ -649,6 +712,18 @@ watch(
                             </div>
                           </template>
                         </q-img>
+
+                        <q-badge
+                          class="absolute-bottom-right no-padding"
+                          style="
+                            border-radius: 50%;
+                            min-width: 10px;
+                            min-height: 10px;
+                          "
+                          :style="{
+                            background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                          }"
+                        ></q-badge>
                       </q-avatar>
                       <span class="text-weight-bold column q-pl-md">
                         {{
@@ -677,7 +752,6 @@ watch(
                           "
                         />
                         <KebabAction
-                          hide-toggle
                           :id-name="props.row.id"
                           :status="props.row.status"
                           @view="
@@ -693,6 +767,7 @@ watch(
                             }
                           "
                           @delete="() => triggerDelete(props.row.id)"
+                          @change-status="() => triggerChangeStatus(props.row)"
                         />
                       </nav>
                     </header>
@@ -814,6 +889,7 @@ watch(
         if (v) await submit({ selectedImage: v });
       }
     "
+    @change-status="triggerChangeStatus"
     :readonly="!pageState.isDrawerEdit"
     :isEdit="pageState.isDrawerEdit"
     v-model="pageState.addModal"
diff --git a/src/stores/institution/index.ts b/src/stores/institution/index.ts
index 930ebda2..c639f708 100644
--- a/src/stores/institution/index.ts
+++ b/src/stores/institution/index.ts
@@ -40,7 +40,7 @@ export const useInstitution = defineStore('institution-store', () => {
             params,
           },
         )
-      : await api.get<PaginationResult<Institution>>(`/institution`, {
+      : await api.get<PaginationResult<Institution>>('/institution', {
           params,
         });
 
@@ -80,6 +80,7 @@ export const useInstitution = defineStore('institution-store', () => {
     const res = await api.put(`/institution/${data.id}`, {
       ...data,
       id: undefined,
+      group: undefined,
     });
     if (res.status < 400) {
       return res.data;

From 51313cc4f88f353b9dcd6388eeee33f65a3c3fc5 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 10 Feb 2025 13:05:15 +0700
Subject: [PATCH 03/40] feat: add status filtering to agencies management page

---
 src/pages/07_agencies-management/MainPage.vue | 32 ++++++++++++++++---
 src/stores/institution/index.ts               |  2 ++
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index 1a4feaac..04decf0b 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { QTableProps } from 'quasar';
+import { QSelect, QTableProps } from 'quasar';
 import { dialog } from 'src/stores/utils';
 import { onMounted, reactive, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
@@ -100,6 +100,8 @@ const blankFormData: InstitutionPayload = {
   status: 'CREATED',
 };
 
+const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
+const refFilter = ref<InstanceType<typeof QSelect>>();
 const refAgenciesDialog = ref();
 const formData = ref<InstitutionPayload>(structuredClone(blankFormData));
 const currAgenciesData = ref<Institution>();
@@ -241,6 +243,12 @@ async function fetchData(mobileFetch?: boolean) {
       ? data.value.length + (pageState.total === data.value.length ? 1 : 0)
       : pageSize.value,
     query: pageState.inputSearch,
+    status:
+      statusFilter.value === 'all'
+        ? undefined
+        : statusFilter.value === 'statusACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
   });
 
   if (ret) {
@@ -310,7 +318,7 @@ onMounted(async () => {
 });
 
 watch(
-  () => pageState.inputSearch,
+  () => [pageState.inputSearch, statusFilter.value],
   () => {
     page.value = 1;
     data.value = [];
@@ -393,10 +401,26 @@ watch(
               <template #prepend>
                 <q-icon name="mdi-magnify" />
               </template>
+              <template v-if="$q.screen.lt.md" v-slot:append>
+                <span class="row">
+                  <q-separator vertical />
+                  <q-btn
+                    icon="mdi-filter-variant"
+                    unelevated
+                    class="q-ml-sm"
+                    padding="4px"
+                    size="sm"
+                    rounded
+                    @click="refFilter?.showPopup"
+                  />
+                </span>
+              </template>
             </q-input>
 
             <div class="row col-md-5 justify-end" style="white-space: nowrap">
-              <!-- <q-select
+              <q-select
+                v-show="$q.screen.gt.sm"
+                ref="refFilter"
                 v-model="statusFilter"
                 outlined
                 dense
@@ -413,7 +437,7 @@ watch(
                   { label: $t('general.active'), value: 'statusACTIVE' },
                   { label: $t('general.inactive'), value: 'statusINACTIVE' },
                 ]"
-              /> -->
+              />
               <q-select
                 v-if="!pageState.gridView"
                 id="select-field"
diff --git a/src/stores/institution/index.ts b/src/stores/institution/index.ts
index c639f708..dab8fc85 100644
--- a/src/stores/institution/index.ts
+++ b/src/stores/institution/index.ts
@@ -4,6 +4,7 @@ import { Institution, InstitutionPayload } from './types';
 import { api } from 'src/boot/axios';
 import { PaginationResult } from 'src/types';
 import useFlowStore from '../flow';
+import { Status } from '../types';
 
 export const useInstitution = defineStore('institution-store', () => {
   const flowStore = useFlowStore();
@@ -26,6 +27,7 @@ export const useInstitution = defineStore('institution-store', () => {
     pageSize?: number;
     query?: string;
     group?: string;
+    status?: Status;
     payload?: { group?: string[] };
   }) {
     const { payload, ...params } = opts || {};

From 64c1562e47ebc20412be1b8a11213975a3f8af1e Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 10 Feb 2025 13:05:46 +0700
Subject: [PATCH 04/40] feat: add status field to Institution and
 InstitutionPayload types

---
 src/stores/institution/types.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/stores/institution/types.ts b/src/stores/institution/types.ts
index 2282aade..7bd6287f 100644
--- a/src/stores/institution/types.ts
+++ b/src/stores/institution/types.ts
@@ -1,4 +1,5 @@
 import { District, Province, SubDistrict } from '../address';
+import { Status } from '../types';
 
 export type Institution = {
   id: string;
@@ -23,6 +24,7 @@ export type Institution = {
   subDistrictId: string;
   districtId: string;
   provinceId: string;
+  status: Status;
 };
 
 export type InstitutionPayload = {
@@ -44,4 +46,5 @@ export type InstitutionPayload = {
   subDistrictId: string;
   districtId: string;
   provinceId: string;
+  status?: Status;
 };

From 9d9a955298355a5300ad2f3d5a433159acd5acf1 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 10 Feb 2025 13:54:50 +0700
Subject: [PATCH 05/40] fix: btn add missing

---
 src/pages/03_customer-management/MainPage.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 2893cfed..e0b5a4c9 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2649,7 +2649,7 @@ const emptyCreateDialog = ref(false);
                   },
                   {
                     name: $t('general.uploadFile'),
-                    anchor: 'drawer-info-file-upload',
+                    anchor: 'form-info-file-upload',
                     tab: 'personalInfo',
                   },
 
@@ -2672,14 +2672,14 @@ const emptyCreateDialog = ref(false);
                   },
                   ...(currentFromDataEmployee.employeePassport?.map((v, i) => ({
                     name: dateFormat(v.expireDate),
-                    anchor: `drawer-employee-employeePassport-${i}`,
+                    anchor: `form-employee-employeePassport-${i}`,
                     tab: 'passport',
                     sub: true,
                   })) || []),
 
                   {
                     name: $t('customerEmployee.form.group.visa'),
-                    anchor: 'drawer-visa',
+                    anchor: 'form-visa',
                     tab: 'visa',
                     useBtn:
                       currentFromDataEmployee.employeeVisa?.filter((item) => {
@@ -2695,7 +2695,7 @@ const emptyCreateDialog = ref(false);
 
                   ...(currentFromDataEmployee.employeeVisa?.map((v, i) => ({
                     name: dateFormat(v.expireDate),
-                    anchor: `drawer-employee-visa-${i}`,
+                    anchor: `form-employee-visa-${i}`,
                     tab: 'visa',
                     sub: true,
                   })) || []),
@@ -2774,7 +2774,7 @@ const emptyCreateDialog = ref(false);
                 />
               </template>
 
-              <template v-slot:btn-drawer-visa>
+              <template v-slot:btn-form-visa>
                 <q-btn
                   id="form-add-visa"
                   dense
@@ -2787,7 +2787,7 @@ const emptyCreateDialog = ref(false);
                 />
               </template>
 
-              <template v-slot:btn-drawer-employee-checkup>
+              <template v-slot:btn-form-employee-checkup>
                 <q-btn
                   id="form-add-checkup"
                   dense
@@ -2800,7 +2800,7 @@ const emptyCreateDialog = ref(false);
                 />
               </template>
 
-              <template v-slot:btn-drawer-employee-work-history>
+              <template v-slot:btn-form-employee-work-history>
                 <q-btn
                   id="form-add-work-history"
                   dense

From 88d2d21476e97d12199eb50ebadb73915f549311 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 10 Feb 2025 14:05:11 +0700
Subject: [PATCH 06/40] feat: update i18n from backend

---
 src/i18n/eng.ts | 123 +++++++++++++++++++++++++++++++++---------------
 src/i18n/tha.ts | 120 +++++++++++++++++++++++++++++++---------------
 2 files changed, 167 insertions(+), 76 deletions(-)

diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index ce44298b..7aabe58f 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -1057,65 +1057,102 @@ export default {
       cancel: 'Cancel',
     },
     backend: {
-      productGroupNotFound: 'Product group cannot be found.',
-      productGroupIsUsed: 'Product group is in used.',
-      productNotFound: 'Product cannot be found.',
-      productIsUsed: 'Product is in used.',
-      productTypeNotFound: 'Product type cannot be found.',
       productGroupAssociatedBadReq: 'Product group associated cannot be found.',
-      productTypeIsUsed: 'Product type is in used.',
       productGroupBadReq: 'Product group cannot be found.',
-      serviceNotFound: 'Service cannot be found.',
       someProductBadReq: 'Some product not found.',
-      serviceIsUsed: 'Service is in used.',
-      workNotFound: 'Work cannot be found.',
-      workIsUsed: 'Work is in used.',
-      branchContactNotFound: 'Branch contact cannot be found.',
       branchBadReq: 'Branch cannot be found.',
-      branchNotFound: 'Branch cannot be found.',
-      cantMakeHQAndBranchSameTime:
-        'Cannot make this as headquaters and branch at the same time.',
-      branchIsUsed: 'Branch is in used.',
       oneOrMoreUserBadReq: 'One or more user cannot be found.',
       oneOrMoreBranchBadReq: 'One or more branch cannot be found.',
-      customerBranchNotFound: 'Customer branch cannot be found.',
-      customerBranchIsUsed: 'Customer branch is in used.',
-      customerNotFound: 'Customer cannot be found.',
-      customerIsUsed: 'Customer is in used.',
+      employeeBadReq: 'Employee cannot be found.',
+      parentMenuBadReq: 'Parent menu not found.',
+      menuBadReq: 'Menu cannot be found.',
       oneOrMoreBranchMissing:
         'One or more branch cannot be delete and is missing.',
-      employeeCheckupNotFound: 'Employee checkup cannot be found.',
-      provinceNotFound: 'Province cannot be found.',
-      employeeNotFound: 'Employee cannot be found.',
-      employeeBadReq: 'Employee cannot be found.',
-      employeeIsUsed: 'Employee is in used.',
-      someProvinceNotFound: 'Some province cannot be found.',
-      employeeOtherNotFound: 'Employee other info cannot be found.',
-      employeeWorkNotFound: 'Employee work cannot be found.',
-      parentMenuBadReq: 'Parent menu not found.',
-      menuNotFound: 'Menu cannot be found.',
-      menuBadReq: 'Menu cannot be found.',
-      menuComponentNotFound: 'Menu component cannot be found.',
-      roleMenuNotFound: 'Role menu cannot be found.',
-      userNotFound: 'User cannot be found.',
-      userIsUsed: 'User is in used.',
+      cantMakeHQAndBranchSameTime:
+        'Cannot make this as headquaters and branch at the same time.',
       unknowHowToVerify: 'Unknown how to verify identity.',
       noPermission:
         'You do not have permission to access or perform with this resource.',
       noPermissionToAccess:
         'You do not have permission to access or perform with this resource.',
+
       relationProvinceNotFound: 'Province cannot be found.',
       relationDistrictNotFound: 'District cannot be found.',
       relationSubDistrictNotFound: 'Sub-district cannot be found.',
       relationHQNotFound: 'Headquarters cannot be found.',
+      relationBranchNotFound: 'Branch cannot be found.',
       relationCustomerNotFound: 'Customer cannot be found.',
       relationCustomerBranchNotFound: 'Customer Branch cannot be found.',
+      relationUserNotFound: 'User cannot be found.',
+      relationProductGroupNotFound: 'Product group cannot be found.',
+      relationProductTypeNotFound: 'Product type cannot be found.',
+      relationServiceNotFound: 'Service cannot be found.',
+      relationProductNotFound: 'Product cannot be found.',
+      relationQuotationNotFound: 'Quotation cannot be found.',
+      relationWorkerNotFound: 'Worker cannot be found.',
+      relationWorkNotFound: 'Work cannot be found.',
+
+      dataNotFound: 'Data not found.',
+      employmentOfficeNotFound: 'Employment office not found.',
+      branchNotFound: 'Branch cannot be found.',
+      productGroupNotFound: 'Product group cannot be found.',
+      productNotFound: 'Product cannot be found.',
+      productTypeNotFound: 'Product type cannot be found.',
+      serviceNotFound: 'Service cannot be found.',
+      workNotFound: 'Work cannot be found.',
+      branchContactNotFound: 'Branch contact cannot be found.',
+      customerBranchNotFound: 'Customer branch cannot be found.',
+      customerNotFound: 'Customer cannot be found.',
+      employeeCheckupNotFound: 'Employee checkup cannot be found.',
+      provinceNotFound: 'Province cannot be found.',
+      employeeNotFound: 'Employee cannot be found.',
+      someProvinceNotFound: 'Some province cannot be found.',
+      employeeOtherNotFound: 'Employee other info cannot be found.',
+      employeeWorkNotFound: 'Employee work cannot be found.',
+      menuNotFound: 'Menu cannot be found.',
+      menuComponentNotFound: 'Menu component cannot be found.',
+      roleMenuNotFound: 'Role menu cannot be found.',
+      userNotFound: 'User cannot be found.',
+      flowTemplateNotFound: 'Workflow template cannot be found.',
+      taskOrderNotFound: 'Task order cannot be found.',
+      quotationNotFound: 'Quotation cannot be found.',
+      citizenNotFound: 'Citizen cannot be found.',
+      employeeOtherInfoNotFound: 'Employee other info cannot be found.',
+      passportNotFound: 'Passport cannot be found.',
+      visaNotFound: 'Visa cannot be found.',
+      workflowNotFound: 'Workflow cannot be found.',
+      institutionNotFound: 'Agencies cannot be found.',
+      invoiceNotFound: 'Invoice cannot be found.',
+      receiptNotFound: 'Receipt cannot be found.',
+      paymentNotFound: 'Payment cannot be found.',
+      requestDataNotFound: 'Request data cannot be found.',
+      requestWorkNotFound: 'Request work cannot be found.',
+      taskListNotFound: 'Task list cannot be found.',
+      creditNoteNotFound: 'Credit note cannot be found.',
+      debitNoteNotFound: 'Debit note cannot be found.',
+
+      productGroupIsUsed: 'Product group is in used.',
+      productIsUsed: 'Product is in used.',
+      productTypeIsUsed: 'Product type is in used.',
+      serviceIsUsed: 'Service is in used.',
+      workIsUsed: 'Work is in used.',
+      branchIsUsed: 'Branch is in used.',
+      customerBranchIsUsed: 'Customer branch is in used.',
+      customerIsUsed: 'Customer is in used.',
+      employeeIsUsed: 'Employee is in used.',
+      userIsUsed: 'User is in used.',
+      institutionIsUsed: 'Agencies is in used.',
+      quotationIsUsed: 'Quotation is in used.',
+      debitNoteIsUsed: 'Debit note is in used.',
+
       sameBranchCodeExists: 'This Head Office Abbreviation is already in use.',
       productNameExists:
         'Product with the same name already exists. If you want to create with this name please select another code.',
+      userExists: 'User already exits.',
+      sameNameExists: 'Same name exists.',
+
       validateError: 'Validate Error',
       codeMisMatch: 'Code Mismatch',
-      userExists: 'User already exits.',
       crossCompanyNotPermit: 'Cannot move between different headoffice',
       errorOccure:
         'An error has occurred, causing the system to be unable to function. Please try again later.',
@@ -1123,11 +1160,19 @@ export default {
       authFailed: 'Authentication Failed. Please try again later. ',
       installmentsValidateFailed:
         'Validation failed. Each installment must include at least one product. Please review and update the installments accordingly.',
-      flowTemplateNotFound: 'Workflow template cannot be found.',
-      taskOrderNotFound: 'Task order cannot be found.',
-      quotationNotFound: 'Quotation cannot be found.',
-      sameNameExists: 'Same name exists.',
       requestWorkMustReady: 'Request work must ready.',
+
+      notValidImage: 'Not a valid image.',
+      minimumBranchNotMet: 'Require at least one branch for a user.',
+      requireOneMinBranch: 'Require at least one branch as headoffice.',
+      reqMinAffilatedBranch:
+        'You must be affilated with at least one branch or specify branch to be registered (System permission required).',
+      paymentNotSuccess: 'Payment not success.',
+      flowAccountError: 'FlowAccount error.',
+      InvoiceReceiptIssueFailed: 'Failed to issue invoice/receipt document.',
+      QuotationWorkerExceed: 'Worker exceed current quotation max worker.',
+      taskListNotPending: 'One or more task is not pending.',
+      reqNotMet: 'Not Match',
     },
   },
 
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index cf6037b8..10fd3201 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -1041,62 +1041,99 @@ export default {
       cancel: 'ยกเลิก',
     },
     backend: {
-      productGroupNotFound: 'ไม่พบกลุ่มสินค้าและบริการ',
-      productGroupIsUsed: 'กลุ่มสินค้าและบริการที่ใช้งานอยู่',
-      productNotFound: 'ไม่พบสินค้าและบริการ',
-      productIsUsed: 'สินค้าและบริการใช้งานอยู่',
-      productTypeNotFound: 'ไม่พบประเภทสินค้าและบริการ',
       productGroupAssociatedBadReq: 'ไม่พบกลุ่มสินค้าและบริการที่เกี่ยวข้อง',
-      productTypeIsUsed: 'ประเภทสินค้าและบริการใช้งานอยู่',
       productGroupBadReq: 'ไม่พบกลุ่มสินค้าและบริการ',
-      serviceNotFound: 'ไม่พบบริการ',
       someProductBadReq: 'ไม่พบสินค้าและบริการบางส่วน',
-      serviceIsUsed: 'บริการใช้งานอยู่',
-      workNotFound: 'ไม่พบงาน',
-      workIsUsed: 'งานที่ใช้งานอยู่',
-      branchContactNotFound: 'ไม่พบผู้ติดต่อสาขา',
       branchBadReq: 'ไม่พบสาขา',
-      branchNotFound: 'ไม่พบสาขา',
-      cantMakeHQAndBranchSameTime:
-        'ไม่สามารถทำให้เป็นสำนักงานใหญ่และสาขาพร้อมกันได้',
-      branchIsUsed: 'สาขาใช้งานอยู่',
       oneOrMoreUserBadReq: 'ไม่พบผู้ใช้หนึ่งคนหรือมากกว่า',
       oneOrMoreBranchBadReq: 'ไม่พบสาขาหนึ่งสาขาหรือมากกว่า',
-      customerBranchNotFound: 'ไม่พบสาขาลูกค้า',
-      customerBranchIsUsed: 'สาขาลูกค้าที่ใช้งานอยู่',
-      customerNotFound: 'ไม่พบลูกค้า',
-      customerIsUsed: 'ลูกค้าใช้งานอยู่',
-      oneOrMoreBranchMissing: 'ไม่สามารถลบสาขาหนึ่งหรือมากกว่าได้และสูญหาย',
-      employeeCheckupNotFound: 'ไม่พบการตรวจสอบพนักงาน',
-      provinceNotFound: 'ไม่พบจังหวัด',
-      employeeNotFound: 'ไม่พบพนักงาน',
       employeeBadReq: 'ไม่พบพนักงาน',
-      employeeIsUsed: 'พนักงานใช้งานอยู่',
-      someProvinceNotFound: 'ไม่พบจังหวัดบางส่วน',
-      employeeOtherNotFound: 'ไม่พบข้อมูลอื่นของพนักงาน',
-      employeeWorkNotFound: 'ไม่พบงานของพนักงาน',
       parentMenuBadReq: 'ไม่พบเมนูหลัก',
-      menuNotFound: 'ไม่พบเมนู',
       menuBadReq: 'ไม่พบเมนู',
-      menuComponentNotFound: 'ไม่พบส่วนประกอบเมนู',
-      roleMenuNotFound: 'ไม่พบเมนูบทบาท',
-      userNotFound: 'ไม่พบผู้ใช้',
-      userIsUsed: 'ผู้ใช้ใช้งานอยู่',
+      oneOrMoreBranchMissing: 'ไม่สามารถลบสาขาหนึ่งหรือมากกว่าได้และสูญหาย',
+      cantMakeHQAndBranchSameTime:
+        'ไม่สามารถทำให้เป็นสำนักงานใหญ่และสาขาพร้อมกันได้',
       unknowHowToVerify: 'ไม่ทราบวิธียืนยันตัวตน',
       noPermission: 'คุณไม่มีสิทธิในการเข้าถึงหรือดำเนินการใดๆ กับข้อมูลนี้',
       noPermissionToAccess: 'คุณไม่มีสิทธิในการเข้าถึงข้อมูลนี้',
+
       relationProvinceNotFound: 'ไม่พบจังหวัด',
       relationDistrictNotFound: 'ไม่พบอำเภอ',
       relationSubDistrictNotFound: 'ไม่พบตำบล',
       relationHQNotFound: 'ไม่พบสำนักงานใหญ่',
+      relationBranchNotFound: 'ไม่พบสาขา',
       relationCustomerNotFound: 'ไม่พบลูกค้า',
       relationCustomerBranchNotFound: 'ไม่พบสาขาลูกค้า',
+      relationUserNotFound: 'ไม่พบผู้ใช้',
+      relationProductGroupNotFound: 'ไม่พบกลุ่มสินค้า',
+      relationProductTypeNotFound: 'ไม่พบประเภทสินค้า',
+      relationServiceNotFound: 'ไม่พบบริการ',
+      relationProductNotFound: 'ไม่พบสินค้า',
+      relationQuotationNotFound: 'ไม่พบใบเสนอราคา',
+      relationWorkerNotFound: 'ไม่พบแรงงาน',
+      relationWorkNotFound: 'ไม่พบงาน',
+
+      dataNotFound: 'ไม่พบข้อมูล',
+      employmentOfficeNotFound: 'ไม่พบสำนักงานจัดหางาน',
+      branchNotFound: 'ไม่พบสาขา',
+      productGroupNotFound: 'ไม่พบกลุ่มสินค้าและบริการ',
+      productNotFound: 'ไม่พบสินค้าและบริการ',
+      productTypeNotFound: 'ไม่พบประเภทสินค้าและบริการ',
+      serviceNotFound: 'ไม่พบบริการ',
+      workNotFound: 'ไม่พบงาน',
+      branchContactNotFound: 'ไม่พบผู้ติดต่อสาขา',
+      customerBranchNotFound: 'ไม่พบสาขาลูกค้า',
+      customerNotFound: 'ไม่พบลูกค้า',
+      employeeCheckupNotFound: 'ไม่พบการตรวจสอบพนักงาน',
+      provinceNotFound: 'ไม่พบจังหวัด',
+      employeeNotFound: 'ไม่พบพนักงาน',
+      someProvinceNotFound: 'ไม่พบจังหวัดบางส่วน',
+      employeeOtherNotFound: 'ไม่พบข้อมูลอื่นของพนักงาน',
+      employeeWorkNotFound: 'ไม่พบงานของพนักงาน',
+      menuNotFound: 'ไม่พบเมนู',
+      menuComponentNotFound: 'ไม่พบส่วนประกอบเมนู',
+      roleMenuNotFound: 'ไม่พบเมนูสิทธิ์',
+      userNotFound: 'ไม่พบผู้ใช้',
+      flowTemplateNotFound: 'ไม่พบขั้นตอนการทำงาน',
+      taskOrderNotFound: 'ไม่พบใบสั่งงาน',
+      quotationNotFound: 'ไม่พบใบเสนอราคา',
+      citizenNotFound: 'ไม่พบข้อมูลพลเมือง',
+      employeeOtherInfoNotFound: 'ไม่พบข้อมูลอื่น ๆ ของพนักงาน',
+      passportNotFound: 'ไม่พบหนังสือเดินทาง',
+      visaNotFound: 'ไม่พบวีซ่า',
+      workflowNotFound: 'ไม่พบขั้นตอนการทำงาน',
+      institutionNotFound: 'ไม่พบหน่วยงาน',
+      invoiceNotFound: 'ไม่พบใบแจ้งหนี้',
+      receiptNotFound: 'ไม่พบใบเสร็จรับเงิน',
+      paymentNotFound: 'ไม่พบการชำระเงิน',
+      requestDataNotFound: 'ไม่พบใบรายการคำขอ',
+      requestWorkNotFound: 'ไม่พบรายการคำขอ',
+      taskListNotFound: 'ไม่พบใบสั่งงาน',
+      creditNoteNotFound: 'ไม่พบใบลดหนี้',
+      debitNoteNotFound: 'ไม่พบใบเพิ่มหนี้',
+
+      productGroupIsUsed: 'กลุ่มสินค้าและบริการที่ใช้งานอยู่',
+      productIsUsed: 'สินค้าและบริการใช้งานอยู่',
+      productTypeIsUsed: 'ประเภทสินค้าและบริการใช้งานอยู่',
+      serviceIsUsed: 'บริการใช้งานอยู่',
+      workIsUsed: 'งานที่ใช้งานอยู่',
+      branchIsUsed: 'สาขาใช้งานอยู่',
+      customerBranchIsUsed: 'สาขาลูกค้าที่ใช้งานอยู่',
+      customerIsUsed: 'ลูกค้าใช้งานอยู่',
+      employeeIsUsed: 'พนักงานใช้งานอยู่',
+      userIsUsed: 'ผู้ใช้ใช้งานอยู่',
+      institutionIsUsed: 'หน่วยงานใช้งานอยู่.',
+      quotationIsUsed: 'ใบเสนอราคาใช้งานอยู่.',
+      debitNoteIsUsed: 'ใบเพิ่มหนี้ใช้งานอยู่.',
+
       sameBranchCodeExists: 'ตัวย่อสำนักงานใหญ่นี้ถูกใช้แล้ว',
       productNameExists:
         'สินค้าที่มีชื่อเดียวกันมีในระบบแล้ว หากคุณต้องการสร้างด้วยชื่อนี้โปรดเลือกรหัสอื่น',
+      userExists: 'ชื่อผู้ใช้นี้มีอยู่ในระบบอยู่แล้ว',
+      sameNameExists: 'ชื่อนี้ถูกใช้ไปแล้ว',
+
       validateError: 'เกิดข้อผิดพลาดจากการตรวจสอบ',
       codeMisMatch: 'รหัสไม่ตรงกัน',
-      userExists: 'ชื่อผู้ใช้นี้มีอยู่ในระบบอยู่แล้ว',
       crossCompanyNotPermit: 'ไม่สามารถดำเนินการระหว่างสำนักงานใหญ่อื่นได้',
       errorOccure:
         'เกิดข้อผิดพลาดทำให้ระบบไม่สามารถทำงานได้ กรุณาลองใหม่ในภายหลัง',
@@ -1104,11 +1141,20 @@ export default {
       authFailed: 'การยืนยันตัวตนล้มเหลว กรุณาลองใหม่ในภายหลัง',
       installmentsValidateFailed:
         'ข้อมูลงวดไม่ถูกต้อง กรุณาตรวจสอบและยืนยันว่าแต่ละงวดมีสินค้าอย่างน้อยหนึ่งรายการ',
-      flowTemplateNotFound: 'ไม่พบขั้นตอนการทำงาน',
-      taskOrderNotFound: 'ไม่พบใบสั่งงาน',
-      quotationNotFound: 'ไม่พบใบเสนอราคา',
-      sameNameExists: 'ชื่อนี้ถูกใช้ไปแล้ว',
       requestWorkMustReady: 'ใบรายการคำขอต้องพร้อมดำเนินการ',
+
+      notValidImage: 'รูปภาพไม่ถูกต้อง',
+      minimumBranchNotMet: 'ต้องมีอย่างน้อยหนึ่งสาขาสำหรับผู้ใช้',
+      requireOneMinBranch: 'ต้องมีอย่างน้อยหนึ่งสาขาเป็นสำนักงานใหญ่',
+      reqMinAffilatedBranch:
+        'คุณต้องมีสาขาที่เกี่ยวข้องอย่างน้อยหนึ่งสาขา หรือระบุสาขาที่จะลงทะเบียน (ต้องมีสิทธิ์ระบบ)',
+      paymentNotSuccess: 'การชำระเงินไม่สำเร็จ',
+      flowAccountError: 'เกิดข้อผิดพลาดใน FlowAccount',
+      InvoiceReceiptIssueFailed: 'ไม่สามารถออกใบแจ้งหนี้/ใบเสร็จรับเงินได้',
+      QuotationWorkerExceed: 'จำนวนพนักงานเกินขีดจำกัดสูงสุดของใบเสนอราคา',
+      taskListNotPending:
+        'มีงานหนึ่งงานหรือมากกว่าที่ไม่อยู่ในสถานะรอดำเนินการ',
+      reqNotMet: 'ไม่ตรงกัน',
     },
   },
 

From 98793e46c9de8a846c6e7dfd2a3c656a78dfd57f Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 10 Feb 2025 17:17:38 +0700
Subject: [PATCH 07/40] refactor: add id of select

---
 src/components/shared/select/SelectBranch.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/shared/select/SelectBranch.vue b/src/components/shared/select/SelectBranch.vue
index 13300c5a..b18a1e51 100644
--- a/src/components/shared/select/SelectBranch.vue
+++ b/src/components/shared/select/SelectBranch.vue
@@ -75,6 +75,7 @@ function setDefaultValue() {
 </script>
 <template>
   <SelectInput
+    for="select-hq-id"
     v-model="value"
     incremental
     :label

From 62aaf807eb3524d5775eea8ec8f6c6f1efa79d2d Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 17 Feb 2025 09:25:36 +0700
Subject: [PATCH 08/40] refactor: edit i18n

---
 src/i18n/tha.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 10fd3201..536ae9c7 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -712,7 +712,7 @@ export default {
     product: {
       title: 'สินค้าและบริการ',
       code: 'รหัสสินค้าและบริการ',
-      name: 'ชื่อกลุ่มสินค้าและบริการ',
+      name: 'ชื่อสินค้าและบริการ',
       registeredBranch: 'สาขาที่ลงทะเบียน',
       noProduct: 'ยังไม่มีสินค้าและบริการ',
       allProduct: 'สินค้าและบริการทั้งหมด',

From dec7bf30140816501e84a27a73fd99cc1f32bd84 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 17 Feb 2025 09:54:56 +0700
Subject: [PATCH 09/40] fix: bug #182 handle product group delete in tree

---
 src/pages/04_product-service/MainPage.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 1523e5d7..3799efc9 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1262,6 +1262,11 @@ async function submitService(notClose = false) {
       onCreateImageList.value,
     );
     if (res) {
+      const group = productGroup.value?.find(
+        (g) => g.id === currentIdGroup.value,
+      );
+      if (group) group.status = 'ACTIVE';
+
       allStat.value[1].count = allStat.value[1].count + 1;
       stat.value[1].count = stat.value[1].count + 1;
     } else {
@@ -1306,6 +1311,11 @@ async function submitProduct(notClose = false) {
     );
 
     if (res) {
+      const group = productGroup.value?.find(
+        (g) => g.id === currentIdGroup.value,
+      );
+      if (group) group.status = 'ACTIVE';
+
       allStat.value[2].count = allStat.value[2].count + 1;
       stat.value[2].count = stat.value[2].count + 1;
     } else {

From 0d22b766afc07af932fc16abbde4a76ada085f5e Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 17 Feb 2025 10:15:32 +0700
Subject: [PATCH 10/40] fix: bug #184 clear formData when create new item

---
 src/pages/04_flow-managment/MainPage.vue      | 6 ++++++
 src/pages/07_agencies-management/MainPage.vue | 1 +
 2 files changed, 7 insertions(+)

diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index 648a116e..9a400d52 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -101,6 +101,12 @@ const columns = [
 
 function triggerDialog(type: 'add' | 'edit' | 'view') {
   if (type === 'add') {
+    registeredBranchId.value = '';
+    formDataWorkflow.value = {
+      status: 'CREATED',
+      name: '',
+      step: [],
+    };
     pageState.addModal = true;
     pageState.isDrawerEdit = true;
   }
diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index 04decf0b..c1ab81b4 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -112,6 +112,7 @@ const onCreateImageList = ref<{
 
 function triggerDialog(type: 'add' | 'edit' | 'view') {
   if (type === 'add') {
+    formData.value = structuredClone(blankFormData);
     pageState.addModal = true;
     pageState.isDrawerEdit = true;
   }

From 0d360fdbdeeea15c9ada512a026760972ff5ae3c Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 17 Feb 2025 10:59:41 +0700
Subject: [PATCH 11/40] refactor: add id

---
 .../04_flow-management/FormFlow.vue           | 27 ++++++++++++-------
 src/components/button/ToggleButton.vue        |  7 ++++-
 src/components/dialog/DialogProperties.vue    |  2 ++
 src/pages/04_flow-managment/MainPage.vue      |  3 ++-
 4 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/04_flow-management/FormFlow.vue b/src/components/04_flow-management/FormFlow.vue
index f1483905..928bc53b 100644
--- a/src/components/04_flow-management/FormFlow.vue
+++ b/src/components/04_flow-management/FormFlow.vue
@@ -199,7 +199,7 @@ onMounted(async () => {
         outlined
         dense
         class="col"
-        id="input-flow-template-name"
+        for="input-flow-template-name"
         v-model="flowData.name"
         hide-bottom-space
         :label="$t(`general.name`, { msg: $t('flow.step') })"
@@ -255,8 +255,8 @@ onMounted(async () => {
                 <div class="row items-center q-py-sm full-width">
                   <q-btn
                     v-if="!readonly"
-                    id="btn-work-up-product"
-                    for="btn-work-up-product"
+                    :id="`btn-work-up-product-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
+                    :for="`btn-work-up-product-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
                     icon="mdi-arrow-up"
                     dense
                     flat
@@ -270,8 +270,8 @@ onMounted(async () => {
                   />
                   <q-btn
                     v-if="!readonly"
-                    id="btn-work-down-product"
-                    for="btn-work-down-product"
+                    :id="`btn-work-down-product-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
+                    :for="`btn-work-down-product-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
                     icon="mdi-arrow-down"
                     dense
                     flat
@@ -376,7 +376,7 @@ onMounted(async () => {
                   </div> -->
                   <q-btn
                     v-if="!readonly"
-                    id="btn-delete-work"
+                    :id="`btn-delete-work-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
                     icon="mdi-trash-can-outline"
                     dense
                     flat
@@ -399,6 +399,7 @@ onMounted(async () => {
               >
                 <div class="row q-col-gutter-sm">
                   <q-input
+                    :for="`textarea-detail-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
                     :bg-color="readonly ? 'transparent' : ''"
                     :readonly
                     class="col-md-6 col-12"
@@ -411,7 +412,6 @@ onMounted(async () => {
                       (v) => (step.detail = v?.toString() || '')
                     "
                   />
-
                   <div class="col-md-6 col-12">
                     <div
                       class="surface-1 rounded bordered full-height"
@@ -434,7 +434,7 @@ onMounted(async () => {
                         </div>
                         <q-btn
                           v-if="!readonly"
-                          id="btn-add-work-product"
+                          :id="`btn-add-work-product-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
                           class="text-capitalize rounded absolute-top-right"
                           flat
                           dense
@@ -465,6 +465,7 @@ onMounted(async () => {
                   <q-select
                     v-if="step.responsiblePersonId"
                     behavior="menu"
+                    :for="`select-responsible-person-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
                     :bg-color="readonly ? 'transparent' : ''"
                     :readonly
                     outlined
@@ -550,7 +551,7 @@ onMounted(async () => {
                       <q-list>
                         <q-item>
                           <q-input
-                            for="input-search"
+                            :for="`input-search-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
                             outlined
                             dense
                             :label="$t('general.search')"
@@ -582,7 +583,10 @@ onMounted(async () => {
                           class="column"
                           @click.stop="selectResponsiblePerson(index, person)"
                         >
-                          <div class="row items-center no-wrap">
+                          <div
+                            class="row items-center no-wrap"
+                            :id="`select-responsible-person-${index}-${person.firstName || person.firstNameEN}-${onDrawer ? 'drawer' : 'dialog'}`"
+                          >
                             <q-checkbox
                               size="xs"
                               :model-value="
@@ -652,6 +656,7 @@ onMounted(async () => {
                         >
                           <div class="row items-center">
                             <q-checkbox
+                              :id="`select-area-${index}`"
                               v-model="step.messengerByArea"
                               size="xs"
                             ></q-checkbox>
@@ -667,6 +672,7 @@ onMounted(async () => {
                   <!-- RESPONSIBLE-AGENCIES, RESPONSIBLE-INSTITUTION -->
                   <q-select
                     behavior="menu"
+                    :for="`select-responsible-institution-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
                     :bg-color="readonly ? 'transparent' : ''"
                     :readonly
                     outlined
@@ -737,6 +743,7 @@ onMounted(async () => {
                         v-if="step.responsibleInstitution"
                       >
                         <q-checkbox
+                          :id="`select-responsible-institution-${index}-${opt.label}-${onDrawer ? 'drawer' : 'dialog'}`"
                           :model-value="
                             step.responsibleInstitution.some(
                               (v: string) => v === opt.value,
diff --git a/src/components/button/ToggleButton.vue b/src/components/button/ToggleButton.vue
index 03530bb7..32854528 100644
--- a/src/components/button/ToggleButton.vue
+++ b/src/components/button/ToggleButton.vue
@@ -18,7 +18,12 @@ function handleClick() {
 </script>
 <template>
   <label class="switch" @click.stop="handleClick">
-    <input type="checkbox" :disabled="twoWay || disable" v-model="model" />
+    <input
+      id="btn-toggle"
+      type="checkbox"
+      :disabled="twoWay || disable"
+      v-model="model"
+    />
     <div class="slider round" :class="{ disable: disable }"></div>
   </label>
 </template>
diff --git a/src/components/dialog/DialogProperties.vue b/src/components/dialog/DialogProperties.vue
index 231937d0..d8b3b65e 100644
--- a/src/components/dialog/DialogProperties.vue
+++ b/src/components/dialog/DialogProperties.vue
@@ -365,6 +365,8 @@ watch(
             {{ $t('flow.stepNo', { msg: (props.stepIndex || stepIndex) + 1 }) }}
             <span class="app-text-muted">: {{ step.name }}</span>
             <q-btn-dropdown
+              for="select-step"
+              id="select-step"
               unelevated
               no-icon-animation
               size="sm"
diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index 9a400d52..8cada9a1 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -636,6 +636,7 @@ watch([() => pageState.inputSearch, workflowPageSize], () => {
                   <q-td style="width: 20%" class="text-right">
                     <q-btn
                       icon="mdi-eye-outline"
+                      :id="`btn-eye-${props.row.name}`"
                       size="sm"
                       dense
                       round
@@ -648,7 +649,7 @@ watch([() => pageState.inputSearch, workflowPageSize], () => {
                       "
                     />
                     <KebabAction
-                      :id-name="props.row.id"
+                      :id-name="props.row.name"
                       :status="props.row.status"
                       @view="
                         () => {

From e7897fba32ecfdd383a872caf4280b8bce4a1813 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 17 Feb 2025 11:49:45 +0700
Subject: [PATCH 12/40] refactor: add i18n of product and service

---
 .../04_product-service/BasicInfoProduct.vue   |  1 +
 .../04_product-service/FormDocument.vue       |  3 +++
 .../04_product-service/PriceDataComponent.vue |  3 +++
 .../WorkManagementComponent.vue               | 26 +++++++++----------
 src/components/dialog/DialogProperties.vue    | 10 +++----
 src/components/shared/select/SelectFlow.vue   |  1 +
 src/pages/04_product-service/MainPage.vue     |  1 +
 7 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/components/04_product-service/BasicInfoProduct.vue b/src/components/04_product-service/BasicInfoProduct.vue
index e3de24cb..1b177da2 100644
--- a/src/components/04_product-service/BasicInfoProduct.vue
+++ b/src/components/04_product-service/BasicInfoProduct.vue
@@ -222,6 +222,7 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
           dense
         >
           <q-editor
+            id="input-detail"
             dense
             :model-value="readonly ? detail || '-' : detail"
             @update:model-value="
diff --git a/src/components/04_product-service/FormDocument.vue b/src/components/04_product-service/FormDocument.vue
index f875122c..8b368e5b 100644
--- a/src/components/04_product-service/FormDocument.vue
+++ b/src/components/04_product-service/FormDocument.vue
@@ -106,6 +106,7 @@ function optionSearch(val: string | null) {
 
     <div class="col-12 row q-col-gutter-sm">
       <q-select
+        for="select-attachment"
         behavior="menu"
         :readonly
         outlined
@@ -150,6 +151,7 @@ function optionSearch(val: string | null) {
               {{ $t('general.add', { text: $t('general.attachment') }) }}
             </q-item> -->
             <q-item
+              for="select-all"
               dense
               clickable
               class="flex items-center"
@@ -172,6 +174,7 @@ function optionSearch(val: string | null) {
           </template>
           <template #option="{ opt }">
             <q-checkbox
+              :id="`select-${opt.label}`"
               :model-value="attachment.some((v) => v === opt.value)"
               class="q-pr-sm"
               size="xs"
diff --git a/src/components/04_product-service/PriceDataComponent.vue b/src/components/04_product-service/PriceDataComponent.vue
index 4c3d3df9..59043144 100644
--- a/src/components/04_product-service/PriceDataComponent.vue
+++ b/src/components/04_product-service/PriceDataComponent.vue
@@ -260,6 +260,7 @@ withDefaults(
               </template>
               <template v-if="col.name === '#vatIncluded'">
                 <q-select
+                  for="select-vat-included"
                   :options="[
                     { label: $t('general.included'), value: true },
                     { label: $t('general.notIncluded'), value: false },
@@ -278,6 +279,7 @@ withDefaults(
                     { label: $t('general.notIncluded'), value: false },
                   ]"
                   v-if="priceDisplay?.agentPrice && props.rowIndex === 1"
+                  for="select-vat-included"
                   map-options
                   emit-value
                   flat
@@ -291,6 +293,7 @@ withDefaults(
                     { label: $t('general.notIncluded'), value: false },
                   ]"
                   v-if="priceDisplay?.serviceCharge && props.rowIndex === 2"
+                  for="select-vat-included"
                   map-options
                   emit-value
                   flat
diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index ec2e9905..2bf5db83 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -127,8 +127,8 @@ watch(
           <div class="row items-center q-py-sm full-width" @click.stop>
             <q-btn
               v-if="!readonly"
-              id="btn-work-up-product"
-              for="btn-work-up-product"
+              :id="`btn-work-up-product-${workIndex}`"
+              :for="`btn-work-up-product-${workIndex}`"
               icon="mdi-arrow-up"
               dense
               flat
@@ -139,8 +139,8 @@ watch(
             />
             <q-btn
               v-if="!readonly"
-              id="btn-work-down-product"
-              for="btn-work-down-product"
+              :id="`btn-work-down-product-${workIndex}`"
+              :for="`btn-work-down-product-${workIndex}`"
               icon="mdi-arrow-down"
               dense
               flat
@@ -244,7 +244,7 @@ watch(
             <div :class="{ 'col-12 row justify-end q-mt-sm': $q.screen.lt.md }">
               <q-btn
                 v-if="!readonly"
-                id="btn-delete-work"
+                :id="`btn-delete-work-${workIndex}`"
                 icon="mdi-trash-can-outline"
                 dense
                 flat
@@ -290,8 +290,8 @@ watch(
               <AddButton
                 v-if="!readonly"
                 icon-only
-                id="btn-add-work-product"
-                for="btn-add-work-product"
+                :id="`btn-add-work-product-${workIndex}`"
+                :for="`btn-add-work-product-${workIndex}`"
                 @click.stop="$emit('addProduct')"
               />
             </span>
@@ -317,7 +317,7 @@ watch(
                 >
                   <q-btn
                     v-if="!readonly"
-                    id="btn-product-up"
+                    :id="`btn-product-up-${index}`"
                     icon="mdi-arrow-up"
                     dense
                     flat
@@ -329,8 +329,8 @@ watch(
                   />
                   <q-btn
                     v-if="!readonly"
-                    id="btn-product-down"
-                    for="btn-product-down"
+                    :id="`btn-product-down-${index}`"
+                    :for="`btn-product-down-${index}`"
                     icon="mdi-arrow-down"
                     dense
                     flat
@@ -482,8 +482,8 @@ watch(
                 <q-btn
                   v-if="!readonly"
                   class="q-ml-md"
-                  id="btn-delete-work-product"
-                  for="btn-delete-work-product"
+                  :id="`btn-delete-work-product-${index}`"
+                  :for="`btn-delete-work-product-${index}`"
                   icon="mdi-trash-can-outline"
                   padding="0"
                   dense
@@ -521,7 +521,7 @@ watch(
                 </span>
                 <q-btn
                   v-if="!readonly"
-                  id="btn-add-work-product"
+                  :id="`btn-add-work-product-${workIndex}`"
                   class="text-capitalize rounded"
                   flat
                   dense
diff --git a/src/components/dialog/DialogProperties.vue b/src/components/dialog/DialogProperties.vue
index d8b3b65e..1e33a7f5 100644
--- a/src/components/dialog/DialogProperties.vue
+++ b/src/components/dialog/DialogProperties.vue
@@ -465,7 +465,7 @@ watch(
             >
               <div class="col-md col-12 row items-center">
                 <q-btn
-                  id="btn-move-up-product"
+                  :id="`btn-move-up-product-${propIndex}`"
                   icon="mdi-arrow-up"
                   dense
                   flat
@@ -481,7 +481,7 @@ watch(
                   "
                 />
                 <q-btn
-                  id="btn-move-down-product"
+                  :id="`btn-move-down-product-${propIndex}`"
                   icon="mdi-arrow-down"
                   dense
                   flat
@@ -515,7 +515,7 @@ watch(
                   emit-value
                   map-options
                   hide-bottom-space
-                  for="input-properties-name"
+                  :for="`input-properties-name-${propIndex}`"
                   class="col-md col-12 q-mr-md"
                   :class="{ 'q-my-sm': $q.screen.lt.md }"
                   :label="$t('productService.service.propertiesName')"
@@ -554,8 +554,8 @@ watch(
                   emit-value
                   map-options
                   hide-bottom-space
-                  for="input-properties-type"
-                  id="input-properties-type"
+                  :for="`input-properties-type-${propIndex}`"
+                  :id="`input-properties-type-${propIndex}`"
                   :label="$t('general.type')"
                   option-value="value"
                   @update:model-value="
diff --git a/src/components/shared/select/SelectFlow.vue b/src/components/shared/select/SelectFlow.vue
index 7f3aaa07..3b5d55ec 100644
--- a/src/components/shared/select/SelectFlow.vue
+++ b/src/components/shared/select/SelectFlow.vue
@@ -73,6 +73,7 @@ function setDefaultValue() {
 </script>
 <template>
   <SelectInput
+    for="select-work-flow-template"
     v-model="value"
     incremental
     :label
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 3799efc9..b8142d94 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -4347,6 +4347,7 @@ watch(
             class="split-pay q-mx-sm"
             input-class="text-caption text-right"
             type="number"
+            for="dialog-input-installments"
             v-model="formService.installments"
           />
           {{ $t('quotation.receiptDialog.installments') }}

From 4c4eb8443a18d8ab301790cf1e89c6c89dd8c20b Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 17 Feb 2025 16:09:26 +0700
Subject: [PATCH 13/40] refactor: id use value

---
 src/components/04_flow-management/FormFlow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/04_flow-management/FormFlow.vue b/src/components/04_flow-management/FormFlow.vue
index 928bc53b..3e4b264e 100644
--- a/src/components/04_flow-management/FormFlow.vue
+++ b/src/components/04_flow-management/FormFlow.vue
@@ -743,7 +743,7 @@ onMounted(async () => {
                         v-if="step.responsibleInstitution"
                       >
                         <q-checkbox
-                          :id="`select-responsible-institution-${index}-${opt.label}-${onDrawer ? 'drawer' : 'dialog'}`"
+                          :id="`select-responsible-institution-${index}-${opt.value}-${onDrawer ? 'drawer' : 'dialog'}`"
                           :model-value="
                             step.responsibleInstitution.some(
                               (v: string) => v === opt.value,

From 4bb2a567cf2ba3554a97f6ab66cf6a16b6caea90 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 18 Feb 2025 09:54:57 +0700
Subject: [PATCH 14/40] refactor: add id of agencies

---
 src/pages/07_agencies-management/MainPage.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index c1ab81b4..a06eb2d3 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -682,6 +682,7 @@ watch(
                   <q-td>
                     <q-btn
                       icon="mdi-eye-outline"
+                      :id="`btn-eye-${props.row.name}`"
                       size="sm"
                       dense
                       round
@@ -694,7 +695,7 @@ watch(
                       "
                     />
                     <KebabAction
-                      :id-name="props.row.id"
+                      :id-name="props.row.name"
                       :status="props.row.status"
                       @view="
                         () => {

From 2ee65233f26bbce23e0fe21751e20b566c8da986 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 18 Feb 2025 11:11:47 +0700
Subject: [PATCH 15/40] refactor: set status to undefined when editing
 institution

---
 src/pages/07_agencies-management/MainPage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index a06eb2d3..8025ea58 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -188,6 +188,7 @@ async function submit(opt?: { selectedImage: string }) {
   ) {
     const ret = await institutionStore.editInstitution(
       Object.assign(payload, {
+        status: undefined,
         id: currAgenciesData.value.id,
         selectedImage: opt?.selectedImage || undefined,
       }),

From 758b00576809f6bca835bbc4256dd3b7b1b3d6cd Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 18 Feb 2025 17:13:36 +0700
Subject: [PATCH 16/40] refactor: add id

---
 src/components/05_quotation/TableQuotation.vue        | 6 +++---
 src/components/shared/select/SelectCustomer.vue       | 3 +++
 src/components/shared/table/TableWorker.vue           | 7 ++++++-
 src/pages/05_quotation/MainPage.vue                   | 1 +
 src/pages/05_quotation/PaymentForm.vue                | 4 ++++
 src/pages/05_quotation/QuotationForm.vue              | 9 +++++++++
 src/pages/05_quotation/QuotationFormProductSelect.vue | 2 ++
 src/pages/05_quotation/QuotationFormWorkerSelect.vue  | 6 +++++-
 src/pages/05_quotation/TableRequest.vue               | 1 +
 src/pages/08_request-list/TableRequestList.vue        | 3 ++-
 src/pages/11_credit-note/TableCreditNote.vue          | 1 +
 src/pages/12_debit-note/TableDebitNote.vue            | 1 +
 12 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/components/05_quotation/TableQuotation.vue b/src/components/05_quotation/TableQuotation.vue
index e51b9979..e3d46c56 100644
--- a/src/components/05_quotation/TableQuotation.vue
+++ b/src/components/05_quotation/TableQuotation.vue
@@ -127,7 +127,7 @@ defineEmits<{
 
         <q-td class="text-right">
           <q-btn
-            :id="`btn-eye-${props.row.firstName}`"
+            :id="`btn-preview-${props.row.workName}`"
             icon="mdi-play-box-outline"
             size="sm"
             dense
@@ -137,7 +137,7 @@ defineEmits<{
           />
 
           <q-btn
-            :id="`btn-eye-${props.row.firstName}`"
+            :id="`btn-eye-${props.row.workName}`"
             icon="mdi-eye-outline"
             size="sm"
             dense
@@ -147,7 +147,7 @@ defineEmits<{
           />
 
           <KebabAction
-            :idName="`btn-kebab-${props.row.firstName}`"
+            :idName="`btn-kebab-${props.row.workName}`"
             status="'ACTIVE'"
             hide-toggle
             hide-delete
diff --git a/src/components/shared/select/SelectCustomer.vue b/src/components/shared/select/SelectCustomer.vue
index 5644dd79..8adecb3c 100644
--- a/src/components/shared/select/SelectCustomer.vue
+++ b/src/components/shared/select/SelectCustomer.vue
@@ -72,6 +72,7 @@ onMounted(async () => {
     v-model="value"
     option-value="id"
     incremental
+    for="select-customer"
     :label
     :placeholder
     :readonly
@@ -129,6 +130,8 @@ onMounted(async () => {
         clickable
         v-close-popup
         @click.stop="$emit('create')"
+        for="select-customer-add-new"
+        id="select-customer-add-new"
       >
         <q-item-section>
           <span class="row items-center">
diff --git a/src/components/shared/table/TableWorker.vue b/src/components/shared/table/TableWorker.vue
index 73d446ac..4ec870bc 100644
--- a/src/components/shared/table/TableWorker.vue
+++ b/src/components/shared/table/TableWorker.vue
@@ -142,6 +142,7 @@ function selectedIndex(item: Employee) {
           </template>
           <template v-if="col.name === '#check'">
             <q-checkbox
+              id="select-worker-all"
               v-model="props.selected"
               @update:model-value="(v) => handleUpdate()"
               size="sm"
@@ -193,7 +194,11 @@ function selectedIndex(item: Employee) {
               !disabledWorkerId?.some((id) => id === props.row.id)
             "
           >
-            <q-checkbox v-model="props.selected" size="sm" />
+            <q-checkbox
+              v-model="props.selected"
+              size="sm"
+              :id="`select-worker-${props.row.firstName}`"
+            />
           </template>
         </q-td>
       </q-tr>
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 12fae417..410a6bbf 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -894,6 +894,7 @@ async function storeDataLocal(id: string) {
         :text="value.text"
         :icon-color="value.iconColor"
         :bg-color="value.color"
+        :id="`btn-add-new-${value.text}`"
         @trigger="
           () => {
             triggerCreateCustomerd({
diff --git a/src/pages/05_quotation/PaymentForm.vue b/src/pages/05_quotation/PaymentForm.vue
index 89ae4fd1..06566ead 100644
--- a/src/pages/05_quotation/PaymentForm.vue
+++ b/src/pages/05_quotation/PaymentForm.vue
@@ -514,6 +514,7 @@ onMounted(async () => {
 
                     <div class="q-ml-auto row" style="gap: 10px">
                       <q-btn
+                        id="btn-payment"
                         @click.stop
                         unelevated
                         padding="4px 8px"
@@ -552,6 +553,7 @@ onMounted(async () => {
                               :key="opts.status"
                             >
                               <q-item
+                                :id="`btn-payment-${opts.status}`"
                                 v-if="
                                   (p.paymentStatus === 'PaymentWait' &&
                                     opts.status !== 'PaymentRetry') ||
@@ -591,6 +593,7 @@ onMounted(async () => {
                       flat
                       rounded
                       padding="0"
+                      id="btn-show-file"
                       :icon="`mdi-chevron-${state.payExpansion[i] ? 'down' : 'up'}`"
                       @click.stop="
                         state.payExpansion[i] = !state.payExpansion[i]
@@ -625,6 +628,7 @@ onMounted(async () => {
                   }}
                   <q-btn
                     unelevated
+                    id="btn-upload-file"
                     :label="$t('general.upload')"
                     rounded
                     class="app-bg-info q-mt-sm"
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 592deee0..6a83c4ba 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -1421,6 +1421,7 @@ async function formDownload() {
           >
             <button
               v-for="value in statusQuotationForm"
+              :id="`btn-status-${value.title}`"
               :key="value.title"
               class="q-pa-sm bordered status-color row items-center"
               :class="{
@@ -1553,6 +1554,8 @@ async function formDownload() {
                   </div>
                   <nav class="q-ml-auto">
                     <AddButton
+                      id="btn-add-worker"
+                      for="btn-add-worker"
                       v-if="
                         !readonly &&
                         (!quotationFormState.source ||
@@ -1565,6 +1568,8 @@ async function formDownload() {
                       @click.stop="triggerSelectEmployeeDialog"
                     />
                     <AddButton
+                      id="btn-add-worker"
+                      for="btn-add-worker"
                       v-if="
                         !!quotationFormState.source &&
                         quotationFormState.source.quotationStatus !==
@@ -1621,6 +1626,7 @@ async function formDownload() {
                       v-if="!readonly"
                       icon-only
                       class="q-ml-auto"
+                      id="trigger-product-service-dialog"
                       @click.stop="triggerProductServiceDialog"
                     />
                   </nav>
@@ -2243,6 +2249,7 @@ async function formDownload() {
           outlined
           icon="mdi-play-box-outline"
           color="207 96% 32%"
+          id="btn-view-example"
           @click="storeDataLocal"
         >
           {{ $t('general.view', { msg: $t('general.example') }) }}
@@ -2258,6 +2265,7 @@ async function formDownload() {
             solid
             icon="mdi-account-multiple-check-outline"
             color="207 96% 32%"
+            id="btn-submit-accepted"
             @click="
               () => {
                 submitAccepted();
@@ -2273,6 +2281,7 @@ async function formDownload() {
             solid
             icon="mdi-account-multiple-check-outline"
             color="207 96% 32%"
+            id="btn-select-invoice"
             @click="
               () => {
                 view = View.Invoice;
diff --git a/src/pages/05_quotation/QuotationFormProductSelect.vue b/src/pages/05_quotation/QuotationFormProductSelect.vue
index dc7868bb..0a22545b 100644
--- a/src/pages/05_quotation/QuotationFormProductSelect.vue
+++ b/src/pages/05_quotation/QuotationFormProductSelect.vue
@@ -508,6 +508,7 @@ watch(
                   flat
                   rounded
                   icon="mdi-store-plus-outline"
+                  id="trigger-add-dialog"
                   @click="triggerAddDialog"
                 />
                 <q-btn
@@ -515,6 +516,7 @@ watch(
                   flat
                   rounded
                   icon="mdi-information-outline"
+                  id="trigger-info"
                   @click="triggerInfo"
                   :color="pageState.infoDrawer ? 'info' : ''"
                   style="color: hsl(var(--text-mute))"
diff --git a/src/pages/05_quotation/QuotationFormWorkerSelect.vue b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
index e03a02f4..90c1cc41 100644
--- a/src/pages/05_quotation/QuotationFormWorkerSelect.vue
+++ b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
@@ -289,6 +289,7 @@ watch(() => state.search, getWorkerList);
             <q-menu class="bordered" ref="refMenu">
               <q-list>
                 <q-item
+                  id="trigger-create-employee"
                   v-close-popup
                   dense
                   clickable
@@ -308,6 +309,7 @@ watch(() => state.search, getWorkerList);
                 </q-item>
 
                 <q-item
+                  id="import-worker"
                   v-close-popup
                   dense
                   clickable
@@ -470,6 +472,7 @@ watch(() => state.search, getWorkerList);
                 <template #grid="{ item: emp, index }">
                   <div :key="emp.id" class="col-md-2 col-sm-6 col-12">
                     <button
+                      :id="`select-worker-${emp.firstName}`"
                       class="selectable-item full-width"
                       :class="{
                         ['selectable-item__selected']:
@@ -520,11 +523,12 @@ watch(() => state.search, getWorkerList);
     </div>
     <template #footer>
       <div class="q-gutter-x-xs q-ml-auto">
-        <CancelButton outlined @click="clean" />
+        <CancelButton id="btn-cancel" outlined @click="clean" />
         <MainButton
           icon="mdi-check"
           color="207 96% 32%"
           solid
+          id="btn-success"
           @click="
             emits('success', {
               worker: workerSelected,
diff --git a/src/pages/05_quotation/TableRequest.vue b/src/pages/05_quotation/TableRequest.vue
index bd15da5b..60eda59e 100644
--- a/src/pages/05_quotation/TableRequest.vue
+++ b/src/pages/05_quotation/TableRequest.vue
@@ -102,6 +102,7 @@ function goToRequestList(id: string) {
           <template v-if="col.name === '#codeRequest'">
             <span
               class="cursor-pointer link"
+              :id="`go-to-request-list-${props.row.code}`"
               @click="goToRequestList(props.row.id)"
             >
               {{ props.row.code }}
diff --git a/src/pages/08_request-list/TableRequestList.vue b/src/pages/08_request-list/TableRequestList.vue
index 3b8d2cdb..8bcf03a3 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -186,7 +186,7 @@ function getEmployeeName(
         </q-td>
         <q-td class="text-right">
           <q-btn
-            :id="`btn-eye-${props.row.quotation.workName}`"
+            :id="`btn-eye-${props.row.code}`"
             icon="mdi-eye-outline"
             size="sm"
             dense
@@ -196,6 +196,7 @@ function getEmployeeName(
           />
 
           <KebabAction
+            :id-name="`btn-kebab-${props.row.code}`"
             hide-edit
             hide-toggle
             hide-view
diff --git a/src/pages/11_credit-note/TableCreditNote.vue b/src/pages/11_credit-note/TableCreditNote.vue
index 879b5fbd..ed82be7d 100644
--- a/src/pages/11_credit-note/TableCreditNote.vue
+++ b/src/pages/11_credit-note/TableCreditNote.vue
@@ -74,6 +74,7 @@ const visible = computed(() =>
 
           <template v-if="col.name === '#action'">
             <KebabAction
+              :id-name="`btn-kebab-${props.row.quotation.workName}`"
               hide-edit
               hide-toggle
               :hide-delete
diff --git a/src/pages/12_debit-note/TableDebitNote.vue b/src/pages/12_debit-note/TableDebitNote.vue
index 77d26d18..f94bf9e6 100644
--- a/src/pages/12_debit-note/TableDebitNote.vue
+++ b/src/pages/12_debit-note/TableDebitNote.vue
@@ -77,6 +77,7 @@ const visible = computed(() =>
 
           <template v-if="col.name === '#action'">
             <KebabAction
+              :id-name="`btn-kebab-${props.row.workName}`"
               hide-toggle
               hide-edit
               @edit="$emit('edit', props.row)"

From 4f4aa5a76f5b1f730eb2f6464a25876a069475f4 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Wed, 19 Feb 2025 13:38:58 +0700
Subject: [PATCH 17/40] refactor: add id btn

---
 src/pages/05_quotation/QuotationForm.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 6a83c4ba..d02e4f14 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -2305,6 +2305,7 @@ async function formDownload() {
             solid
             icon="mdi-account-multiple-check-outline"
             color="207 96% 32%"
+            id="btn-approve-invoice"
             @click="
               () => {
                 convertInvoiceToSubmit();
@@ -2328,15 +2329,18 @@ async function formDownload() {
           <UndoButton
             outlined
             @click="closeTab()"
+            id="btn-undo"
             v-if="quotationFormState.mode === 'edit'"
           />
           <CloseButton
             outlined
+            id="btn-close"
             @click="closeTab()"
             v-if="quotationFormState.mode === 'info' && closeAble()"
           />
           <SaveButton
             type="submit"
+            id="btn-save"
             v-if="
               quotationFormState.mode === 'create' ||
               quotationFormState.mode === 'edit'
@@ -2347,6 +2351,7 @@ async function formDownload() {
           <EditButton
             v-else
             class="no-print"
+            id="btn-edit"
             @click="quotationFormState.mode = 'edit'"
             solid
           />

From 415ea3853de02c5ae8c4b1ec7e50b3564bdd5c51 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 19 Feb 2025 13:52:38 +0700
Subject: [PATCH 18/40] refactor: add system error messages for English and
 Thai translations

---
 src/i18n/eng.ts | 1 +
 src/i18n/tha.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 7aabe58f..3f0f0110 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -1173,6 +1173,7 @@ export default {
       QuotationWorkerExceed: 'Worker exceed current quotation max worker.',
       taskListNotPending: 'One or more task is not pending.',
       reqNotMet: 'Not Match',
+      systemError: 'A system error occurred.',
     },
   },
 
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 536ae9c7..1883b158 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -1155,6 +1155,7 @@ export default {
       taskListNotPending:
         'มีงานหนึ่งงานหรือมากกว่าที่ไม่อยู่ในสถานะรอดำเนินการ',
       reqNotMet: 'ไม่ตรงกัน',
+      systemError: 'ระบบเกิดข้อผิดพลาด',
     },
   },
 

From d13a4769a5c7c818367fec5ff19750ab6a453541 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 19 Feb 2025 14:40:18 +0700
Subject: [PATCH 19/40] refactor: clear quotationId on create credit and debit
 notes

---
 src/pages/11_credit-note/MainPage.vue | 4 +++-
 src/pages/12_debit-note/MainPage.vue  | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/11_credit-note/MainPage.vue b/src/pages/11_credit-note/MainPage.vue
index ee12ef7b..625435c3 100644
--- a/src/pages/11_credit-note/MainPage.vue
+++ b/src/pages/11_credit-note/MainPage.vue
@@ -88,6 +88,7 @@ async function triggerDelete(id: string) {
 }
 
 async function triggerCreateCreditNote() {
+  pageState.quotationId = '';
   pageState.creditDialog = true;
 }
 
@@ -428,6 +429,8 @@ watch(
             }}
           </div>
           <nav class="col-4 row justify-end">
+            {{ pageState.quotationId }}
+
             <PaginationComponent
               v-model:current-page="page"
               v-model:max-page="pageMax"
@@ -455,7 +458,6 @@ watch(
 
     <section class="q-pa-md col full-width">
       <div class="surface-1 rounded bordered q-pa-md full-height full-width">
-        <!-- TODO: bind quotation id -->
         <FormCredit v-model:quotation-id="pageState.quotationId" />
       </div>
     </section>
diff --git a/src/pages/12_debit-note/MainPage.vue b/src/pages/12_debit-note/MainPage.vue
index 42c7fca3..e695ae78 100644
--- a/src/pages/12_debit-note/MainPage.vue
+++ b/src/pages/12_debit-note/MainPage.vue
@@ -90,6 +90,7 @@ async function triggerDelete(id: string) {
 }
 
 async function triggerCreateDebitNote() {
+  pageState.quotationId = '';
   pageState.debitDialog = true;
 }
 
@@ -485,7 +486,6 @@ watch(
 
     <section class="q-pa-md col full-width">
       <div class="surface-1 rounded bordered q-pa-md full-height full-width">
-        <!-- TODO: bind quotation id -->
         <FormDebit v-model:quotation-id="pageState.quotationId" />
       </div>
     </section>

From 7be89d1d4f6c80e6dfe73030d1ef6796ddcd2119 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Wed, 19 Feb 2025 14:45:57 +0700
Subject: [PATCH 20/40] refactor: hide DebitNoteExpansion

---
 src/pages/12_debit-note/FormPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
index 4d89f7ef..946d6a91 100644
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -957,7 +957,7 @@ onMounted(async () => {
           />
 
           <DebitNoteExpansion
-            v-if="view === null"
+            v-if="false"
             :readonly
             v-model:reason="currentFormData.reason"
             v-model:detail="currentFormData.detail"

From 453252c4be42bd32231ea3e82e7516cd66ac3103 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 19 Feb 2025 16:26:46 +0700
Subject: [PATCH 21/40] refactor: handle undefined stats in credit note display

---
 src/pages/11_credit-note/MainPage.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/11_credit-note/MainPage.vue b/src/pages/11_credit-note/MainPage.vue
index 625435c3..782f2d12 100644
--- a/src/pages/11_credit-note/MainPage.vue
+++ b/src/pages/11_credit-note/MainPage.vue
@@ -157,7 +157,7 @@ watch(
           color: hsl(var(--info-bg));
         "
       >
-        {{ pageState.total }}
+        {{ stats.Pending + stats.Success || 0 }}
       </q-badge>
       <q-btn
         class="q-ml-sm"
@@ -181,13 +181,13 @@ watch(
             :branch="[
               {
                 icon: 'material-symbols-light:receipt-long',
-                count: stats[CreditNoteStatus.Pending],
+                count: stats[CreditNoteStatus.Pending] || 0,
                 label: `creditNote.stats.${CreditNoteStatus.Pending}`,
                 color: 'orange',
               },
               {
                 icon: 'mdi-check-decagram-outline',
-                count: stats[CreditNoteStatus.Success],
+                count: stats[CreditNoteStatus.Success] || 0,
                 label: `creditNote.stats.${CreditNoteStatus.Success}`,
                 color: 'blue',
               },

From 448d9156f9ffb72a093c6ab1882b93c1e4f37aa4 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Wed, 19 Feb 2025 17:03:15 +0700
Subject: [PATCH 22/40] refactor: stats missing and new tab

---
 src/i18n/eng.ts                      | 10 +++----
 src/i18n/tha.ts                      | 10 +++----
 src/pages/12_debit-note/MainPage.vue | 41 ++++++++++++++++------------
 src/pages/12_debit-note/constants.ts | 25 +++++++----------
 src/stores/debit-note/index.ts       | 13 ++++-----
 src/stores/debit-note/types.ts       | 10 +++----
 6 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 3f0f0110..34c63072 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -1306,11 +1306,11 @@ export default {
     },
 
     stats: {
-      Pending: 'Debit Note',
-      Expire: 'Expired',
-      Payment: 'Payment',
-      Receipt: 'Receipt',
-      Succeed: 'Completed',
+      Issued: 'Debit Note',
+      Expired: 'Expired',
+      PaymentPending: 'Payment',
+      PaymentSuccess: 'Receipt',
+      ProcessComplete: 'Completed',
     },
 
     viewMode: {
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 1883b158..4f481146 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -1288,11 +1288,11 @@ export default {
     },
 
     stats: {
-      Pending: 'ใบเพิ่มหนี้',
-      Expire: 'พ้นกำหนด',
-      Payment: 'ชำระเงิน',
-      Receipt: 'ใบเสร็จรับเงิน',
-      Succeed: 'เสร็จสิ้น',
+      Issued: 'ใบเพิ่มหนี้',
+      Expired: 'พ้นกำหนด',
+      PaymentPending: 'ชำระเงิน',
+      PaymentSuccess: 'ใบเสร็จรับเงิน',
+      ProcessComplete: 'เสร็จสิ้น',
     },
 
     viewMode: {
diff --git a/src/pages/12_debit-note/MainPage.vue b/src/pages/12_debit-note/MainPage.vue
index e695ae78..fd3780a9 100644
--- a/src/pages/12_debit-note/MainPage.vue
+++ b/src/pages/12_debit-note/MainPage.vue
@@ -35,7 +35,7 @@ const { stats, pageMax, page, data, pageSize } = storeToRefs(debitNote);
 // NOTE: Variable
 const pageState = reactive({
   quotationId: '',
-  currentTab: DebitNoteStatus.Pending,
+  currentTab: DebitNoteStatus.Issued,
   hideStat: false,
   statusFilter: 'None',
   inputSearch: '',
@@ -64,7 +64,9 @@ async function getList(opts?: { page?: number; pageSize?: number }) {
     page: opts?.page || page.value,
     pageSize: opts?.pageSize || pageSize.value,
     query: pageState.inputSearch === '' ? undefined : pageState.inputSearch,
-    deebitNoteStatus: pageState.currentTab as DebitNoteStatus | undefined,
+    status: (pageState.currentTab === DebitNoteStatus.Issued
+      ? undefined
+      : pageState.currentTab) as DebitNoteStatus,
     includeRegisteredBranch: true,
   });
 
@@ -126,7 +128,17 @@ onMounted(async () => {
   navigator.current.title = 'debitNote.title';
   navigator.current.path = [{ text: 'debitNote.caption', i18n: true }];
 
-  debitNote.getDebitNoteStats().then((res) => res && (stats.value = res));
+  await debitNote.getDebitNoteStats().then((res) => {
+    if (res) {
+      stats.value = res;
+
+      stats.value['issued'] = Object.values(res).reduce(
+        (sum, value) => sum + value,
+        0,
+      );
+    }
+  });
+
   getList();
 });
 
@@ -184,33 +196,28 @@ watch(
             :branch="[
               {
                 icon: 'material-symbols-light:receipt-long',
-                count: stats[DebitNoteStatus.Pending] || 0,
-                label: `debitNote.stats.${DebitNoteStatus.Pending}`,
+                count: stats['issued'] || 0,
+                label: `debitNote.stats.${DebitNoteStatus.Issued}`,
                 color: 'orange',
               },
-              {
-                icon: 'mdi-clock-alert-outline',
-                count: stats[DebitNoteStatus.Expire] || 0,
-                label: `debitNote.stats.${DebitNoteStatus.Expire}`,
-                color: 'cyan',
-              },
+
               {
                 icon: 'tabler:cash-register',
-                count: stats[DebitNoteStatus.Payment] || 0,
-                label: `debitNote.stats.${DebitNoteStatus.Payment}`,
+                count: stats['paymentPending'] || 0,
+                label: `debitNote.stats.${DebitNoteStatus.PaymentPending}`,
                 color: 'dark-orange',
               },
               {
                 icon: 'fluent:receipt-money-16-regular',
-                count: stats[DebitNoteStatus.Receipt] || 0,
-                label: `debitNote.stats.${DebitNoteStatus.Receipt}`,
+                count: stats['paymentSuccess'] || 0,
+                label: `debitNote.stats.${DebitNoteStatus.PaymentSuccess}`,
                 color: 'green',
               },
 
               {
                 icon: 'mdi-check-decagram-outline',
-                count: stats[DebitNoteStatus.Succeed] || 0,
-                label: `debitNote.stats.${DebitNoteStatus.Succeed}`,
+                count: stats['processComplete'] || 0,
+                label: `debitNote.stats.${DebitNoteStatus.ProcessComplete}`,
                 color: 'blue',
               },
             ]"
diff --git a/src/pages/12_debit-note/constants.ts b/src/pages/12_debit-note/constants.ts
index af2560cd..2434ea69 100644
--- a/src/pages/12_debit-note/constants.ts
+++ b/src/pages/12_debit-note/constants.ts
@@ -4,29 +4,24 @@ import { formatNumberDecimal } from 'src/stores/utils';
 
 export const taskStatusOpts = [
   {
-    status: DebitNoteStatus.Expire,
-    name: `debitNote.status.${DebitNoteStatus.Expire}`,
+    status: DebitNoteStatus.PaymentPending,
+    name: `debitNote.status.${DebitNoteStatus.PaymentPending}`,
   },
   {
-    status: DebitNoteStatus.Payment,
-    name: `debitNote.status.${DebitNoteStatus.Payment}`,
+    status: DebitNoteStatus.PaymentSuccess,
+    name: `debitNote.status.${DebitNoteStatus.PaymentSuccess}`,
   },
   {
-    status: DebitNoteStatus.Receipt,
-    name: `debitNote.status.${DebitNoteStatus.Receipt}`,
-  },
-  {
-    status: DebitNoteStatus.Succeed,
-    name: `debitNote.status.${DebitNoteStatus.Succeed}`,
+    status: DebitNoteStatus.PaymentSuccess,
+    name: `debitNote.status.${DebitNoteStatus.ProcessComplete}`,
   },
 ];
 
 export const pageTabs = [
-  { label: 'Pending', value: DebitNoteStatus.Pending },
-  { label: 'Expire', value: DebitNoteStatus.Expire },
-  { label: 'Payment', value: DebitNoteStatus.Payment },
-  { label: 'Receipt', value: DebitNoteStatus.Receipt },
-  { label: 'Succeed', value: DebitNoteStatus.Succeed },
+  { label: 'Pending', value: DebitNoteStatus.Issued },
+  { label: 'Payment', value: DebitNoteStatus.PaymentPending },
+  { label: 'Receipt', value: DebitNoteStatus.PaymentSuccess },
+  { label: 'Succeed', value: DebitNoteStatus.ProcessComplete },
 ];
 
 export enum Status {
diff --git a/src/stores/debit-note/index.ts b/src/stores/debit-note/index.ts
index 7ef3b8b3..40b2c7a4 100644
--- a/src/stores/debit-note/index.ts
+++ b/src/stores/debit-note/index.ts
@@ -26,7 +26,7 @@ export async function getDebitNoteList(params?: {
   page?: number;
   pageSize?: number;
   query?: string;
-  deebitNoteStatus?: Status;
+  status?: Status;
   includeRegisteredBranch?: boolean;
 }) {
   const res = await api.get<PaginationResult<Data>>(`/${ENDPOINT}`, {
@@ -66,12 +66,11 @@ export const useDebitNote = defineStore('debit-note-store', () => {
   const page = ref<number>(1);
   const pageMax = ref<number>(1);
   const pageSize = ref<number>(30);
-  const stats = ref<Record<Status, number>>({
-    [Status.Pending]: 0,
-    [Status.Expire]: 0,
-    [Status.Payment]: 0,
-    [Status.Receipt]: 0,
-    [Status.Succeed]: 0,
+  const stats = ref<Record<string, number>>({
+    ['issued']: 0,
+    ['paymentPending']: 0,
+    ['paymentSuccess']: 0,
+    ['processComplete']: 0,
   });
 
   return {
diff --git a/src/stores/debit-note/types.ts b/src/stores/debit-note/types.ts
index 00f6b468..2eb901db 100644
--- a/src/stores/debit-note/types.ts
+++ b/src/stores/debit-note/types.ts
@@ -86,9 +86,9 @@ export type DebitNote = {
 };
 
 export enum DebitNoteStatus {
-  Pending = 'Pending',
-  Expire = 'Expire',
-  Payment = 'Payment',
-  Receipt = 'Receipt',
-  Succeed = 'Succeed',
+  Issued = 'Issued',
+  Expired = 'Expired',
+  PaymentPending = 'PaymentPending',
+  PaymentSuccess = 'PaymentSuccess',
+  ProcessComplete = 'ProcessComplete',
 }

From 92c054536857eae02b03027c8295865af93d9e1b Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Feb 2025 09:17:22 +0700
Subject: [PATCH 23/40] refactor: 08 => add 'Ready' status option to request
 list filter

---
 src/pages/08_request-list/MainPage.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/pages/08_request-list/MainPage.vue b/src/pages/08_request-list/MainPage.vue
index 852bb902..79488760 100644
--- a/src/pages/08_request-list/MainPage.vue
+++ b/src/pages/08_request-list/MainPage.vue
@@ -241,6 +241,10 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () => {
                     label: $t('requestList.status.Pending'),
                     value: RequestDataStatus.Pending,
                   },
+                  {
+                    label: $t('requestList.status.Ready'),
+                    value: RequestDataStatus.Ready,
+                  },
                   {
                     label: $t('requestList.status.InProgress'),
                     value: RequestDataStatus.InProgress,

From 5e3c04be8e7bfea1bdd871115c35a3d793a59c8d Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Feb 2025 09:19:51 +0700
Subject: [PATCH 24/40] refactor: simplify status badge color mapping in
 request list

---
 src/pages/08_request-list/TableRequestList.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/pages/08_request-list/TableRequestList.vue b/src/pages/08_request-list/TableRequestList.vue
index 8bcf03a3..95f3a097 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -224,15 +224,13 @@ function getEmployeeName(
           hide-kebab-delete
           use-cancel
           :badge-color="
-            props.row.requestDataStatus === RequestDataStatus.Pending
-              ? '--orange-5-hsl'
-              : props.row.requestDataStatus === RequestDataStatus.Canceled
-                ? '--red-5-hsl'
-                : props.row.requestDataStatus === RequestDataStatus.InProgress
-                  ? '--blue-6-hsl'
-                  : props.row.requestDataStatus === RequestDataStatus.Completed
-                    ? '--green-8-hsl'
-                    : '--orange-5-hsl'
+            {
+              [RequestDataStatus.Pending]: '--orange-5-hsl',
+              [RequestDataStatus.Ready]: '--yellow-6-hsl',
+              [RequestDataStatus.InProgress]: '--blue-6-hsl',
+              [RequestDataStatus.Completed]: '--green-8-hsl',
+              [RequestDataStatus.Canceled]: '--red-5-hsl',
+            }[props.row.requestDataStatus]
           "
           :urgent="props.row.quotation.urgent"
           :code="props.row.code"

From 4f085e068ae80215ec91379af45d0608f44d2c2e Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Feb 2025 09:28:42 +0700
Subject: [PATCH 25/40] refactor: implement toCamelCase utility function and
 update quotation stats mapping

---
 src/pages/05_quotation/MainPage.vue | 5 ++++-
 src/stores/utils/index.ts           | 6 ++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 410a6bbf..4b280ef6 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -12,6 +12,7 @@ import useMyBranch from 'stores/my-branch';
 import { useQuotationForm } from './form';
 import { hslaColors } from './constants';
 import { pageTabs, columnQuotation } from './constants';
+import { toCamelCase } from 'stores/utils';
 
 // NOTE  Import Types
 import { CustomerBranchCreate, CustomerType } from 'stores/customer/types';
@@ -393,7 +394,9 @@ async function storeDataLocal(id: string) {
           quotationStats[
             pageState.currentTab === 'Invoice'
               ? 'paymentInProcess'
-              : (pageState.currentTab.toLowerCase() as keyof typeof quotationStats)
+              : (toCamelCase(
+                  pageState.currentTab,
+                ) as keyof typeof quotationStats)
           ]
         }}
       </q-badge>
diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index 94463327..3298ebf7 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -609,3 +609,9 @@ export function getEmployeeName(
     ['tha']: `${typeof employee.namePrefix === 'string' ? useOptionStore().mapOption(employee.namePrefix) : ''} ${employee.firstName} ${employee.lastName}`,
   }[opts?.locale || 'eng'];
 }
+
+export function toCamelCase(text: string): string {
+  return text
+    .replace(/[^a-zA-Z0-9]+(.)/g, (match, chr) => chr.toUpperCase())
+    .replace(/^[A-Z]/, (match) => match.toLowerCase());
+}

From 697a8531f142eddcc5f149805b4212e543395693 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Thu, 20 Feb 2025 09:55:08 +0700
Subject: [PATCH 26/40] refactor: edit i18n due date

---
 src/i18n/eng.ts                                         | 1 +
 src/i18n/tha.ts                                         | 1 +
 src/pages/12_debit-note/expansion/DocumentExpansion.vue | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 34c63072..7a9cf43c 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -147,6 +147,7 @@ export default {
     ofPage: '{current} of {total}',
     included: 'Included',
     notIncluded: 'Not Included',
+    dueDate: 'Due date',
   },
 
   menu: {
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 4f481146..139b2070 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -149,6 +149,7 @@ export default {
     ofPage: '{current} จาก {total}',
     included: 'รวม',
     notIncluded: 'ไม่รวม',
+    dueDate: 'วันครบกำหนด',
   },
 
   menu: {
diff --git a/src/pages/12_debit-note/expansion/DocumentExpansion.vue b/src/pages/12_debit-note/expansion/DocumentExpansion.vue
index 0d38ac7b..573d8c81 100644
--- a/src/pages/12_debit-note/expansion/DocumentExpansion.vue
+++ b/src/pages/12_debit-note/expansion/DocumentExpansion.vue
@@ -61,7 +61,7 @@ const quotationCreatedBy = defineModel<string>('quotationCreatedBy');
         :disabled="!readonly"
       />
       <DatePicker
-        :label="$t('general.createdAt')"
+        :label="$t('general.dueDate')"
         class="col-md-2 col-6"
         :model-value="dueDate || new Date(Date.now())"
         @update:model-value="

From 529d4ad3df865a8e91fc663745430a57687f073d Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Feb 2025 10:39:10 +0700
Subject: [PATCH 27/40] refactor: enhance request selection logic and improve
 filtering for empty step statuses

---
 .../09_task-order/SelectReadyRequestWork.vue  | 82 ++++++++++++-------
 src/pages/11_credit-note/FormPage.vue         |  1 +
 2 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/src/pages/09_task-order/SelectReadyRequestWork.vue b/src/pages/09_task-order/SelectReadyRequestWork.vue
index 1810d4a7..b294763e 100644
--- a/src/pages/09_task-order/SelectReadyRequestWork.vue
+++ b/src/pages/09_task-order/SelectReadyRequestWork.vue
@@ -165,35 +165,49 @@ function submit() {
     requestWorkId: string;
     requestWorkStep?: Task;
   }[] = [];
-
   selectedEmployee.value.forEach((v, i) => {
-    const curr = v.stepStatus.find(
-      (s) =>
-        s.workStatus ===
-          (props.creditNote
-            ? RequestWorkStatus.Canceled
-            : RequestWorkStatus.Ready) ||
-        s.workStatus ===
-          (props.creditNote
-            ? RequestWorkStatus.Canceled
-            : RequestWorkStatus.InProgress),
-    );
-    if (curr) {
-      const task: Task = {
-        ...curr,
-        attributes: curr.attributes,
-        workStatus:
-          curr.workStatus || props.creditNote
-            ? RequestWorkStatus.Ready
-            : RequestWorkStatus.Canceled,
-        taskOrderId: '',
-        requestWork: selectedEmployee.value[i],
-      };
+    if (v.stepStatus.length === 0) {
       selected.push({
-        step: task.step,
-        requestWorkId: task.requestWorkId,
-        requestWorkStep: task,
+        step: 0,
+        requestWorkId: v.id || '',
+        requestWorkStep: {
+          taskOrderId: '',
+          requestWork: v,
+          step: 0,
+          workStatus: '',
+          requestWorkId: '',
+          attributes: undefined,
+        },
       });
+    } else {
+      const curr = v.stepStatus.find(
+        (s) =>
+          s.workStatus ===
+            (props.creditNote
+              ? RequestWorkStatus.Canceled
+              : RequestWorkStatus.Ready) ||
+          s.workStatus ===
+            (props.creditNote
+              ? RequestWorkStatus.Canceled
+              : RequestWorkStatus.InProgress),
+      );
+      if (curr) {
+        const task: Task = {
+          ...curr,
+          attributes: curr.attributes,
+          workStatus:
+            curr.workStatus || props.creditNote
+              ? RequestWorkStatus.Ready
+              : RequestWorkStatus.Canceled,
+          taskOrderId: '',
+          requestWork: selectedEmployee.value[i],
+        };
+        selected.push({
+          step: task.step,
+          requestWorkId: task.requestWorkId,
+          requestWorkStep: task,
+        });
+      }
     }
   });
 
@@ -217,11 +231,17 @@ function onDialogOpen() {
   if (taskList.value.length === 0) return;
   const matchingItems = tempGroupEdit.value
     .flatMap((g) => g.list)
-    .filter((l) =>
-      l.stepStatus.some((s) =>
-        taskList.value.some((t) => s.requestWorkId === t.requestWorkId),
-      ),
-    );
+    .filter((l) => {
+      if (l.stepStatus.length === 0) {
+        return taskList.value.some(
+          (t) => t.requestWorkStep?.requestWork.id === l.id,
+        );
+      } else {
+        return l.stepStatus.some((s) =>
+          taskList.value.some((t) => s.requestWorkId === t.requestWorkId),
+        );
+      }
+    });
   selectedEmployee.value = JSON.parse(JSON.stringify(matchingItems));
 }
 
diff --git a/src/pages/11_credit-note/FormPage.vue b/src/pages/11_credit-note/FormPage.vue
index c0485725..3f1fe17c 100644
--- a/src/pages/11_credit-note/FormPage.vue
+++ b/src/pages/11_credit-note/FormPage.vue
@@ -630,6 +630,7 @@ onMounted(async () => {
             :task-list="taskListGroup"
             @add-product="openProductDialog"
           />
+
           <PaymentExpansion
             v-if="view === null"
             :readonly="readonly"

From a8f11d158b4f6c392f494a6f5ed56e96eaf833da Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Feb 2025 10:48:46 +0700
Subject: [PATCH 28/40] refactor: update total display logic in MainPage.vue to
 sum stats values

---
 src/pages/09_task-order/MainPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/09_task-order/MainPage.vue b/src/pages/09_task-order/MainPage.vue
index ebfb54f7..54df2966 100644
--- a/src/pages/09_task-order/MainPage.vue
+++ b/src/pages/09_task-order/MainPage.vue
@@ -203,7 +203,7 @@ watch(
           color: hsl(var(--info-bg));
         "
       >
-        {{ pageState.total }}
+        {{ Object.values(stats).reduce((s, v) => s + v, 0) }}
       </q-badge>
       <q-btn
         class="q-ml-sm"

From 8dd3268738961ffc26e672bf7fce366fc34fef80 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Feb 2025 11:08:33 +0700
Subject: [PATCH 29/40] refactor: simplify total calculation logic in quotation
 and debit note pages

---
 src/pages/05_quotation/MainPage.vue  | 10 +---------
 src/pages/12_debit-note/MainPage.vue |  7 ++++++-
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 4b280ef6..b73c5f35 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -390,15 +390,7 @@ async function storeDataLocal(id: string) {
           color: hsl(var(--info-bg));
         "
       >
-        {{
-          quotationStats[
-            pageState.currentTab === 'Invoice'
-              ? 'paymentInProcess'
-              : (toCamelCase(
-                  pageState.currentTab,
-                ) as keyof typeof quotationStats)
-          ]
-        }}
+        {{ Object.values(quotationStats).reduce((a, c) => a + c, 0) }}
       </q-badge>
       <q-btn
         class="q-ml-sm"
diff --git a/src/pages/12_debit-note/MainPage.vue b/src/pages/12_debit-note/MainPage.vue
index fd3780a9..64635dd0 100644
--- a/src/pages/12_debit-note/MainPage.vue
+++ b/src/pages/12_debit-note/MainPage.vue
@@ -172,7 +172,12 @@ watch(
           color: hsl(var(--info-bg));
         "
       >
-        {{ pageState.total }}
+        {{
+          Object.entries(stats).reduce(
+            (sum, [key, value]) => (key === 'canceled' ? sum : sum + value),
+            0,
+          )
+        }}
       </q-badge>
       <q-btn
         class="q-ml-sm"

From f62463dc809139ff40de2e551fd01439b558a075 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Feb 2025 11:09:53 +0700
Subject: [PATCH 30/40] refactor: optimize performance of data fetching in the
 dashboard component

---
 src/layouts/ProfileMenu.vue | 529 ++++++++++++++++++------------------
 1 file changed, 260 insertions(+), 269 deletions(-)

diff --git a/src/layouts/ProfileMenu.vue b/src/layouts/ProfileMenu.vue
index 82980933..5c91f2d4 100644
--- a/src/layouts/ProfileMenu.vue
+++ b/src/layouts/ProfileMenu.vue
@@ -83,292 +83,283 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div>
-    <q-btn
-      rounded
-      dense
-      flat
-      no-caps
-      color="dark"
-      class="q-pa-none account-menu-down dropdown-menu"
-    >
-      <div class="row items-center">
-        <div class="q-pa-none">
-          <q-avatar
-            class="surface-1 bordered"
-            :size="$q.screen.lt.sm ? '30px' : '40px'"
-          >
-            <q-img
-              :ratio="1"
-              class="text-center"
-              :src="userImage"
-              v-if="userImage"
-            >
-              <template #error>
-                <div
-                  class="no-padding full-width full-height flex items-center justify-center"
-                  style="
-                    background: linear-gradient(
-                      135deg,
-                      rgba(43, 137, 223, 1) 0%,
-                      rgba(230, 51, 81, 1) 100%
-                    );
-                  "
-                >
-                  <q-img
-                    v-if="gender"
-                    :ratio="1"
-                    :src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
-                  ></q-img>
-                  <q-icon
-                    v-else
-                    name="mdi-account-outline"
-                    color="white"
-                    :size="$q.screen.lt.sm ? 'xs' : 'sm'"
-                  />
-                </div>
-              </template>
-            </q-img>
-            <q-icon
-              v-else
-              name="mdi-account-outline"
-              :size="$q.screen.lt.sm ? 'xs' : 'sm'"
-            />
-          </q-avatar>
-        </div>
-
-        <div
-          class="text-left q-px-md"
-          v-if="$q.screen.gt.sm"
-          style="color: var(--foreground)"
+  <q-btn
+    rounded
+    dense
+    flat
+    no-caps
+    color="dark"
+    class="q-pa-none account-menu-down dropdown-menu"
+  >
+    <div class="row items-center">
+      <div class="q-pa-none">
+        <q-avatar
+          class="surface-1 bordered"
+          :size="$q.screen.lt.sm ? '30px' : '40px'"
         >
-          <div class="text-caption column">
-            <span
-              v-if="isLoggedIn()"
-              class="text-weight-bold ellipsis"
-              style="max-width: 9vw"
-            >
+          <q-img
+            :ratio="1"
+            class="text-center"
+            :src="userImage"
+            v-if="userImage"
+          >
+            <template #error>
+              <div
+                class="no-padding full-width full-height flex items-center justify-center"
+                style="
+                  background: linear-gradient(
+                    135deg,
+                    rgba(43, 137, 223, 1) 0%,
+                    rgba(230, 51, 81, 1) 100%
+                  );
+                "
+              >
+                <q-img
+                  v-if="gender"
+                  :ratio="1"
+                  :src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
+                ></q-img>
+                <q-icon
+                  v-else
+                  name="mdi-account-outline"
+                  color="white"
+                  :size="$q.screen.lt.sm ? 'xs' : 'sm'"
+                />
+              </div>
+            </template>
+          </q-img>
+          <q-icon
+            v-else
+            name="mdi-account-outline"
+            :size="$q.screen.lt.sm ? 'xs' : 'sm'"
+          />
+        </q-avatar>
+      </div>
+
+      <div
+        class="text-left q-px-md"
+        v-if="$q.screen.gt.sm"
+        style="color: var(--foreground)"
+      >
+        <div class="text-caption column">
+          <span
+            v-if="isLoggedIn()"
+            class="text-weight-bold ellipsis"
+            style="max-width: 9vw"
+          >
+            {{ getName() }}
+            <q-tooltip>
               {{ getName() }}
-              <q-tooltip>
-                {{ getName() }}
-              </q-tooltip>
-            </span>
-            <span
-              v-else
-              class="text-weight-bold q-pb-xs ellipsis"
-              style="max-width: 9vw"
-            >
+            </q-tooltip>
+          </span>
+          <span
+            v-else
+            class="text-weight-bold q-pb-xs ellipsis"
+            style="max-width: 9vw"
+          >
+            {{ 'Guest' }}
+            <q-tooltip>
               {{ 'Guest' }}
-              <q-tooltip>
-                {{ 'Guest' }}
-              </q-tooltip>
-            </span>
+            </q-tooltip>
+          </span>
 
-            <div style="font-size: 11px">
-              {{ filterRole?.join(' | ') }}
-            </div>
+          <div style="font-size: 11px">
+            {{ filterRole?.join(' | ') }}
           </div>
         </div>
-
-        <div v-if="$q.screen.gt.sm" class="text-right">
-          <q-icon name="mdi-chevron-down" />
-        </div>
       </div>
 
-      <q-menu :offset="[5, 10]" max-width="300px">
-        <div
-          no-padding
-          class="row justify-center bordered rounded"
-          style="overflow: hidden"
-        >
-          <div class="column col-12 items-center">
-            <div
-              class="full-width row justify-center"
-              style="position: relative"
-            >
-              <div
-                class="full-width account-cover"
-                :class="{ dark: $q.dark.isActive }"
-              ></div>
-              <div class="avartar-border">
-                <q-avatar
-                  id="changeAvatar"
-                  size="72px"
-                  class="surface-1 bordered"
-                  :class="{ 'hover-profile': isLoggedIn() }"
-                  @click="
-                    () => {
-                      isLoggedIn() ? inputFile.click() : '';
-                    }
-                  "
-                >
-                  <q-img
-                    :ratio="1"
-                    class="text-center"
-                    :src="userImage"
-                    v-if="userImage"
-                  >
-                    <template #error>
-                      <div
-                        class="no-padding full-width full-height flex items-center justify-center"
-                        style="
-                          background: linear-gradient(
-                            135deg,
-                            rgba(43, 137, 223, 1) 0%,
-                            rgba(230, 51, 81, 1) 100%
-                          );
-                        "
-                      >
-                        <q-img
-                          v-if="gender"
-                          :ratio="1"
-                          :src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
-                        ></q-img>
-                        <q-icon
-                          v-else
-                          name="mdi-account-outline"
-                          color="white"
-                        />
-                      </div>
-                    </template>
-                  </q-img>
-                  <q-icon name="mdi-account-outline" v-else />
-                </q-avatar>
-              </div>
-            </div>
+      <div v-if="$q.screen.gt.sm" class="text-right">
+        <q-icon name="mdi-chevron-down" />
+      </div>
+    </div>
 
+    <q-menu :offset="[5, 10]" max-width="300px">
+      <div
+        no-padding
+        class="row justify-center bordered rounded"
+        style="overflow: hidden"
+      >
+        <div class="column col-12 items-center">
+          <div class="full-width row justify-center" style="position: relative">
             <div
-              class="text-subtitle2 q-mb-xs text-center full-width ellipsis q-px-md"
-              style="margin-top: 58px"
-            >
+              class="full-width account-cover"
+              :class="{ dark: $q.dark.isActive }"
+            ></div>
+            <div class="avartar-border">
+              <q-avatar
+                id="changeAvatar"
+                size="72px"
+                class="surface-1 bordered"
+                :class="{ 'hover-profile': isLoggedIn() }"
+                @click="
+                  () => {
+                    isLoggedIn() ? inputFile.click() : '';
+                  }
+                "
+              >
+                <q-img
+                  :ratio="1"
+                  class="text-center"
+                  :src="userImage"
+                  v-if="userImage"
+                >
+                  <template #error>
+                    <div
+                      class="no-padding full-width full-height flex items-center justify-center"
+                      style="
+                        background: linear-gradient(
+                          135deg,
+                          rgba(43, 137, 223, 1) 0%,
+                          rgba(230, 51, 81, 1) 100%
+                        );
+                      "
+                    >
+                      <q-img
+                        v-if="gender"
+                        :ratio="1"
+                        :src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
+                      ></q-img>
+                      <q-icon v-else name="mdi-account-outline" color="white" />
+                    </div>
+                  </template>
+                </q-img>
+                <q-icon name="mdi-account-outline" v-else />
+              </q-avatar>
+            </div>
+          </div>
+
+          <div
+            class="text-subtitle2 q-mb-xs text-center full-width ellipsis q-px-md"
+            style="margin-top: 58px"
+          >
+            <span v-if="isLoggedIn()">
+              {{ getName() }}
+            </span>
+            <span v-else>{{ 'Guest' }}</span>
+            <q-tooltip>
               <span v-if="isLoggedIn()">
                 {{ getName() }}
               </span>
               <span v-else>{{ 'Guest' }}</span>
-              <q-tooltip>
-                <span v-if="isLoggedIn()">
-                  {{ getName() }}
-                </span>
-                <span v-else>{{ 'Guest' }}</span>
-              </q-tooltip>
-            </div>
-            <div
-              class="badge q-px-sm q-mb-md text-caption"
-              :class="{ dark: $q.dark.isActive }"
-            >
-              {{ filterRole?.join(' | ') }}
-            </div>
+            </q-tooltip>
           </div>
-
-          <div class="column col-12">
-            <q-separator />
-            <div class="column justify-center">
-              <q-list
-                :dense="true"
-                v-for="op in options"
-                :key="op.value"
-                :id="op.value"
-              >
-                <q-item
-                  v-if="op.value !== 'mode'"
-                  clickable
-                  :disable="op.disabled"
-                  :id="`btn-${op.value}`"
-                  @click="$emit(op.value)"
-                >
-                  <q-item-section avatar>
-                    <q-icon :name="op.icon" :color="op.color" size="20px" />
-                  </q-item-section>
-                  <q-item-section class="q-py-sm">
-                    {{ $t(op.label) }}
-                  </q-item-section>
-                </q-item>
-
-                <q-separator v-if="op.value === 'mode'" />
-                <q-item
-                  v-if="op.value === 'mode'"
-                  clickable
-                  :id="`btn-${op.value}`"
-                  @click="$emit(op.value)"
-                >
-                  <q-item-section avatar>
-                    <q-icon :name="op.icon" :color="op.color" size="20px" />
-                  </q-item-section>
-                  <q-item-section class="q-py-sm">
-                    <div class="row justify-between">
-                      <span>
-                        {{ $t(op.label) }}
-                      </span>
-                      <span class="app-text-muted-2">
-                        {{
-                          $t(
-                            `general.${theme === Theme.Auto ? 'baseOnDevice' : theme}`,
-                          )
-                        }}
-                        <q-icon name="mdi-chevron-right" />
-                      </span>
-                    </div>
-                  </q-item-section>
-
-                  <q-menu
-                    class="bordered rounded"
-                    anchor="top right"
-                    self="top left"
-                    max-width="200"
-                    :offset="[10, 0]"
-                    style="width: 160px"
-                    :touch-position="$q.screen.lt.sm"
-                  >
-                    <div v-for="(mode, index) in themeMode" :key="index">
-                      <q-item clickable @click="theme = setTheme(mode.value)">
-                        <q-item-section>
-                          <div class="row justify-between">
-                            <span>
-                              {{ $t(`general.${mode.label}`) }}
-                            </span>
-                            <q-icon
-                              v-if="mode.value === theme"
-                              name="mdi-check"
-                            />
-                          </div>
-                        </q-item-section>
-                      </q-item>
-                    </div>
-                  </q-menu>
-                </q-item>
-              </q-list>
-            </div>
-            <q-separator />
-            <q-btn
-              v-if="isLoggedIn()"
-              no-caps
-              dense
-              unelevated
-              class="q-ma-md app-text-negative"
-              :class="{ dark: $q.dark.isActive }"
-              :label="$t('general.logout')"
-              @click="$emit('logout')"
-              id="btn-logout"
-              style="background-color: hsla(var(--negative-bg) / 0.1)"
-              v-close-popup
-            />
-            <q-btn
-              v-else
-              no-caps
-              dense
-              color="primary"
-              unelevated
-              class="q-ma-md app-text-negative"
-              :label="$t('general.login')"
-              @click="$emit('login')"
-              id="btn-login"
-              v-close-popup
-            />
+          <div
+            class="badge q-px-sm q-mb-md text-caption"
+            :class="{ dark: $q.dark.isActive }"
+          >
+            {{ filterRole?.join(' | ') }}
           </div>
         </div>
-      </q-menu>
-    </q-btn>
-  </div>
+
+        <div class="column col-12">
+          <q-separator />
+          <div class="column justify-center">
+            <q-list
+              :dense="true"
+              v-for="op in options"
+              :key="op.value"
+              :id="op.value"
+            >
+              <q-item
+                v-if="op.value !== 'mode'"
+                clickable
+                :disable="op.disabled"
+                :id="`btn-${op.value}`"
+                @click="$emit(op.value)"
+              >
+                <q-item-section avatar>
+                  <q-icon :name="op.icon" :color="op.color" size="20px" />
+                </q-item-section>
+                <q-item-section class="q-py-sm">
+                  {{ $t(op.label) }}
+                </q-item-section>
+              </q-item>
+
+              <q-separator v-if="op.value === 'mode'" />
+              <q-item
+                v-if="op.value === 'mode'"
+                clickable
+                :id="`btn-${op.value}`"
+                @click="$emit(op.value)"
+              >
+                <q-item-section avatar>
+                  <q-icon :name="op.icon" :color="op.color" size="20px" />
+                </q-item-section>
+                <q-item-section class="q-py-sm">
+                  <div class="row justify-between">
+                    <span>
+                      {{ $t(op.label) }}
+                    </span>
+                    <span class="app-text-muted-2">
+                      {{
+                        $t(
+                          `general.${theme === Theme.Auto ? 'baseOnDevice' : theme}`,
+                        )
+                      }}
+                      <q-icon name="mdi-chevron-right" />
+                    </span>
+                  </div>
+                </q-item-section>
+
+                <q-menu
+                  class="bordered rounded"
+                  anchor="top right"
+                  self="top left"
+                  max-width="200"
+                  :offset="[10, 0]"
+                  style="width: 160px"
+                  :touch-position="$q.screen.lt.sm"
+                >
+                  <div v-for="(mode, index) in themeMode" :key="index">
+                    <q-item clickable @click="theme = setTheme(mode.value)">
+                      <q-item-section>
+                        <div class="row justify-between">
+                          <span>
+                            {{ $t(`general.${mode.label}`) }}
+                          </span>
+                          <q-icon
+                            v-if="mode.value === theme"
+                            name="mdi-check"
+                          />
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </div>
+                </q-menu>
+              </q-item>
+            </q-list>
+          </div>
+          <q-separator />
+          <q-btn
+            v-if="isLoggedIn()"
+            no-caps
+            dense
+            unelevated
+            class="q-ma-md app-text-negative"
+            :class="{ dark: $q.dark.isActive }"
+            :label="$t('general.logout')"
+            @click="$emit('logout')"
+            id="btn-logout"
+            style="background-color: hsla(var(--negative-bg) / 0.1)"
+            v-close-popup
+          />
+          <q-btn
+            v-else
+            no-caps
+            dense
+            color="primary"
+            unelevated
+            class="q-ma-md app-text-negative"
+            :label="$t('general.login')"
+            @click="$emit('login')"
+            id="btn-login"
+            v-close-popup
+          />
+        </div>
+      </div>
+    </q-menu>
+  </q-btn>
 </template>
 <style scoped lang="scss">
 .account-menu-down {

From a6a997e55f55231b35e2696113d80f0a1362e07d Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Feb 2025 11:19:43 +0700
Subject: [PATCH 31/40] refactor: close dialog after submitting quotation in
 credit and debit note pages

---
 src/pages/11_credit-note/MainPage.vue | 3 +--
 src/pages/12_debit-note/MainPage.vue  | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/11_credit-note/MainPage.vue b/src/pages/11_credit-note/MainPage.vue
index 782f2d12..7dcb7a36 100644
--- a/src/pages/11_credit-note/MainPage.vue
+++ b/src/pages/11_credit-note/MainPage.vue
@@ -111,6 +111,7 @@ function navigateTo(opts: {
 
 async function submit() {
   navigateTo({ statusDialog: 'create', quotationId: pageState.quotationId });
+  close();
 }
 
 function close() {
@@ -429,8 +430,6 @@ watch(
             }}
           </div>
           <nav class="col-4 row justify-end">
-            {{ pageState.quotationId }}
-
             <PaginationComponent
               v-model:current-page="page"
               v-model:max-page="pageMax"
diff --git a/src/pages/12_debit-note/MainPage.vue b/src/pages/12_debit-note/MainPage.vue
index 64635dd0..cd022dfa 100644
--- a/src/pages/12_debit-note/MainPage.vue
+++ b/src/pages/12_debit-note/MainPage.vue
@@ -117,6 +117,7 @@ function navigateTo(opts: {
 
 async function submit() {
   navigateTo({ statusDialog: 'create', quotationId: pageState.quotationId });
+  close();
 }
 
 function close() {

From ea1c1b71fc291046a33c916d1442ffdbc5663428 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Feb 2025 13:46:06 +0700
Subject: [PATCH 32/40] refactor: add required validation to quotation
 selection and enhance button disable logic in credit and debit note forms

---
 src/components/11_credit-note/FormCredit.vue               | 1 +
 src/components/12_debit-note/FormDebit.vue                 | 1 +
 src/pages/11_credit-note/FormPage.vue                      | 1 +
 src/pages/11_credit-note/expansion/CreditNoteExpansion.vue | 4 ++--
 src/pages/12_debit-note/FormPage.vue                       | 4 +++-
 5 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/11_credit-note/FormCredit.vue b/src/components/11_credit-note/FormCredit.vue
index d08c96dc..f104e91c 100644
--- a/src/components/11_credit-note/FormCredit.vue
+++ b/src/components/11_credit-note/FormCredit.vue
@@ -29,6 +29,7 @@ const quotationId = defineModel<string>('quotationId', {
     <section class="col-12 row q-col-gutter-sm">
       <SelectQuotation
         for="select-quotation"
+        required
         class="col"
         v-model:value="quotationId"
         :label="$t('general.select', { msg: $t('quotation.title') })"
diff --git a/src/components/12_debit-note/FormDebit.vue b/src/components/12_debit-note/FormDebit.vue
index 60bf596f..5303e666 100644
--- a/src/components/12_debit-note/FormDebit.vue
+++ b/src/components/12_debit-note/FormDebit.vue
@@ -29,6 +29,7 @@ const quotationId = defineModel<string>('quotationId', {
     <section class="col-12 row q-col-gutter-sm">
       <SelectQuotation
         for="select-quotation"
+        required
         class="col"
         v-model:value="quotationId"
         :label="$t('general.select', { msg: $t('quotation.title') })"
diff --git a/src/pages/11_credit-note/FormPage.vue b/src/pages/11_credit-note/FormPage.vue
index 3f1fe17c..14f40fcc 100644
--- a/src/pages/11_credit-note/FormPage.vue
+++ b/src/pages/11_credit-note/FormPage.vue
@@ -807,6 +807,7 @@ onMounted(async () => {
         <!-- @click="submit" -->
         <SaveButton
           v-if="!readonly"
+          :disabled="taskListGroup.length === 0"
           type="submit"
           @click.stop="(e) => refForm?.submit(e)"
           :label="$t('creditNote.label.submit')"
diff --git a/src/pages/11_credit-note/expansion/CreditNoteExpansion.vue b/src/pages/11_credit-note/expansion/CreditNoteExpansion.vue
index 0dca2631..201cce13 100644
--- a/src/pages/11_credit-note/expansion/CreditNoteExpansion.vue
+++ b/src/pages/11_credit-note/expansion/CreditNoteExpansion.vue
@@ -44,8 +44,8 @@ const detail = defineModel<string>('detail');
         outlined
         dense
         class="col"
-        v-model="detail"
-        :rules="[(val: string) => !!val || $t('form.error.required')]"
+        :model-value="readonly ? detail || '-' : detail"
+        @update:model-value="(v) => (detail = v?.toString())"
       ></q-input>
     </main>
   </q-expansion-item>
diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
index 946d6a91..e707379f 100644
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -987,7 +987,6 @@ onMounted(async () => {
           />
 
           <!-- #TODO add  openProductDialog at @add-product-->
-
           <ProductExpansion
             v-if="view === null"
             :readonly
@@ -1179,6 +1178,9 @@ onMounted(async () => {
 
           <SaveButton
             v-if="!readonly && pageState.mode === 'create'"
+            :disabled="
+              selectedWorkerItem.length === 0 && productService.length === 0
+            "
             @click="submit"
             :label="true ? $t('debitNote.label.submit') : $t('general.save')"
             :icon="

From a66347414aff327208d8c7e3edf6b5fd934e88f3 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Feb 2025 13:53:17 +0700
Subject: [PATCH 33/40] refactor: handle null values in number formatting
 function to ensure consistent output

---
 src/stores/utils/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index 3298ebf7..109bce33 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -124,7 +124,7 @@ export function deleteItem(items: unknown[], index: number) {
 }
 
 export function formatNumberDecimal(num: number, point: number = 2): string {
-  return num.toLocaleString('eng', {
+  return (num || 0).toLocaleString('eng', {
     minimumFractionDigits: point,
     maximumFractionDigits: point,
   });

From 6df79dae80862c87e1b39e6a4ebb96a736646d82 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Feb 2025 14:24:32 +0700
Subject: [PATCH 34/40] refactor: update product structure in task list and
 enhance key usage in v-for loops

---
 .../11_credit-note/document-view/MainPage.vue | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/pages/11_credit-note/document-view/MainPage.vue b/src/pages/11_credit-note/document-view/MainPage.vue
index 5c2aae4d..f26c1c42 100644
--- a/src/pages/11_credit-note/document-view/MainPage.vue
+++ b/src/pages/11_credit-note/document-view/MainPage.vue
@@ -51,7 +51,7 @@ const bankList = ref<BankBook[]>([]);
 const worker = ref<Employee[]>([]);
 const taskListGroup = ref<
   {
-    product: RequestWork['productService']['product'];
+    product: RequestWork['productService'];
     list: RequestWork[];
   }[]
 >([]);
@@ -59,7 +59,7 @@ const taskListGroup = ref<
 const elements = ref<HTMLElement[]>([]);
 const chunks = ref<
   {
-    product: RequestWork['productService']['product'];
+    product: RequestWork['productService'];
     list: RequestWork[];
   }[][]
 >([[]]);
@@ -112,6 +112,7 @@ async function getAttachment(quotationId: string) {
 }
 
 async function assignData() {
+  console.log(taskListGroup.value);
   for (let i = 0; i < taskListGroup.value.length; i++) {
     let el = elements.value.at(-1);
 
@@ -269,7 +270,7 @@ function print() {
     <PrintButton solid @click="print" />
   </div>
   <div class="row justify-between container color-debit-note">
-    <section class="content" v-for="chunk in chunks">
+    <section class="content" v-for="(chunk, i) in chunks" :key="i">
       <ViewHeader
         v-if="!!branch && !!customer && !!details"
         :branch="branch"
@@ -300,23 +301,31 @@ function print() {
             <th>{{ $t('preview.pricePerUnit') }}</th>
             <th>{{ $t('preview.value') }}</th>
           </tr>
-          <tr v-for="(v, i) in chunk">
+          {{ 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.code }}</td>
-            <td>{{ v.product.name }}</td>
+            <td>{{ v.product.product.code }}</td>
+            <td>{{ v.product.product.name }}</td>
             <td style="text-align: center">
               {{
                 formatNumberDecimal(
-                  calcPricePerUnit(v.product) +
-                    (v.product.calcVat
-                      ? calcPricePerUnit(v.product) * (config?.vat || 0.07)
+                  calcPricePerUnit(v.product.product) +
+                    (v.product.product.calcVat
+                      ? calcPricePerUnit(v.product.product) *
+                        (config?.vat || 0.07)
                       : 0),
                   2,
                 )
               }}
             </td>
             <td style="text-align: center">
-              {{ formatNumberDecimal(calcPrice(v.product, v.list.length), 2) }}
+              {{
+                formatNumberDecimal(
+                  calcPrice(v.product.product, v.list.length),
+                  2,
+                )
+              }}
             </td>
           </tr>
         </tbody>
@@ -513,14 +522,16 @@ function print() {
     </section>
 
     <section
-      v-for="item in attachmentList.filter((v) => v.isImage)"
+      v-for="(item, i) in attachmentList.filter((v) => v.isImage)"
+      :key="i"
       class="content"
     >
       <q-img :src="item.url" />
     </section>
 
     <ViewPDF
-      v-for="item in attachmentList.filter((v) => v.isPDF)"
+      v-for="(item, i) in attachmentList.filter((v) => v.isPDF)"
+      :key="i"
       :url="item.url"
     />
   </div>

From f777e50bd473207be9becada53c25f1c03fc7835 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Thu, 20 Feb 2025 15:56:19 +0700
Subject: [PATCH 35/40] refactor: show btn view example

---
 src/pages/12_debit-note/FormPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
index e707379f..2d877731 100644
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -943,6 +943,7 @@ onMounted(async () => {
             />
           </nav>
           <!-- #TODO  add goToQuotation as @goto-quotation-->
+
           <DocumentExpansion
             v-if="view === null"
             :readonly
@@ -1155,7 +1156,6 @@ onMounted(async () => {
       <nav class="row justify-end">
         <!-- TODO: view example -->
         <MainButton
-          v-if="view === null"
           class="q-mr-auto"
           outlined
           icon="mdi-play-box-outline"

From ae21dc7ad74ee90329fc8dc96f87d68cb408a4d2 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 20 Feb 2025 17:18:46 +0700
Subject: [PATCH 36/40] refactor: add hideInput prop to SelectInput and
 SelectQuotation components for improved input visibility control

---
 src/components/shared/SelectInput.vue            | 3 ++-
 src/components/shared/select/SelectQuotation.vue | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/shared/SelectInput.vue b/src/components/shared/SelectInput.vue
index 7120fe22..06cd175e 100644
--- a/src/components/shared/SelectInput.vue
+++ b/src/components/shared/SelectInput.vue
@@ -27,6 +27,7 @@ const props = withDefaults(
     fillInput?: boolean;
     disable?: boolean;
     multiple?: boolean;
+    hideInput?: boolean;
 
     rules?: ((value: string) => string | true)[];
   }>(),
@@ -73,7 +74,7 @@ watch(
     outlined
     :clearable
     :disable
-    use-input
+    :use-input="!hideInput"
     emit-value
     map-options
     :multiple
diff --git a/src/components/shared/select/SelectQuotation.vue b/src/components/shared/select/SelectQuotation.vue
index 15dfb89c..ae9f7863 100644
--- a/src/components/shared/select/SelectQuotation.vue
+++ b/src/components/shared/select/SelectQuotation.vue
@@ -108,6 +108,7 @@ function setDefaultValue() {
     :label
     :placeholder
     :readonly
+    :hide-input="value !== ''"
     :disable="disabled"
     :option="selectOptions"
     :hide-selected="false"

From fa5a99d90fbc488d89bfa5117fc5ab1ffdb970e7 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 21 Feb 2025 11:53:59 +0700
Subject: [PATCH 37/40] refactor: dueDate set rules

---
 src/pages/12_debit-note/FormPage.vue             |  2 +-
 .../expansion/DocumentExpansion.vue              | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
index 2d877731..a003b814 100644
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -119,7 +119,7 @@ const currentFormData = ref<DebitNotePayload>({
   payBillDate: new Date(),
   paySplitCount: 0,
   payCondition: PayCondition.Full,
-  dueDate: new Date(),
+  dueDate: new Date(Date.now() + 86400000),
   discount: 0,
   status: 'CREATED',
   remark: '#[quotation-labor]<br/><br/>#[quotation-payment]',
diff --git a/src/pages/12_debit-note/expansion/DocumentExpansion.vue b/src/pages/12_debit-note/expansion/DocumentExpansion.vue
index 573d8c81..9206863b 100644
--- a/src/pages/12_debit-note/expansion/DocumentExpansion.vue
+++ b/src/pages/12_debit-note/expansion/DocumentExpansion.vue
@@ -69,6 +69,22 @@ const quotationCreatedBy = defineModel<string>('quotationCreatedBy');
             if (typeof v === 'string') dueDate = v;
           }
         "
+        :rules="[
+          () => {
+            if (!dueDate) return $t('form.error.required');
+
+            const currentDate = new Date(dueDate);
+            const toDate = new Date();
+            if (
+              !readonly &&
+              (currentDate.getTime() === toDate.getTime() ||
+                currentDate.getTime() < toDate.getTime())
+            )
+              return $t('quotation.validateDueDate');
+            return true;
+          },
+        ]"
+        :disabled-dates="(date: Date) => date.getTime() <= Date.now()"
         :readonly
       />
 

From b4a98ae2834c4a37f8f8a5a4696e65b2c037c4ac Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 21 Feb 2025 11:59:24 +0700
Subject: [PATCH 38/40] refactor: set date + 1 day

---
 src/pages/05_quotation/form.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/05_quotation/form.ts b/src/pages/05_quotation/form.ts
index 5f54dc2c..969144ad 100644
--- a/src/pages/05_quotation/form.ts
+++ b/src/pages/05_quotation/form.ts
@@ -30,7 +30,7 @@ export const DEFAULT_DATA: QuotationPayload = {
   paySplit: [],
   paySplitCount: 0,
   payCondition: 'Full',
-  dueDate: new Date(),
+  dueDate: new Date(Date.now() + 86400000),
   discount: 0,
   contactTel: '',
   contactName: '',

From 4aa27d834f843262647a6eb5ceb686639cc7c852 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 21 Feb 2025 13:59:25 +0700
Subject: [PATCH 39/40] refactor: handle goTo DebitNote

---
 src/pages/08_request-list/RequestListView.vue | 41 +++++++++++++++----
 src/pages/12_debit-note/FormPage.vue          |  8 ++++
 src/stores/request-list/types.ts              |  2 +-
 3 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index 4f63447f..574e8244 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -320,6 +320,16 @@ function goToQuotation(
 
   window.open(url.toString(), '_blank');
 }
+
+function goToDebitNote(opt?: { tab?: string; id?: string }) {
+  const { tab, id } = opt || {};
+  const url = new URL(
+    `/debit-note/${id}?mode=info&tab=${tab}`,
+    window.location.origin,
+  );
+
+  window.open(url.toString(), '_blank');
+}
 </script>
 <template>
   <div class="column surface-0 fullscreen" v-if="data">
@@ -503,7 +513,11 @@ function goToQuotation(
                     icon="mdi-file-document-outline"
                     :label="$t('requestList.quotationCode')"
                     :value="data.quotation.code || '-'"
-                    @label-click="goToQuotation(data.quotation)"
+                    @label-click="
+                      data.quotation.isDebitNote
+                        ? goToDebitNote({ id: data.quotation.id, tab: 'title' })
+                        : goToQuotation(data.quotation)
+                    "
                   />
                   <DataDisplay
                     clickable
@@ -517,11 +531,17 @@ function goToQuotation(
                     @label-click="
                       (_: string, i: number) => {
                         if (!data) return;
-                        goToQuotation(data.quotation, {
-                          tab: 'invoice',
-                          id: data.quotation.invoice?.[i]?.id,
-                          amount: data.quotation.invoice?.[i]?.amount,
-                        });
+
+                        data.quotation.isDebitNote
+                          ? goToDebitNote({
+                              id: data.quotation.id,
+                              tab: 'payment',
+                            })
+                          : goToQuotation(data.quotation, {
+                              tab: 'invoice',
+                              id: data.quotation.invoice?.[i]?.id,
+                              amount: data.quotation.invoice?.[i]?.amount,
+                            });
                       }
                     "
                   />
@@ -536,7 +556,14 @@ function goToQuotation(
                         (i: Invoice) => i.payment?.code || [],
                       )
                     "
-                    @click="goToQuotation(data.quotation, { tab: 'receipt' })"
+                    @click="
+                      data.quotation.isDebitNote
+                        ? goToDebitNote({
+                            id: data.quotation.id,
+                            tab: 'receipt',
+                          })
+                        : goToQuotation(data.quotation, { tab: 'receipt' })
+                    "
                   />
                   <div v-if="$q.screen.gt.sm" class="col"></div>
                 </div>
diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
index a003b814..838401cc 100644
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -879,6 +879,14 @@ onMounted(async () => {
     pageState.mode = route.query['mode'] as 'create' | 'edit' | 'info';
   }
 
+  if (typeof route.query['tab'] === 'string') {
+    view.value =
+      {
+        payment: QuotationStatus.PaymentPending,
+        receipt: QuotationStatus.PaymentSuccess,
+      }[route.query['tab']] || null;
+  }
+
   await useConfigStore().getConfig();
 });
 </script>
diff --git a/src/stores/request-list/types.ts b/src/stores/request-list/types.ts
index df1b5156..bca8637d 100644
--- a/src/stores/request-list/types.ts
+++ b/src/stores/request-list/types.ts
@@ -9,7 +9,7 @@ export type RequestData = {
   createdAt: string;
   updatedAt: string;
 
-  quotation: QuotationFull;
+  quotation: QuotationFull & { isDebitNote: boolean };
   quotationId: string;
 
   flow: Record<string, any>;

From 05ececd632c7f0eb5a036d9a8593f725f524827f Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 21 Feb 2025 14:28:40 +0700
Subject: [PATCH 40/40] refactor: edit color badge

---
 src/pages/12_debit-note/constants.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/pages/12_debit-note/constants.ts b/src/pages/12_debit-note/constants.ts
index 2434ea69..e9e400f8 100644
--- a/src/pages/12_debit-note/constants.ts
+++ b/src/pages/12_debit-note/constants.ts
@@ -80,6 +80,9 @@ export const columns = [
 ] as const satisfies QTableProps['columns'];
 
 export const hslaColors: Record<string, string> = {
-  Pending: '--blue-6-hsl',
-  Success: '--red-6-hsl',
+  Issued: '--orange-6-hsl',
+  PaymentPending: '--orange-10-hsl',
+  PaymentSuccess: '--green-8-hsl',
+  ProcessComplete: '--blue-6-hsl',
+  Canceled: '--red-6-hsl',
 };