Merge branch 'develop'

public/option/option.json

@@ -53,22 +53,22 @@
       }
     ],
     "typeProduct": [
+      {
+        "label": "AC",
+        "value": "AC"
+      },
       {
         "label": "DOE",
         "value": "DOE"
       },
-      {
-        "label": "IMM",
-        "value": "IMM"
-      },
-      {
-        "label": "TM",
-        "value": "TM"
-      },
       {
         "label": "HP",
         "value": "HP"
       },
+      {
+        "label": "IMM",
+        "value": "IMM"
+      },
       {
         "label": "MOUC",
         "value": "MOUC"
@@ -78,8 +78,12 @@
         "value": "MOUL"
       },
       {
-        "label": "AC",
+        "label": "TM",
-        "value": "AC"
+        "value": "TM"
+      },
+      {
+        "label": "VS",
+        "value": "VS"
       }
     ],
 
@@ -926,22 +930,22 @@
       }
     ],
     "typeProduct": [
+      {
+        "label": "AC",
+        "value": "AC"
+      },
       {
         "label": "DOE",
         "value": "DOE"
       },
-      {
-        "label": "IMM",
-        "value": "IMM"
-      },
-      {
-        "label": "TM",
-        "value": "TM"
-      },
       {
         "label": "HP",
         "value": "HP"
       },
+      {
+        "label": "IMM",
+        "value": "IMM"
+      },
       {
         "label": "MOUC",
         "value": "MOUC"
@@ -951,8 +955,12 @@
         "value": "MOUL"
       },
       {
-        "label": "AC",
+        "label": "TM",
-        "value": "AC"
+        "value": "TM"
+      },
+      {
+        "label": "VS",
+        "value": "VS"
       }
     ],
 

src/components/03_customer-management/employee/BasicInformation.vue

