diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index b7310c49..9e2d6471 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -253,7 +253,7 @@ const formDataGroup = ref<ProductGroupCreate>({
   registeredBranchId: '',
 });
 
-const formDataProduct = ref<ProductCreate>({
+const formProduct = ref<ProductCreate>({
   expenseType: '',
   vatIncluded: true,
   productGroupId: '',
@@ -270,7 +270,7 @@ const formDataProduct = ref<ProductCreate>({
 });
 
 const currWorkflow = ref<WorkflowTemplate>();
-const formDataProductService = ref<ServiceCreate>({
+const formService = ref<ServiceCreate>({
   work: [],
   attributes: {
     showTotalPrice: false,
@@ -706,7 +706,7 @@ async function toggleStatusProduct(id: string, status: Status) {
   const res = await editProduct(id, {
     status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
   });
-  if (res) formDataProduct.value.status = res.status;
+  if (res) formProduct.value.status = res.status;
 
   await alternativeFetch();
   flowStore.rotate();
@@ -716,7 +716,7 @@ async function toggleStatusService(id: string, status: Status) {
   const res = await editService(id, {
     status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
   });
-  if (res) formDataProductService.value.status = res.status;
+  if (res) formService.value.status = res.status;
 
   await alternativeFetch();
   flowStore.rotate();
@@ -944,7 +944,7 @@ async function assignFormDataProductService(id: string) {
       selectedImage: res.selectedImage,
     };
 
-    formDataProductService.value = { ...prevService.value };
+    formService.value = { ...prevService.value };
 
     res.work.forEach((item) => {
       prevService.value.work.push({
@@ -959,7 +959,7 @@ async function assignFormDataProductService(id: string) {
       });
     });
 
-    formDataProductService.value.work = prevService.value.work;
+    formService.value.work = prevService.value.work;
 
     workItems.value = res.work.map((item) => {
       const maxInstallmentsNo = item.productOnWork.map(
@@ -1029,7 +1029,7 @@ async function assignFormDataProduct(data: Product) {
   };
   if (prevProduct.value.document)
     formProductDocument.value = prevProduct.value.document;
-  formDataProduct.value = { ...prevProduct.value };
+  formProduct.value = { ...prevProduct.value };
 }
 
 function clearFormGroup() {
@@ -1045,7 +1045,7 @@ function clearFormGroup() {
 }
 
 function clearFormProduct() {
-  formDataProduct.value = {
+  formProduct.value = {
     productGroupId: '',
     remark: '',
     serviceCharge: 0,
@@ -1070,7 +1070,7 @@ function clearFormProduct() {
 
 function clearFormService() {
   currWorkflow.value = undefined;
-  formDataProductService.value = {
+  formService.value = {
     code: '',
     name: '',
     detail: '',
@@ -1097,10 +1097,10 @@ function clearFormService() {
 }
 
 function assignFormDataProductServiceCreate() {
-  formDataProductService.value.work = [];
+  formService.value.work = [];
 
   workItems.value.forEach((item) => {
-    formDataProductService.value.work.push({
+    formService.value.work.push({
       id: item.id,
       name: item.name,
       attributes: item.attributes,
@@ -1127,26 +1127,22 @@ function assignFormDataProductServiceCreate() {
 
 async function submitService(notClose = false) {
   assignFormDataProductServiceCreate();
-  formDataProductService.value.productGroupId = currentIdGroup.value;
+  formService.value.productGroupId = currentIdGroup.value;
 
-  if (profileFileImg.value)
-    formDataProductService.value.image = profileFileImg.value;
+  if (profileFileImg.value) formService.value.image = profileFileImg.value;
 
   if (dialogService.value) {
-    formDataProductService.value.productGroupId = currentIdGroup.value;
-    formDataProductService.value.work.forEach((s) => (s.id = undefined));
+    formService.value.productGroupId = currentIdGroup.value;
+    formService.value.work.forEach((s) => (s.id = undefined));
 
-    if (
-      formDataProductService.value.code === '' ||
-      formDataProductService.value.name === ''
-    ) {
+    if (formService.value.code === '' || formService.value.name === '') {
       serviceTab.value = 1;
       return;
     }
 
     const res = await createService(
       {
-        ...formDataProductService.value,
+        ...formService.value,
 
         workflowId: currWorkflow.value?.id || '',
       },
@@ -1162,10 +1158,8 @@ async function submitService(notClose = false) {
 
   if (dialogServiceEdit.value) {
     await editService(currentIdService.value, {
-      ...formDataProductService.value,
-      status: statusToggle.value
-        ? formDataProductService.value.status
-        : 'INACTIVE',
+      ...formService.value,
+      status: statusToggle.value ? formService.value.status : 'INACTIVE',
     });
   }
 
@@ -1179,21 +1173,18 @@ async function submitService(notClose = false) {
 }
 
 async function submitProduct(notClose = false) {
-  formDataProduct.value.productGroupId = currentIdGroup.value;
+  formProduct.value.productGroupId = currentIdGroup.value;
   if (profileFileImg.value) {
-    formDataProduct.value.image = profileFileImg.value;
+    formProduct.value.image = profileFileImg.value;
   }
 
   if (dialogProduct.value) {
-    if (
-      formDataProduct.value.name === '' ||
-      formDataProduct.value.code === ''
-    ) {
+    if (formProduct.value.name === '' || formProduct.value.code === '') {
       productTab.value = 1;
       return;
     }
     const res = await createProduct(
-      { ...formDataProduct.value, document: formProductDocument.value },
+      { ...formProduct.value, document: formProductDocument.value },
       onCreateImageList.value,
     );
 
@@ -1207,7 +1198,7 @@ async function submitProduct(notClose = false) {
 
   if (dialogProductEdit.value) {
     await editProduct(currentIdProduct.value, {
-      ...formDataProduct.value,
+      ...formProduct.value,
       status: statusToggle.value ? 'ACTIVE' : 'INACTIVE',
       document: formProductDocument.value,
     });
@@ -1410,12 +1401,12 @@ async function alternativeFetch() {
 
 async function cloneServiceData() {
   if (!currentService.value) return;
-  const currentSelectedImage = formDataProductService.value.selectedImage;
-  formDataProductService.value = {
+  const currentSelectedImage = formService.value.selectedImage;
+  formService.value = {
     ...prevService.value,
     attributes: JSON.parse(JSON.stringify(currentService.value.attributes)),
   };
-  formDataProductService.value.selectedImage = currentSelectedImage;
+  formService.value.selectedImage = currentSelectedImage;
 
   await nextTick();
   workItems.value = currentService.value.work.map((item) => {
@@ -1689,7 +1680,7 @@ function handleSubmitSameWorkflow() {
 }
 
 watch(
-  () => formDataProductService.value.attributes.workflowId,
+  () => formService.value.attributes.workflowId,
   async (a, b) => {
     if (a && b && a !== b) {
       handleSubmitWorkflow(a);
@@ -3642,11 +3633,11 @@ watch(
           }
         "
         @edit="imageDialog = isImageEdit = true"
-        v-model:toggle-status="formDataProduct.status"
+        v-model:toggle-status="formProduct.status"
         @update:toggle-status="
           () => {
-            formDataProduct.status =
-              formDataProduct.status === 'CREATED' ? 'INACTIVE' : 'CREATED';
+            formProduct.status =
+              formProduct.status === 'CREATED' ? 'INACTIVE' : 'CREATED';
           }
         "
         :tabs-list="
@@ -3725,22 +3716,22 @@ watch(
         </div>
         <BasicInfoProduct
           v-if="productTab === 1"
-          v-model:detail="formDataProduct.detail"
-          v-model:remark="formDataProduct.remark"
-          v-model:name="formDataProduct.name"
-          v-model:code="formDataProduct.code"
-          v-model:process="formDataProduct.process"
-          v-model:expense-type="formDataProduct.expenseType"
+          v-model:detail="formProduct.detail"
+          v-model:remark="formProduct.remark"
+          v-model:name="formProduct.name"
+          v-model:code="formProduct.code"
+          v-model:process="formProduct.process"
+          v-model:expense-type="formProduct.expenseType"
           dense
           separator
         />
         <PriceDataComponent
           v-if="productTab === 2"
-          v-model:price="formDataProduct.price"
-          v-model:agent-price="formDataProduct.agentPrice"
-          v-model:service-charge="formDataProduct.serviceCharge"
-          v-model:vat-included="formDataProduct.vatIncluded"
-          v-model:calc-vat="formDataProduct.calcVat"
+          v-model:price="formProduct.price"
+          v-model:agent-price="formProduct.agentPrice"
+          v-model:service-charge="formProduct.serviceCharge"
+          v-model:vat-included="formProduct.vatIncluded"
+          v-model:calc-vat="formProduct.calcVat"
           dense
         />
         <FormDocument
@@ -3778,21 +3769,21 @@ watch(
         prefix="dialog"
         hideFade
         :use-toggle="actionDisplay"
-        :active="formDataProduct.status !== 'INACTIVE'"
-        :title="formDataProduct.name"
-        :caption="formDataProduct.code"
+        :active="formProduct.status !== 'INACTIVE'"
+        :title="formProduct.name"
+        :caption="formProduct.code"
         icon="mdi-shopping-outline"
         fallback-img="/images/product-avatar.png"
         color="var(--teal-10)"
         :toggle-title="$t('status.title')"
         :img="
-          `${baseUrl}/product/${currentIdProduct}/image/${formDataProduct.selectedImage}`.concat(
+          `${baseUrl}/product/${currentIdProduct}/image/${formProduct.selectedImage}`.concat(
             refreshImageState ? `?ts=${Date.now()}` : '',
           ) || '/images/product-avatar.png'
         "
         fallback-cover="/images/product-banner.png"
         :bg-color="`hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
-        v-model:toggle-status="formDataProduct.status"
+        v-model:toggle-status="formProduct.status"
         @view="
           () => {
             imageDialog = true;
@@ -3802,10 +3793,10 @@ watch(
         @edit="imageDialog = isImageEdit = true"
         @update:toggle-status="
           async () => {
-            if (formDataProduct.status)
+            if (formProduct.status)
               await triggerChangeStatus(
                 currentIdProduct,
-                formDataProduct.status,
+                formProduct.status,
                 'product',
               );
           }
@@ -3847,7 +3838,7 @@ watch(
           icon-only
           @click="
             () => {
-              formDataProduct = { ...prevProduct };
+              formProduct = { ...prevProduct };
               if (prevProduct.document)
                 formProductDocument = prevProduct.document;
               infoProductEdit = false;
@@ -3919,12 +3910,12 @@ watch(
         <BasicInfoProduct
           v-if="productTab === 1"
           :readonly="!infoProductEdit"
-          v-model:detail="formDataProduct.detail"
-          v-model:remark="formDataProduct.remark"
-          v-model:name="formDataProduct.name"
-          v-model:code="formDataProduct.code"
-          v-model:process="formDataProduct.process"
-          v-model:expense-type="formDataProduct.expenseType"
+          v-model:detail="formProduct.detail"
+          v-model:remark="formProduct.remark"
+          v-model:name="formProduct.name"
+          v-model:code="formProduct.code"
+          v-model:process="formProduct.process"
+          v-model:expense-type="formProduct.expenseType"
           disableCode
           dense
           separator
@@ -3932,11 +3923,11 @@ watch(
         <PriceDataComponent
           v-if="productTab === 2"
           :readonly="!infoProductEdit"
-          v-model:price="formDataProduct.price"
-          v-model:agent-price="formDataProduct.agentPrice"
-          v-model:service-charge="formDataProduct.serviceCharge"
-          v-model:vat-included="formDataProduct.vatIncluded"
-          v-model:calc-vat="formDataProduct.calcVat"
+          v-model:price="formProduct.price"
+          v-model:agent-price="formProduct.agentPrice"
+          v-model:service-charge="formProduct.serviceCharge"
+          v-model:vat-included="formProduct.vatIncluded"
+          v-model:calc-vat="formProduct.calcVat"
           dense
           :priceDisplay="priceDisplay"
         />
@@ -3994,13 +3985,11 @@ watch(
           }
         "
         @edit="imageDialog = isImageEdit = true"
-        v-model:toggle-status="formDataProductService.status"
+        v-model:toggle-status="formService.status"
         @update:toggle-status="
           () => {
-            formDataProductService.status =
-              formDataProductService.status === 'CREATED'
-                ? 'INACTIVE'
-                : 'CREATED';
+            formService.status =
+              formService.status === 'CREATED' ? 'INACTIVE' : 'CREATED';
           }
         "
         :tabs-list="
@@ -4157,9 +4146,9 @@ watch(
           v-if="serviceTab === 1"
           dense
           service
-          v-model:service-code="formDataProductService.code"
-          v-model:service-description="formDataProductService.detail"
-          v-model:service-name-th="formDataProductService.name"
+          v-model:service-code="formService.code"
+          v-model:service-description="formService.detail"
+          v-model:service-name-th="formService.name"
         />
 
         <FormServiceWork
@@ -4168,7 +4157,7 @@ watch(
           v-model:work-items="workItems"
           v-model:workflow="currWorkflow"
           :tree-view="serviceTreeView"
-          :service="formDataProductService"
+          :service="formService"
           dense
           @add-product="
             async (index) => {
@@ -4227,7 +4216,7 @@ watch(
     select-flow
     :on-edit="dialogServiceEdit"
     v-model:data-step="workItems[currentWorkIndex].attributes.workflowStep"
-    v-model:workflow-id="formDataProductService.attributes.workflowId"
+    v-model:workflow-id="formService.attributes.workflowId"
     v-model="propertiesDialog"
     @show="
       () => {
@@ -4312,19 +4301,19 @@ watch(
         prefix="dialog"
         hide-fade
         :use-toggle="actionDisplay"
-        :title="formDataProductService.name"
-        :caption="formDataProductService.code"
-        :active="formDataProductService.status !== 'INACTIVE'"
+        :title="formService.name"
+        :caption="formService.code"
+        :active="formService.status !== 'INACTIVE'"
         :toggle-title="$t('status.title')"
         :img="
-          `${baseUrl}/service/${currentIdService}/image/${formDataProductService.selectedImage}`.concat(
+          `${baseUrl}/service/${currentIdService}/image/${formService.selectedImage}`.concat(
             refreshImageState ? `?ts=${Date.now()}` : '',
           ) || '/images/service-avatar.png'
         "
         fallback-img="/images/service-avatar.png"
         fallback-cover="/images/service-banner.png"
         :bg-color="`hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`"
-        v-model:toggle-status="formDataProductService.status"
+        v-model:toggle-status="formService.status"
         @view="
           () => {
             imageDialog = true;
@@ -4334,10 +4323,10 @@ watch(
         @edit="imageDialog = isImageEdit = true"
         @update:toggle-status="
           async () => {
-            if (formDataProductService.status)
+            if (formService.status)
               await triggerChangeStatus(
                 currentIdService,
-                formDataProductService.status,
+                formService.status,
                 'service',
               );
           }
@@ -4545,9 +4534,9 @@ watch(
           dense
           service
           disableCode
-          v-model:service-code="formDataProductService.code"
-          v-model:service-description="formDataProductService.detail"
-          v-model:service-name-th="formDataProductService.name"
+          v-model:service-code="formService.code"
+          v-model:service-description="formService.detail"
+          v-model:service-name-th="formService.name"
         />
 
         <FormServiceWork
@@ -4555,7 +4544,7 @@ watch(
           ref="refEditServiceWork"
           v-model:work-items="workItems"
           v-model:workflow="currWorkflow"
-          :service="formDataProductService"
+          :service="formService"
           :tree-view="serviceTreeView"
           :readonly="!infoServiceEdit"
           :price-display="priceDisplay"
@@ -4784,8 +4773,8 @@ watch(
         await fetchImageList(
           dialogProductEdit ? currentIdProduct : currentIdService,
           dialogProductEdit
-            ? formDataProduct.selectedImage || ''
-            : formDataProductService.selectedImage || '',
+            ? formProduct.selectedImage || ''
+            : formService.selectedImage || '',
           type,
         );
       }
@@ -4800,14 +4789,14 @@ watch(
           const id = dialogProductEdit ? currentIdProduct : currentIdService;
           refreshImageState = true;
           type === 'product'
-            ? (formDataProduct.selectedImage = v)
-            : (formDataProductService.selectedImage = v);
+            ? (formProduct.selectedImage = v)
+            : (formService.selectedImage = v);
           imageList ? (imageList.selectedImage = v) : '';
           profileUrl = `${baseUrl}/${type}/${id}/image/${v}`;
           if (type === 'product') {
             const { selectedImage, ...data } = prevProduct;
-            formDataProduct = {
-              selectedImage: formDataProduct.selectedImage,
+            formProduct = {
+              selectedImage: formProduct.selectedImage,
               ...data,
             };
             await submitProduct(true);
@@ -4829,9 +4818,7 @@ watch(
         class="justify-center flex text-bold"
       >
         {{ $t('general.image') }}
-        {{
-          dialogProductEdit ? formDataProduct.name : formDataProductService.name
-        }}
+        {{ dialogProductEdit ? formProduct.name : formService.name }}
       </span>
     </template>
     <template #error>