diff --git a/src/components/01_branch-management/FormBranchContact.vue b/src/components/01_branch-management/FormBranchContact.vue
index 23f239a4..6cffdae2 100644
--- a/src/components/01_branch-management/FormBranchContact.vue
+++ b/src/components/01_branch-management/FormBranchContact.vue
@@ -16,74 +16,76 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
-  <div class="col-9 row q-col-gutter-md">
-    <q-input
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-5"
-      :label="
-        typeBranch === 'headOffice'
-          ? $t('formDialogInputEmailHq')
-          : $t('formDialogInputEmailSubBranch')
-      "
-      v-model="email"
-      for="input-email"
-    />
+  <div class="row col-12">
+    <div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
+    <div class="col-9 row q-col-gutter-md">
+      <q-input
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-5"
+        :label="
+          typeBranch === 'headOffice'
+            ? $t('formDialogInputEmailHq')
+            : $t('formDialogInputEmailSubBranch')
+        "
+        v-model="email"
+        for="input-email"
+      />
 
-    <q-input
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-7"
-      :label="
-        typeBranch === 'headOffice'
-          ? $t('formDialogInputTelephoneHq')
-          : $t('formDialogInputTelephoneSubBranch')
-      "
-      v-model="telephoneNo"
-      for="input-telephone-no"
-    />
+      <q-input
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-7"
+        :label="
+          typeBranch === 'headOffice'
+            ? $t('formDialogInputTelephoneHq')
+            : $t('formDialogInputTelephoneSubBranch')
+        "
+        v-model="telephoneNo"
+        for="input-telephone-no"
+      />
 
-    <q-input
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-5"
-      :label="$t('formDialogInputContactName')"
-      v-model="contactName"
-      for="input-contact-name"
-    />
+      <q-input
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-5"
+        :label="$t('formDialogInputContactName')"
+        v-model="contactName"
+        for="input-contact-name"
+      />
 
-    <q-input
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-7"
-      :label="$t('formDialogInputTelephoneContact')"
-      v-model="contact"
-      for="input-contact"
-    />
+      <q-input
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-7"
+        :label="$t('formDialogInputTelephoneContact')"
+        v-model="contact"
+        for="input-contact"
+      />
 
-    <q-input
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-5"
-      label="Line ID"
-      v-model="lineId"
-      for="input-line-id"
+      <q-input
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-5"
+        label="Line ID"
+        v-model="lineId"
+        for="input-line-id"
+      />
+    </div>
+    <q-separator
+      v-if="separator"
+      class="col-12 q-mt-xl q-mb-md"
+      style="padding-block: 0.5px"
     />
   </div>
-  <q-separator
-    v-if="separator"
-    class="col-12 q-mt-xl q-mb-md"
-    style="padding-block: 0.5px"
-  />
 </template>
diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 85d28d97..2fdf1af0 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -63,265 +63,267 @@ function deleteFile(name: string) {
 }
 </script>
 <template>
