refactor: clean code

src/pages/05_quotation/MainPage.vue

@@ -1,18 +1,45 @@
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from 'vue';
-import { storeToRefs } from 'pinia';
 import { pageTabs, fieldSelectedOption } from './constants';
+import { onMounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+
+//  at stores
+import useProductServiceStore from 'src/stores/product-service';
+import { useQuotationStore } from 'src/stores/quotations';
 import { baseUrl, waitAll } from 'src/stores/utils';
-import useOcrStore from 'stores/ocr';
+import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
+import useFlowStore from 'src/stores/flow';
+import useOcrStore from 'stores/ocr';
+
+//  at type
+import { CustomerBranchCreate } from 'stores/customer/types';
+import { Employee } from 'src/stores/employee/types';
+
+//  at component
+import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
+import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
+import { UploadFileGroup, noticeJobEmployment } from 'components/upload-file';
+import FormPerson from 'components/02_personnel-management/FormPerson.vue';
+import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
+import PaginationComponent from 'src/components/PaginationComponent.vue';
+import StatCardComponent from 'src/components/StatCardComponent.vue';
+import FormAbout from 'src/components/05_quotation/FormAbout.vue';
+import SelectZone from 'src/components/shared/SelectZone.vue';
+import PersonCard from 'src/components/shared/PersonCard.vue';
+import ProductServiceForm from './ProductServiceForm.vue';
+import CreateButton from 'src/components/AddButton.vue';
+import ItemCard from 'src/components/ItemCard.vue';
+import DialogForm from 'components/DialogForm.vue';
+import { AddButton } from 'src/components/button';
+import SideMenu from 'components/SideMenu.vue';
 
 import {
   uploadFileListEmployee,
   columnsAttachment,
   dialogCreateCustomerItem,
 } from 'src/pages/03_customer-management/constant';
-import SideMenu from 'components/SideMenu.vue';
-import useProductServiceStore from 'src/stores/product-service';
 import {
   ProductGroup,
   ProductList,
@@ -27,12 +54,7 @@ import {
   SaveButton,
   UndoButton,
 } from 'components/button';
-import { UploadFileGroup, noticeJobEmployment } from 'components/upload-file';
 
-import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
-import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
-import FormPerson from 'components/02_personnel-management/FormPerson.vue';
-import { DialogContainer, DialogHeader } from 'components/dialog';
 import ProfileBanner from 'components/ProfileBanner.vue';
 import { AddressForm } from 'components/form';
 import {
@@ -40,29 +62,11 @@ import {
   EmployerFormContact,
   EmployerFormAbout,
 } from 'src/pages/03_customer-management/components';
-import ItemCard from 'src/components/ItemCard.vue';
-import { CustomerBranchCreate } from 'stores/customer/types';
-import DialogForm from 'components/DialogForm.vue';
-import useFlowStore from 'src/stores/flow';
-import { Employee } from 'src/stores/employee/types';
-
-import { AddButton } from 'src/components/button';
-import StatCardComponent from 'src/components/StatCardComponent.vue';
-import CreateButton from 'src/components/AddButton.vue';
-import PaginationComponent from 'src/components/PaginationComponent.vue';
-import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
-import FormAbout from 'src/components/05_quotation/FormAbout.vue';
-import SelectZone from 'src/components/shared/SelectZone.vue';
-import PersonCard from 'src/components/shared/PersonCard.vue';
-import { useRouter } from 'vue-router';
-import ProductServiceForm from './ProductServiceForm.vue';
 
 import {
   useCustomerForm,
   useEmployeeForm,
 } from 'src/pages/03_customer-management/form';
-import useCustomerStore from 'stores/customer';
-import { useQuotationStore } from 'src/stores/quotations';
 import QuotationView from './QuotationView.vue';
 import { watch } from 'vue';
 
@@ -77,7 +81,26 @@ type Node = {
   children?: Node[];
 };
 
+const employeeStore = useEmployeeStore();
+const ocrStore = useOcrStore();
+const customerFormStore = useCustomerForm();
+const employeeFormStore = useEmployeeForm();
+const customerStore = useCustomerStore();
 const flowStore = useFlowStore();
+
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
+const { state: employeeFormState, currentFromDataEmployee } =
+  storeToRefs(employeeFormStore);
+
+const currentCustomerId = ref<string | undefined>();
+const refreshImageState = ref(false);
+const emptyCreateDialog = ref(true);
+const onCreateImageList = ref<{
+  selectedImage: string;
+  list: { url: string; imgFile: File | null; name: string }[];
+}>({ selectedImage: '', list: [] });
+
 const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
   {
     main: [],
@@ -94,24 +117,6 @@ const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
   },
 );
 
-const employeeStore = useEmployeeStore();
-const ocrStore = useOcrStore();
-const customerFormStore = useCustomerForm();
-const employeeFormStore = useEmployeeForm();
-const customerStore = useCustomerStore();
-const currentCustomerId = ref<string | undefined>();
-
-const { state: customerFormState, currentFormData: customerFormData } =
-  storeToRefs(customerFormStore);
-const { state: employeeFormState, currentFromDataEmployee } =
-  storeToRefs(employeeFormStore);
-const refreshImageState = ref(false);
-const onCreateImageList = ref<{
-  selectedImage: string;
-  list: { url: string; imgFile: File | null; name: string }[];
-}>({ selectedImage: '', list: [] });
-
-const test2 = ref(false);
 const nodes = ref<Node[]>([
   {
     title: 'กลุ่มสินค้าและบริการที่ 1',