@@ -160,6 +160,8 @@ onMounted(() => {
         ]"
       >
         <template v-slot:option="scope">
+          <!-- {{ console.log(scope.opt) }} -->
+
           <q-item
             v-if="scope.opt"
             v-bind="scope.itemProps"
@@ -170,58 +172,42 @@ onMounted(() => {
             </div>
             <div class="q-mt-sm">
               <div>
-                {{ scope.opt.code }} {{ $t('general.name') }}:
+                <span v-if="scope.opt.customer.customerType">
-
+                  {{ `${scope.opt.code} ${$t('general.name')}` }}:
-                <template v-if="scope.opt.customer.customerType === 'CORP'">
                   {{
-                    $i18n.locale === 'eng'
+                    scope.opt.customer.customerType === 'CORP'
-                      ? scope.opt.registerName
+                      ? scope.opt.customerName
-                      : scope.opt.registerNameEN
+                      : $i18n.locale === 'eng'
+                        ? `${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
+                          '-'
+                        : `${scope.opt.firstName} ${scope.opt.lastName}` || '-'
                   }}
-                </template>
+                </span>
-                <template v-else>
-                  {{
-                    $i18n.locale === 'eng'
-                      ? scope.opt.customer.firstNameEN ||
-                        '-' + ' ' + scope.opt.customer.lastNameEN ||
-                        ''
-                      : scope.opt.customer.firstName ||
-                        '-' + ' ' + scope.opt.customer.lastName ||
-                        ''
-                  }}
-                </template>
               </div>
 
               <div class="text-caption app-text-muted-2 q-mb-xs">
-                <div v-if="scope.opt.customer" class="col column">
+                <span v-if="scope.opt.customer" class="col column">
-                  <span>
+                  {{ $t('customerEmployee.form.employerSelect.branchName') }}:
-                    {{ $t('customerEmployee.form.employerSelect.branchName') }}:
+                  {{
-                    {{
+                    scope.opt.customer.customerType === 'CORP'
-                      $i18n.locale === 'eng'
+                      ? $i18n.locale === 'eng'
                         ? scope.opt.registerNameEN
                         : scope.opt.registerName
-                    }}
+                      : $i18n.locale === 'eng'
-                  </span>
+                        ? `${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
-                  <span>
+                          '-'
-                    {{ $t('customerEmployee.form.employerSelect.branchName') }}:
+                        : `${scope.opt.firstName} ${scope.opt.lastName}` || '-'
-                    {{
+                  }}
-                      $i18n.locale === 'eng'
+                </span>
-                        ? scope.opt.customer.firstNameEN ||
+                <span v-if="scope.opt.province" class="col">
-                          '-' + ' ' + scope.opt.customer.lastNameEN
-                        : scope.opt.customer.firstName ||
-                          '-' + ' ' + scope.opt.customer.lastName
-                    }}
-                  </span>
-                </div>
-                <div v-if="scope.opt.province" class="col">
                   {{ $t('general.address') }}
                   {{
                     $i18n.locale === 'eng'
-                      ? `${scope.opt.addressEN || ''} ${scope.opt.subDistrict.nameEN || ''} ${scope.opt.district.nameEN || ''} ${scope.opt.province.nameEN || ''}`
+                      ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
-                      : `${scope.opt.address || ''} ${scope.opt.subDistrict.name || ''} ${scope.opt.district.name || ''} ${scope.opt.province.name || ''}`
+                      : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.street')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
                   }}
                   {{ scope.opt.subDistrict?.zipCode || '' }}
-                </div>
+                </span>
               </div>
             </div>
           </q-item>

src/components/04_product-service/FormServiceWork.vue

@@ -5,17 +5,21 @@ import { moveItemUp, moveItemDown, deleteItem, dialog } from 'stores/utils';
 import NoData from 'components/NoData.vue';
 import WorkManagementComponent from './WorkManagementComponent.vue';
 import AddButton from '../button/AddButton.vue';
-import { WorkItems } from 'stores/product-service/types';
+import { ServiceCreate, WorkItems } from 'stores/product-service/types';
+import TreeView from '../shared/TreeView.vue';
+import { ref, watch } from 'vue';
 
 const { t } = useI18n();
 
 const workItems = defineModel<WorkItems[]>('workItems', { default: [] });
 
-defineProps<{
+const props = defineProps<{
+  service?: ServiceCreate;
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  treeView?: boolean;
 
   priceDisplay?: {
     price: boolean;
@@ -30,6 +34,41 @@ defineEmits<{
   (e: 'workProperties', index: number): void;
 }>();
 
+const nodes = ref([
+  {
+    title: props.service?.name,
+    subtitle: props.service?.code || ' ',
+    selected: false,
+    opened: true,
+    children: (function () {
+      const noNameObjects = workItems.value
+        .filter((v) => !v.name)
+        .flatMap((v) =>
+          v.product.map((x) => ({
+            title: x.name,
+            subtitle: x.code || ' ',
+            opened: true,
+            icon: 'mdi-shopping-outline',
+            bg: 'hsla(var(--teal-10-hsl)/0.1)',
+            fg: 'var(--teal-10)',
+          })),
+        );
+      const withNameObjects = workItems.value
+        .filter((v) => v.name)
+        .flatMap((v) => ({
+          title: v.name,
+          subtitle: ' ',
+          opened: true,
+          children: v.product.map((x) => ({
+            title: x.name,
+            subtitle: x.code || ' ',
+          })),
+        }));
+      return noNameObjects.concat(withNameObjects);
+    })(),
+  },
+]);
+
 function addWork() {
   workItems.value.push({
     id: '',
@@ -52,6 +91,47 @@ function confirmDelete(items: unknown[], index: number) {
     cancel: () => {},
   });
 }
+
+watch(
+  () => workItems,
+  () => {
+    nodes.value = [
+      {
+        title: props.service?.name,
+        subtitle: props.service?.code || ' ',
+        selected: false,
+        opened: true,
+        children: (function () {
+          const noNameObjects = workItems.value
+            .filter((v) => !v.name)
+            .flatMap((v) =>
+              v.product.map((x) => ({
+                title: x.name,
+                subtitle: x.code || ' ',
+                opened: true,
+                icon: 'mdi-shopping-outline',
+                bg: 'hsla(var(--teal-10-hsl)/0.1)',
+                fg: 'var(--teal-10)',
+              })),
+            );
+          const withNameObjects = workItems.value
+            .filter((v) => v.name)
+            .flatMap((v) => ({
+              title: v.name,
+              subtitle: ' ',
+              opened: true,
+              children: v.product.map((x) => ({
+                title: x.name,
+                subtitle: x.code || ' ',
+              })),
+            }));
+          return noNameObjects.concat(withNameObjects);
+        })(),
+      },
+    ];
+  },
+  { deep: true },
+);
 </script>
 
 <template>
@@ -75,7 +155,7 @@ function confirmDelete(items: unknown[], index: number) {
       />
     </div>
 
-    <div v-if="workItems.length > 0" class="q-gutter-y-md row">
+    <div v-if="workItems.length > 0 && !treeView" class="q-gutter-y-md row">
       <WorkManagementComponent
         class="col-12"
         v-for="(work, index) in workItems"
@@ -101,6 +181,39 @@ function confirmDelete(items: unknown[], index: number) {
       <div class="col-12" style="height: 12px"></div>
     </div>
 
+    <div
+      v-else-if="workItems.length > 0 && treeView"
+      class="row rounded bordered surface-2 col q-pa-md scroll"
+    >
+      <TreeView
+        expandable
+        hideCheckBox
+        icon-size="2.5rem"
+        class="full-width"
+        v-model:nodes="nodes"
+        :decoration="[
+          {
+            level: 0,
+            icon: 'mdi-server-outline',
+            bg: 'hsla(var(--orange-5-hsl)/0.1)',
+            fg: 'var(--orange-5)',
+          },
+          {
+            level: 1,
+            icon: 'mdi-briefcase-outline',
+            bg: 'hsla(var(--violet-11-hsl)/0.1)',
+            fg: 'var(--violet-11)',
+          },
+          {
+            level: 2,
+            icon: 'mdi-shopping-outline',
+            bg: 'hsla(var(--teal-10-hsl)/0.1)',
+            fg: 'var(--teal-10)',
+          },
+        ]"
+      />
+    </div>
+
     <div
       v-else
       class="col row rounded bordered surface-2 justify-center items-center"

src/components/04_product-service/PriceDataComponent.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+import { commaInput } from 'stores/utils';
+
 const serviceCharge = defineModel<number>('serviceCharge');
 const agentPrice = defineModel<number>('agentPrice');
 const price = defineModel<number>('price');
 const vatIncluded = defineModel<boolean>('vatIncluded');
 
+const price4Show = ref('');
+const agentPrice4Show = ref('');
+const serviceCharge4Show = ref('');
+
 withDefaults(
   defineProps<{
     dense?: boolean;
@@ -83,9 +90,19 @@ withDefaults(
         :borderless="readonly"
         hide-bottom-space
         class="col-4"
-        type="number"
         :label="$t('productService.product.salePrice')"
-        v-model="price"
+        :model-value="commaInput(price?.toString() || '0')"
+        @update:model-value="
+          (v) => {
+            if (typeof v === 'string') price4Show = commaInput(v);
+            const x = parseInt(
+              price4Show && typeof price4Show === 'string'
+                ? price4Show.replace(/,/g, '')
+                : '',
+            );
+            price = x;
+          }
+        "
       />
 
       <q-input
@@ -98,9 +115,19 @@ withDefaults(
         :borderless="readonly"
         hide-bottom-space
         class="col-4"
-        type="number"
         :label="$t('productService.product.agentPrice')"
-        v-model="agentPrice"
+        :model-value="commaInput(agentPrice?.toString() || '0')"
+        @update:model-value="
+          (v) => {
+            if (typeof v === 'string') agentPrice4Show = commaInput(v);
+            const x = parseInt(
+              agentPrice4Show && typeof agentPrice4Show === 'string'
+                ? agentPrice4Show.replace(/,/g, '')
+                : '',
+            );
+            agentPrice = x;
+          }
+        "
       />
 
       <q-input
@@ -113,9 +140,19 @@ withDefaults(
         :borderless="readonly"
         hide-bottom-space
         class="col-4"
-        type="number"
         :label="$t('productService.product.processingPrice')"
-        v-model="serviceCharge"
+        :model-value="commaInput(serviceCharge?.toString() || '0')"
+        @update:model-value="
+          (v) => {
+            if (typeof v === 'string') serviceCharge4Show = commaInput(v);
+            const x = parseInt(
+              serviceCharge4Show && typeof serviceCharge4Show === 'string'
+                ? serviceCharge4Show.replace(/,/g, '')
+                : '',
+            );
+            serviceCharge = x;
+          }
+        "
       />
     </div>
   </div>

src/components/TableComponents.vue

@@ -16,6 +16,7 @@ const props = withDefaults(
     hidePagination?: boolean;
 
     imgColumn?: string;
+    customColumn?: string[];
   }>(),
   {
     row: () => [],
@@ -26,6 +27,7 @@ const props = withDefaults(
     hideHeader: false,
     buttomDownload: false,
     imgColumn: '',
+    customColumn: () => [],
   },
 );
 
@@ -45,8 +47,6 @@ defineEmits<{
     :no-data-label="$t('general.noDataTable')"
     :hide-pagination
   >
-    <slot name="zxc"></slot>
-
     <template v-slot:header="props">
       <q-tr
         style="background-color: hsla(var(--info-bg) / 0.07)"
@@ -77,8 +77,17 @@ defineEmits<{
       </q-td>
     </template>
 
+    <template
+      v-for="col in customColumn"
+      :key="col"
+      v-slot:[`body-cell-${col}`]="props"
+    >
+      <slot :name="`body-cell-${col}`" :props="props"></slot>
+    </template>
+
     <template v-slot:body-cell-action="props">
-      <q-td class="text-center">
+      <q-td class="text-center row items-center">
+        <slot name="button" :props="props"></slot>
         <DeleteButton iconOnly v-if="buttonDelete" />
 
         <q-btn

src/components/shared/TreeView.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
+import { computed } from 'vue';
 
 type Node = {
   [key: string]: any;
   opened?: boolean;
   selected?: boolean;
+  bg?: string;
+  fg?: string;
+  icon?: string;
   children?: Node[];
 };
 
@@ -13,6 +17,8 @@ type Props = {
   keyTitle?: string;
   keySubtitle?: string;
   expandable?: boolean;
+  hideCheckBox?: boolean;
+  iconSize?: string;
   decoration?: {
     level?: number;
     bg?: string;
@@ -27,6 +33,11 @@ const nodes = defineModel<Node[]>('nodes', { required: true });
 const emits = defineEmits<{ (e: 'checked'): void }>();
 
 const dec = props.decoration?.find((v) => v.level === (props.level || 0));
+const maxLevel = computed(() =>
+  props.decoration?.reduce((max, v) => {
+    return v.level && v.level > max ? v.level : max;
+  }, 0),
+);
 
 function recursiveDeselect(node: Node) {
   if (node.children) {
@@ -48,8 +59,22 @@ function toggleExpand(node: Node) {
 </script>
 
 <template>
-  <div class="tree-container">
+  <div
-    <div v-for="(node, i) in nodes" class="tree-item" :key="i">
+    class="tree-container"
+    :class="{
+      'q-pl-lg': level && level > 0,
+      'last-children': level && level === maxLevel,
+    }"
+  >
+    <div
+      v-for="(node, i) in nodes"
+      class="tree-item"
+      :class="{
+        'q-pt-sm': level !== 0 && level !== maxLevel && i !== 0,
+        'q-pt-xs': level === maxLevel && i === 0,
+      }"
+      :key="i"
+    >
       <slot
         v-if="$slots['item']"
         name="item"
@@ -61,7 +86,23 @@ function toggleExpand(node: Node) {
           class="item__content row items-center no-wrap"
           @click="toggleExpand(node)"
         >
-          <label class="flex items-center item__checkbox" @click.stop>
+          <div
+            v-if="level !== maxLevel"
+            class="q-mr-md"
+            :style="`color: ${node.children?.length === 0 || !node.children ? 'transparent' : 'var(--stone-4)'}`"
+          >
+            <q-icon
+              name="mdi-chevron-down-circle"
+              size="sm"
+              :style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
+            />
+          </div>
+
+          <label
+            v-if="!hideCheckBox"
+            class="flex items-center item__checkbox"
+            @click.stop
+          >
             <input
               type="checkbox"
               v-model="node.selected"
@@ -71,9 +112,17 @@ function toggleExpand(node: Node) {
 
           <div
             class="item__icon flex items-center justify-center"
-            :style="`background: ${dec?.bg}; color: ${dec?.fg}`"
+            :style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
           >
-            <Icon v-if="dec && dec.icon" :icon="dec.icon" />
+            <div
+              :style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
+            >
+              <Icon
+                v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
+                :icon="node.icon || dec.icon"
+                class="full-width full-height"
+              />
+            </div>
           </div>
 
           <div class="column">
@@ -86,14 +135,13 @@ function toggleExpand(node: Node) {
           </div>
         </div>
       </template>
-      <q-separator v-if="!level"></q-separator>
+      <q-separator v-if="!level" spaced="md"></q-separator>
 
       <transition name="slide">
-        <div
+        <div v-if="node.opened && node.children && node.children.length > 0">
-          class="q-pl-lg q-pt-sm"
-          v-if="node.opened && node.children && node.children.length > 0"
-        >
           <TreeView
+            :iconSize
+            :hideCheckBox
             class="item__children"
             v-if="node.children"
             v-model:nodes="node.children"
@@ -153,6 +201,10 @@ function toggleExpand(node: Node) {
   }
 }
 
+.last-children {
+  margin-left: 50px;
+}
+
 .slide-enter-active {
   transition: all 0.1s ease-out;
 }

src/css/app.scss

@@ -20,7 +20,7 @@ html {
   --surface-tab: var(--gray-2);
 
   --text-mute: var(--stone-7-hsl);
-  --text-mute-2: var(--stone-8-hsl);
+  --text-mute-2: var(--stone-9-hsl);
 
   --info-fg: 0 0% 100%;
   --info-bg: var(--blue-6-hsl);

src/i18n/eng/index.ts

@@ -178,6 +178,7 @@ export default {
     lastNameEN: 'Last Name (EN)',
     middleName: 'Middle Name',
     middleNameEN: 'Middle Name (EN)',
+    alienReferenceNumber: 'Alien Reference Number',
     error: {
       title: 'Error Occurred {msg}',
       required: 'This field is required.',
@@ -627,7 +628,7 @@ export default {
       incompleteDataEntry: 'Incomplete Data Entry',
       confirmChangeStatus: 'Confirm Status Change',
       confirmDelete: 'Confirm Deletion {msg}',
-      youngWorker: 'Employee under 18',
+      youngWorker: 'Employee under 15',
       confirmLogout: 'Confirm Logout',
     },
     message: {
@@ -636,7 +637,7 @@ export default {
       confirmChangeStatusOn: 'Do you want to open?',
       confirmChangeStatusOff: 'Do you want to close?',
       confirmDelete: 'Do you want to delete this item?',
-      youngWorker: 'Employee is under 18 years old, do you want to confirm?',
+      youngWorker: 'Employee is under 15 years old, cannot record information.',
       confirmLogout: 'Do you want to Logout?',
       headquartersNotEstablished: 'Headoffice not established',
       warningClose: 'Incomplte edit data, Do you want to close?',

src/i18n/tha/index.ts

@@ -161,6 +161,7 @@ export default {
       basicInformation: 'ข้อมูลพื้นฐาน',
       address: 'ข้อมูลที่อยู่',
     },
+    alienReferenceNumber: 'เลขที่อ้างอิงคนต่างด้าว',
     birthDate: 'วันเดือนปีเกิด',
     email: 'อีเมล',
     gender: 'เพศ',
@@ -171,9 +172,9 @@ export default {
     soi: 'ซอย',
     road: 'ถนน',
     province: 'จังหวัด',
-    district: 'อำเภอ',
+    district: 'เขต/อำเภอ',
     fullAddress: 'ที่อยู่เต็ม',
-    subDistrict: 'ตำบล',
+    subDistrict: 'แขวง/ตำบล',
     zipCode: 'รหัสไปรษณีย์',
     prefixName: 'คํานําหน้า',
     firstName: 'ชื่อ ',
@@ -642,7 +643,7 @@ export default {
       incompleteDataEntry: 'กรอกข้อมูลไม่ครบ',
       confirmChangeStatus: 'ยืนยันการเปลี่ยนสถานะ',
       confirmDelete: 'ยืนยันการลบ {msg}',
-      youngWorker: 'ลูกจ้างอายุต่ำกว่า 18 ปี',
+      youngWorker: 'ลูกจ้างอายุต่ำกว่า 15 ปี',
       confirmLogout: 'ยืนยันการออกจากระบบ',
     },
     message: {
@@ -651,7 +652,7 @@ export default {
       confirmChangeStatusOn: 'คุณต้องการเปิดใช่หรือไม่',
       confirmChangeStatusOff: 'คุณต้องการปิดใช่หรือไม่',
       confirmDelete: 'คุณต้องการลบรายการนี้ใช่หรือไม่',
-      youngWorker: 'ลูกจ้างอายุต่ำกว่า 18 ปี ต้องการยืนยันหรือไม่',
+      youngWorker: 'ลูกจ้างอายุต่ำกว่า 15 ปี จะไม่สามารถบันทึกข้อมูลได้',
       confirmLogout: 'คุณต้องการออกจากระบบใช่หรือไม่',
       headquartersNotEstablished: 'ยังไม่ได้สร้างสำนักงานใหญ่',
       warningClose: 'มีการแก้ไขที่ยังไม่ได้บันทึก คุณต้องการปิดใช่หรือไม่',

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

@@ -395,7 +395,7 @@ watch([customerId, inputSearch, currentStatus], async () => {
             <q-th
               v-for="(v, i) in cols"
               :key="v"
-              :class="{ 'text-left': i === 0 }"
+              :class="{ 'text-left': i === 0 || i === 2 || i === 3 }"
             >
               {{ $t(v.label) }}
             </q-th>
@@ -455,7 +455,7 @@ watch([customerId, inputSearch, currentStatus], async () => {
             </q-td>
             <q-td
               v-if="branchFieldSelected.includes('address')"
-              class="text-center"
+              class="text-left"
             >
               {{
                 $i18n.locale === 'eng'
@@ -465,13 +465,13 @@ watch([customerId, inputSearch, currentStatus], async () => {
             </q-td>
             <q-td
               v-if="branchFieldSelected.includes('telephone')"
-              class="text-center"
+              class="text-left"
             >
               {{ props.row.telephoneNo || '-' }}
             </q-td>
             <q-td
               v-if="branchFieldSelected.includes('businessTypePure')"
-              class="text-center"
+              class="text-left"
             >
               {{ useOptionStore().mapOption(props.row.bussinessType) || '-' }}
             </q-td>
@@ -482,21 +482,6 @@ watch([customerId, inputSearch, currentStatus], async () => {
               {{ props.row._count?.employee }}
             </q-td>
             <q-td>
-              <q-btn
-                icon="mdi-eye-outline"
-                :id="`btn-eye-${props.row.customerName}`"
-                size="sm"
-                dense
-                round
-                flat
-                @click="
-                  () => {
-                    customerBranchFormStore.initForm('info', props.row.id);
-                    customerBranchFormState.dialogModal = true;
-                  }
-                "
-              />
-
               <q-btn
                 dense
                 flat
@@ -531,6 +516,20 @@ watch([customerId, inputSearch, currentStatus], async () => {
                   />
                 </div>
               </q-btn>
+              <q-btn
+                icon="mdi-eye-outline"
+                :id="`btn-eye-${props.row.customerName}`"
+                size="sm"
+                dense
+                round
+                flat
+                @click="
+                  () => {
+                    customerBranchFormStore.initForm('info', props.row.id);
+                    customerBranchFormState.dialogModal = true;
+                  }
+                "
+              />
             </q-td>
           </q-tr>
 

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

@@ -45,7 +45,6 @@ import FormEmployeePassport from 'components/03_customer-management/FormEmployee
 import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
 import DialogForm from 'components/DialogForm.vue';
 import SideMenu from 'components/SideMenu.vue';
-import { AddButton } from 'components/button';
 import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
 import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
 import {
@@ -71,8 +70,6 @@ import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOth
 import useOptionStore from 'stores/options';
 import { DialogContainer, DialogHeader } from 'components/dialog';
 import KebabAction from 'src/components/shared/KebabAction.vue';
-import { group } from 'node:console';
-import { readonly } from 'vue';
 
 const currentSelectedMenu = ref<{ label: string; value: string }>({
   label: '',
@@ -518,8 +515,8 @@ async function deleteEmployeeById(opts: {
         }
       }
 
-      const resultList = await employeeStore.fetchList();
+      await fetchListEmployee(true);
-      if (resultList) listEmployee.value = resultList.result;
+
       flowStore.rotate();
     },
     cancel: () => {},
@@ -717,17 +714,15 @@ watch(
         currentFromDataEmployee.value.dateOfBirth,
         'year',
       );
-      if (currentFromDataEmployee.value.dateOfBirth && Number(age) < 18) {
+      if (currentFromDataEmployee.value.dateOfBirth && Number(age) < 15) {
         dialog({
           color: 'warning',
           icon: 'mdi-alert',
           title: t('dialog.title.youngWorker'),
-          actionText: t('dialog.action.ok'),
+          cancelText: t('general.edit'),
           persistent: true,
           message: t('dialog.message.youngWorker'),
-          action: async () => {
+
-            return;
-          },
           cancel: async () => {
             currentFromDataEmployee.value.dateOfBirth = null;
             return;
@@ -1335,7 +1330,9 @@ const emptyCreateDialog = ref(false);
                         </q-td>
 
                         <q-td>
+                          {{ console.log(props.row) }}
                           <q-btn
+                            :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
                             dense
                             flat
                             @click.stop="
@@ -1371,10 +1368,9 @@ const emptyCreateDialog = ref(false);
                               />
                             </div>
                           </q-btn>
-
                           <q-btn
                             icon="mdi-eye-outline"
-                            :id="`btn-eye-${props.row.customerName}`"
+                            :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
                             size="sm"
                             dense
                             round
@@ -1383,7 +1379,10 @@ const emptyCreateDialog = ref(false);
                           />
 
                           <KebabAction
-                            :id-name="props.row.code"
+                            :id-name="
+                              props.row.branch[0].customerName ||
+                              props.row.branch[0].firstName
+                            "
                             :status="props.row.status"
                             @view="
                               () => {
@@ -2172,7 +2171,7 @@ const emptyCreateDialog = ref(false);
                       } else {
                         res = await customerStore.createBranch({
                           ...customerFormData.customerBranch[idx],
-                          customerId: customerFormState.editCustomerId,
+                          customerId: customerFormState.editCustomerId || '',
                           id: undefined,
                         });
                       }
@@ -2231,6 +2230,7 @@ const emptyCreateDialog = ref(false);
                 <EmployerFormBranch
                   :index="idx"
                   prefixId="form"
+                  v-if="customerFormData.customerBranch"
                   v-model:customer="customerFormData"
                   v-model:customer-branch="customerFormData.customerBranch[idx]"
                   :onCreate="customerFormState.dialogType === 'create'"
@@ -2246,6 +2246,8 @@ const emptyCreateDialog = ref(false);
                   @cancel="() => customerFormUndo(false)"
                   @delete="
                     async () => {
+                      if (!customerFormState.editCustomerId) return;
+
                       if (idx === 0) {
                         deleteCustomerById(customerFormState.editCustomerId);
                         return;
@@ -2301,7 +2303,7 @@ const emptyCreateDialog = ref(false);
         employeeFormState.isEmployeeEdit = false;
         employeeFormState.currentIndex = -1;
 
-        await fetchListEmployee();
+        await fetchListEmployee(true);
       }
     "
     :show="

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

@@ -18,9 +18,7 @@ const props = defineProps<{
 const optionStore = useOptionStore();
 
 // PERS
-const citizenId = defineModel<string | undefined>('citizenId', {
+const citizenId = defineModel<string | undefined>('citizenId', {});
-  required: true,
-});
 const prefixName = defineModel<string | null>('prefixName');
 const firstName = defineModel<string>('firstName');
 const lastName = defineModel<string>('lastName');
@@ -31,18 +29,10 @@ const birthDate = defineModel<Date | string | null>('birthDate');
 
 // CORP
 const customerName = defineModel<string>('customerName');
-const legalPersonNo = defineModel<string | undefined>('legalPersonNo', {
+const legalPersonNo = defineModel<string | undefined>('legalPersonNo', {});
-  required: true,
+const branchCode = defineModel<string | undefined>('branchCode', {});
-});
+const registerName = defineModel<string | undefined>('registerName', {});
-const branchCode = defineModel<string | undefined>('branchCode', {
+const registerNameEN = defineModel<string | undefined>('registerNameEN', {});
-  required: true,
-});
-const registerName = defineModel<string | undefined>('registerName', {
-  required: true,
-});
-const registerNameEN = defineModel<string | undefined>('registerNameEN', {
-  required: true,
-});
 const registerDate = defineModel<Date | null>('registerDate');
 const authorizedCapital = defineModel<string>('authorizedCapital', {
   default: '0',
@@ -50,9 +40,7 @@ const authorizedCapital = defineModel<string>('authorizedCapital', {
 
 // both
 const telephoneNo = defineModel<string>('telephoneNo');
-const codeCustomer = defineModel<string | undefined>('codeCustomer', {
+const codeCustomer = defineModel<string | undefined>('codeCustomer', {});
-  required: true,
-});
 
 const prefixNameOptions = ref<Record<string, unknown>[]>([]);
 let prefixNameFilter: (
@@ -180,7 +168,7 @@ watch(
           :disable="!readonly"
           :readonly="readonly"
           :label="$t('customer.form.customerCode')"
-          :model-value="legalPersonNo"
+          :model-value="branchCode?.slice(0, -3)"
         />
 
         <q-input

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

@@ -45,8 +45,8 @@ const registerName = defineModel<string>('registerName', { default: '' });
 const citizenId = defineModel<string>('citizenId', { default: '' });
 const legalPersonNo = defineModel<string>('legalPersonNo', { default: '' });
 
-const businessType = defineModel<'string'>('businessType');
+const businessType = defineModel<string>('businessType');
-const jobPosition = defineModel<'string'>('jobPosition');
+const jobPosition = defineModel<string>('jobPosition');
 const telephoneNo = defineModel<string>('telephoneNo', { default: '' });
 
 const branchOptions = defineModel<{ id: string; name: string }[]>(
@@ -201,7 +201,7 @@ watch(
           hide-bottom-space
           class="col-6 col-md-3"
           :label="$t('general.taxNo')"
-          for="input-first-name-en"
+          for="input-tax"
           v-model="legalPersonNo"
         />
         <q-input
@@ -211,7 +211,7 @@ watch(
           hide-bottom-space
           class="col-6 col-md-3"
           :label="$t('customer.table.businessTypePure')"
-          for="input-first-name-en"
+          for="input-business-type"
           :model-value="optionStore.mapOption(businessType)"
         />
       </div>

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

@@ -157,9 +157,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
         wageRateText: v.wageRateText,
         payDate: v.payDate,
         jobDescription: v.jobDescription,
-        jobPositionEN: v.jobPositionEN,
         jobPosition: v.jobPosition,
-        businessTypeEN: v.businessTypeEN,
         businessType: v.businessType,
         employmentOffice: v.employmentOffice,
         employmentOfficeEN: v.employmentOfficeEN,
@@ -251,25 +249,33 @@ export const useCustomerForm = defineStore('form-customer', () => {
             ? ''
             : currentFormData.value.customerBranch?.[0].citizenId
           : '',
-      namePrefix: '',
+      namePrefix: currentFormData.value.customerBranch?.at(0)?.namePrefix || '',
-      firstName: '',
+      firstName: currentFormData.value.customerBranch?.at(0)?.firstName || '',
-      lastName: '',
+      lastName: currentFormData.value.customerBranch?.at(0)?.lastName || '',
-      firstNameEN: '',
+      firstNameEN:
-      lastNameEN: '',
+        currentFormData.value.customerBranch?.at(0)?.firstNameEN || '',
-      telephoneNo: '',
+      lastNameEN: currentFormData.value.customerBranch?.at(0)?.lastNameEN || '',
-      gender: '',
+      telephoneNo:
-      birthDate: '',
+        currentFormData.value.customerBranch?.at(0)?.telephoneNo || '',
+      gender: currentFormData.value.customerBranch?.at(0)?.gender || '',
+      birthDate: currentFormData.value.customerBranch?.at(0)?.birthDate || '',
 
-      businessType: '',
+      businessType:
-      jobPosition: '',
+        currentFormData.value.customerBranch?.at(0)?.businessType || '',
-      jobDescription: '',
+      jobPosition:
-      payDate: '',
+        currentFormData.value.customerBranch?.at(0)?.jobPosition || '',
-      payDateEN: '',
+      jobDescription:
-      wageRate: 0,
+        currentFormData.value.customerBranch?.at(0)?.jobDescription || '',
-      wageRateText: '',
+      payDate: currentFormData.value.customerBranch?.at(0)?.payDate || '',
-      homeCode: '',
+      payDateEN: currentFormData.value.customerBranch?.at(0)?.payDateEN || '',
-      employmentOffice: '',
+      wageRate: currentFormData.value.customerBranch?.at(0)?.wageRate || 0,
-      employmentOfficeEN: '',
+      wageRateText:
+        currentFormData.value.customerBranch?.at(0)?.wageRateText || '',
+      homeCode: currentFormData.value.customerBranch?.at(0)?.homeCode || '',
+      employmentOffice:
+        currentFormData.value.customerBranch?.at(0)?.employmentOffice || '',
+      employmentOfficeEN:
+        currentFormData.value.customerBranch?.at(0)?.employmentOfficeEN || '',
 
       address: '',
       addressEN: '',
@@ -283,20 +289,28 @@ export const useCustomerForm = defineStore('form-customer', () => {
       districtId: '',
       subDistrictId: '',
 
-      contactName: '',
+      contactName:
-      email: '',
+        currentFormData.value.customerBranch?.at(0)?.contactTel || '',
-      contactTel: '',
+      email: currentFormData.value.customerBranch?.at(0)?.email || '',
-      officeTel: '',
+      contactTel: currentFormData.value.customerBranch?.at(0)?.contactTel || '',
-      agent: '',
+      officeTel: currentFormData.value.customerBranch?.at(0)?.officeTel || '',
+      agent: currentFormData.value.customerBranch?.at(0)?.agent || '',
       status: 'CREATED',
 
-      customerName: '',
+      customerName:
-      registerName: '',
+        currentFormData.value.customerBranch?.at(0)?.customerName || '',
-      registerNameEN: '',
+      registerName:
-      registerDate: null,
+        currentFormData.value.customerBranch?.at(0)?.registerName || '',
-      authorizedCapital: '',
+      registerNameEN:
-      authorizedName: '',
+        currentFormData.value.customerBranch?.at(0)?.registerNameEN || '',
-      authorizedNameEN: '',
+      registerDate:
+        currentFormData.value.customerBranch?.at(0)?.registerDate || null,
+      authorizedCapital:
+        currentFormData.value.customerBranch?.at(0)?.authorizedCapital || '',
+      authorizedName:
+        currentFormData.value.customerBranch?.at(0)?.authorizedName || '',
+      authorizedNameEN:
+        currentFormData.value.customerBranch?.at(0)?.authorizedNameEN || '',
       file: [],
     });
     state.value.branchIndex =
@@ -523,7 +537,6 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
   );
 
   async function submitForm() {
-    console.log(currentFormData.value);
     if (!state.value.currentCustomerId) {
       throw new Error(
         'Employer id cannot be found. Did you properly set employer id?',
@@ -649,19 +662,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     districtId: '',
     provinceId: '',
 
-    employeeWork: [
-      {
-        workEndDate: null,
-        workPermitExpireDate: null,
-        workPermitIssuDate: null,
-        workPermitNo: '',
-        workplace: '',
-        jobType: '',
-        positionName: '',
-        ownerName: '',
-        remark: '',
-      },
-    ],
     employeeCheckup: [
       {
         coverageExpireDate: null,
@@ -675,6 +675,59 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         checkupType: '',
       },
     ],
+
+    employeeWork: [
+      {
+        workEndDate: null,
+        workPermitExpireDate: null,
+        workPermitIssuDate: null,
+        workPermitNo: '',
+        workplace: '',
+        jobType: '',
+        positionName: '',
+        ownerName: '',
+        remark: '',
+      },
+    ],
+
+    employeeInCountryNotice: [
+      {
+        noticeNumber: '',
+        noticeDate: '',
+        nextNoticeDate: new Date(),
+        tmNumber: '',
+        entryDate: new Date(),
+        travelBy: '',
+        travelFrom: '',
+      },
+    ],
+
+    employeeVisa: [
+      {
+        number: '',
+        type: '',
+        entryCount: 0,
+        issueCountry: '',
+        issuePlace: '',
+        issueDate: new Date(),
+        expireDate: new Date(),
+        mrz: '',
+        remark: '',
+      },
+    ],
+
+    employeePassport: [
+      {
+        number: '',
+        type: '',
+        issueDate: new Date(),
+        expireDate: new Date(),
+        issueCountry: '',
+        issuePlace: '',
+        previousPassportRef: '',
+      },
+    ],
+
     employeeOtherInfo: {
       citizenId: '',
       fatherFirstName: '',
@@ -689,7 +742,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       motherLastNameEN: '',
       motherBirthPlace: '',
     },
-    image: null,
   };
 
   let resetEmployeeData = structuredClone(defaultFormData);
@@ -860,7 +912,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     await assignFormDataEmployee(currentFromDataEmployee.value.id);
   }
 
-  async function submitPersonal(imgList?: {
+  async function submitPersonal(imgList: {
     selectedImage: string;
     list: { url: string; imgFile: File | null; name: string }[];
   }) {
@@ -880,7 +932,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       if (res) {
         await assignFormDataEmployee(res.id);
         currentFromDataEmployee.value.id = res.id;
-        currentFromDataEmployee.value.file = res.file;
         state.value.statusSavePersonal = true;
       }
     }
@@ -930,7 +981,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         updatedByUserId,
         createdBy,
         updatedBy,
-        profileImageUrl,
+
         ...payload
       } = _data;
 
@@ -987,10 +1038,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       state.value.profileUrl =
         `${baseUrl}/employee/${id}/image/${_data.selectedImage}` || '';
 
-      profileImageUrl
-        ? (state.value.profileSubmit = true)
-        : (state.value.profileSubmit = false);
-
       state.value.formDataEmployeeOwner = { ...foundBranch };
 
       if (
@@ -1005,11 +1052,9 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       if (
         state.value.infoEmployeePersonCard &&
         Array.isArray(state.value.infoEmployeePersonCard) &&
-        state.value.infoEmployeePersonCard.length > 0 &&
+        state.value.infoEmployeePersonCard.length > 0
-        profileImageUrl !== null
       ) {
         if (typeof state.value.infoEmployeePersonCard[0] === 'object') {
-          state.value.infoEmployeePersonCard[0].img = profileImageUrl;
         }
       }
       flowStore.rotate();

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

@@ -209,6 +209,8 @@ const dialogService = ref(false);
 const dialogProductEdit = ref(false);
 const dialogServiceEdit = ref(false);
 
+const serviceTreeView = ref(false);
+
 const statusToggle = ref(false);
 const profileSubmit = ref(false);
 const infoProductEdit = ref(false);
@@ -3703,6 +3705,7 @@ watch(
       () => {
         clearFormService();
         dialogService = false;
+        serviceTreeView = false;
         onCreateImageList = { selectedImage: '', list: [] };
         flowStore.rotate();
       }
@@ -3800,6 +3803,50 @@ watch(
         :class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
+        <div
+          class="surface-1 rounded q-my-md q-mx-lg row items-center"
+          style="position: absolute; z-index: 999; top: 0; right: 0"
+          v-if="actionDisplay && !currentNoAction"
+        >
+          <div class="bordered rounded q-mr-md" v-if="serviceTab === 2">
+            <q-btn
+              icon="mdi-file-tree-outline"
+              flat
+              square
+              :class="{
+                ' surface-3': serviceTreeView,
+                'app-text-muted-2': serviceTreeView,
+                'app-text-muted': !serviceTreeView,
+              }"
+              size="sm"
+              padding="6px 10px"
+              title="Tree"
+              style="
+                border-top-left-radius: var(--radius-2);
+                border-bottom-left-radius: var(--radius-2);
+              "
+              @click="serviceTreeView = true"
+            />
+            <q-btn
+              icon="mdi-view-list-outline"
+              flat
+              square
+              :class="{
+                ' surface-3': !serviceTreeView,
+                'app-text-muted-2': !serviceTreeView,
+                'app-text-muted': serviceTreeView,
+              }"
+              size="sm"
+              padding="6px 10px"
+              title="List"
+              style="
+                border-top-right-radius: var(--radius-2);
+                border-bottom-right-radius: var(--radius-2);
+              "
+              @click="serviceTreeView = false"
+            />
+          </div>
+        </div>
         <BasicInformation
           v-if="serviceTab === 1"
           dense
@@ -3812,6 +3859,8 @@ watch(
         <FormServiceWork
           v-if="serviceTab === 2"
           v-model:work-items="workItems"
+          :tree-view="serviceTreeView"
+          :service="formDataProductService"
           dense
           @addProduct="
             async (index) => {
@@ -3946,6 +3995,7 @@ watch(
       () => {
         clearFormService();
         flowStore.rotate();
+        serviceTreeView = false;
         dialogServiceEdit = false;
       }
     "
@@ -4019,10 +4069,49 @@ watch(
       id="group-form"
     >
       <div
-        class="surface-1 rounded q-my-md q-mx-lg row"
+        class="surface-1 rounded q-my-md q-mx-lg row items-center"
         style="position: absolute; z-index: 999; top: 0; right: 0"
         v-if="actionDisplay && !currentNoAction"
       >
+        <div class="bordered rounded q-mr-md" v-if="serviceTab === 2">
+          <q-btn
+            icon="mdi-file-tree-outline"
+            flat
+            square
+            :class="{
+              ' surface-3': serviceTreeView,
+              'app-text-muted-2': serviceTreeView,
+              'app-text-muted': !serviceTreeView,
+            }"
+            size="sm"
+            padding="6px 10px"
+            title="Tree"
+            style="
+              border-top-left-radius: var(--radius-2);
+              border-bottom-left-radius: var(--radius-2);
+            "
+            @click="serviceTreeView = true"
+          />
+          <q-btn
+            icon="mdi-view-list-outline"
+            flat
+            square
+            :class="{
+              ' surface-3': !serviceTreeView,
+              'app-text-muted-2': !serviceTreeView,
+              'app-text-muted': serviceTreeView,
+            }"
+            size="sm"
+            padding="6px 10px"
+            title="List"
+            style="
+              border-top-right-radius: var(--radius-2);
+              border-bottom-right-radius: var(--radius-2);
+            "
+            @click="serviceTreeView = false"
+          />
+        </div>
+
         <UndoButton
           v-if="infoServiceEdit"
           id="btn-info-basic-undo"
@@ -4104,6 +4193,8 @@ watch(
 
         <FormServiceWork
           v-if="serviceTab === 2"
+          :service="formDataProductService"
+          :tree-view="serviceTreeView"
           :readonly="!infoServiceEdit"
           v-model:work-items="workItems"
           dense

src/pages/05_quotation/MainPage.vue

@@ -1,22 +1,72 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-
+import { storeToRefs } from 'pinia';
 import { productTreeDecoration } from './constants';
 import useProductServiceStore from 'src/stores/product-service';
-
 import {
   ProductGroup,
   ProductList,
   Service,
 } from 'src/stores/product-service/types';
+import {
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'components/button';
 
+import BasicInformation from 'components/03_customer-management/employee/BasicInformation.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 {
+  EmployerFormBasicInfo,
+  EmployerFormBusiness,
+  EmployerFormContact,
+  EmployerFormAbout,
+} from 'src/pages/03_customer-management/components';
+
+import { CustomerBranchCreate } from 'stores/customer/types';
+import DialogForm from 'components/DialogForm.vue';
 import QuotationForm from './QuotationForm.vue';
 import TreeView from 'src/components/shared/TreeView.vue';
 import { AddButton } from 'src/components/button';
 import MainButton from 'src/components/button/MainButton.vue';
 
-const dialog = ref(true);
+import {
+  useCustomerForm,
+  useEmployeeForm,
+} from 'src/pages/03_customer-management/form';
+import useCustomerStore from 'stores/customer';
 
+const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
+  {
+    main: [],
+    business: ['businessType', 'jobPosition'],
+    address: [
+      'homeCode',
+      'address',
+      'addressEN',
+      'provinceId',
+      'districtId',
+      'subDistrictId',
+    ],
+    contact: [],
+  },
+);
+
+const customerFormStore = useCustomerForm();
+const employeeFormStore = useEmployeeForm();
+const customerStore = useCustomerStore();
+
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
+const { state: employeeFormState, currentFromDataEmployee } =
+  storeToRefs(employeeFormStore);
+
+const test = ref(true);
+const dialog = ref(true);
 const nodes = ref([
   {
     title: 'กลุ่มสินค้าและบริการที่ 1',
@@ -246,6 +296,269 @@ function convertToTree() {
     My Menu
   </div> -->
   <QuotationForm v-model:dialog-state="dialog" readonly />
+
+  <DialogContainer
+    :model-value="test"
+    :on-open="async () => {}"
+    :on-close="() => {}"
+  >
+    <template #header>
+      <DialogHeader
+        :title="
+          customerFormState.dialogType === 'create'
+            ? $t(`general.add`, {
+                text: `${$t('customer.employer')} `,
+              })
+            : `${$t('customer.employer')} `
+        "
+      >
+        <template #title-after>
+          <span
+            :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+          >
+            :
+            {{
+              customerFormData.customerType === 'CORP'
+                ? $t('customer.employerLegalEntity')
+                : $t('customer.employerNaturalPerson')
+            }}
+          </span>
+        </template>
+      </DialogHeader>
+    </template>
+
+    <div class="q-px-lg q-pt-lg surface-2">
+      <ProfileBanner
+        v-if="customerFormData.customerBranch !== undefined"
+        active
+        hide-fade
+        :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
+        :img="
+          customerFormState.customerImageUrl ||
+          `/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`
+        "
+        :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
+        :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+        :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
+        :icon="
+          customerFormData.customerType === 'PERS'
+            ? 'mdi-account-plus-outline'
+            : 'mdi-office-building-outline'
+        "
+        :title="
+          customerFormData.customerType === 'PERS'
+            ? `${customerFormData.customerBranch[0]?.firstName} ${customerFormData.customerBranch[0]?.lastName}`
+            : customerFormData.customerBranch[0]?.registerName
+        "
+        :caption="
+          customerFormData.customerType === 'PERS'
+            ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
+            : customerFormData.customerBranch[0]?.registerNameEN
+        "
+        @view="
+          () => {
+            customerFormState.imageDialog = true;
+            customerFormState.isImageEdit = false;
+          }
+        "
+        @edit="
+          customerFormState.imageDialog = customerFormState.isImageEdit = true
+        "
+      />
+    </div>
+    <div
+      style="flex: 1; width: 100%; overflow-y: auto"
+      class="surface-2 q-pa-lg"
+      id="customer-form"
+    >
+      <div class="col surface-1 full-height rounded bordered scroll row">
+        <div
+          class="col-12 q-py-md q-pr-md q-pl-sm"
+          id="customer-form-content"
+          style="height: 100%; max-height: 100%; overflow-y: auto"
+        >
+          <div class="row" id="form-branch-customer-branch">
+            <!-- v-if="customerFormData.customerBranch" -->
+            <q-form
+              class="full-width q-col-gutter-sm"
+              greedy
+              @submit.prevent="async () => {}"
+            >
+              <!-- v-if="!!customerFormState.editCustomerId" -->
+              <div class="col-12 text-weight-bold text-body1 row items-center">
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-briefcase-outline"
+                  style="background-color: var(--surface-3)"
+                />
+                <span>{{ $t('customer.form.group.branch') }}</span>
+              </div>
+
+              <EmployerFormAbout :index="(0).toString()" customerType="CORP" />
+
+              <div class="col-12 text-weight-bold text-body1 row items-center">
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-briefcase-outline"
+                  style="background-color: var(--surface-3)"
+                />
+                <span>{{ $t('customerBranch.tab.business') }}</span>
+              </div>
+
+              <EmployerFormBusiness prefixId="dialog" dense outlined />
+
+              <AddressForm
+                prefix-id="employer"
+                hide-title
+                dense
+                outlined
+                use-employment
+                :title="$t('form.address')"
+                :addressTitle="$t('form.address')"
+                :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
+              />
+            </q-form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DialogContainer>
+
+  <DialogForm
+    hideFooter
+    :title="$t('form.title.create', { name: $t('customer.employee') })"
+    v-model:modal="test"
+    :undo="() => {}"
+    :submit="async () => {}"
+    :show="() => {}"
+  >
+    <div class="q-px-lg q-pt-lg surface-2">
+      <ProfileBanner
+        active
+        useToggle
+        color="white"
+        icon="mdi-account-plus-outline"
+        :bg-color="
+          employeeFormState.profileUrl
+            ? 'white'
+            : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
+        "
+        v-model:current-tab="employeeFormState.currentTab"
+        v-model:toggle-status="currentFromDataEmployee.status"
+        fallbackCover="/images/employee-banner.png"
+        :img="employeeFormState.profileUrl || `/images/employee-avatar.png`"
+        :toggleTitle="$t('status.title')"
+        hideFade
+        @view="
+          () => {
+            employeeFormState.imageDialog = true;
+            employeeFormState.isImageEdit = false;
+          }
+        "
+        @edit="
+          employeeFormState.imageDialog = employeeFormState.isImageEdit = true
+        "
+        @update:toggle-status="
+          () => {
+            currentFromDataEmployee.status =
+              currentFromDataEmployee.status === 'CREATED'
+                ? 'INACTIVE'
+                : 'CREATED';
+          }
+        "
+      />
+    </div>
+
+    <div
+      style="flex: 1; width: 100%; overflow-y: auto"
+      class="surface-2 q-pa-lg"
+      id="drawer-employee-form"
+    >
+      <div class="col surface-1 full-height rounded bordered scroll row">
+        <div
+          class="col-12 full-width col-md-10 q-py-md q-pr-md q-pl-sm"
+          id="employee-form-content"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+        >
+          <template v-if="employeeFormState.currentTab === 'personalInfo'">
+            <div
+              class="surface-1 rounded q-pt-sm row"
+              style="position: absolute; z-index: 999; right: 4%"
+            >
+              <UndoButton
+                v-if="
+                  employeeFormState.isEmployeeEdit &&
+                  employeeFormState.dialogType !== 'create'
+                "
+                id="btn-info-basic-undo"
+                icon-only
+                @click="
+                  () => {
+                    employeeFormStore.resetFormDataEmployee();
+                    employeeFormState.isEmployeeEdit = false;
+                    employeeFormState.dialogType = 'info';
+                  }
+                "
+                type="button"
+              />
+              <SaveButton
+                v-if="employeeFormState.isEmployeeEdit"
+                id="btn-info-basic-save"
+                icon-only
+                type="submit"
+              />
+              <EditButton
+                v-if="!employeeFormState.isEmployeeEdit"
+                id="btn-info-basic-edit"
+                icon-only
+                @click="
+                  () => {
+                    employeeFormState.isEmployeeEdit = true;
+                    employeeFormState.dialogType = 'edit';
+                  }
+                "
+                type="button"
+              />
+              <DeleteButton
+                v-if="!employeeFormState.isEmployeeEdit"
+                id="btn-info-basic-delete"
+                icon-only
+              />
+            </div>
+
+            <BasicInformation
+              no-action
+              id="form-information"
+              prefix-id="form-employee"
+              :show-btn-save="employeeFormState.dialogType === 'create'"
+              employee
+              dense
+              outlined
+              separator
+              title="form.field.basicInformation"
+              class="q-mb-xl"
+            />
+            <FormPerson
+              id="form-personal"
+              prefix-id="form-employee"
+              dense
+              outlined
+              employee
+              separator
+              title="customerEmployee.form.group.personalInfo"
+              class="q-mb-xl"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+  </DialogForm>
 </template>
 
 <style scoped></style>

src/services/keycloak.ts

@@ -18,7 +18,7 @@ export async function login(cb?: (...args: unknown[]) => void) {
         .init({
           onLoad: 'login-required',
           responseMode: 'query',
-          checkLoginIframe: false,
+          checkLoginIframe: true,
         })
         .catch((e) => console.dir(e))
     : await keycloak.login().catch((e) => console.dir(e));

src/stores/customer/index.ts

@@ -240,7 +240,7 @@ const useCustomerStore = defineStore('api-customer', () => {
 
   async function create(
     data: CustomerCreate,
-    imgList: {
+    imgList?: {
       selectedImage: string;
       list: { url: string; imgFile: File | null; name: string }[];
     },
@@ -277,11 +277,11 @@ const useCustomerStore = defineStore('api-customer', () => {
           customerId: undefined,
           codeCustomer: undefined,
         })),
-        selectedImage: imgList.selectedImage,
+        selectedImage: imgList?.selectedImage,
       },
     );
 
-    if (imgList.list.length > 0 && res.data.id) {
+    if (imgList && imgList.list.length > 0 && res.data.id) {
       for (let index = 0; index < imgList.list.length; index++) {
         const imgFile = imgList.list[index].imgFile;
         if (imgFile)
@@ -367,7 +367,6 @@ const useCustomerStore = defineStore('api-customer', () => {
     data: CustomerBranchCreate & {
       id?: string;
       customerId: string;
-      codeCustomer: string;
     },
   ) {
     if (data.citizenId) {

src/stores/customer/types.ts

@@ -25,56 +25,56 @@ export type Customer = {
 
 export type CustomerBranch = {
   customerCode?: string;
-  wageRateText: 'string';
+  wageRateText: string;
-  wageRate: 0;
+  wageRate: number;
-  payDateEN: 'string';
+  payDateEN: string;
-  payDate: 'string';
+  payDate: string;
-  jobDescription: 'string';
+  jobDescription: string;
-  jobPosition: 'string';
+  jobPosition: string;
-  businessType: 'string';
+  businessType: string;
-  agent: 'string';
+  agent: string;
-  contactName: 'string';
+  contactName: string;
-  officeTel: 'string';
+  officeTel: string;
-  contactTel: 'string';
+  contactTel: string;
-  email: 'string';
+  email: string;
-  subDistrictId: 'string';
+  subDistrictId: string;
-  districtId: 'string';
+  districtId: string;
-  provinceId: 'string';
+  provinceId: string;
-  streetEN: 'string';
+  streetEN: string;
-  street: 'string';
+  street: string;
-  mooEN: 'string';
+  mooEN: string;
-  moo: 'string';
+  moo: string;
-  soiEN: 'string';
+  soiEN: string;
-  soi: 'string';
+  soi: string;
-  addressEN: 'string';
+  addressEN: string;
-  address: 'string';
+  address: string;
-  employmentOfficeEN: 'string';
+  employmentOfficeEN: string;
-  employmentOffice: 'string';
+  employmentOffice: string;
-  homeCode: 'string';
+  homeCode: string;
-  authorizedNameEN: 'string';
+  authorizedNameEN: string;
-  authorizedName: 'string';
+  authorizedName: string;
-  authorizedCapital: 'string';
+  authorizedCapital: string;
-  registerDate: '2024-09-16T07:52:42.627Z';
+  registerDate: string | Date | null;
-  registerNameEN: 'string';
+  registerNameEN: string;
-  registerName: 'string';
+  registerName: string;
-  legalPersonNo: 'string';
+  legalPersonNo: string;
-  citizenId: 'string';
+  citizenId: string;
-  birthDate: '2024-09-16T07:52:42.627Z';
+  birthDate: string;
-  gender: 'string';
+  gender: string;
-  lastNameEN: 'string';
+  lastNameEN: string;
-  lastName: 'string';
+  lastName: string;
-  firstNameEN: 'string';
+  firstNameEN: string;
-  firstName: 'string';
+  firstName: string;
-  namePrefix: 'string';
+  namePrefix: string;
-  telephoneNo: 'string';
+  telephoneNo: string;
-  codeCustomer: 'string';
+  codeCustomer: string;
-  customerName: 'string';
+  customerName: string;
-  updatedByUserId: 'string';
+  updatedByUserId: string;
-  createdByUserId: 'string';
+  createdByUserId: string;
-  code: 'string';
+  code: string;
   statusOrder: 0;
-  customerId: 'string';
+  customerId: string;
-  id: 'string';
+  id: string;
 
   status: Status;
   createdBy: string | null;
@@ -132,11 +132,11 @@ export type CustomerBranchCreate = {
   customerName?: string;
   registerName?: string;
   registerNameEN?: string;
-  registerDate?: Date | null;
+  registerDate?: string | Date | null;
   authorizedCapital?: string;
   authorizedName?: string;
   authorizedNameEN?: string;
-  code?: 'string';
+  code?: string;
   citizen?: CitizenPayload[];
   file?: {
     name?: string;

src/stores/employee/index.ts

@@ -132,15 +132,16 @@ const useEmployeeStore = defineStore('api-employee', () => {
       list: { url: string; imgFile: File | null; name: string }[];
     },
   ) {
-    console.log(data);
     const {
       id,
       code,
-      image,
       file,
       zipCode,
       employeeWork,
       employeeCheckup,
+      employeePassport,
+      employeeVisa,
+      employeeInCountryNotice,
       ...payload
     } = data;
     const res = await api.post<
@@ -303,6 +304,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
       createdByUserId,
       createdAt,
       employeeId,
+
       ...payload
     } = data;
     const res = await api.put<EmployeeOtherCreate>(
@@ -317,7 +319,18 @@ const useEmployeeStore = defineStore('api-employee', () => {
   }
 
   async function editById(employeeId: string, data: Partial<EmployeeCreate>) {
-    const { id, code, image, file, ...payload } = data;
+    const {
+      id,
+      code,
+      file,
+      employeeCheckup,
+      employeeWork,
+      employeeInCountryNotice,
+      employeeVisa,
+      employeePassport,
+      ...payload
+    } = data;
+
     const res = await api.put<
       Employee & { imageUrl: string; profileImageUploadUrl: string }
     >(`/employee/${employeeId}`, payload, {
@@ -326,14 +339,6 @@ const useEmployeeStore = defineStore('api-employee', () => {
 
     if (!res) return false;
 
-    if (image) {
-      await api
-        .put(`/employee/${employeeId}/image`, image, {
-          headers: { 'Content-Type': image?.type },
-          onUploadProgress: (e) => console.log(e),
-        })
-        .catch((e) => console.error(e));
-    }
     if (file) {
       const attachmentUpload = file.map(async ({ group, file }) => {
         if (file) {

src/stores/employee/types.ts

@@ -55,13 +55,30 @@ export type Employee = {
   employeeWork?: EmployeeWorkCreate[];
   employeeCheckup?: EmployeeCheckupCreate[];
   employeeOtherInfo?: EmployeeOtherCreate;
+  employeeInCountryNotice?: (EmployeeInCountryNoticePayload & {
+    id: string;
+    updatedAt: Date;
+    createdAt: Date;
+    employeeId: string;
+  })[];
+  employeeVisa?: (EmployeeVisaPayload & {
+    id: string;
+    updatedAt: Date;
+    createdAt: Date;
+    employeeId: string;
+  })[];
+  employeePassport?: EmployeePassportPayload & {
+    id: string;
+    updatedAt: Date;
+    createdAt: Date;
+    employeeId: string;
+  };
 };
 
 export type EmployeeCreate = {
   selectedImage?: string;
   id?: string;
   code: string;
-  image: File | null;
   customerBranchId: string;
   status?: Status;
   nrcNo: string;
@@ -86,9 +103,11 @@ export type EmployeeCreate = {
   districtId?: string | null;
   provinceId?: string | null;
 
-  employeeWork?: EmployeeWorkCreate[];
-
   employeeCheckup?: EmployeeCheckupCreate[];
+  employeeWork?: EmployeeWorkCreate[];
+  employeeInCountryNotice?: EmployeeInCountryNoticePayload[];
+  employeeVisa?: EmployeeVisaPayload[];
+  employeePassport?: EmployeePassportPayload[];
 
   employeeOtherInfo?: EmployeeOtherCreate;
 

src/stores/utils/index.ts

@@ -416,7 +416,8 @@ export async function waitAll<T extends Promise<any>[]>(arr: T) {
 }
 
 export function commaInput(text: string): string {
-  if (typeof text !== 'string') return '';
+  if (typeof text !== 'string') return '0';
+  if (!text) return '0';
   const num = text.replace(/,/gi, '');
   const numF = num.split(/(?=(?:\d{3})+$)/).join(',');
 

tests/00-Role&Permission/JWS_RP_001_CorporateCustomer.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/00-Role&Permission/JWS_RP_002_HeadOfAdmin.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/00-Role&Permission/JWS_RP_003_Sale.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/00-Role&Permission/JWS_RP_004_DocumentChecker.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/00-Role&Permission/JWS_RP_005_SaleAgent.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/00-Role&Permission/JWS_RP_006_Messenger.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/00-Role&Permission/JWS_RP_007_Account.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/00-Role&Permission/JWS_RP_008_Admin.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/00-Role&Permission/JWS_RP_009_Executive.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/00-Role&Permission/JWS_RP_010_DataEntry.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/00-Role&Permission/JWS_RP_011_HeadOfAccount.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/00-Role&Permission/JWS_RP_012_HeadOfSale.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/00-Role&Permission/JWS_RP_013_PersonalCustomer.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/00-Role&Permission/JWS_RP_014_BranchManager.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/01-Admin-BranchManagement/JWS_BM_001_CreateHeadquarters.spec.ts

@@ -16,7 +16,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');
@@ -28,8 +28,8 @@ test('Login', async () => {
 test('Create Branch Managenment', async () => {
   try {
     await page.click('id=menu-icon-branch-management');
-    await page.click('id=hq-add-btn');
+    // await page.click('id=hq-add-btn');
-    // await page.click('id=btn-Add');
+    await page.click('id=btn-Add');
     // await page.click("(//div[@class='q-avatar relative-position'])[2]");
 
     // const fileInput = page.locator(
@@ -88,10 +88,11 @@ test('Create Branch Managenment', async () => {
     await page.click("(//input[@aria-label='ประเภทบัญชี'])[2]");
     await page.waitForTimeout(2000);
     await page.click('id=select-bankbook_0');
-    await page.click('id=btn-form-submit');
+    await page.click('id=btn-info-basic-save');
 
     await page.waitForSelector('id=btn-ok-dialog');
     await page.click('id=btn-ok-dialog');
+    await page.click('id=btn-form-close');
 
     // ตรวจสอบความถูกต้องหลังจากทำการบันทึกสร้างสำนักงานใหญ่
     const newOfficeLocator = page.locator(
@@ -161,10 +162,11 @@ test('Create Branch Managenment Second', async () => {
     await page.click("(//input[@aria-label='ประเภทบัญชี'])[2]");
     await page.waitForTimeout(2000);
     await page.click('id=select-bankbook_0');
-    await page.click('id=btn-form-submit');
+    await page.click('id=btn-info-basic-save');
 
     await page.waitForSelector('id=btn-ok-dialog');
     await page.click('id=btn-ok-dialog');
+    await page.click('id=btn-form-close');
 
     // ตรวจสอบความถูกต้องหลังจากทำการบันทึกสร้างสำนักงานใหญ่
     const newOfficeLocator = page.locator(

tests/01-Admin-BranchManagement/JWS_BM_002_CreateHeadquarterFail.spec.ts

@@ -16,7 +16,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/01-Admin-BranchManagement/JWS_BM_003_CreateSub-branch.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');
@@ -85,7 +85,8 @@ test('Create Sub Branch Managenment', async () => {
       await page.waitForTimeout(2000);
       await page.click('id=select-bankbook_0');
 
-      await page.click('id=btn-form-submit');
+      await page.click('id=btn-info-basic-save');
+      await page.click('id=btn-form-close');
     }
 
     // ตรวจสอบความถูกต้องหลังจากทำการบันทึกสร้างสำนักงานใหญ่

tests/01-Admin-BranchManagement/JWS_BM_004_CreateSub-branchFail.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/01-Admin-BranchManagement/JWS_BM_005_CreateServicePoint.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');
@@ -85,7 +85,8 @@ test('Create Service Point Managenment', async () => {
       await page.waitForTimeout(2000);
       await page.click('id=select-bankbook_0');
 
-      await page.click('id=btn-form-submit');
+      await page.click('id=btn-info-basic-save');
+      await page.click('id=btn-form-close');
     }
 
     // ตรวจสอบความถูกต้องหลังจากทำการบันทึกสร้างสำนักงานใหญ่

tests/01-Admin-BranchManagement/JWS_BM_006_CreateServicePointFail.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/01-Admin-BranchManagement/JWS_BM_007_SelectTypeBranch.spec.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/01-Admin-BranchManagement/JWS_BM_008_ViewDetail.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/01-Admin-BranchManagement/JWS_BM_009_EditBranch.spec.ts

@@ -16,7 +16,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/01-Admin-BranchManagement/JWS_BM_010_StatusBranchandSubType.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/01-Admin-BranchManagement/JWS_BM_012_CloseStatusBranch.spec.ts

@@ -16,7 +16,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/01-Admin-BranchManagement/JWS_BM_013_DeleteBranch.spec.ts

@@ -18,7 +18,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');
@@ -103,7 +103,8 @@ test('ทดสอบการลบจัดการสาขา', async () =>
   await page.waitForTimeout(2000);
   await page.click('id=select-bankbook_0');
 
-  await page.click('id=btn-form-submit');
+  await page.click('id=btn-info-basic-save');
+  await page.click('id=btn-form-close');
 
   // จำลองการสร้างสาขาเสมือน
 
@@ -139,7 +140,8 @@ test('ทดสอบการลบจัดการสาขา', async () =>
   await page.waitForTimeout(2000);
   await page.click('id=select-bankbook_0');
 
-  await page.click('id=btn-form-submit');
+  await page.click('id=btn-info-basic-save');
+  await page.click('id=btn-form-close');
 
   // ลบสาขาและตรวจสอบการลบสาขา
   try {

tests/02-Admin-PersonnelManagement/JWS_PM_001_CreatePersonnel.spec.ts

@@ -16,7 +16,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/02-Admin-PersonnelManagement/JWS_PM_002_CreatePersonnelFail.spec.ts

@@ -16,7 +16,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/02-Admin-PersonnelManagement/JWS_PM_003_ViewDetail.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/02-Admin-PersonnelManagement/JWS_PM_004_EditPersonnel.spec.ts

@@ -18,7 +18,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/02-Admin-PersonnelManagement/JWS_PM_005_StatusPersonnel.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/02-Admin-PersonnelManagement/JWS_PM_006_SearchPersonnel(ยังไม่เสร็จทำทีหลัง).spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/02-Admin-PersonnelManagement/JWS_PM_007_StatusPersonnelType.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/02-Admin-PersonnelManagement/JWS_PM_008_TypePersonnelFields.spec.ts

@@ -14,7 +14,7 @@ test.afterAll(async () => {
 });
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_001_CreateNaturalperoson.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');
@@ -24,95 +24,138 @@ test('Login', async () => {
   //   await page.click('id=acceptBtn');
 });
 
-test('Create Natural Person', async () => {
+test('ทดสอบการสร้างนายจ้างบุคคลธรรมดา', async () => {
   await page.click('id=menu-icon-customer-management');
-  await page.click("(//div[@id='btn-add'])[1]");
+  try {
-  await page.click('id=add-customer-natural-person');
+    await page.click('id=btn-Add');
-  await page.fill("(//input[@id='input-employer-id'])[3]", 'ปิง');
+    await page.click("(//button[@type='submit'])[2]");
-  await page.fill("(//input[@id='input-tax-no'])[3]", '1242822482204');
+    // ส่วนเกี่ยวกับ
-  await page.fill("(//input[@id='input-customer-name'])[3]", 'โคโม่');
+    await page.fill('id=input-legal-person-no', '1524428220420');
-  await page.fill("(//input[@id='input-customer-name-en'])[3]", 'Como');
+    await page.waitForSelector('id=form-select-prefix-name');
-  await page.fill("(//input[@id='input-customerName'])[3]", 'สีลม');
+    await page.click('id=form-select-prefix-name');
-  await page.fill("(//input[@id='input-customerEnglishName'])[3]", 'Silom');
+    await page.waitForSelector('id=form-select-prefix-name_0');
-  await page.fill("(//input[@id='input-address-0'])[3]", '20/02');
+    await page.click('id=form-select-prefix-name_0');
-  await page.click("(//div[@id='select-province-0'])[3]");
+    await page.fill("(//input[@id='form-input-first-name'])[1]", 'ยศพัฒน์');
-  await page.click("//div[@role='option']");
+    await page.fill("(//input[@id='form-input-last-name'])[1]", 'ธนากานต์');
-  await page.click("(//div[@id='select-district-0'])[3]");
+    await page.fill("(//input[@id='form-input-first-name'])[3]", 'Yossapat');
-  await page.waitForTimeout(1000);
+    await page.fill("(//input[@id='form-input-last-name'])[2]", 'Tanakarn');
-  await page.click("//div[@role='option']");
+    await page.fill('id=form-input-telephone', '0842262228');
-  await page.click("(//div[@id='select-sub-district-0'])[3]");
+    await page.waitForSelector('id=form-input-birth-date');
-  await page.waitForTimeout(1000);
+    await page.click('id=form-input-birth-date');
-  await page.click("//div[@role='option']");
+    await page.waitForSelector(
-  await page.fill("(//input[@id='input-address-en-0'])[3]", '20/02');
+      "(//button[@class='dp__btn dp__month_year_select'])[2]",
-  await page.fill(
+    );
-    "(//input[@id='input-employment-office'])[3]",
+    await page.click("(//button[@class='dp__btn dp__month_year_select'])[2]");
-    'กรุงเทพมหานคร',
+    await page.click("//div[text()='2542']");
-  );
+    await page.click("//div[@id='1999-09-02']/div[1]");
-  await page.click("(//div[@id='select-business-type'])[3]");
+
-  await page.click("//span[text()='ประมง']");
+    // ส่วนข้อมูลธุรกิจ
-  await page.click("(//div[@id='select-job-position'])[3]");
+    await page.waitForSelector("(//div[@aria-selected='false'])[2]");
-  await page.click("(//div[@role='option'])[1]");
+    await page.click("(//div[@aria-selected='false'])[2]");
-  await page.fill(
+    await page.waitForSelector('id=form-select-business-type');
-    "(//input[@id='input-job-description'])[3]",
+    await page.click('id=form-select-business-type');
-    'ตรวจสอบการทำการลักษณะงาน',
+    await page.click('id=form-select-business-type_6');
-  );
+    await page.waitForSelector('id=form-select-job-position');
-  await page.click("(//input[@id='input-start-date'])[3]");
+    await page.click('id=form-select-job-position');
-  await page.click("(//button[@class='dp__btn dp__month_year_select'])[2]");
+    await page.click('id=form-select-job-position_0');
-  await page.click("//div[text()='2561']");
+
-  await page.click("//div[text()='12']");
+    // ส่วนที่อยู่นายจ้าง
-  await page.fill("(//input[@id='input-sales-person'])[3]", 'พนักงานขาย');
+    await page.click("(//div[@aria-selected='false'])[3]");
-  await page.fill("(//input[@id='input-mail'])[3]", 'jws@local.com');
+    await page.fill("(//input[@id='form-input-address'])[1]", '22282205202');
-  await page.fill("(//input[@id='input-telephone'])[3]", '0864228464');
+    await page.fill('id=form-input-address-no', '200');
-  await page.setInputFiles(
+    await page.click('id=form-select-province');
-    "(//input[contains(@class,'q-field__input fit')])[3]",
+    await page.waitForSelector('id=form-select-province_4');
-    '/Users/linping/Desktop/Chamomind&FrappeT/JWS_TestScript/tests/Datafile/Pic1.jpg',
+    await page.click('id=form-select-province_4');
-  ); // UploadFile
+    await page.click('id=form-select-district');
-  await page.click('id=submitBtn');
+    await page.waitForSelector('id=form-select-district_8');
+    await page.click('id=form-select-district_8');
+    await page.click('id=form-select-sub-district');
+    await page.waitForSelector('id=form-select-sub-district_7');
+    await page.click('id=form-select-sub-district_7');
+    await page.fill('id=form-input-address-en', '200');
+    await page.click("//button[@type='submit']");
+    await page.click('id=btn-form-close');
+
+    // กำหนดค่าเพื่อตรวจสอบความถูกต้องหลังสร้าง
+    const nameTitleNatrualPerson = await page.locator(
+      "//div[normalize-space(text())='ยศพัฒน์ ธนากานต์']",
+    );
+
+    expect(nameTitleNatrualPerson).toHaveText('ยศพัฒน์ ธนากานต์');
+    console.log('ระบบสามารถสร้างนายจ้างบุคคลธรรมดาได้');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
   await page.waitForTimeout(2000);
 });
 
-test('Create Natural Person Second', async () => {
+test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาครั้งที่ 2', async () => {
-  await page.click("(//div[@id='btn-add'])[1]");
+  try {
-  await page.click('id=add-customer-natural-person');
+    await page.click('id=btn-add');
-  await page.fill("(//input[@id='input-employer-id'])[3]", 'วัง');
+    await page.click('id=add-customer-natural-person');
-  await page.fill("(//input[@id='input-tax-no'])[3]", 'จคภ/คค/ุ//');
+    // ส่วนเกี่ยวกับ
-  await page.fill("(//input[@id='input-customer-name'])[3]", 'โคโม่');
+    await page.fill('id=input-legal-person-no', '1886222422008');
-  await page.fill("(//input[@id='input-customer-name-en'])[3]", 'Como');
+    await page.waitForSelector('id=form-select-prefix-name');
-  await page.fill("(//input[@id='input-customerName'])[3]", 'สีลม');
+    await page.click('id=form-select-prefix-name');
-  await page.fill("(//input[@id='input-customerEnglishName'])[3]", 'Silom');
+    await page.waitForSelector('id=form-select-prefix-name_0');
-  await page.fill("(//input[@id='input-address-0'])[3]", '20/02');
+    await page.click('id=form-select-prefix-name_0');
-  await page.click("(//div[@id='select-province-0'])[3]");
+    await page.fill("(//input[@id='form-input-first-name'])[1]", 'สุรวัฒน์');
-  await page.click("//div[@role='option']");
+    await page.fill("(//input[@id='form-input-last-name'])[1]", 'จันทรสมบัติ ');
-  await page.click("(//div[@id='select-district-0'])[3]");
+    await page.fill("(//input[@id='form-input-first-name'])[3]", 'Surawat');
-  await page.waitForTimeout(1000);
+    await page.fill(
-  await page.click("//div[@role='option']");
+      "(//input[@id='form-input-last-name'])[2]",
-  await page.click("(//div[@id='select-sub-district-0'])[3]");
+      'Jantarasombat',
-  await page.waitForTimeout(1000);
+    );
-  await page.click("//div[@role='option']");
+    await page.fill('id=form-input-telephone', '0864240842');
-  await page.fill("(//input[@id='input-address-en-0'])[3]", '20/02');
+    await page.waitForSelector('id=form-input-birth-date');
-  await page.fill(
+    await page.click('id=form-input-birth-date');
-    "(//input[@id='input-employment-office'])[3]",
+    await page.waitForSelector(
-    'กรุงเทพมหานคร',
+      "(//button[@class='dp__btn dp__month_year_select'])[2]",
-  );
+    );
-  await page.click("(//div[@id='select-business-type'])[3]");
+    await page.click("(//button[@class='dp__btn dp__month_year_select'])[2]");
-  await page.click("//span[text()='ประมง']");
+    await page.click("//div[text()='2542']");
-  await page.click("(//div[@id='select-job-position'])[3]");
+    await page.click("//div[@id='1999-09-02']/div[1]");
-  await page.click("(//div[@role='option'])[1]");
+
-  await page.fill(
+    // ส่วนข้อมูลธุรกิจ
-    "(//input[@id='input-job-description'])[3]",
+    await page.waitForSelector("(//div[@aria-selected='false'])[2]");
-    'ตรวจสอบการทำการลักษณะงาน',
+    await page.click("(//div[@aria-selected='false'])[2]");
-  );
+    await page.waitForSelector('id=form-select-business-type');
-  await page.click("(//input[@id='input-start-date'])[3]");
+    await page.click('id=form-select-business-type');
-  await page.click("(//button[@class='dp__btn dp__month_year_select'])[2]");
+    await page.click('id=form-select-business-type_6');
-  await page.click("//div[text()='2561']");
+    await page.waitForSelector('id=form-select-job-position');
-  await page.click("//div[text()='12']");
+    await page.click('id=form-select-job-position');
-  await page.fill("(//input[@id='input-sales-person'])[3]", 'พนักงานขาย');
+    await page.click('id=form-select-job-position_0');
-  await page.fill("(//input[@id='input-mail'])[3]", 'jws@local.com');
+
-  await page.fill("(//input[@id='input-telephone'])[3]", '0864228464');
+    // ส่วนที่อยู่นายจ้าง
-  await page.setInputFiles(
+    await page.click("(//div[@aria-selected='false'])[3]");
-    "(//input[contains(@class,'q-field__input fit')])[3]",
+    await page.fill("(//input[@id='form-input-address'])[1]", '22282206402');
-    '/Users/linping/Desktop/Chamomind&FrappeT/JWS_TestScript/tests/Datafile/Pic1.jpg',
+    await page.fill('id=form-input-address-no', '400');
-  ); // UploadFile
+    await page.click('id=form-select-province');
-  await page.click('id=submitBtn');
+    await page.waitForSelector('id=form-select-province_4');
+    await page.click('id=form-select-province_4');
+    await page.click('id=form-select-district');
+    await page.waitForSelector('id=form-select-district_8');
+    await page.click('id=form-select-district_8');
+    await page.click('id=form-select-sub-district');
+    await page.waitForSelector('id=form-select-sub-district_7');
+    await page.click('id=form-select-sub-district_7');
+    await page.fill('id=form-input-address-en', '400');
+    await page.click("//button[@type='submit']");
+    await page.click('id=btn-form-close');
+
+    await page.waitForSelector(
+      "//div[normalize-space(text())='สุรวัฒน์ จันทรสมบัติ']",
+    );
+    // กำหนดค่าเพื่อตรวจสอบความถูกต้องหลังสร้าง
+    const nameTitleNatrualPerson = await page.locator(
+      "//div[normalize-space(text())='สุรวัฒน์ จันทรสมบัติ']",
+    );
+    expect(nameTitleNatrualPerson).toHaveText('สุรวัฒน์ จันทรสมบัติ');
+    console.log('ระบบสามารถสร้างนายจ้างบุคคลธรรมดาได้');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
   await page.waitForTimeout(2000);
 });

tests/03-Admin-ManageCustomer/JWS_MC_002_CreateNaturalperosonfail.spec.ts

@@ -1,5 +1,9 @@
 import { test, expect, Page } from '@playwright/test';
 import { strictEqual } from 'assert';
+import { formToJSON } from 'axios';
+import { exec } from 'child_process';
+import { ToastHeader } from 'react-bootstrap';
+import { toHandlerKey } from 'vue';
 
 let page: Page;
 
@@ -15,7 +19,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');
@@ -24,226 +28,362 @@ test('Login', async () => {
   //   await page.click('id=acceptBtn');
 });
 
-test('Create Natural Person No input Data', async () => {
+test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่ไม่กรอกช้อมูล', async () => {
   await page.click('id=menu-icon-customer-management');
-  await page.click("(//div[@id='btn-add'])[1]");
+  try {
-  await page.click('id=add-customer-natural-person');
+    await page.click('id=btn-add');
-  await page.click('id=submitBtn');
+    await page.click('id=add-customer-natural-person');
-  await page.waitForTimeout(2000);
+    await page.click("//button[@type='submit']");
-  await page.click('id=cancelBtn');
+
+    // กำหนดค่าเพื่อตรวจสอบหลังเกิดการ Validation
+    const citizenNoError = await page.locator(
+      "(//div[@class='q-field__messages col'])[1]",
+    );
+    const firstNameThError = await page.locator(
+      "(//div[@class='q-field__messages col'])[2]",
+    );
+    const lastNameThError = await page.locator(
+      "(//div[@class='q-field__messages col'])[3]",
+    );
+    const firstNameEngError = await page.locator(
+      "(//div[@class='q-field__messages col'])[4]",
+    );
+    const lastNameEngError = await page.locator(
+      "(//div[@class='q-field__messages col'])[5]",
+    );
+    const brithDateError = await page.locator(
+      "(//div[@class='q-field__messages col'])[6]",
+    );
+
+    // ตรวจสอบการเกิด Validation
+    expect(citizenNoError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+    expect(firstNameThError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+    expect(lastNameThError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+    expect(firstNameEngError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+    expect(lastNameEngError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+    expect(brithDateError).toHaveText('โปรดเลือกวันเดือนปีเกิด');
+
+    console.log('ตรวจสอบการแจ้งเตือนทั้งหมดถูกต้อง');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
   await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
 });
 
-test('Create Natural Person No Input Employee name', async () => {
+test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่กรอกข้อมูลเฉพาะส่วนเกี่ยวกับ', async () => {
-  await page.click("(//div[@id='btn-add'])[1]");
+  try {
-  await page.click('id=add-customer-natural-person');
+    await page.click('id=btn-add');
-  await page.fill("(//input[@id='input-employer-id'])[3]", '');
+    await page.click('id=add-customer-natural-person');
-  await page.fill("(//input[@id='input-tax-no'])[3]", '1242822482204');
+    await page.fill('id=input-legal-person-no', '1222202282262');
-  await page.fill("(//input[@id='input-customer-name'])[3]", 'โคโม่');
+    await page.click('id=form-select-prefix-name');
-  await page.fill("(//input[@id='input-customer-name-en'])[3]", 'Como');
+    await page.waitForSelector('id=form-select-prefix-name_0');
-  await page.fill("(//input[@id='input-customerName'])[3]", 'ปองพล กันธะณะ');
+    await page.click('id=form-select-prefix-name_0');
-  await page.fill("(//input[@id='input-address-0'])[3]", '20/02');
+    await page.fill("(//input[@id='form-input-first-name'])[1]", 'มานะ');
-  await page.click("(//div[@id='select-province-0'])[3]");
+    await page.fill("(//input[@id='form-input-last-name'])[1]", 'แมน');
-  await page.click("//div[@role='option']");
+    await page.fill("(//input[@id='form-input-first-name'])[3]", 'Mana');
-  await page.click("(//div[@id='select-district-0'])[3]");
+    await page.fill("(//input[@id='form-input-last-name'])[2]", 'Man');
-  await page.waitForTimeout(1000);
+    await page.click('id=form-input-birth-date');
-  await page.click("//div[@role='option']");
+    await page.waitForSelector("//div[@id='2024-09-18']/div[1]");
-  await page.click("(//div[@id='select-sub-district-0'])[3]");
+    await page.click("//div[@id='2024-09-18']/div[1]");
-  await page.waitForTimeout(1000);
+    await page.click("//button[@type='submit']");
-  await page.click("//div[@role='option']");
-  await page.fill("(//input[@id='input-address-en-0'])[3]", '20/02');
-  await page.click('id=submitBtn');
-  await page.waitForTimeout(2000);
-});
 
-test('Create Natural Person No Input Tax No', async () => {
+    // รอการเกิด Dialog
-  await page.click("(//div[@id='btn-add'])[1]");
+    const textPopupError = await page.locator(
-  await page.click('id=add-customer-natural-person');
+      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
-  await page.fill("(//input[@id='input-employer-id'])[3]", 'ปิง');
+    );
-  await page.fill("(//input[@id='input-tax-no'])[3]", '');
+
-  await page.fill("(//input[@id='input-customer-name'])[3]", 'โคโม่');
+    await expect(textPopupError).toHaveText('กรอกข้อมูลไม่ครบ');
-  await page.fill("(//input[@id='input-customer-name-en'])[3]", 'Como');
+    console.log('ตรวจสอบการแจ้งเตือน Pop-up สำเร็จ');
-  await page.fill("(//input[@id='input-customerName'])[3]", 'ปองพล กันธะณะ');
+  } catch (error) {
-  await page.fill("(//input[@id='input-address-0'])[3]", '20/02');
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
-  await page.click("(//div[@id='select-province-0'])[3]");
+    throw error;
-  await page.click("//div[@role='option']");
+  }
-  await page.click("(//div[@id='select-district-0'])[3]");
+  await page.waitForSelector('id=btn-ok-dialog');
-  await page.waitForTimeout(1000);
+  await page.click('id=btn-ok-dialog');
-  await page.click("//div[@role='option']");
-  await page.click("(//div[@id='select-sub-district-0'])[3]");
-  await page.waitForTimeout(1000);
-  await page.click("//div[@role='option']");
-  await page.fill("(//input[@id='input-address-en-0'])[3]", '20/02');
-  await page.click('id=cancelBtn');
 
   await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
 });
 
-test('Create Natural Person No Input Customer Name TH', async () => {
+test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่ไม่ได้กรอกข้อมูลส่วนข้อมูลธุรกิจ', async () => {
-  await page.click("(//div[@id='btn-add'])[1]");
+  try {
-  await page.click('id=add-customer-natural-person');
+    await page.click('id=btn-add');
-  await page.fill("(//input[@id='input-employer-id'])[3]", 'ปิง');
+    await page.click('id=add-customer-natural-person');
-  await page.fill("(//input[@id='input-tax-no'])[3]", '1242822482204');
+    await page.click("(//div[@aria-selected='false'])[2]");
-  await page.fill("(//input[@id='input-customer-name'])[3]", '');
+    await page.click("//button[@type='submit']");
-  await page.fill("(//input[@id='input-customer-name-en'])[3]", 'Como');
+
-  await page.fill("(//input[@id='input-customerName'])[3]", 'ปองพล กันธะณะ');
+    // กำหนดค่าเพื่อตรวจสอบการแจ้งเตือน
-  await page.fill("(//input[@id='input-address-0'])[3]", '20/02');
+    const businessTypeError = await page.locator(
-  await page.click("(//div[@id='select-province-0'])[3]");
+      "(//div[@class='q-field__messages col']//div)[1]",
-  await page.click("//div[@role='option']");
+    );
-  await page.click("(//div[@id='select-district-0'])[3]");
+    const businessTypeEngError = await page.locator(
-  await page.waitForTimeout(1000);
+      "(//div[@class='q-field__messages col']//div)[2]",
-  await page.click("//div[@role='option']");
+    );
-  await page.click("(//div[@id='select-sub-district-0'])[3]");
+    const jobPositionError = await page.locator(
-  await page.waitForTimeout(1000);
+      "(//div[@class='q-field__messages col']//div)[3]",
-  await page.click("//div[@role='option']");
+    );
-  await page.fill("(//input[@id='input-address-en-0'])[3]", '20/02');
+    const jobPositionEnError = await page.locator(
-  await page.click('id=submitBtn');
+      "(//div[@class='q-field__messages col']//div)[4]",
+    );
+
+    // ตรวจสอบการแจ้งเตือน
+    expect(businessTypeError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+    expect(businessTypeEngError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+    expect(jobPositionError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+    expect(jobPositionEnError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+    console.log('ตรวจสอบการแจ้งเตือนสำเร็จ');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+  }
   await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
 });
 
-test('Create Natural Person No Input Customer Name EN', async () => {
+test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่กรอกข้อมูลเฉพาะส่วนข้อมูลธุรกิจ', async () => {
-  await page.click("(//div[@id='btn-add'])[1]");
+  try {
-  await page.click('id=add-customer-natural-person');
+    await page.click('id=btn-add');
-  await page.fill("(//input[@id='input-employer-id'])[3]", 'ปิง');
+    await page.click('id=add-customer-natural-person');
-  await page.fill("(//input[@id='input-tax-no'])[3]", '1242822482204');
+    await page.click("(//div[@aria-selected='false'])[2]");
-  await page.fill("(//input[@id='input-customer-name'])[3]", 'โคโม่');
+    await page.click('id=form-select-business-type');
-  await page.fill("(//input[@id='input-customer-name-en'])[3]", '');
+    await page.waitForSelector('id=form-select-business-type_1');
-  await page.fill("(//input[@id='input-customerName'])[3]", 'ปองพล กันธะณะ');
+    await page.click('id=form-select-business-type_1');
-  await page.fill("(//input[@id='input-address-0'])[3]", '20/02');
+    await page.click('id=form-select-job-position');
-  await page.click("(//div[@id='select-province-0'])[3]");
+    await page.waitForSelector('id=form-select-job-position_1');
-  await page.click("//div[@role='option']");
+    await page.click('id=form-select-job-position_1');
-  await page.click("(//div[@id='select-district-0'])[3]");
+    await page.fill('id=form-input-job-description', 'รายละเอียด');
-  await page.waitForTimeout(1000);
+    await page.fill("(//input[@id='form-input-pay-rate'])[1]", 'วันจ่ายเงิน');
-  await page.click("//div[@role='option']");
+    await page.fill("(//input[@id='form-input-pay-rate'])[2]", 'Pay Day');
-  await page.click("(//div[@id='select-sub-district-0'])[3]");
+    await page.fill("(//input[@id='form-input-pay-rate'])[3]", '2000');
-  await page.waitForTimeout(1000);
+    await page.fill("//input[@aria-label='อัตราค่าจ้าง/วัน (Text)']", '2000');
-  await page.click("//div[@role='option']");
+    await page.click("//button[@type='submit']");
-  await page.fill("(//input[@id='input-address-en-0'])[3]", '20/02');
+
-  await page.click('id=submitBtn');
+    // กำหนดค่าการแจ้งเตือน
+    const titleError = await page.locator(
+      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
+    );
+
+    expect(titleError).toHaveText('กรอกข้อมูลไม่ครบ');
+    console.log('การแจ้งเตือนถูกต้อง');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+  }
+  await page.waitForSelector('id=btn-ok-dialog');
+  await page.click('id=btn-ok-dialog');
+
   await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
 });
 
-test('Create Natural Person No Input Customername', async () => {
+test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่ไม่กรอกข้อมูลส่วนที่อยู่นายจ้าง', async () => {
-  await page.click("(//div[@id='btn-add'])[1]");
+  try {
-  await page.click('id=add-customer-natural-person');
+    await page.click('id=btn-add');
-  await page.fill("(//input[@id='input-employer-id'])[3]", 'ปิง');
+    await page.click('id=add-customer-natural-person');
-  await page.fill("(//input[@id='input-tax-no'])[3]", '1242822482204');
+    await page.click("(//div[@aria-selected='false'])[3]");
-  await page.fill("(//input[@id='input-customer-name'])[3]", 'โคโม่');
+    await page.click("//button[@type='submit']");
-  await page.fill("(//input[@id='input-customer-name-en'])[3]", 'Como');
+
-  await page.fill("(//input[@id='input-customerName'])[3]", '');
+    // กำหนดค่าการแจ้งเตือน
-  await page.fill("(//input[@id='input-address-0'])[3]", '20/02');
+    const addressIdentificationError = await page.locator(
-  await page.click("(//div[@id='select-province-0'])[3]");
+      "(//div[@class='q-field__messages col']//div)[1]",
-  await page.click("//div[@role='option']");
+    );
-  await page.click("(//div[@id='select-district-0'])[3]");
+    const addressNoError = await page.locator(
-  await page.waitForTimeout(1000);
+      "(//div[@class='q-field__messages col']//div)[2]",
-  await page.click("//div[@role='option']");
+    );
-  await page.click("(//div[@id='select-sub-district-0'])[3]");
+    const provinceError = await page.locator(
-  await page.waitForTimeout(1000);
+      "(//div[@class='q-field__messages col']//div)[3]",
-  await page.click("//div[@role='option']");
+    );
-  await page.fill("(//input[@id='input-address-en-0'])[3]", '20/02');
+    const districtError = await page.locator(
-  await page.click('id=submitBtn');
+      "(//div[@class='q-field__messages col']//div)[4]",
+    );
+    const subdistrictError = await page.locator(
+      "(//div[@class='q-field__messages col']//div)[5]",
+    );
+    const addressNoEngError = await page.locator(
+      "(//div[@class='q-field__messages col']//div)[6]",
+    );
+
+    // ตรวจสอบการแจ้งเตือน
+    expect(addressIdentificationError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+    expect(addressNoError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+    expect(provinceError).toHaveText('โปรดเลือกจังหวัด');
+    expect(districtError).toHaveText('โปรดเลือกอำเภอ');
+    expect(subdistrictError).toHaveText('โปรดเลือกตำบล');
+    expect(addressNoEngError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+
+    console.log('ตรวจสอบการแจ้งเตือนสำเร็จ');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
   await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
 });
 
-test('Create Natural Person No Input Address TH', async () => {
+test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่กรอกข้อมูลเฉพาะส่วนที่อยู่นายจ้าง', async () => {
-  await page.click("(//div[@id='btn-add'])[1]");
+  try {
-  await page.click('id=add-customer-natural-person');
+    await page.click('id=btn-add');
-  await page.fill("(//input[@id='input-employer-id'])[3]", 'ปิง');
+    await page.click('id=add-customer-natural-person');
-  await page.fill("(//input[@id='input-tax-no'])[3]", '1242822482204');
+    await page.click("(//div[@aria-selected='false'])[3]");
-  await page.fill("(//input[@id='input-customer-name'])[3]", 'โคโม่');
+    await page.fill("(//input[@id='form-input-address'])[1]", '22282202202');
-  await page.fill("(//input[@id='input-customer-name-en'])[3]", 'Como');
+    await page.fill('id=form-input-address-no', '800');
-  await page.fill("(//input[@id='input-customerName'])[3]", 'ปองพล กันธะณะ');
+    await page.click('id=form-select-province');
-  await page.fill("(//input[@id='input-address-0'])[3]", '');
+    await page.waitForSelector('id=form-select-province_4');
-  await page.click("(//div[@id='select-province-0'])[3]");
+    await page.click('id=form-select-province_4');
-  await page.click("//div[@role='option']");
+    await page.click('id=form-select-district');
-  await page.click("(//div[@id='select-district-0'])[3]");
+    await page.waitForSelector('id=form-select-district_8');
-  await page.waitForTimeout(1000);
+    await page.click('id=form-select-district_8');
-  await page.click("//div[@role='option']");
+    await page.click('id=form-select-sub-district');
-  await page.click("(//div[@id='select-sub-district-0'])[3]");
+    await page.waitForSelector('id=form-select-sub-district_7');
-  await page.waitForTimeout(1000);
+    await page.click('id=form-select-sub-district_7');
-  await page.click("//div[@role='option']");
+    await page.fill('id=form-input-address-en', '800');
-  await page.fill("(//input[@id='input-address-en-0'])[3]", '20/02');
+    await page.click("//button[@type='submit']");
-  await page.click('id=submitBtn');
+
-  await page.waitForTimeout(2000);
+    // กำหนดค่าการแจ้งเตือน
-  await page.click('id=cancelBtn');
+    const popupError = await page.locator(
+      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
+    );
+
+    // ตรวจสอบการแจ้งเตือน
+    expect(popupError).toHaveText('กรอกข้อมูลไม่ครบ');
+    console.log('ตรวจสอบการแจ้งเตือนถูกต้อง');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+  await page.waitForSelector('id=btn-ok-dialog');
+  await page.click('id=btn-ok-dialog');
+
   await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
 });
 
-test('Create Natural Person Not Select Province', async () => {
+test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่ไม่กรอกข้อมูลส่วนข้อมูลติดต่อ', async () => {
-  await page.click("(//div[@id='btn-add'])[1]");
+  try {
-  await page.click('id=add-customer-natural-person');
+    await page.click('id=btn-add');
-  await page.fill("(//input[@id='input-employer-id'])[3]", 'ปิง');
+    await page.click('id=add-customer-natural-person');
-  await page.fill("(//input[@id='input-tax-no'])[3]", '1242822482204');
+    await page.click("(//div[@aria-selected='false'])[4]");
-  await page.fill("(//input[@id='input-customer-name'])[3]", 'โคโม่');
+    await page.click("//button[@type='submit']");
-  await page.fill("(//input[@id='input-customer-name-en'])[3]", 'Como');
+    // กำหนดค่าการแจ้งเตือน
-  await page.fill("(//input[@id='input-customerName'])[3]", 'ปองพล กันธะณะ');
+    const popupError = await page.locator(
-  await page.fill("(//input[@id='input-address-0'])[3]", '20/02');
+      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
-  await page.fill("(//input[@id='input-address-en-0'])[3]", '20/02');
+    );
-  await page.click('id=submitBtn');
+
-  await page.waitForTimeout(2000);
+    // ตรวจสอบการแจ้งเตือน
-  await page.click('id=cancelBtn');
+    expect(popupError).toHaveText('กรอกข้อมูลไม่ครบ');
+    console.log('ตรวจสอบการแจ้งเตือนถูกต้อง');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+  await page.waitForSelector('id=btn-ok-dialog');
+  await page.click('id=btn-ok-dialog');
+
   await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
 });
 
-test('Create Natural Person Not Select District', async () => {
+test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่กรอกข้อมูลเฉพาะส่วนข้อมูลติดต่อ', async () => {
-  await page.click("(//div[@id='btn-add'])[1]");
+  try {
-  await page.click('id=add-customer-natural-person');
+    await page.click('id=btn-add');
-  await page.fill("(//input[@id='input-employer-id'])[3]", 'ปิง');
+    await page.click('id=add-customer-natural-person');
-  await page.fill("(//input[@id='input-tax-no'])[3]", '1242822482204');
+    await page.click("(//div[@aria-selected='false'])[4]");
-  await page.fill("(//input[@id='input-customer-name'])[3]", 'โคโม่');
+    await page.fill('id=form-input-contact-name', 'คุณอาท');
-  await page.fill("(//input[@id='input-customer-name-en'])[3]", 'Como');
+    await page.fill('id=form-input-mail', 'art@mail.com');
-  await page.fill("(//input[@id='input-customerName'])[3]", 'ปองพล กันธะณะ');
+    await page.fill("(//input[@id='form-input-telephone'])[1]", '0882622426');
-  await page.fill("(//input[@id='input-address-0'])[3]", '20/02');
+    await page.fill("(//input[@id='form-input-telephone'])[2]", '022222002');
-  await page.click("(//div[@id='select-province-0'])[3]");
+    await page.click("//button[@type='submit']");
-  await page.click("//div[@role='option']");
+    // กำหนดค่าการแจ้งเตือน
-  await page.fill("(//input[@id='input-address-en-0'])[3]", '20/02');
+    const popupError = await page.locator(
-  await page.click('id=submitBtn');
+      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
-  await page.waitForTimeout(2000);
+    );
-  await page.click('id=cancelBtn');
+
+    // ตรวจสอบการแจ้งเตือน
+    expect(popupError).toHaveText('กรอกข้อมูลไม่ครบ');
+    console.log('ตรวจสอบการแจ้งเตือนถูกต้อง');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+  await page.waitForSelector('id=btn-ok-dialog');
+  await page.click('id=btn-ok-dialog');
+
   await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
 });
 
-test('Create Natural Person Not Select Sub District', async () => {
+test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่กรอกรูปแบบอีเมลส่วนข้อมูลติดต่อไม่ถูกต้อง', async () => {
-  await page.click("(//div[@id='btn-add'])[1]");
+  try {
-  await page.click('id=add-customer-natural-person');
+    await page.click('id=btn-add');
-  await page.fill("(//input[@id='input-employer-id'])[3]", 'ปิง');
+    await page.click('id=add-customer-natural-person');
-  await page.fill("(//input[@id='input-tax-no'])[3]", '1242822482204');
+    await page.click("(//div[@aria-selected='false'])[4]");
-  await page.fill("(//input[@id='input-customer-name'])[3]", 'โคโม่');
+    await page.fill('id=form-input-mail', 'art');
-  await page.fill("(//input[@id='input-customer-name-en'])[3]", 'Como');
+    await page.click("//button[@type='submit']");
-  await page.fill("(//input[@id='input-customerName'])[3]", 'ปองพล กันธะณะ');
+    // กำหนดค่าการแจ้งเตือน
-  await page.fill("(//input[@id='input-address-0'])[3]", '20/02');
+    const emailFomatError = await page.locator(
-  await page.click("(//div[@id='select-province-0'])[3]");
+      "//div[normalize-space(text())='ข้อมูลไม่ถูกต้อง']",
-  await page.click("//div[@role='option']");
+    );
-  await page.click("(//div[@id='select-district-0'])[3]");
+
-  await page.waitForTimeout(1000);
+    // ตรวจสอบการแจ้งเตือน
-  await page.click("//div[@role='option']");
+    expect(emailFomatError).toHaveText('ข้อมูลไม่ถูกต้อง');
-  await page.fill("(//input[@id='input-address-en-0'])[3]", '20/02');
+    console.log('ตรวจสอบการแจ้งเตือนรูปแบบอีเมลไม่ถูกต้อง : Success ');
-  await page.click('id=submitBtn');
+  } catch (error) {
-  await page.waitForTimeout(2000);
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
-  await page.click('id=cancelBtn');
+    throw error;
+  }
   await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
 });
 
-test('Create Natural Person Not Input Address ENG', async () => {
+test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่ไม่อัปโหลดข้อมูลส่วนเอกสาร', async () => {
-  await page.click("(//div[@id='btn-add'])[1]");
+  try {
-  await page.click('id=add-customer-natural-person');
+    await page.click('id=btn-add');
-  await page.fill("(//input[@id='input-employer-id'])[3]", 'ปิง');
+    await page.click('id=add-customer-natural-person');
-  await page.fill("(//input[@id='input-tax-no'])[3]", '1242822482204');
+    await page.click("(//div[@aria-selected='false'])[5]");
-  await page.fill("(//input[@id='input-customer-name'])[3]", 'โคโม่');
+    await page.click("//button[@type='submit']");
-  await page.fill("(//input[@id='input-customer-name-en'])[3]", 'Como');
+
-  await page.fill("(//input[@id='input-customerName'])[3]", 'ปองพล กันธะณะ');
+    // กำหนดค่าแจ้งเตือน
-  await page.fill("(//input[@id='input-address-0'])[3]", '20/02');
+    const popupError = await page.locator(
-  await page.click("(//div[@id='select-province-0'])[3]");
+      "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
-  await page.click("//div[@role='option']");
+    );
-  await page.click("(//div[@id='select-district-0'])[3]");
+
-  await page.waitForTimeout(1000);
+    // ตรวจสอบการแจ้งเตือน
-  await page.click("//div[@role='option']");
+    expect(popupError).toHaveText('กรอกข้อมูลไม่ครบ');
-  await page.click("(//div[@id='select-sub-district-0'])[3]");
+    console.log('ตรวจสอบการแจ้งเตือนถูกต้อง');
-  await page.waitForTimeout(1000);
+  } catch (error) {
-  await page.click("//div[@role='option']");
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
-  await page.fill("(//input[@id='input-address-en-0'])[3]", '');
+    throw error;
-  await page.click('id=submitBtn');
+  }
-  await page.waitForTimeout(2000);
+  await page.waitForSelector('id=btn-ok-dialog');
-  await page.click('id=cancelBtn');
+  await page.click('id=btn-ok-dialog');
+
   await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
 });
+
+// test('ทดสอบการสร้างนายจ้างบุคคลธรรมดาในกรณีที่อัปโหลดเอกสารเฉพาะส่วนเอกสาร', async () => {
+//   await page.click('id=menu-icon-customer-management');
+//   try {
+//     await page.click('id=btn-add');
+//     await page.click('id=add-customer-natural-person');
+//     await page.click("(//div[@aria-selected='false'])[5]");
+//     await page.click("//button[@type='submit']");
+
+//     // กำหนดค่าแจ้งเตือน
+//     const popupError = await page.locator(
+//       "//span[normalize-space(text())='กรอกข้อมูลไม่ครบ']",
+//     );
+
+//     // ตรวจสอบการแจ้งเตือน
+//     expect(popupError).toHaveText('กรอกข้อมูลไม่ครบ');
+//     console.log('ตรวจสอบการแจ้งเตือนถูกต้อง');
+//   } catch (error) {
+//     console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+//     throw error;
+//   }
+//   await page.waitForSelector('id=btn-ok-dialog');
+//   await page.click('id=btn-ok-dialog');
+
+//   await page.waitForTimeout(2000);
+//   await page.click('id=btn-form-close');
+// });

tests/03-Admin-ManageCustomer/JWS_MC_003_DetailNaturalperson.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');
@@ -24,10 +24,11 @@ test('Login', async () => {
   //   await page.click('id=acceptBtn');
 });
 
-test('Selete Filter Manage Customer Active', async () => {
+test('ตรวจสอบดูรายละเอียดบุคคลธรรมดาโดยการคลิกไอคอนดวงตา', async () => {
   await page.click('id=menu-icon-customer-management');
-  await page.click('id=btn-eye-โคโม่');
+  try {
-  await page.waitForTimeout(2000);
+  } catch (error) {
-  await page.click("(//button[@id='closeDialog'])[1]");
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
-  await page.waitForTimeout(2000);
+    throw error;
+  }
 });

tests/03-Admin-ManageCustomer/JWS_MC_004_EditNaturalperson.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_005_DeleteNaturalperson.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_006_StatusNaturalperson.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_007_CreateLegalentitly.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_008_CreateLegalentitlyfail.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_009_DetailLegalentitly.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_010_EditLegalentitly.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_011_DeleteLegalentitly.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_012_StatusLegalentitly.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_013_DropdownEmployertype.spec.ts

@@ -16,7 +16,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_014_SearchManageCustomer.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_015_FilterManageStatusCustomer.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_016_CreateEmployee.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_017_CreateEmployeeFail.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_018_SeachEmployee.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_019_FliterStatusEmployee.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_020_DetailEmployee.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_021_EditEmployee.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_022_DeleteEmployee.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_023_StatusEmployee.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_024_DropdownEmployeetype.spec.ts

@@ -16,7 +16,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_025_CreateSubBranchNaturalperson.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/03-Admin-ManageCustomer/JWS_MC_026_CreateSubBranchLegalentitly.spec.ts

@@ -15,7 +15,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');

tests/04-ProductandService/JWS_PD_001_CreateProductandServiceGroup.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect, Page } from '@playwright/test';
 import { strictEqual } from 'assert';
+import { log } from 'console';
 
 let page: Page;
 
@@ -15,7 +16,7 @@ test.afterAll(async () => {
 
 test('Login', async () => {
   // Login
-  await page.goto('http://192.168.1.90:20001/');
+  await page.goto('http://192.168.1.62:20101/');
   await expect(page).toHaveTitle(/^Sign in to /);
   await page.fill("input[name='username']", 'admin');
   await page.fill("input[name='password']", '1234');
@@ -33,6 +34,11 @@ test('ทดสอบการเพิ่มกลุ่มสินค้า
     await page.click('id=btn-add-product-group');
 
     // กรอกข้อมูลกลุ่มสินค้าและบริการ
+    // await page.click("(//i[@aria-hidden='false'])[2]");
+    // await page.click("(//input[@id='input-source-nationality'])[2]");
+    // await page.click(
+    //   "//span[normalize-space(text())='บริษัท คาโมมายด์ จำกัด']",
+    // );
     await page.fill("(//input[@id='input-name'])[2]", 'ประกัน');
     await page.fill("(//textarea[@id='input-detail'])[2]", 'รายละเอียดประกัน');
     await page.fill("(//textarea[@id='input-remark'])[2]", 'หมายเหตุประกัน');
@@ -66,50 +72,3 @@ test('ทดสอบการเพิ่มกลุ่มสินค้า
 
   await page.waitForTimeout(2000);
 });
-
-test('ทดสอบการเพิ่มประเภท', async () => {
-  // เข้าสู่หน้าหลุ่มสินค้าและบริการ
-  await page.click("(//div[@id='tree-enter-ประกัน']//div)[1]");
-
-  try {
-    // เพิ่มกลุ่มสินค้าและบริการ
-    await page.click('id=btn-add');
-    await page.click('id=btn-add-service');
-
-    // กรอกข้อมูลประเภทส่วน "ข้อมูลประเภท"
-    await page.fill('id=input-service-code', 'MOU');
-    await page.fill('id=input-service-name', 'ประกันภัยแบบกลุ่ม');
-    await page.fill('id=input-service-description', 'รายละเอียดประภัยแบบกลุ่ม');
-
-    // เพิ่มคุณสมบัติส่วน "คุณสมบัติของประเภท"
-    await page.click('id=btn-capitalize');
-
-    // บันทึกการสร้างกลุ่มสินค้นและบริการ
-    await page.click('id=btn-form-submit');
-
-    // ตรวจสอบหลังทำการสร้างกลุ่มสินค้าและบริการ
-    const newProductAndServiceLocator = page.locator(
-      "//div[normalize-space(text())='ประกัน']",
-    );
-    await newProductAndServiceLocator.waitFor({ state: 'visible' });
-
-    // ดึงข้อความให้ตรงจาก XPath
-
-    const newProductAndServiceName =
-      await newProductAndServiceLocator.textContent();
-
-    // ตรวจสอบความถูกต้องหลังทำการสร้างกลุ่มสินค้าและบริการ
-    if (newProductAndServiceName !== null) {
-      const trimmedName = newProductAndServiceName.trim();
-      expect(trimmedName).toBe('ประกัน');
-      console.log('การตรวจสอบสำเร็จ : ถูกต้อง');
-    } else {
-      throw new Error('ไม่พบข้อมูลที่บันทึก');
-    }
-  } catch (error) {
-    console.error('เกิดข้อผิดการในการทดสอบ');
-    throw error;
-  }
-
-  await page.waitForTimeout(2000);
-});

tests/04-ProductandService/JWS_PD_002_CreateProductandServiceGroupFail.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect, Page } from '@playwright/test';
+import { strictEqual } from 'assert';
+import { log } from 'console';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.afterAll(async () => {
+  if (page !== undefined) {
+    await page.close();
+  }
+});
+
+test('Login', async () => {
+  // Login
+  await page.goto('http://192.168.1.62:20101/');
+  await expect(page).toHaveTitle(/^Sign in to /);
+  await page.fill("input[name='username']", 'admin');
+  await page.fill("input[name='password']", '1234');
+  await page.click('id=kc-login');
+  await page.waitForTimeout(2000);
+  //   await page.click('id=acceptBtn');
+});
+
+test('ทดสอบการเพิ่มกลุ่มสินค้าและบริการในกรณีที่ไม่กรอกข้อมูล', async () => {
+  await page.click('id=menu-icon-product-service');
+
+  try {
+    // เพิ่มกลุ่มสินค้าและบริการ
+    await page.click('id=btn-add');
+    await page.click('id=btn-add-product-group');
+
+    // บันทึกการสร้างกลุ่มสินค้นและบริการ
+    await page.click('id=btn-form-submit');
+
+    // ตรวจสอบหลังการแจ้งเตือนหลังจากคลิกปุ่มบันทึก
+    const nameProduceandSeviceGropError = page.locator(
+      "//div[normalize-space(text())='จำเป็นต้องกรอกข้อมูลนี้']",
+    );
+    await expect(nameProduceandSeviceGropError).toHaveText(
+      'จำเป็นต้องกรอกข้อมูลนี้',
+    );
+    console.log(nameProduceandSeviceGropError, 'ตรวจสอบการแจ้งเตือนถูกต้อง');
+  } catch (error) {
+    console.error('เกิดข้อผิดการในการทดสอบ');
+    throw error;
+  }
+
+  await page.waitForTimeout(2000);
+});

tests/04-ProductandService/JWS_PD_003_CreateProductandService.spec.ts

@@ -0,0 +1,75 @@
+import { test, expect, Page } from '@playwright/test';
+import { strictEqual } from 'assert';
+import { log } from 'console';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.afterAll(async () => {
+  if (page !== undefined) {
+    await page.close();
+  }
+});
+
+test('Login', async () => {
+  // Login
+  await page.goto('http://192.168.1.62:20101/');
+  await expect(page).toHaveTitle(/^Sign in to /);
+  await page.fill("input[name='username']", 'admin');
+  await page.fill("input[name='password']", '1234');
+  await page.click('id=kc-login');
+  await page.waitForTimeout(2000);
+  //   await page.click('id=acceptBtn');
+});
+
+test('ทดสอบการเพิ่มสินค้า', async () => {
+  await page.click('id=menu-icon-product-service');
+  await page.waitForSelector('id=tree-enter-ประกัน', { state: 'visible' });
+  await page.click('id=tree-enter-ประกัน');
+  await page.waitForSelector('id=tree-enter-สินค้าและบริการ-ประกัน', {
+    state: 'visible',
+  });
+  await page.click('id=tree-enter-สินค้าและบริการ-ประกัน');
+  try {
+    await page.click('id=btn-add');
+    await page.click('id=btn-add-product');
+
+    // รหัสสินค้าและบริการ
+    await page.waitForSelector("(//input[@id='select-br-id'])[1]", {
+      state: 'visible',
+    });
+    await page.click("(//input[@id='select-br-id'])[1]");
+    await page.click('id=select-br-id_0');
+    await page.fill("(//input[@id='input-name'])[2]", 'ประเภทกลุ่ม');
+
+    // ระยะเวลาดำเนินการ
+    await page.fill('id=input-process', '2');
+
+    // ประเภทค่าใช้จ่าย
+    await page.waitForSelector("(//input[@id='select-br-id'])[2]", {
+      state: 'visible',
+    });
+    await page.click("(//input[@id='select-br-id'])[2]");
+    await page.click('id=select-br-id_0');
+
+    // กรอกรายละเอียด
+    await page.fill("//div[@contenteditable='true']", 'รายละเอียด');
+
+    // กรอกสาเหตุ
+    await page.fill("(//textarea[@id='input-remark'])[2]", 'หมายเหตุ');
+
+    // ส่วนข้อมูลราคา
+    await page.click("//span[normalize-space(text())='ข้อมูลราคา']");
+    await page.fill('id=input-price', '2000');
+    await page.fill('id=input-agent-price', '1800');
+    await page.fill('id=input-service-charge', '1000');
+    await page.click('id=btn-form-submit');
+  } catch (error) {
+    console.log('เกิดข้อผิดพลาดในการทดสอบ');
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+});

tests/04-ProductandService/JWS_PD_004_CreateProductandServiceFail.spec.ts

@@ -0,0 +1,59 @@
+import { test, expect, Page } from '@playwright/test';
+import { strictEqual } from 'assert';
+import { log } from 'console';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.afterAll(async () => {
+  if (page !== undefined) {
+    await page.close();
+  }
+});
+
+test('Login', async () => {
+  // Login
+  await page.goto('http://192.168.1.62:20101/');
+  await expect(page).toHaveTitle(/^Sign in to /);
+  await page.fill("input[name='username']", 'admin');
+  await page.fill("input[name='password']", '1234');
+  await page.click('id=kc-login');
+  await page.waitForTimeout(2000);
+  //   await page.click('id=acceptBtn');
+});
+
+test('ทดสอบการเพิ่มสินค้า', async () => {
+  await page.click('id=menu-icon-product-service');
+  await page.waitForSelector('id=tree-enter-ประกัน', { state: 'visible' });
+  await page.click('id=tree-enter-ประกัน');
+  await page.waitForSelector('id=tree-enter-สินค้าและบริการ-ประกัน', {
+    state: 'visible',
+  });
+  await page.click('id=tree-enter-สินค้าและบริการ-ประกัน');
+  try {
+    await page.click('id=btn-add');
+    await page.click('id=btn-add-product');
+    await page.click('id=btn-form-submit');
+
+    // ตรวจสอบหลังการแจ้งเตือนหลังจากคลิกปุ่มบันทึก
+    const ProduceandSeviceCodeError = page.locator(
+      "(//div[@class='q-field__messages col']//div)[1]",
+    );
+    const nameProduceandSeviceError = page.locator(
+      "(//div[@class='q-field__messages col']//div)[2]",
+    );
+    await expect(ProduceandSeviceCodeError).toHaveText(
+      'จำเป็นต้องกรอกข้อมูลนี้',
+    );
+    await expect(nameProduceandSeviceError).toHaveText(
+      'จำเป็นต้องกรอกข้อมูลนี้',
+    );
+  } catch (error) {
+    console.log('เกิดข้อผิดพลาดในการทดสอบ');
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+});

tests/04-ProductandService/JWS_PD_005_CreateType.spec.ts

@@ -0,0 +1,124 @@
+import { test, expect, Page } from '@playwright/test';
+import { strictEqual } from 'assert';
+import { log } from 'console';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.afterAll(async () => {
+  if (page !== undefined) {
+    await page.close();
+  }
+});
+
+test('Login', async () => {
+  // Login
+  await page.goto('http://192.168.1.62:20101/');
+  await expect(page).toHaveTitle(/^Sign in to /);
+  await page.fill("input[name='username']", 'admin');
+  await page.fill("input[name='password']", '1234');
+  await page.click('id=kc-login');
+  await page.waitForTimeout(2000);
+  //   await page.click('id=acceptBtn');
+});
+
+test('ทดสอบการเพิ่มประเภท', async () => {
+  await page.click('id=menu-icon-product-service');
+  await page.waitForSelector('id=tree-enter-ประกัน', { state: 'visible' });
+  await page.click('id=tree-enter-ประกัน');
+  // เข้าสู่หน้าประเภท
+  await page.waitForSelector('id=tree-enter-ประเภท-ประกัน', {
+    state: 'visible',
+  });
+  await page.click('id=tree-enter-ประเภท-ประกัน');
+
+  try {
+    // เพิ่มประเภท
+    await page.click('id=btn-add');
+    await page.click('id=btn-add-service');
+
+    // กรอกข้อมูลประเภทส่วน "ข้อมูลประเภท"
+    await page.fill('id=input-service-code', 'MOU');
+    await page.fill('id=input-service-name', 'ประกันภัยแบบกลุ่ม');
+    await page.fill('id=input-service-description', 'รายละเอียดประภัยแบบกลุ่ม');
+
+    // เพิ่มคุณสมบัติส่วน "คุณสมบัติของประเภท"
+    await page.click('id=btn-capitalize');
+    await page.click('id=btn-dropdow-properties');
+    await page.click('id=list-serviceRecordName');
+    await page.keyboard.press('Escape');
+
+    const propertiesServiceRecordName = page.locator(
+      "//span[normalize-space(text())='บันทึกบริการ_Name']",
+    );
+
+    expect(propertiesServiceRecordName).toHaveText('บันทึกบริการ_Name');
+    console.log(propertiesServiceRecordName, 'เลือกdropdown แล้ว');
+
+    // บันทึกการเพิ่มคุณสมบัติ
+    await page.click("(//button[@id='btn-form-submit'])[2]");
+
+    // เพิ่มส่วนข้อมูลงาน
+    await page.click("//span[normalize-space(text())='ข้อมูลงาน']");
+    await page.click('id=btn-add-work');
+    await page.click("//div[@for='select-work-name-1']");
+    await page.waitForTimeout(2000);
+    await page.click("//span[normalize-space(text())='จัดการ']");
+    await page.click("//span[normalize-space(text())='เพิ่มงาน']");
+    await page.fill('id=input-work-name-0', 'อัคคีภัย');
+    await page.click('id=btn-save-work-name');
+    await page.click("(//button[@id='btn-form-close'])[2]");
+    await page.waitForTimeout(2000);
+    await page.click("//div[normalize-space(text())='อัคคีภัย']");
+    await page.waitForTimeout(2000);
+    await page.keyboard.press('Escape');
+
+    // เพิ่มคุณสมบัติ
+    await page.click("(//button[@id='btn-add-work-product'])[1]");
+    await page.click('id=btn-dropdow-properties');
+    await page.click('id=list-refNo');
+    await page.keyboard.press('Escape');
+
+    const propertiesRefNo = page.locator("//span[text()='Ref No:']");
+
+    expect(propertiesRefNo).toHaveText('Ref No:');
+    console.log(propertiesRefNo, 'เลือกdropdown แล้ว');
+
+    await page.click("(//button[@id='btn-form-submit'])[2]");
+
+    // เพิ่มสินค้าและบริการ
+    await page.click("(//button[@id='btn-add-work-product'])[2]");
+    await page.click("//div[contains(@class,'column bordered')]");
+    await page.click("(//button[@id='btn-form-submit'])[2]");
+
+    // บันทึกการสร้างประเภท
+    await page.click('id=btn-form-submit');
+
+    // ตรวจสอบหลังทำการประเภท
+    const newTypeLocator = page.locator(
+      "//div[normalize-space(text())='ประกันภัยแบบกลุ่ม']",
+    );
+    await newTypeLocator.waitFor({ state: 'visible' });
+
+    // ดึงข้อความให้ตรงจาก XPath
+
+    const newTypeName = await newTypeLocator.textContent();
+
+    // ตรวจสอบความถูกต้องหลังทำการสร้างประเภท
+    if (newTypeName !== null) {
+      const trimmedName = newTypeName.trim();
+      expect(trimmedName).toBe('ประกันภัยแบบกลุ่ม');
+      console.log('การตรวจสอบสำเร็จ : ถูกต้อง');
+    } else {
+      throw new Error('ไม่พบข้อมูลที่บันทึก');
+    }
+  } catch (error) {
+    console.error('เกิดข้อผิดการในการทดสอบ');
+    throw error;
+  }
+
+  await page.waitForTimeout(2000);
+});

tests/04-ProductandService/JWS_PD_006_CreateTypeFail.spec.ts

@@ -0,0 +1,60 @@
+import { test, expect, Page } from '@playwright/test';
+import { strictEqual } from 'assert';
+import { log } from 'console';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.afterAll(async () => {
+  if (page !== undefined) {
+    await page.close();
+  }
+});
+
+test('Login', async () => {
+  // Login
+  await page.goto('http://192.168.1.62:20101/');
+  await expect(page).toHaveTitle(/^Sign in to /);
+  await page.fill("input[name='username']", 'admin');
+  await page.fill("input[name='password']", '1234');
+  await page.click('id=kc-login');
+  await page.waitForTimeout(2000);
+  //   await page.click('id=acceptBtn');
+});
+
+test('ทดสอบการเพิ่มประเภท', async () => {
+  await page.click('id=menu-icon-product-service');
+  await page.waitForSelector('id=tree-enter-ประกัน', { state: 'visible' });
+  await page.click('id=tree-enter-ประกัน');
+  // เข้าสู่หน้าประเภท
+  await page.waitForSelector('id=tree-enter-ประเภท-ประกัน', {
+    state: 'visible',
+  });
+  await page.click('id=tree-enter-ประเภท-ประกัน');
+
+  try {
+    // เพิ่มประเภท
+    await page.click('id=btn-add');
+    await page.click('id=btn-add-service');
+    // บันทึกการสร้างประเภท
+    await page.click('id=btn-form-submit');
+
+    // ตรวจสอบหลังการแจ้งเตือนหลังจากคลิกปุ่มบันทึก
+    const typeCodeError = page.locator(
+      "(//div[@class='q-field__messages col']//div)[1]",
+    );
+    const nameTypeError = page.locator(
+      "(//div[@class='q-field__messages col']//div)[2]",
+    );
+    await expect(typeCodeError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+    await expect(nameTypeError).toHaveText('จำเป็นต้องกรอกข้อมูลนี้');
+  } catch (error) {
+    console.error('เกิดข้อผิดการในการทดสอบ');
+    throw error;
+  }
+
+  await page.waitForTimeout(2000);
+});

tests/04-ProductandService/JWS_PD_007_DetailProductandService.spec.ts

@@ -0,0 +1,156 @@
+import { test, expect, Page } from '@playwright/test';
+import { strictEqual, throws } from 'assert';
+import { error, log } from 'console';
+import { date } from 'quasar';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.afterAll(async () => {
+  if (page !== undefined) {
+    await page.close();
+  }
+});
+
+test('Login', async () => {
+  // Login
+  await page.goto('http://192.168.1.62:20101/');
+  await expect(page).toHaveTitle(/^Sign in to /);
+  await page.fill("input[name='username']", 'admin');
+  await page.fill("input[name='password']", '1234');
+  await page.click('id=kc-login');
+  await page.waitForTimeout(2000);
+  //   await page.click('id=acceptBtn');
+});
+
+test('ดูรายละเอียดกลุ่มสินค้าและบริการ โดยการคลิกไอคอนรูปดวงตา', async () => {
+  try {
+    await page.click('id=menu-icon-product-service');
+    await page.click('id=btn-eye-ประกัน');
+
+    // กำหนดค่าเพื่อนำไปตรวจสอบความถูกต้อง
+    const detailTitle = page.locator("//span[text()='ประกัน']");
+
+    // ตรวจสอบความถูกต้องของชื่อกลุ่มสินค้าและบริการ
+    await expect(detailTitle).toHaveText('ประกัน');
+    console.log('ตรวจสอบข้อมูลกลุ่มสินค้าและบริการถูกต้อง');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+  await page.click('id=btn-info-close');
+});
+
+test('ดูรายละเอียดกลุ่มสินค้าและบริการ ', async () => {
+  try {
+    await page.click('id=btn-kebab-action-ประกัน');
+    await page.click('id=btn-kebab-view-detail-ประกัน');
+
+    // กำหนดค่าเพื่อนำไปตรวจสอบความถูกต้อง
+    const detailTitle = page.locator("//span[text()='ประกัน']");
+
+    // ตรวจสอบความถูกต้องของชื่อกลุ่มสินค้าและบริการ
+    await expect(detailTitle).toHaveText('ประกัน');
+    console.log('ตรวจสอบข้อมูลกลุ่มสินค้าและบริการถูกต้อง');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+  await page.click('id=btn-info-close');
+});
+
+test('ดูรายละเอียดประเภทของสินค้าและบริการ โดยการคลิกไอคอนรูปดวงตา', async () => {
+  try {
+    await page.reload();
+    await page.click('id=tree-enter-ประกัน');
+    await page.click('id=tree-enter-ประเภท-ประกัน');
+    await page.click('id=btn-eye-ประกันภัยแบบกลุ่ม');
+
+    // กำหนดค่าเพื่อนำไปตรวจสอบความถูกต้อง
+    const detailTitleType = page.locator(
+      "//span[normalize-space(text())='ประกันภัยแบบกลุ่ม']",
+    );
+
+    // ตรวจสอบความถูกต้องของชื่อประเภทสินค้าและบริการ
+    await expect(detailTitleType).toHaveText('ประกันภัยแบบกลุ่ม');
+    console.log('ตรวจสอบข้อมูลประเภทของสินค้าและบริการถูกต้อง');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
+});
+
+test('ดูรายละเอียดประเภทของสินค้าและบริการ', async () => {
+  try {
+    await page.click('id=tree-enter-ประกัน');
+    await page.click('id=tree-enter-ประเภท-ประกัน');
+    await page.click('id=btn-kebab-action-ประกันภัยแบบกลุ่ม');
+    await page.click('id=btn-kebab-view-detail-ประกันภัยแบบกลุ่ม');
+
+    // กำหนดค่าเพื่อนำไปตรวจสอบความถูกต้อง
+    const detailTitleType = page.locator(
+      "//span[normalize-space(text())='ประกันภัยแบบกลุ่ม']",
+    );
+
+    // ตรวจสอบความถูกต้องของชื่อประเภทสินค้าและบริการ
+    await expect(detailTitleType).toHaveText('ประกันภัยแบบกลุ่ม');
+    console.log('ตรวจสอบข้อมูลประเภทของสินค้าและบริการถูกต้อง');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
+});
+
+test('ดูรายละเอียดสินค้าและบริการของสินค้าและบริการ โดยการคลิกไอคอนรูปดวงตา', async () => {
+  try {
+    await page.click('id=tree-enter-ประกัน');
+    await page.click('id=tree-enter-สินค้าและบริการ-ประกัน');
+    await page.click('id=btn-eye-ประเภทกลุ่ม');
+
+    // กำหนดค่าเพื่อตรวจสอบความถูกต้อง
+    const detailTitleType = page.locator(
+      "//span[normalize-space(text())='ประเภทกลุ่ม']",
+    );
+
+    // ตรวจสอบความถูกต้องของชื่อสินค้าและบริการ
+    await expect(detailTitleType).toHaveText('ประเภทกลุ่ม');
+    console.log('ตรวจสอบข้อมูลสินค้าและบริการของสินค้าและบริการถูกต้อง');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
+});
+
+test('ดูรายละเอียดสินค้าและบริการของสินค้าและบริการ', async () => {
+  try {
+    await page.click('id=tree-enter-ประกัน');
+    await page.click('id=tree-enter-สินค้าและบริการ-ประกัน');
+    await page.click('id=btn-kebab-action-ประเภทกลุ่ม');
+    await page.click('id=btn-kebab-view-detail-ประเภทกลุ่ม');
+
+    // กำหนดค่าเพื่อตรวจสอบความถูกต้อง
+    const detailTitleType = page.locator(
+      "//span[normalize-space(text())='ประเภทกลุ่ม']",
+    );
+
+    // ตรวจสอบความถูกต้องของชื่อสินค้าและบริการ
+    await expect(detailTitleType).toHaveText('ประเภทกลุ่ม');
+    console.log('ตรวจสอบข้อมูลสินค้าและบริการของสินค้าและบริการถูกต้อง');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+  await page.click('id=btn-form-close');
+});

tests/04-ProductandService/JWS_PD_008_EditProductandService.spec.ts

@@ -0,0 +1,110 @@
+import { test, expect, Page } from '@playwright/test';
+import { strictEqual, throws } from 'assert';
+import { error, log } from 'console';
+import { date } from 'quasar';
+import { Card } from 'react-bootstrap';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.afterAll(async () => {
+  if (page !== undefined) {
+    await page.close();
+  }
+});
+
+test('Login', async () => {
+  // Login
+  await page.goto('http://192.168.1.62:20101/');
+  await expect(page).toHaveTitle(/^Sign in to /);
+  await page.fill("input[name='username']", 'admin');
+  await page.fill("input[name='password']", '1234');
+  await page.click('id=kc-login');
+  await page.waitForTimeout(2000);
+  //   await page.click('id=acceptBtn');
+});
+
+test('ทดสอบการแก้ไขกลุ่มสินค้าและบริการ', async () => {
+  await page.click('id=menu-icon-product-service');
+  try {
+    await page.click('id=btn-kebab-action-ประกัน');
+    await page.click('id=btn-kebab-edit-ประกัน');
+    await page.fill('id=input-name', 'ประกันทั้งหมด');
+    await page.click('id=btn-info-basic-save');
+
+    const detailTitleProductName = await page.locator(
+      "//div[normalize-space(text())='ประกันทั้งหมด']",
+    );
+
+    expect(detailTitleProductName).toHaveText('ประกันทั้งหมด');
+    console.log(
+      'การตรวจสอบการแก้ไขชื่อกลุ่มสินค้าและบริการถูกต้อง',
+      detailTitleProductName,
+    );
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+});
+
+test('ทดสอบการแก้ไขประเภทสินค้าและบริการ', async () => {
+  try {
+    await page.waitForSelector('id=tree-enter-ประกันทั้งหมด', {
+      state: 'visible',
+    });
+    await page.click('id=tree-enter-ประกันทั้งหมด');
+    // เข้าสู่หน้าประเภท
+    await page.waitForSelector('id=tree-enter-ประเภท-ประกันทั้งหมด', {
+      state: 'visible',
+    });
+    await page.click('id=tree-enter-ประเภท-ประกันทั้งหมด');
+    await page.click('id=btn-kebab-action-ประกันภัยแบบกลุ่ม');
+    await page.click('id=btn-kebab-edit-ประกันภัยแบบกลุ่ม');
+    await page.waitForSelector('id=input-service-name');
+    await page.fill('id=input-service-name', 'ประกันชีวิต');
+    await page.click("(//button[@id='btn-info-basic-save'])[2]");
+
+    // กำหนดค่าเพื่อตรวจสอบความถูกต้องของชื่อ
+    const detailTitleTypeProduct = await page.locator(
+      "//div[normalize-space(text())='ประกันชีวิต']",
+    );
+
+    // ตรวจสอบความถูกต้องของชื่อ
+    expect(detailTitleTypeProduct).toHaveText('ประกันชีวิต');
+
+    console.log('การตรวจสอบการแก้ไขชื่อประเภทสินค้าและบริการถูกต้อง');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+});
+
+test('ทดสอบการแก้ไขสินค้าและบริการ', async () => {
+  try {
+    await page.waitForSelector('id=tree-enter-สินค้าและบริการ-ประกันทั้งหมด', {
+      state: 'visible',
+    });
+    await page.click('id=tree-enter-สินค้าและบริการ-ประกันทั้งหมด');
+    await page.click('id=btn-kebab-action-ประเภทกลุ่ม');
+    await page.click('id=btn-kebab-edit-ประเภทกลุ่ม');
+    await page.waitForSelector("(//input[@id='input-name'])[2]");
+    await page.fill("(//input[@id='input-name'])[2]", 'ประเภทบุคคล');
+    await page.click("(//button[@id='btn-info-basic-save'])[2]");
+
+    await page.waitForSelector("//div[normalize-space(text())='ประเภทบุคคล']");
+    const detailNameProduct = await page.locator(
+      "//div[normalize-space(text())='ประเภทบุคคล']",
+    );
+
+    expect(detailNameProduct).toHaveText('ประเภทบุคคล');
+    console.log('การตรวจสอบการแก้ไขชื่อสินค้าและบริการถูกต้อง');
+  } catch (error) {
+    console.log('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+});

tests/04-ProductandService/JWS_PD_009_StatusProductandServiceType.spec.ts

@@ -0,0 +1,95 @@
+import { test, expect, Page } from '@playwright/test';
+import { strictEqual, throws } from 'assert';
+import { error, log } from 'console';
+import { date } from 'quasar';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.afterAll(async () => {
+  if (page !== undefined) {
+    await page.close();
+  }
+});
+
+test('Login', async () => {
+  // Login
+  await page.goto('http://192.168.1.62:20101/');
+  await expect(page).toHaveTitle(/^Sign in to /);
+  await page.fill("input[name='username']", 'admin');
+  await page.fill("input[name='password']", '1234');
+  await page.click('id=kc-login');
+  await page.waitForTimeout(2000);
+  //   await page.click('id=acceptBtn');
+});
+
+test('ตรวจสอบการแสดงผลสถานะการใช้งาน เปิด/ปิด สินค้าและบริการ', async () => {
+  try {
+    // คลิกเมนูเพื่อเข้าสู่หน้าสินค้าและบริการ
+    await page.click('id=menu-icon-product-service');
+
+    // แสดงสถานะที่ใช้งาน
+    // คลิกเพื่อเปิด dropdown
+    await page.click('id=select-status');
+    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
+
+    // คลิกเพื่อแสดงสถานะกำลังใช้งานอยู่
+    await page.click('id=select-status_1');
+    await page.waitForTimeout(1000); // รอให้ UI อัปเดต
+
+    // ตรวจสอบว่ามีแต่สถานะใช้งานหรือไม่
+    const statusActive = await page.isVisible('id=select-status_1');
+
+    console.log('มีเพียงสถานะการใช้งานเท่านั้น', statusActive); // เช็ค
+
+    expect(statusActive).toBe(false);
+
+    console.log('ตรวจสอบสถานะการใช้งานมีแต่สถานะกำลังใช้งานเท่านั้น');
+
+    // แสดงสถานะที่ไม่ใช้งาน
+    // คลิกเพื่อเปิด dropdown
+    await page.keyboard.press('Escape');
+    await page.click('id=select-status');
+    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
+
+    // คลิกเพื่อแสดงสถานะกำลังไม่ใช้งาน
+    await page.click('id=select-status_2');
+    await page.waitForTimeout(1000); // รอให้ UI อัปเดต
+
+    // ตรวจสอบว่ามีแต่สถานะไม่ใช้งานหรือไม่
+    const statusInActive = await page.isVisible('id=select-status_1');
+
+    console.log('มีเพียงสถานะการใช้งานเท่านั้น', statusInActive); // เช็ค
+
+    expect(statusActive).toBe(false);
+
+    console.log('ตรวจสอบสถานะการใช้งานมีแต่สถานะที่ไม่ใช้งาน');
+
+    // แสดงสถานะทั้งหมด
+    // คลิกเพื่อเปิด dropdown
+    await page.keyboard.press('Escape');
+    await page.click('id=select-status');
+    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
+
+    // คลิกเพื่อแสดงสถานะทั้งหมด
+    await page.click('id=select-status_0');
+    await page.waitForTimeout(1000); // รอให้ UI อัปเดต
+
+    // ตรวจสอบว่าแสดงทุกสถานะหรือไม่
+    const statusAll = await page.isVisible('id=select-status_1');
+
+    console.log('สถานะทั้งหมด', statusAll); // เช็ค
+
+    expect(statusActive).toBe(false);
+
+    console.log('ตรวจสอบสถานะทั้งหมด');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
+    throw error;
+  }
+
+  await page.waitForTimeout(2000);
+});

tests/04-ProductandService/JWS_PD_010_SelectTypeFields.spec.ts

@@ -0,0 +1,325 @@
+import { test, expect, Page } from '@playwright/test';
+import { strictEqual } from 'assert';
+import { watchFile } from 'fs';
+import { waitForDebugger } from 'inspector';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.afterAll(async () => {
+  if (page !== undefined) {
+    await page.close();
+  }
+});
+
+test('Login', async () => {
+  // Login
+  await page.goto('http://192.168.1.62:20101/');
+  await expect(page).toHaveTitle(/^Sign in to /);
+  await page.fill("input[name='username']", 'admin');
+  await page.fill("input[name='password']", '1234');
+  await page.click('id=kc-login');
+  await page.waitForTimeout(2000);
+  //   await page.click('id=acceptBtn');
+});
+
+test('ตรวจสอบการแสดงผลฟิลด์แสดงผลลำดับ', async () => {
+  try {
+    // คลิกเมนูเพื่อเข้าสู่หน้าสินค้าและบริการ
+    await page.click('id=menu-icon-product-service');
+
+    // คลิกเพื่อเปิด dropdown
+    await page.click("(//input[@id='select-field'])[1]");
+    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
+
+    // คลิกเพื่อปิดคอลัมน์ที่ 1
+    await page.click('id=select-field_0');
+    await page.waitForTimeout(1000); // รอให้ UI อัปเดต
+
+    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
+    const column1 = page.locator('id=select-field_0');
+    const column1Cells = page.locator("//th[normalize-space(text())='ลำดับ']");
+
+    const isColumn1Hidden = await column1.evaluate(
+      (el) => window.getComputedStyle(el).display === 'none',
+    );
+    console.log('คอลัมน์ที่ 1 ซ่อนอยู่:', isColumn1Hidden); // เช็ค
+
+    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
+      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
+    );
+    console.log('เซลล์ในคอลัมน์ที่ 1 ซ่อนอยู่:', areCellsHidden); // เช็ค
+
+    expect(isColumn1Hidden).toBe(false);
+    expect(areCellsHidden).toBe(true);
+
+    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 1
+    await page.keyboard.press('Escape');
+    await page.click("(//input[@id='select-field'])[1]");
+    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
+    await page.click('id=select-field_0'); // คลิกเพื่อเปิดคอลัมน์
+    await page.waitForTimeout(1000); // รอให้ UI อัปเดต
+
+    // ตรวจสอบว่าคอลัมน์แสดงอยู่
+    const isColumn1Visible = await column1.evaluate(
+      (el) => window.getComputedStyle(el).display !== 'none',
+    );
+    console.log('คอลัมน์ที่ 1 แสดงอยู่:', isColumn1Visible); // เช็ค
+
+    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
+      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
+    );
+    console.log('เซลล์ในคอลัมน์ที่ 1 แสดงอยู่:', areCellsVisible); // เช็ค
+
+    expect(isColumn1Visible).toBe(true);
+    expect(areCellsVisible).toBe(true);
+
+    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
+    throw error;
+  }
+
+  await page.waitForTimeout(2000);
+});
+
+test('ตรวจสอบการแสดงผลฟิลด์แสดงผลชื่อ', async () => {
+  try {
+    // คลิกเพื่อเปิด dropdown
+    await page.keyboard.press('Escape');
+    await page.click("(//input[@id='select-field'])[1]");
+    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
+
+    // คลิกเพื่อปิดคอลัมน์ที่ 2
+    await page.click('id=select-field_1');
+    await page.waitForTimeout(1000); // รอให้ UI อัปเดต
+
+    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
+    const column1 = page.locator('id=select-field_1');
+    const column1Cells = page.locator("//th[normalize-space(text())='ชื่อ']");
+
+    const isColumn1Hidden = await column1.evaluate(
+      (el) => window.getComputedStyle(el).display === 'none',
+    );
+    console.log('คอลัมน์ที่ 2 ซ่อนอยู่:', isColumn1Hidden); // เช็ค
+
+    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
+      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
+    );
+    console.log('เซลล์ในคอลัมน์ที่ 2 ซ่อนอยู่:', areCellsHidden); // เช็ค
+
+    expect(isColumn1Hidden).toBe(false);
+    expect(areCellsHidden).toBe(true);
+
+    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 2
+    await page.keyboard.press('Escape');
+    await page.click("(//input[@id='select-field'])[1]");
+    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
+    await page.click('id=select-field_1'); // คลิกเพื่อเปิดคอลัมน์
+    await page.waitForTimeout(1000); // รอให้ UI อัปเดต
+
+    // ตรวจสอบว่าคอลัมน์แสดงอยู่
+    const isColumn1Visible = await column1.evaluate(
+      (el) => window.getComputedStyle(el).display !== 'none',
+    );
+    console.log('คอลัมน์ที่ 2 แสดงอยู่:', isColumn1Visible); // เช็ค
+
+    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
+      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
+    );
+    console.log('เซลล์ในคอลัมน์ที่ 2 แสดงอยู่:', areCellsVisible); // เช็ค
+
+    expect(isColumn1Visible).toBe(true);
+    expect(areCellsVisible).toBe(true);
+
+    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
+    throw error;
+  }
+
+  await page.waitForTimeout(2000);
+});
+
+test('ตรวจสอบการแสดงผลฟิลด์แสดงผลรายละเอียด', async () => {
+  try {
+    // คลิกเพื่อเปิด dropdown
+    await page.keyboard.press('Escape');
+    await page.click("(//input[@id='select-field'])[1]");
+    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
+
+    // คลิกเพื่อปิดคอลัมน์ที่ 3
+    await page.click('id=select-field_2');
+    await page.waitForTimeout(1000); // รอให้ UI อัปเดต
+
+    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
+    const column1 = page.locator('id=select-field_2');
+    const column1Cells = page.locator(
+      "//th[normalize-space(text())='รายละเอียด']",
+    );
+
+    const isColumn1Hidden = await column1.evaluate(
+      (el) => window.getComputedStyle(el).display === 'none',
+    );
+    console.log('คอลัมน์ที่ 3 ซ่อนอยู่:', isColumn1Hidden); // เช็ค
+
+    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
+      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
+    );
+    console.log('เซลล์ในคอลัมน์ที่ 3 ซ่อนอยู่:', areCellsHidden); // เช็ค
+
+    expect(isColumn1Hidden).toBe(false);
+    expect(areCellsHidden).toBe(true);
+
+    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 3
+    await page.keyboard.press('Escape');
+    await page.click("(//input[@id='select-field'])[1]");
+    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
+    await page.click('id=select-field_2'); // คลิกเพื่อเปิดคอลัมน์
+    await page.waitForTimeout(1000); // รอให้ UI อัปเดต
+
+    // ตรวจสอบว่าคอลัมน์แสดงอยู่
+    const isColumn1Visible = await column1.evaluate(
+      (el) => window.getComputedStyle(el).display !== 'none',
+    );
+    console.log('คอลัมน์ที่ 3 แสดงอยู่:', isColumn1Visible); // เช็ค
+
+    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
+      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
+    );
+    console.log('เซลล์ในคอลัมน์ที่ 3 แสดงอยู่:', areCellsVisible); // เช็ค
+
+    expect(isColumn1Visible).toBe(true);
+    expect(areCellsVisible).toBe(true);
+
+    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
+    throw error;
+  }
+
+  await page.waitForTimeout(2000);
+});
+
+test('ตรวจสอบการแสดงผลฟิลด์แสดงผลหมายเหตุ', async () => {
+  try {
+    // คลิกเพื่อเปิด dropdown
+    await page.keyboard.press('Escape');
+    await page.click("(//input[@id='select-field'])[1]");
+    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
+
+    // คลิกเพื่อปิดคอลัมน์ที่ 4
+    await page.click('id=select-field_3');
+    await page.waitForTimeout(1000); // รอให้ UI อัปเดต
+
+    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
+    const column1 = page.locator('id=select-field_3');
+    const column1Cells = page.locator(
+      "//th[normalize-space(text())='หมายเหตุ']",
+    );
+
+    const isColumn1Hidden = await column1.evaluate(
+      (el) => window.getComputedStyle(el).display === 'none',
+    );
+    console.log('คอลัมน์ที่ 4 ซ่อนอยู่:', isColumn1Hidden); // เช็ค
+
+    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
+      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
+    );
+    console.log('เซลล์ในคอลัมน์ที่ 4 ซ่อนอยู่:', areCellsHidden); // เช็ค
+
+    expect(isColumn1Hidden).toBe(false);
+    expect(areCellsHidden).toBe(true);
+
+    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 4
+    await page.keyboard.press('Escape');
+    await page.click("(//input[@id='select-field'])[1]");
+    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
+    await page.click('id=select-field_3'); // คลิกเพื่อเปิดคอลัมน์
+    await page.waitForTimeout(1000); // รอให้ UI อัปเดต
+
+    // ตรวจสอบว่าคอลัมน์แสดงอยู่
+    const isColumn1Visible = await column1.evaluate(
+      (el) => window.getComputedStyle(el).display !== 'none',
+    );
+    console.log('คอลัมน์ที่ 4 แสดงอยู่:', isColumn1Visible); // เช็ค
+
+    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
+      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
+    );
+    console.log('เซลล์ในคอลัมน์ที่ 4 แสดงอยู่:', areCellsVisible); // เช็ค
+
+    expect(isColumn1Visible).toBe(true);
+    expect(areCellsVisible).toBe(true);
+
+    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
+    throw error;
+  }
+
+  await page.waitForTimeout(2000);
+});
+
+test('ตรวจสอบการแสดงผลฟิลด์แสดงผลสร้างเมื่อ', async () => {
+  try {
+    // คลิกเพื่อเปิด dropdown
+    await page.keyboard.press('Escape');
+    await page.click("(//input[@id='select-field'])[1]");
+    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
+
+    // คลิกเพื่อปิดคอลัมน์ที่ 5
+    await page.click('id=select-field_4');
+    await page.waitForTimeout(1000); // รอให้ UI อัปเดต
+
+    // ตรวจสอบว่าคอลัมน์ถูกซ่อน
+    const column1 = page.locator('id=select-field_4');
+    const column1Cells = page.locator(
+      "//th[normalize-space(text())='สร้างเมื่อ']",
+    );
+
+    const isColumn1Hidden = await column1.evaluate(
+      (el) => window.getComputedStyle(el).display === 'none',
+    );
+    console.log('คอลัมน์ที่ 5 ซ่อนอยู่:', isColumn1Hidden); // เช็ค
+
+    const areCellsHidden = await column1Cells.evaluateAll((cells) =>
+      cells.every((cell) => window.getComputedStyle(cell).display === 'none'),
+    );
+    console.log('เซลล์ในคอลัมน์ที่ 5 ซ่อนอยู่:', areCellsHidden); // เช็ค
+
+    expect(isColumn1Hidden).toBe(false);
+    expect(areCellsHidden).toBe(true);
+
+    // คลิกอีกครั้งเพื่อเปิดคอลัมน์ที่ 5
+    await page.keyboard.press('Escape');
+    await page.click("(//input[@id='select-field'])[1]");
+    await page.waitForTimeout(1000); // รอให้ dropdown เปิด
+    await page.click('id=select-field_4'); // คลิกเพื่อเปิดคอลัมน์
+    await page.waitForTimeout(1000); // รอให้ UI อัปเดต
+
+    // ตรวจสอบว่าคอลัมน์แสดงอยู่
+    const isColumn1Visible = await column1.evaluate(
+      (el) => window.getComputedStyle(el).display !== 'none',
+    );
+    console.log('คอลัมน์ที่ 5 แสดงอยู่:', isColumn1Visible); // เช็ค
+
+    const areCellsVisible = await column1Cells.evaluateAll((cells) =>
+      cells.every((cell) => window.getComputedStyle(cell).display !== 'none'),
+    );
+    console.log('เซลล์ในคอลัมน์ที่ 5 แสดงอยู่:', areCellsVisible); // เช็ค
+
+    expect(isColumn1Visible).toBe(true);
+    expect(areCellsVisible).toBe(true);
+
+    console.log('ตรวจสอบการเปิด/ซ่อนคอลัมน์ในตารางสำเร็จ');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ:', error);
+    throw error;
+  }
+
+  await page.waitForTimeout(2000);
+});

tests/04-ProductandService/JWS_PD_011_StatusProductandService.spec.ts

@@ -0,0 +1,244 @@
+import { test, expect, Page } from '@playwright/test';
+import { strictEqual } from 'assert';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.afterAll(async () => {
+  if (page !== undefined) {
+    await page.close();
+  }
+});
+
+test('Login', async () => {
+  // Login
+  await page.goto('http://192.168.1.62:20101/');
+  await expect(page).toHaveTitle(/^Sign in to /);
+  await page.fill("input[name='username']", 'admin');
+  await page.fill("input[name='password']", '1234');
+  await page.click('id=kc-login');
+  await page.waitForTimeout(2000);
+  //   await page.click('id=acceptBtn');
+});
+
+test('ปิดสถานะการใช้งานสินค้าและบริการ', async () => {
+  await page.click('id=menu-icon-product-service');
+  await page.click('id=tree-enter-ประกันทั้งหมด');
+  await page.click('id=tree-enter-สินค้าและบริการ-ประกันทั้งหมด');
+  try {
+    await page.click('id=btn-kebab-action-ประเภทบุคคล');
+
+    await page.click('id=btn-kebab-status-ประเภทบุคคล', {
+      force: true,
+    });
+    await page.click('id=btn-ok-dialog');
+    console.log('เปลี่ยนสถานะสำเร็จ');
+    // await page.reload();
+
+    // รอ Update
+    await page.waitForTimeout(2000);
+    console.log('สถานะถูกเปลี่ยนแล้ว');
+
+    // ตรวจสอบสีของแถวหลังจากทำการเปลี่ยนสถานะ
+    const rowLocator = page.locator(
+      "//div[normalize-space(text())='ประเภทบุคคล']",
+    );
+    const backgroundColor = await rowLocator.evaluate(
+      (el) => window.getComputedStyle(el).backgroundColor,
+    );
+
+    // กำหนดสีหลัเปลี่ยนสถานะการใช้งาน
+    const expectedColor = 'rgba(0, 0, 0, 0)';
+
+    // ตรวจสอบสีที่เปลี่ยนไป
+    expect(backgroundColor.trim()).toBe(expectedColor);
+    console.log('สีของแถวถูกเปลี่ยนเป็นสีเทาอ่อน');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ');
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+});
+
+test('เปิดสถานะการใช้งานสินค้าและบริการ', async () => {
+  try {
+    await page.click('id=btn-kebab-action-ประเภทบุคคล');
+
+    await page.click('id=btn-kebab-status-ประเภทบุคคล', {
+      force: true,
+    });
+    await page.click('id=btn-ok-dialog');
+    console.log('เปลี่ยนสถานะสำเร็จ');
+    // await page.reload();
+
+    // รอ Update
+    await page.waitForTimeout(2000);
+    console.log('สถานะถูกเปลี่ยนแล้ว');
+
+    // ตรวจสอบสีของแถวหลังจากทำการเปลี่ยนสถานะ
+    const rowLocator = page.locator(
+      "//div[normalize-space(text())='ประเภทบุคคล']",
+    );
+    const backgroundColor = await rowLocator.evaluate(
+      (el) => window.getComputedStyle(el).backgroundColor,
+    );
+
+    // กำหนดสีหลัเปลี่ยนสถานะการใช้งาน
+    const expectedColor = 'rgba(0, 0, 0, 0)';
+
+    // ตรวจสอบสีที่เปลี่ยนไป
+    expect(backgroundColor.trim()).toBe(expectedColor);
+    console.log('สีของแถวถูกเปลี่ยนเป็นของสถานะการใช้งาน');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ');
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+});
+
+test('ปิดสถานะการใช้งานประเภทสินค้าและบริการ', async () => {
+  await page.click('id=tree-enter-ประเภท-ประกันทั้งหมด');
+  try {
+    await page.click('id=btn-kebab-action-ประกันชีวิต');
+
+    await page.click('id=btn-kebab-status-ประกันชีวิต', {
+      force: true,
+    });
+    await page.click('id=btn-ok-dialog');
+    console.log('เปลี่ยนสถานะสำเร็จ');
+    // await page.reload();
+
+    // รอ Update
+    await page.waitForTimeout(2000);
+    console.log('สถานะถูกเปลี่ยนแล้ว');
+
+    // ตรวจสอบสีของแถวหลังจากทำการเปลี่ยนสถานะ
+    const rowLocator = page.locator(
+      "//div[normalize-space(text())='ประกันชีวิต']",
+    );
+    const backgroundColor = await rowLocator.evaluate(
+      (el) => window.getComputedStyle(el).backgroundColor,
+    );
+
+    // กำหนดสีหลัเปลี่ยนสถานะการใช้งาน
+    const expectedColor = 'rgba(0, 0, 0, 0)';
+
+    // ตรวจสอบสีที่เปลี่ยนไป
+    expect(backgroundColor.trim()).toBe(expectedColor);
+    console.log('สีของแถวถูกเปลี่ยนเป็นสีเทาอ่อน');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ');
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+});
+
+test('เปิดสถานะการใช้งานประเภทสินค้าและบริการ', async () => {
+  try {
+    await page.click('id=btn-kebab-action-ประกันชีวิต');
+    await page.click('id=btn-kebab-status-ประกันชีวิต', {
+      force: true,
+    });
+    await page.click('id=btn-ok-dialog');
+    console.log('เปลี่ยนสถานะสำเร็จ');
+    // await page.reload();
+
+    // รอ Update
+    await page.waitForTimeout(2000);
+    console.log('สถานะถูกเปลี่ยนแล้ว');
+
+    // ตรวจสอบสีของแถวหลังจากทำการเปลี่ยนสถานะ
+    const rowLocator = page.locator(
+      "//div[normalize-space(text())='ประกันชีวิต']",
+    );
+    const backgroundColor = await rowLocator.evaluate(
+      (el) => window.getComputedStyle(el).backgroundColor,
+    );
+
+    // กำหนดสีหลัเปลี่ยนสถานะการใช้งาน
+    const expectedColor = 'rgba(0, 0, 0, 0)';
+
+    // ตรวจสอบสีที่เปลี่ยนไป
+    expect(backgroundColor.trim()).toBe(expectedColor);
+    console.log('สีของแถวถูกเปลี่ยนเป็นของสถานะการใช้งาน');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ');
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+});
+
+test('ปิดสถานะการใช้งานกลุ่มสินค้าและบริการ', async () => {
+  await page.click('id=tree-enter-ประกันทั้งหมด');
+  try {
+    await page.click("(//button[@id='btn-kebab-action-ประกันทั้งหมด'])[2]");
+
+    await page.click('id=btn-kebab-status-ประกันทั้งหมด', {
+      force: true,
+    });
+    await page.click('id=btn-ok-dialog');
+    console.log('เปลี่ยนสถานะสำเร็จ');
+    // await page.reload();
+
+    // รอ Update
+    await page.waitForTimeout(2000);
+    console.log('สถานะถูกเปลี่ยนแล้ว');
+
+    // ตรวจสอบสีของแถวหลังจากทำการเปลี่ยนสถานะ
+    const rowLocator = page.locator(
+      "//div[normalize-space(text())='ประกันทั้งหมด']",
+    );
+    const backgroundColor = await rowLocator.evaluate(
+      (el) => window.getComputedStyle(el).backgroundColor,
+    );
+
+    // กำหนดสีหลัเปลี่ยนสถานะการใช้งาน
+    const expectedColor = 'rgba(0, 0, 0, 0)';
+
+    // ตรวจสอบสีที่เปลี่ยนไป
+    expect(backgroundColor.trim()).toBe(expectedColor);
+    console.log('สีของแถวถูกเปลี่ยนเป็นสีเทาอ่อน');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ');
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+});
+
+test('เปิดสถานะการใช้งานกลุ่มสินค้าและบริการ', async () => {
+  try {
+    await page.click("(//button[@id='btn-kebab-action-ประกันทั้งหมด'])[2]");
+    await page.click('id=btn-kebab-status-ประกันทั้งหมด', {
+      force: true,
+    });
+    await page.click('id=btn-ok-dialog');
+    console.log('เปลี่ยนสถานะสำเร็จ');
+    // await page.reload();
+
+    // รอ Update
+    await page.waitForTimeout(2000);
+    console.log('สถานะถูกเปลี่ยนแล้ว');
+
+    // ตรวจสอบสีของแถวหลังจากทำการเปลี่ยนสถานะ
+    const rowLocator = page.locator(
+      "//div[normalize-space(text())='ประกันทั้งหมด']",
+    );
+    const backgroundColor = await rowLocator.evaluate(
+      (el) => window.getComputedStyle(el).backgroundColor,
+    );
+
+    // กำหนดสีหลัเปลี่ยนสถานะการใช้งาน
+    const expectedColor = 'rgba(0, 0, 0, 0)';
+
+    // ตรวจสอบสีที่เปลี่ยนไป
+    expect(backgroundColor.trim()).toBe(expectedColor);
+    console.log('สีของแถวถูกเปลี่ยนเป็นของสถานะการใช้งาน');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ');
+    throw error;
+  }
+  await page.waitForTimeout(2000);
+});

tests/04-ProductandService/JWS_PD_013_DeleteProductandService.spec.ts

@@ -0,0 +1,207 @@
+import { test, expect, Page } from '@playwright/test';
+import { strictEqual } from 'assert';
+import { it } from 'node:test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.afterAll(async () => {
+  if (page !== undefined) {
+    await page.close();
+  }
+});
+
+test('Login', async () => {
+  // Login
+  await page.goto('http://192.168.1.62:20101/');
+  await expect(page).toHaveTitle(/^Sign in to /);
+  await page.fill("input[name='username']", 'admin');
+  await page.fill("input[name='password']", '1234');
+  await page.click('id=kc-login');
+  await page.waitForTimeout(2000);
+  //   await page.click('id=acceptBtn');
+});
+
+test('จำลองการสร้างสินค้าและบริการเพิื่อทำการทดสอบลบ', async () => {
+  //-----------------------------------------สร้างกลุ่มสินค้าและบริการ------------------------------//
+  await page.click('id=menu-icon-product-service');
+
+  await page.click('id=btn-add');
+  await page.click('id=btn-add-product-group');
+
+  // กรอกข้อมูลกลุ่มสินค้าและบริการ
+
+  await page.fill("(//input[@id='input-name'])[2]", 'กลุ่มสินค้าและบริการ');
+  await page.fill(
+    "(//textarea[@id='input-detail'])[2]",
+    'รายละเอียดกลุ่มสินค้าและบริการ',
+  );
+  await page.fill(
+    "(//textarea[@id='input-remark'])[2]",
+    'หมายเหตุกลุ่มสินค้าและบริการ',
+  );
+
+  // บันทึกการสร้างกลุ่มสินค้นและบริการ
+  await page.click('id=btn-form-submit');
+
+  //-----------------------------------------สร้างสินค้าและบริการ------------------------------//
+
+  await page.waitForSelector('id=tree-enter-กลุ่มสินค้าและบริการ', {
+    state: 'visible',
+  });
+  await page.click('id=tree-enter-กลุ่มสินค้าและบริการ');
+  await page.waitForSelector(
+    'id=tree-enter-สินค้าและบริการ-กลุ่มสินค้าและบริการ',
+    {
+      state: 'visible',
+    },
+  );
+  await page.click('id=tree-enter-สินค้าและบริการ-กลุ่มสินค้าและบริการ');
+
+  await page.click('id=btn-add');
+  await page.click('id=btn-add-product');
+
+  // รหัสสินค้าและบริการ
+  await page.waitForSelector("(//input[@id='select-br-id'])[1]", {
+    state: 'visible',
+  });
+  await page.click("(//input[@id='select-br-id'])[1]");
+  await page.click('id=select-br-id_0');
+  await page.fill("(//input[@id='input-name'])[2]", 'สินค้าและบริการ');
+
+  // ระยะเวลาดำเนินการ
+  await page.fill('id=input-process', '2');
+
+  // ประเภทค่าใช้จ่าย
+  await page.waitForSelector("(//input[@id='select-br-id'])[2]", {
+    state: 'visible',
+  });
+  await page.click("(//input[@id='select-br-id'])[2]");
+  await page.click('id=select-br-id_0');
+
+  // กรอกรายละเอียด
+  await page.fill("//div[@contenteditable='true']", 'รายละเอียด');
+
+  // กรอกสาเหตุ
+  await page.fill("(//textarea[@id='input-remark'])[2]", 'หมายเหตุ');
+
+  // ส่วนข้อมูลราคา
+  await page.click("//span[normalize-space(text())='ข้อมูลราคา']");
+  await page.fill('id=input-price', '2000');
+  await page.fill('id=input-agent-price', '1800');
+  await page.fill('id=input-service-charge', '1000');
+  await page.click('id=btn-form-submit');
+
+  //-----------------------------------------สร้างประเภทสินค้าและบริการ------------------------------//
+  // เข้าสู่หน้าประเภท
+  await page.waitForSelector('id=tree-enter-ประเภท-กลุ่มสินค้าและบริการ', {
+    state: 'visible',
+  });
+  await page.click('id=tree-enter-ประเภท-กลุ่มสินค้าและบริการ');
+
+  // เพิ่มประเภท
+  await page.click('id=btn-add');
+  await page.click('id=btn-add-service');
+
+  // กรอกข้อมูลประเภทส่วน "ข้อมูลประเภท"
+  await page.fill('id=input-service-code', 'MOU');
+  await page.fill('id=input-service-name', 'ประเภทสินค้าและบริการ');
+  await page.fill('id=input-service-description', 'รายละเอียดประภัยแบบกลุ่ม');
+
+  // เพิ่มคุณสมบัติส่วน "คุณสมบัติของประเภท"
+  await page.click('id=btn-capitalize');
+  await page.click('id=btn-dropdow-properties');
+  await page.click('id=list-serviceRecordName');
+  await page.keyboard.press('Escape');
+
+  const propertiesServiceRecordName = page.locator(
+    "//span[normalize-space(text())='บันทึกบริการ_Name']",
+  );
+
+  expect(propertiesServiceRecordName).toHaveText('บันทึกบริการ_Name');
+  console.log(propertiesServiceRecordName, 'เลือกdropdown แล้ว');
+
+  // บันทึกการเพิ่มคุณสมบัติ
+  await page.click("(//button[@id='btn-form-submit'])[2]");
+
+  // เพิ่มส่วนข้อมูลงาน
+  await page.click("//span[normalize-space(text())='ข้อมูลงาน']");
+  await page.click('id=btn-add-work');
+  await page.click("//div[@for='select-work-name-1']");
+  await page.waitForTimeout(2000);
+  await page.click("//span[normalize-space(text())='จัดการ']");
+  await page.click("//span[normalize-space(text())='เพิ่มงาน']");
+  await page.fill('id=input-work-name-1', 'ทดสอบงาน');
+  await page.click('id=btn-save-work-name');
+  await page.click("(//button[@id='btn-form-close'])[2]");
+  await page.waitForTimeout(2000);
+  await page.click("//div[normalize-space(text())='ทดสอบงาน']");
+  await page.waitForTimeout(2000);
+  await page.keyboard.press('Escape');
+
+  // เพิ่มคุณสมบัติ
+  await page.click("(//button[@id='btn-add-work-product'])[1]");
+  await page.click('id=btn-dropdow-properties');
+  await page.click('id=list-refNo');
+  await page.keyboard.press('Escape');
+
+  const propertiesRefNo = page.locator("//span[text()='Ref No:']");
+
+  expect(propertiesRefNo).toHaveText('Ref No:');
+  console.log(propertiesRefNo, 'เลือกdropdown แล้ว');
+
+  await page.click("(//button[@id='btn-form-submit'])[2]");
+
+  // เพิ่มสินค้าและบริการ
+  await page.click("(//button[@id='btn-add-work-product'])[2]");
+  await page.click("//div[contains(@class,'column bordered')]");
+  await page.click("(//button[@id='btn-form-submit'])[2]");
+
+  // บันทึกการสร้างประเภท
+  await page.click('id=btn-form-submit');
+
+  console.log('จำลองการสร้างสินค้าและบริการสำเร็จ');
+  await page.waitForTimeout(2000);
+});
+
+test('ทดสอบการลบประเภทสินค้าและบริการ', async () => {
+  try {
+    await page.click('id=btn-kebab-action-ประเภทสินค้าและบริการ');
+    await page.click('id=btn-kebab-delete-ประเภทสินค้าและบริการ');
+    await page.click('id=btn-ok-dialog');
+
+    // ตรวจสอบการลบประเภทสินค้าและบริการ
+    const itemLocator = await page.locator(
+      "//td[contains(.,'สินค้าและบริการ DOE004')]",
+    );
+
+    expect(itemLocator).toBeHidden();
+    console.log('ตรวจสอบการลบประเภทสินค้าและบริการสำเร็จ');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+});
+
+test('ทดสอบการลบสินค้าและบริการ', async () => {
+  try {
+    await page.click('id=tree-enter-สินค้าและบริการ-กลุ่มสินค้าและบริการ');
+    await page.click('id=btn-kebab-action-สินค้าและบริการ');
+    await page.click('id=btn-kebab-delete-สินค้าและบริการ');
+    await page.click('id=btn-ok-dialog');
+
+    // ตรวจสอบการลบสินค้าและบริการ
+    const itemLocator = await page.locator(
+      "//td[contains(.,'สินค้าและบริการ DOE004')]",
+    );
+
+    expect(itemLocator).toBeHidden();
+    console.log('ตรวจสอบการลบสินค้าและบริการสำเร็จ');
+  } catch (error) {
+    console.error('เกิดข้อผิดพลาดในการทดสอบ', error);
+    throw error;
+  }
+});