-  <div v-if="userType" class="col-3 app-text-muted">
-    • {{ $t('formDialogTitleByType') }}
-  </div>
-  <div class="col-9 row q-col-gutter-md">
-    <div
-      v-if="userType === 'USER' || userType === 'MESSENGER'"
-      class="row col-12 q-col-gutter-md"
-      style="margin-left: 0px; padding-left: 0px"
-    >
-      <q-input
-        for="input-regis-no"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        :label="$t('formDialogInputRegisNo')"
-        class="col-12"
-        v-model="registrationNo"
-      />
-      <VueDatePicker
-        utc
-        autoApply
-        :dark="$q.dark.isActive"
-        v-model="startDate"
-        :teleport="true"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly"
-        class="col-6"
-      >
-        <template #year="{ value }">
-          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-        </template>
-        <template #year-overlay-value="{ value }">
-          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-        </template>
-        <template #trigger>
-          <q-input
-            for="input-start-date"
-            :label="$t('formDialogInputStartDate')"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            :model-value="startDate ? dateFormat(startDate) : ''"
-          >
-            <template v-slot:prepend>
-              <q-icon
-                size="xs"
-                name="mdi-calendar-blank-outline"
-                class="cursor-pointer"
-                color="primary"
-              />
-            </template>
-            <template v-slot:append>
-              <q-icon
-                v-if="startDate && !readonly"
-                name="mdi-close"
-                class="cursor-pointer"
-                size="xs"
-                @click="startDate = undefined"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
-
-      <VueDatePicker
-        utc
-        autoApply
-        v-model="retireDate"
-        :dark="$q.dark.isActive"
-        :teleport="true"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly"
-        class="col-6"
-      >
-        <template #year="{ value }">
-          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-        </template>
-        <template #year-overlay-value="{ value }">
-          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-        </template>
-        <template #trigger>
-          <q-input
-            for="input-retire-date"
-            :label="$t('formDialogInputRetireDate')"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            :model-value="retireDate ? dateFormat(retireDate) : ''"
-          >
-            <template v-slot:prepend>
-              <q-icon
-                size="xs"
-                name="mdi-calendar-blank-outline"
-                class="cursor-pointer"
-                color="primary"
-              />
-            </template>
-            <template v-slot:append>
-              <q-icon
-                v-if="retireDate && !readonly"
-                name="mdi-close"
-                class="cursor-pointer"
-                size="xs"
-                @click="retireDate = undefined"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
-      <q-select
-        id="input-responsible-area"
-        v-if="userType === 'MESSENGER'"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        :hide-dropdown-icon="readonly"
-        emit-value
-        map-options
-        options-dense
-        :label="$t('formDialogInputResponsibleArea')"
-        class="col-12"
-        option-label="label"
-        option-value="label"
-        v-model="responsibleArea"
-        :options="userStore.userOption.responsibleAreaOpts"
-      />
+  <div class="row col-12">
+    <div v-if="userType" class="col-3 app-text-muted">
+      • {{ $t('formDialogTitleByType') }}
     </div>
-    <div
-      v-if="userType === 'DELEGATE'"
-      class="row col-12"
-      style="row-gap: 16px"
-    >
-      <q-input
-        for="input-discount-condition"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        :label="$t('formDialogInputDiscount')"
-        class="col-12"
-        v-model="discountCondition"
-        type="textarea"
-      />
-    </div>
-    <div
-      v-if="userType === 'AGENCY'"
-      class="row col-12 q-col-gutter-md"
-      style="margin-left: 0px; padding-left: 0px"
-    >
-      <q-select
-        id="input-source-nationality"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        :hide-dropdown-icon="readonly"
-        emit-value
-        map-options
-        options-dense
-        :label="$t('formDialogInputSourceNationality')"
-        class="col-3"
-        option-label="label"
-        option-value="label"
-        v-model="sourceNationality"
-        :options="userStore.userOption.nationalityOpts"
-      />
-      <q-select
-        id="input-import-nationality"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        :hide-dropdown-icon="readonly"
-        emit-value
-        map-options
-        options-dense
-        :label="$t('formDialogInputImportNationality')"
-        class="col-3"
-        option-label="label"
-        option-value="label"
-        v-model="importNationality"
-        :options="userStore.userOption.nationalityOpts"
-      />
-      <q-select
-        id="select-trainig-place"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        :hide-dropdown-icon="readonly"
-        emit-value
-        map-options
-        options-dense
-        :label="$t('formDialogInputTrainingPlace')"
-        class="col-6"
-        option-label="label"
-        option-value="label"
-        v-model="trainingPlace"
-        :options="userStore.userOption.trainingPlaceOpts"
-      />
-      <q-input
-        for="input-checkpoint"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        :label="$t('formDialogInputCheckpoint')"
-        class="col-6"
-        v-model="checkpoint"
-      />
-      <q-input
-        for="input-checkpoint-en"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        :label="$t('formDialogInputCheckpoint') + ' ENG'"
-        class="col-6"
-        v-model="checkpointEN"
-      />
-      <q-file
-        for="input-attchment"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        multiple
-        append
-        :label="$t('formDialogAttachment')"
-        class="col-12"
-        v-model="agencyFile"
-      />
-
-      <div v-if="agencyFileList && agencyFileList?.length > 0" class="col-12">
-        <q-list bordered separator class="rounded" style="padding: 0">
-          <q-item
-            id="attachment-file"
-            v-for="item in agencyFileList"
-            clickable
-            :key="item.url"
-            class="items-center row"
-            @click="() => openNewTab(item.url)"
-          >
-            <q-item-section>
-              <div class="row items-center justify-between">
-                <div class="col">
-                  {{ item.name }}
-                </div>
-                <q-btn
-                  id="delete-file"
-                  v-if="!readonly && userId"
-                  rounded
-                  flat
-                  dense
-                  unelevated
-                  size="md"
-                  icon="mdi-trash-can-outline"
-                  class="app-text-negative"
-                  @click.stop="deleteFile(item.name)"
+    <div class="col-9 row q-col-gutter-md">
+      <div
+        v-if="userType === 'USER' || userType === 'MESSENGER'"
+        class="row col-12 q-col-gutter-md"
+        style="margin-left: 0px; padding-left: 0px"
+      >
+        <q-input
+          for="input-regis-no"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          :label="$t('formDialogInputRegisNo')"
+          class="col-12"
+          v-model="registrationNo"
+        />
+        <VueDatePicker
+          utc
+          autoApply
+          :dark="$q.dark.isActive"
+          v-model="startDate"
+          :teleport="true"
+          :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+          :enableTimePicker="false"
+          :disabled="readonly"
+          class="col-6"
+        >
+          <template #year="{ value }">
+            {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+          </template>
+          <template #trigger>
+            <q-input
+              for="input-start-date"
+              :label="$t('formDialogInputStartDate')"
+              :dense="dense"
+              outlined
+              :readonly="readonly"
+              :model-value="startDate ? dateFormat(startDate) : ''"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  size="xs"
+                  name="mdi-calendar-blank-outline"
+                  class="cursor-pointer"
+                  color="primary"
                 />
-              </div>
-            </q-item-section>
-          </q-item>
-        </q-list>
+              </template>
+              <template v-slot:append>
+                <q-icon
+                  v-if="startDate && !readonly"
+                  name="mdi-close"
+                  class="cursor-pointer"
+                  size="xs"
+                  @click="startDate = undefined"
+                />
+              </template>
+            </q-input>
+          </template>
+        </VueDatePicker>
+
+        <VueDatePicker
+          utc
+          autoApply
+          v-model="retireDate"
+          :dark="$q.dark.isActive"
+          :teleport="true"
+          :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+          :enableTimePicker="false"
+          :disabled="readonly"
+          class="col-6"
+        >
+          <template #year="{ value }">
+            {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+          </template>
+          <template #trigger>
+            <q-input
+              for="input-retire-date"
+              :label="$t('formDialogInputRetireDate')"
+              :dense="dense"
+              outlined
+              :readonly="readonly"
+              :model-value="retireDate ? dateFormat(retireDate) : ''"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  size="xs"
+                  name="mdi-calendar-blank-outline"
+                  class="cursor-pointer"
+                  color="primary"
+                />
+              </template>
+              <template v-slot:append>
+                <q-icon
+                  v-if="retireDate && !readonly"
+                  name="mdi-close"
+                  class="cursor-pointer"
+                  size="xs"
+                  @click="retireDate = undefined"
+                />
+              </template>
+            </q-input>
+          </template>
+        </VueDatePicker>
+        <q-select
+          id="input-responsible-area"
+          v-if="userType === 'MESSENGER'"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          :hide-dropdown-icon="readonly"
+          emit-value
+          map-options
+          options-dense
+          :label="$t('formDialogInputResponsibleArea')"
+          class="col-12"
+          option-label="label"
+          option-value="label"
+          v-model="responsibleArea"
+          :options="userStore.userOption.responsibleAreaOpts"
+        />
+      </div>
+      <div
+        v-if="userType === 'DELEGATE'"
+        class="row col-12"
+        style="row-gap: 16px"
+      >
+        <q-input
+          for="input-discount-condition"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          :label="$t('formDialogInputDiscount')"
+          class="col-12"
+          v-model="discountCondition"
+          type="textarea"
+        />
+      </div>
+      <div
+        v-if="userType === 'AGENCY'"
+        class="row col-12 q-col-gutter-md"
+        style="margin-left: 0px; padding-left: 0px"
+      >
+        <q-select
+          id="input-source-nationality"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          :hide-dropdown-icon="readonly"
+          emit-value
+          map-options
+          options-dense
+          :label="$t('formDialogInputSourceNationality')"
+          class="col-3"
+          option-label="label"
+          option-value="label"
+          v-model="sourceNationality"
+          :options="userStore.userOption.nationalityOpts"
+        />
+        <q-select
+          id="input-import-nationality"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          :hide-dropdown-icon="readonly"
+          emit-value
+          map-options
+          options-dense
+          :label="$t('formDialogInputImportNationality')"
+          class="col-3"
+          option-label="label"
+          option-value="label"
+          v-model="importNationality"
+          :options="userStore.userOption.nationalityOpts"
+        />
+        <q-select
+          id="select-trainig-place"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          :hide-dropdown-icon="readonly"
+          emit-value
+          map-options
+          options-dense
+          :label="$t('formDialogInputTrainingPlace')"
+          class="col-6"
+          option-label="label"
+          option-value="label"
+          v-model="trainingPlace"
+          :options="userStore.userOption.trainingPlaceOpts"
+        />
+        <q-input
+          for="input-checkpoint"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          :label="$t('formDialogInputCheckpoint')"
+          class="col-6"
+          v-model="checkpoint"
+        />
+        <q-input
+          for="input-checkpoint-en"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          :label="$t('formDialogInputCheckpoint') + ' ENG'"
+          class="col-6"
+          v-model="checkpointEN"
+        />
+        <q-file
+          for="input-attchment"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          multiple
+          append
+          :label="$t('formDialogAttachment')"
+          class="col-12"
+          v-model="agencyFile"
+        />
+
+        <div v-if="agencyFileList && agencyFileList?.length > 0" class="col-12">
+          <q-list bordered separator class="rounded" style="padding: 0">
+            <q-item
+              id="attachment-file"
+              v-for="item in agencyFileList"
+              clickable
+              :key="item.url"
+              class="items-center row"
+              @click="() => openNewTab(item.url)"
+            >
+              <q-item-section>
+                <div class="row items-center justify-between">
+                  <div class="col">
+                    {{ item.name }}
+                  </div>
+                  <q-btn
+                    id="delete-file"
+                    v-if="!readonly && userId"
+                    rounded
+                    flat
+                    dense
+                    unelevated
+                    size="md"
+                    icon="mdi-trash-can-outline"
+                    class="app-text-negative"
+                    @click.stop="deleteFile(item.name)"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index d21f75a2..4db7cc8a 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -63,7 +63,7 @@ function reset() {
       @submit.prevent
       @validation-success="submit"
     >
-      <AppBox
+      <div
         class="column justify-between full-height"
         style="padding: 0; border-radius: var(--radius-2)"
       >
@@ -194,7 +194,7 @@ function reset() {
             @click="close"
           />
         </div>
-      </AppBox>
+      </div>
     </q-form>
   </q-drawer>
 </template>
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 2b80b965..3e519fbe 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -274,8 +274,6 @@ async function triggerEdit(
     openDialog();
   }
   if (openFormType === 'drawer') {
-    console.log(code);
-
     formType.value = 'view';
     openDrawer();
   }
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index e411e211..d8e4555d 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -128,7 +128,17 @@ const formDataEmployeeSameAddr = ref(true);
 const formDataEmployeeTab = ref('personalInfo');
 const infoDrawerEmployee = ref(false);
 const infoDrawerEmployeeEdit = ref(false);
-const infoEmployeePersonCard = ref();
+const infoEmployeePersonCard = ref<
+  {
+    id: string;
+    img: string;
+    name: string;
+    male: boolean;
+    female: boolean;
+    badge: string;
+    disabled: boolean;
+  }[]
+>();
 const statsEmployee = ref(0);
 const statsEmployeeGender = ref<{ male: number; female: number }>();
 const formDataEmployeeOwner = ref<{
@@ -272,8 +282,8 @@ const inputFile = (() => {
     if (infoDrawerEdit.value && currentCustomer.value)
       currentCustomer.value.imageUrl = profileUrl.value as string;
 
-    if (infoDrawerEmployeeEdit.value)
-      infoEmployeePersonCard.value[0].img = profileUrl.value;
+    if (infoDrawerEmployeeEdit.value && infoEmployeePersonCard.value)
+      infoEmployeePersonCard.value[0].img = profileUrl.value as string;
   });
 
   element.addEventListener('change', () => {
@@ -1855,7 +1865,6 @@ watch([inputSearch, currentStatus], async () => {
               "
               dense
               outlined
-              bordered
               separator
             />
           </template>
@@ -1998,7 +2007,6 @@ watch([inputSearch, currentStatus], async () => {
         v-if="formDataEmployeeTab === 'personalInfo'"
         dense
         outlined
-        employee
         separator
         v-model:passport-type="formDataEmployee.passportType"
         v-model:passport-number="formDataEmployee.passportNumber"
@@ -2020,7 +2028,6 @@ watch([inputSearch, currentStatus], async () => {
         v-if="formDataEmployeeTab === 'personalInfo'"
         dense
         outlined
-        employee
         v-model:visa-type="formDataEmployee.visaType"
         v-model:visa-number="formDataEmployee.visaNumber"
         v-model:visa-issue-date="formDataEmployee.visaIssueDate"
@@ -2131,7 +2138,6 @@ watch([inputSearch, currentStatus], async () => {
               "
               dense
               outlined
-              bordered
               separator
             />
           </template>
@@ -2263,7 +2269,6 @@ watch([inputSearch, currentStatus], async () => {
               "
               dense
               outlined
-              bordered
               separator
             />
           </template>
@@ -2465,7 +2470,6 @@ watch([inputSearch, currentStatus], async () => {
                   "
                   dense
                   outlined
-                  bordered
                   separator
                   :readonly="!infoDrawerEdit"
                 />
@@ -2677,7 +2681,6 @@ watch([inputSearch, currentStatus], async () => {
                   "
                   dense
                   outlined
-                  bordered
                   separator
                   :readonly="!infoDrawerEdit"
                 />
@@ -2771,7 +2774,7 @@ watch([inputSearch, currentStatus], async () => {
               no-action
               no-detail
               no-bg
-              :list="infoEmployeePersonCard"
+              :list="infoEmployeePersonCard ? infoEmployeePersonCard : []"
               :gridColumns="1"
               @edit-profile="
                 () => {
@@ -2860,7 +2863,6 @@ watch([inputSearch, currentStatus], async () => {
           v-if="formDataEmployeeTab === 'personalInfo'"
           dense
           outlined
-          employee
           separator
           :readonly="!infoDrawerEmployeeEdit"
           v-model:passport-type="formDataEmployee.passportType"
@@ -2883,7 +2885,6 @@ watch([inputSearch, currentStatus], async () => {
           v-if="formDataEmployeeTab === 'personalInfo'"
           dense
           outlined
-          employee
           :readonly="!infoDrawerEmployeeEdit"
           v-model:visa-type="formDataEmployee.visaType"
           v-model:visa-number="formDataEmployee.visaNumber"
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 7c018d0e..846616c6 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2018,21 +2018,17 @@ watch(inputSearchProductAndService, async () => {
       />
     </template>
 
-    <div v-if="currentServiceTab === 'serviceInformation'" class="col-10">
+    <div
+      v-if="currentServiceTab === 'serviceInformation'"
+      class="col-md-10 col-sm-12"
+    >
       <div class="surface-1 rounded bordered q-pa-lg full-width row">
         <BasicInformation
           dense
           service
-          @service-properties="
-            () => {
-              tempValueProperties = formDataProductService.attributes;
-              openPropertiesDialog('service');
-            }
-          "
           v-model:service-code="formDataProductService.code"
           v-model:service-description="formDataProductService.detail"
           v-model:service-name-th="formDataProductService.name"
-          @input-file="inputFile.click()"
         />
       </div>
       <div class="surface-1 rounded bordered q-mt-md q-pa-lg row">
@@ -2050,7 +2046,7 @@ watch(inputSearchProductAndService, async () => {
 
     <div
       v-if="currentServiceTab === 'workInformation'"
-      class="surface-1 rounded bordered col-10 q-pa-lg"
+      class="surface-1 rounded bordered col-md-10 col-sm-12 q-pa-lg"
     >
       <FormServiceWork
         v-model:work-items="workItems"