diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue b/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
index 1f44a86b8..94b94d47f 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
@@ -244,35 +244,90 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="row col-12 q-pa-md">
-    <q-toolbar style="padding: 0px">
-      <q-file
+  <q-card class="col-12">
+    <q-card-section>
+      <q-toolbar
+        class="q-pa-none"
         v-if="
           store.statusQuota == 'PENDING' &&
           checkPermission($route)?.attrIsUpdate
         "
-        bg-color="white"
-        clearable
-        outlined
-        dense
-        v-model="fileUpload"
-        label="อัปโหลดไฟล์"
       >
-        <template v-slot:prepend>
-          <q-icon color="light-blue" name="attach_file" />
+        <q-file
+          bg-color="white"
+          clearable
+          outlined
+          dense
+          v-model="fileUpload"
+          label="อัปโหลดไฟล์"
+        >
+          <template v-slot:prepend>
+            <q-icon color="light-blue" name="attach_file" />
+            <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+          </template>
+        </q-file>
+
+        <q-btn
+          dense
+          flat
+          round
+          color="light-blue"
+          icon="upload"
+          @click="uploadFile(fileUpload)"
+          v-if="fileUpload !== null"
+        >
           <q-tooltip>อัปโหลดไฟล์</q-tooltip>
-        </template>
-      </q-file>
+        </q-btn>
 
-      <q-btn
-        flat
-        color="light-blue"
-        icon="upload"
-        @click="uploadFile(fileUpload)"
-        v-if="fileUpload !== null"
-      />
+        <q-space />
+      </q-toolbar>
+      <div class="row">
+        <div class="col-6" v-if="listFile.length !== 0">
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+              รายการเอกสาร
+            </div>
+            <q-list bordered separator>
+              <q-item clickable v-ripple v-for="item in listFile">
+                <q-item-section>{{ item.fileName }}</q-item-section>
+                <q-item-section avatar>
+                  <div class="row">
+                    <div>
+                      <q-btn
+                        v-if="checkPermission($route)?.attrIsGet"
+                        dense
+                        flat
+                        round
+                        color="blue"
+                        icon="mdi-download"
+                        @click="downloadFile(item.fileName)"
+                      >
+                        <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div>
+                      <q-btn
+                        v-if="checkPermission($route)?.attrIsDelete"
+                        dense
+                        flat
+                        round
+                        color="red"
+                        icon="mdi-delete"
+                        @click="onDeleteFile(item.fileName)"
+                        ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card-section>
 
-      <q-space />
+    <q-separator />
+    <q-card-actions align="right">
       <div>
         <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
         <q-btn
@@ -357,50 +412,8 @@ onMounted(() => {
           label="รอออกคำสั่ง"
         />
       </div>
-    </q-toolbar>
-
-    <div class="col-6" v-if="listFile.length !== 0">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          รายการเอกสาร
-        </div>
-        <q-list bordered separator>
-          <q-item clickable v-ripple v-for="item in listFile">
-            <q-item-section>{{ item.fileName }}</q-item-section>
-            <q-item-section avatar>
-              <div class="row">
-                <div>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsGet"
-                    dense
-                    flat
-                    round
-                    color="blue"
-                    icon="mdi-download"
-                    @click="downloadFile(item.fileName)"
-                  >
-                    <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
-                  </q-btn>
-                </div>
-                <div>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsDelete"
-                    dense
-                    flat
-                    round
-                    color="red"
-                    icon="mdi-delete"
-                    @click="onDeleteFile(item.fileName)"
-                    ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
-                  >
-                </div>
-              </div>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-  </div>
+    </q-card-actions>
+  </q-card>
 
   <DialogPopupReason
     v-model:modal="modalRecommend"
diff --git a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue b/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
index ff2edc11b..9aa5b591b 100644
--- a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
+++ b/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
@@ -111,7 +111,9 @@ function uploadfile(uploadUrl: string, file: any) {
     });
 }
 
-/** function fetchList ไฟล์*/
+/**
+ * fetchList ไฟล์
+ */
 function getListFile() {
   http
     .get(
@@ -130,69 +132,8 @@ function getListFile() {
     });
 }
 
-function saveReccommend(reason: string) {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      http
-        .put(
-          config.API.salaryPeriodStatusComment(
-            type.value,
-            props.periodId ? props.periodId : "",
-            props.rootId ? props.rootId : ""
-          ),
-          {
-            titleRecommend: reason,
-          }
-        )
-        .then(async () => {
-          await props.getData?.();
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-      sendStep.value = sendStep.value + 1;
-      modalRecommend.value = false;
-    },
-    "ยืนยันการ" + titleRecommend.value,
-    "ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
-  );
-}
-
-function sendToDirector(msg: string, type: string) {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      http
-        .get(
-          config.API.salaryPeriodStatus(
-            type,
-            props.periodId ? props.periodId : "",
-            props.rootId ? props.rootId : ""
-          )
-        )
-        .then(() => {
-          props.getData?.();
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการ" + msg,
-    "ต้องการยืนยันการ" + msg + "หรือไม่?"
-  );
-}
-
 /**
- *  function โหลดไฟล์
+ *  โหลดไฟล์
  * @param fileName  ชื่อไฟล์
  */
 function downloadFile(fileName: string) {
@@ -220,7 +161,7 @@ function downloadFile(fileName: string) {
 }
 
 /**
- *  function ลบไฟล์
+ *  ลบไฟล์
  * @param fileName  ชื่อไฟล์
  */
 function deleteFile(fileName: string) {
@@ -250,12 +191,87 @@ function deleteFile(fileName: string) {
   });
 }
 
+/**
+ * ยืนยันการส่ง
+ * @param msg ส่งเอกสารให้ ผอ. ตรวจสอบ,ยืนยันและส่งเอกสารให้,ยืนยันการตรวจสอบ
+ * @param type officer, head,owner
+ */
+function sendToDirector(msg: string, type: string) {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      http
+        .get(
+          config.API.salaryPeriodStatus(
+            type,
+            props.periodId ? props.periodId : "",
+            props.rootId ? props.rootId : ""
+          )
+        )
+        .then(() => {
+          props.getData?.();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการ" + msg,
+    "ต้องการยืนยันการ" + msg + "หรือไม่?"
+  );
+}
+
+/**
+ * ส่งคำแนะนำให้ ผอ. ตรวจสอบ
+ * @param title หัวข้อ
+ * @param typeOrder ประเภทคำสั่ง
+ */
 function sendAndRecommend(title: string, typeOrder: string) {
   modalRecommend.value = true;
   titleRecommend.value = title;
   type.value = typeOrder;
 }
 
+/**
+ * ยินยันการบันทึกคำแนะนำ
+ * @param reason คำแนะนำ
+ */
+function saveReccommend(reason: string) {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      http
+        .put(
+          config.API.salaryPeriodStatusComment(
+            type.value,
+            props.periodId ? props.periodId : "",
+            props.rootId ? props.rootId : ""
+          ),
+          {
+            titleRecommend: reason,
+          }
+        )
+        .then(async () => {
+          await props.getData?.();
+          sendStep.value = sendStep.value + 1;
+          modalRecommend.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการ" + titleRecommend.value,
+    "ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
+  );
+}
+
 onMounted(() => {
   if (props.rootId) {
     getListFile();
@@ -264,51 +280,106 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="row col-12 q-pa-md">
-    <q-toolbar class="q-pa-none">
-      <q-file
+  <q-card class="col-12">
+    <q-card-section>
+      <q-toolbar
+        class="q-pa-none"
         v-if="
           store.statusQuota == 'PENDING' &&
           checkPermission($route)?.attrIsUpdate
         "
-        bg-color="white"
-        clearable
-        outlined
-        dense
-        v-model="fileUpload"
-        accept=".pdf"
-        label="อัปโหลดไฟล์"
       >
-        <template v-slot:prepend>
-          <q-icon color="light-blue" name="attach_file" />
-          <q-tooltip>อัปโหลดไฟล์</q-tooltip>
-        </template>
-      </q-file>
+        <q-file
+          bg-color="white"
+          clearable
+          outlined
+          dense
+          v-model="fileUpload"
+          accept=".pdf"
+          label="อัปโหลดไฟล์"
+        >
+          <template v-slot:prepend>
+            <q-icon color="light-blue" name="attach_file" />
+            <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+          </template>
+        </q-file>
 
-      <q-btn
-        flat
-        color="light-blue"
-        icon="upload"
-        @click="uploadFile(fileUpload)"
-        v-if="fileUpload !== null"
-      />
-      <div v-if="document">
         <q-btn
           dense
-          color="primary"
-          icon-right="mdi-download"
-          label="ดาวน์โหลดไฟล์"
-          outline
-          :href="document"
-          target="_blank"
+          flat
+          round
+          color="light-blue"
+          icon="upload"
+          @click="uploadFile(fileUpload)"
+          v-if="fileUpload !== null"
         >
-          <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
-        >
-      </div>
+          <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+        </q-btn>
+        <div v-if="document">
+          <q-btn
+            dense
+            color="primary"
+            icon-right="mdi-download"
+            label="ดาวน์โหลดไฟล์"
+            outline
+            :href="document"
+            target="_blank"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
+          >
+        </div>
 
-      <q-toolbar-title>
-        <!-- Toolbar -->
-      </q-toolbar-title>
+        <q-toolbar-title>
+          <!-- Toolbar -->
+        </q-toolbar-title>
+      </q-toolbar>
+      <div class="row">
+        <div class="col-6" v-if="listFile.length !== 0">
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+              รายการเอกสาร
+            </div>
+            <q-list bordered separator>
+              <q-item clickable v-ripple v-for="item in listFile">
+                <q-item-section>{{ item.fileName }}</q-item-section>
+                <q-item-section avatar>
+                  <div class="row">
+                    <div>
+                      <q-btn
+                        v-if="checkPermission($route)?.attrIsGet"
+                        dense
+                        flat
+                        round
+                        color="blue"
+                        icon="mdi-download"
+                        @click="downloadFile(item.fileName)"
+                      >
+                        <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div>
+                      <q-btn
+                        v-if="checkPermission($route)?.attrIsDelete"
+                        dense
+                        flat
+                        round
+                        color="red"
+                        icon="delete"
+                        @click="deleteFile(item.fileName)"
+                        ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-separator />
+    <q-card-actions align="right">
       <div>
         <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
         <q-btn
@@ -373,6 +444,7 @@ onMounted(() => {
           "
         />
 
+        <!-- ส่งไปออกคำสั่ง -->
         <q-btn
           v-if="
             store.statusQuota == 'WAITOFFICER2' &&
@@ -382,6 +454,8 @@ onMounted(() => {
           color="public"
           label="ส่งไปออกคำสั่ง"
         />
+
+        <!-- รอออกคำสั่ง -->
         <q-btn
           v-if="
             store.statusQuota == 'REPORT' &&
@@ -393,57 +467,16 @@ onMounted(() => {
           label="รอออกคำสั่ง"
         />
       </div>
-    </q-toolbar>
-    <div class="col-6" v-if="listFile.length !== 0">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          รายการเอกสาร
-        </div>
-        <q-list bordered separator>
-          <q-item clickable v-ripple v-for="item in listFile">
-            <q-item-section>{{ item.fileName }}</q-item-section>
-            <q-item-section avatar>
-              <div class="row">
-                <div>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsGet"
-                    dense
-                    flat
-                    round
-                    color="blue"
-                    icon="mdi-download"
-                    @click="downloadFile(item.fileName)"
-                  >
-                    <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
-                  </q-btn>
-                </div>
-                <div>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsDelete"
-                    dense
-                    flat
-                    round
-                    color="red"
-                    icon="delete"
-                    @click="deleteFile(item.fileName)"
-                    ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
-                  >
-                </div>
-              </div>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
+    </q-card-actions>
+  </q-card>
 
-    <DialogPopupReason
-      v-model:modal="modalRecommend"
-      :title="titleRecommend"
-      label="คำแนะนำ"
-      :savaForm="saveReccommend"
-      textReport=""
-    />
-  </div>
+  <DialogPopupReason
+    v-model:modal="modalRecommend"
+    :title="titleRecommend"
+    label="คำแนะนำ"
+    :savaForm="saveReccommend"
+    textReport=""
+  />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryRound/DialogForm.vue b/src/modules/13_salary/components/SalaryRound/DialogForm.vue
index 1c368a1b3..b7fe9f7ea 100644
--- a/src/modules/13_salary/components/SalaryRound/DialogForm.vue
+++ b/src/modules/13_salary/components/SalaryRound/DialogForm.vue
@@ -127,7 +127,7 @@ watch(
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 30%">
+    <q-card class="col-12" style="width: 23%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
           :tittle="`${
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
index 013ba0713..c7ae19ace 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
@@ -148,7 +148,7 @@ const getClass = (val: boolean) => {
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80%">
+    <q-card class="col-12" style="width: 55%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
           :tittle="
@@ -163,202 +163,194 @@ const getClass = (val: boolean) => {
         <q-separator />
         <q-card-section class="scroll" style="max-height: 70vh">
           <div class="row col-12 q-col-gutter-sm">
-            <div class="col-md-12">
-              <div class="row col-12 q-col-gutter-sm">
-                <div class="col-xs-12 col-md-4">
+            <div class="col-xs-12 col-md-4">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="nameRef"
+                dense
+                hide-bottom-space
+                outlined
+                v-model="formData.name"
+                label="ชื่อผังบัญชีอัตราค่าจ้าง"
+                :rules="[(val) => !!val || 'กรุณากรอกชื่อผังบัญชีอัตราค่าจ้าง']"
+                lazy-rules
+              />
+            </div>
+
+            <div class="col-xs-12 col-md-4">
+              <q-input
+                ref="groupRef"
+                week-start="0"
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                dense
+                outlined
+                v-model="formData.group"
+                label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
+                hide-bottom-space
+                mask="#"
+                reverse-fill-mask
+                :rules="[
+                  (val) => !!val || 'กรุณากรอกกลุ่มของผังบัญชีอัตราค่าจ้าง',
+                ]"
+              />
+            </div>
+
+            <div
+              class="col-xs-12 col-md-4"
+              style="display: flex; justify-content: flex-start"
+            >
+              <q-toggle
+                week-start="0"
+                :disable="isReadonly"
+                color="primary"
+                label="สถานะการใช้งาน"
+                v-model="formData.isActive"
+              />
+            </div>
+
+            <div class="col-xs-12 col-md-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.date"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
                   <q-input
                     :readonly="isReadonly"
-                    :class="getClass(!isReadonly)"
-                    ref="nameRef"
+                    outlined
                     dense
                     hide-bottom-space
-                    outlined
-                    v-model="formData.name"
-                    label="ชื่อผังบัญชีอัตราค่าจ้าง"
-                    :rules="[
-                      (val) => !!val || 'กรุณากรอกชื่อผังบัญชีอัตราค่าจ้าง',
-                    ]"
-                    lazy-rules
-                  />
-                </div>
+                    :model-value="
+                      formData.date != null ? date2Thai(formData.date) : null
+                    "
+                    label="ให้ไว้ ณ วันที่"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-                <div class="col-xs-12 col-md-4">
+            <div class="col-xs-12 col-md-4">
+              <datepicker
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                menu-class-name="modalfix"
+                v-model="formData.startDate"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="checkEndDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
                   <q-input
-                    ref="groupRef"
-                    week-start="0"
                     :readonly="isReadonly"
-                    :class="getClass(!isReadonly)"
-                    dense
                     outlined
-                    v-model="formData.group"
-                    label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
+                    dense
                     hide-bottom-space
-                    mask="#"
-                    reverse-fill-mask
-                    :rules="[
-                      (val) => !!val || 'กรุณากรอกกลุ่มของผังบัญชีอัตราค่าจ้าง',
-                    ]"
-                  />
-                </div>
-
-                <div
-                  class="col-xs-12 col-md-4"
-                  style="display: flex; justify-content: flex-start"
-                >
-                  <q-toggle
-                    week-start="0"
-                    :disable="isReadonly"
-                    color="primary"
-                    label="สถานะการใช้งาน"
-                    v-model="formData.isActive"
-                  />
-                </div>
-
-                <div class="col-xs-12 col-md-4">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formData.date"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :readonly="isReadonly"
-                    :class="getClass(!isReadonly)"
+                    :model-value="
+                      formData.startDate != null
+                        ? date2Thai(formData.startDate)
+                        : null
+                    "
+                    label="วันที่มีผลบังคับใช้"
                   >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        :readonly="isReadonly"
-                        outlined
-                        dense
-                        hide-bottom-space
-                        :model-value="
-                          formData.date != null
-                            ? date2Thai(formData.date)
-                            : null
-                        "
-                        label="ให้ไว้ ณ วันที่"
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
                       >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
+                      </q-icon>
                     </template>
-                  </datepicker>
-                </div>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-                <div class="col-xs-12 col-md-4">
-                  <datepicker
-                    :readonly="isReadonly"
-                    :class="getClass(!isReadonly)"
-                    menu-class-name="modalfix"
-                    v-model="formData.startDate"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:model-value="checkEndDate"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        :readonly="isReadonly"
-                        outlined
-                        dense
-                        hide-bottom-space
-                        :model-value="
-                          formData.startDate != null
-                            ? date2Thai(formData.startDate)
-                            : null
-                        "
-                        label="วันที่มีผลบังคับใช้"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-
-                <div class="col-xs-12 col-md-4">
-                  <datepicker
-                    :readonly="isReadonly"
-                    :class="getClass(!isReadonly)"
-                    menu-class-name="modalfix"
-                    v-model="formData.endDate"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :min-date="formData.startDate"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        :readonly="isReadonly"
-                        outlined
-                        dense
-                        :model-value="
-                          formData.endDate != null
-                            ? date2Thai(formData.endDate)
-                            : null
-                        "
-                        label="วันที่สิ้นสุดบังคับใช้"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-
-                <div class="col-12">
+            <div class="col-xs-12 col-md-4">
+              <datepicker
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                menu-class-name="modalfix"
+                v-model="formData.endDate"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formData.startDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
                   <q-input
                     :readonly="isReadonly"
-                    :class="getClass(!isReadonly)"
-                    v-model="formData.details"
                     outlined
                     dense
-                    type="textarea"
-                    label="คำอธิบาย"
-                  />
-                </div>
-              </div>
+                    :model-value="
+                      formData.endDate != null
+                        ? date2Thai(formData.endDate)
+                        : null
+                    "
+                    label="วันที่สิ้นสุดบังคับใช้"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                v-model="formData.details"
+                outlined
+                dense
+                type="textarea"
+                label="คำอธิบาย"
+              />
             </div>
           </div>
         </q-card-section>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
index efa977a8e..36d94ea54 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
@@ -1,3 +1,4 @@
+divdiv
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
@@ -134,7 +135,7 @@ const getClass = (val: boolean) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 500px">
+    <q-card style="width: 350px">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
           :tittle="
@@ -144,68 +145,66 @@ const getClass = (val: boolean) => {
         />
         <q-separator />
         <q-card-section>
-          <div class="row q-gutter-sm q-pa-sm">
-            <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
-              <div class="col-12">
-                <q-input
-                  :readonly="isReadonly"
-                  :class="getClass(!isReadonly)"
-                  ref="salaryNoRef"
-                  dense
-                  outlined
-                  v-model="formData.salaryNo"
-                  label="ลำดับชั้น"
-                  :rules="[
-                    (val) => !!val || 'กรุณากรอกลำดับชั้น',
-                    (val) =>
-                      Number(val) === Math.floor(val) ||
-                      Number(val) === Math.floor(val) + 0.5 ||
-                      `กรุณากรอกจำนวนเต็มเท่านั้ หรือ .5`,
-                  ]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="salaryNoRef"
+                dense
+                outlined
+                v-model="formData.salaryNo"
+                label="ลำดับชั้น"
+                :rules="[
+                  (val) => !!val || 'กรุณากรอกลำดับชั้น',
+                  (val) =>
+                    Number(val) === Math.floor(val) ||
+                    Number(val) === Math.floor(val) + 0.5 ||
+                    `กรุณากรอกจำนวนเต็มเท่านั้ หรือ .5`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
 
-              <div class="col-12">
-                <q-input
-                  :readonly="isReadonly"
-                  :class="getClass(!isReadonly)"
-                  ref="salaryMonthRef"
-                  dense
-                  outlined
-                  v-model="formData.salaryMonth"
-                  label="อัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  :rules="[
-                    (val) =>
-                      !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)'}`,
-                  ]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
+            <div class="col-12">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="salaryMonthRef"
+                dense
+                outlined
+                v-model="formData.salaryMonth"
+                label="อัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
 
-              <div class="col-12">
-                <q-input
-                  :readonly="isReadonly"
-                  :class="getClass(!isReadonly)"
-                  ref="salaryDayRef"
-                  dense
-                  outlined
-                  v-model="formData.salaryDay"
-                  label="อัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  lazy-rules
-                  hide-bottom-space
-                  :rules="[
-                    (val) =>
-                      !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)'}`,
-                  ]"
-                />
-              </div>
+            <div class="col-12">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="salaryDayRef"
+                dense
+                outlined
+                v-model="formData.salaryDay"
+                label="อัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                lazy-rules
+                hide-bottom-space
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)'}`,
+                ]"
+              />
             </div>
           </div>
         </q-card-section>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
index 871d2c34c..12eff4a69 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+div<script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
@@ -333,7 +333,7 @@ const getClass = (val: boolean) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80%">
+    <q-card class="col-12" style="width: 60%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
           :tittle="
@@ -347,229 +347,226 @@ const getClass = (val: boolean) => {
         />
         <q-separator />
         <q-card-section>
-          <div class="row q-gutter-sm q-pa-sm">
-            <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
-              <div class="col-4">
-                <q-select
-                  ref="posTypeRef"
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  dense
-                  outlined
-                  v-model="formData.posType"
-                  label="กลุ่มงาน"
-                  :rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
-                  :options="posTypeOp"
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                  lazy-rules
-                  hide-bottom-space
-                  use-input
-                  @update:model-value="getPosName()"
-                  @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'group') "
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template></q-select
-                >
-              </div>
-              <div class="col-4">
-                <q-select
-                  ref="posNameRef"
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly || formData.posType"
-                  dense
-                  outlined
-                  v-model="formData.posName"
-                  label="ตำแหน่ง"
-                  :rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
-                  :options="posNameOp"
-                  option-label="name"
-                  option-value="name"
-                  emit-value
-                  lazy-rules
-                  use-input
-                  @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'pos')"
-                  hide-bottom-space
-                  @update:model-value="getPosLevel()"
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </div>
-              <div class="col-4">
-                <q-select
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly || formData.posName"
-                  ref="posLevelRef"
-                  dense
-                  outlined
-                  v-model="formData.posLevel"
-                  :options="posLevelOp"
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                  label="ระดับชั้นงาน"
-                  :rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
-                  lazy-rules
-                  hide-bottom-space
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </div>
+          <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
+            <div class="col-4">
+              <q-select
+                ref="posTypeRef"
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                dense
+                outlined
+                v-model="formData.posType"
+                label="กลุ่มงาน"
+                :rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
+                :options="posTypeOp"
+                option-label="name"
+                option-value="id"
+                map-options
+                lazy-rules
+                hide-bottom-space
+                use-input
+                @update:model-value="getPosName()"
+                @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'group') "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
+            </div>
+            <div class="col-4">
+              <q-select
+                ref="posNameRef"
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly || formData.posType"
+                dense
+                outlined
+                v-model="formData.posName"
+                label="ตำแหน่ง"
+                :rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
+                :options="posNameOp"
+                option-label="name"
+                option-value="name"
+                emit-value
+                lazy-rules
+                use-input
+                @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'pos')"
+                hide-bottom-space
+                @update:model-value="getPosLevel()"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-4">
+              <q-select
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly || formData.posName"
+                ref="posLevelRef"
+                dense
+                outlined
+                v-model="formData.posLevel"
+                :options="posLevelOp"
+                option-label="name"
+                option-value="id"
+                map-options
+                label="ระดับชั้นงาน"
+                :rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
+                lazy-rules
+                hide-bottom-space
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
 
-              <div class="col-12">
-                <q-input
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  dense
-                  outlined
-                  v-model="formData.reson"
-                  label="หมายเหตุ"
-                  type="textarea"
-                />
-              </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                dense
+                outlined
+                v-model="formData.reson"
+                label="หมายเหตุ"
+                type="textarea"
+              />
+            </div>
 
-              <div class="col-12 text-bold">อัตราค่าจ้าง</div>
-              <div class="col-4">
-                <q-input
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  ref="rateOldMinRef"
-                  dense
-                  outlined
-                  v-model="formData.rateOldMin"
-                  label="ขั้นต่ำสุด"
-                  mask="###,###,###,###,###,###,###,###"
-                  reverse-fill-mask
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
-                  ]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-4">
-                <q-select
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  ref="groupOldRef"
-                  dense
-                  outlined
-                  multiple
-                  v-model="formData.groupOld"
-                  label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
-                  :rules="[
-                    (val) =>
-                      !!val ||
-                      `${'กรุณาเลือกอัตราค่าจ้าง กลุ่มของผังบัญชีอัตราค่าจ้าง'}`,
-                  ]"
-                  :options="groupOldOp"
-                  map-options
-                  option-label="name"
-                  option-value="id"
-                  lazy-rules
-                  hide-bottom-space
-                  use-input
-                  @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </div>
-              <div class="col-4">
-                <q-input
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  ref="rateMaxOldRef"
-                  dense
-                  outlined
-                  v-model="formData.rateMaxOld"
-                  label="ขั้นสูงสุดเดิม"
-                  mask="###,###,###,###,###,###,###,###"
-                  reverse-fill-mask
-                  :rules="[
-                    (val) =>
-                      !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
-                  ]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
+            <div class="col-12 text-bold">อัตราค่าจ้าง</div>
+            <div class="col-4">
+              <q-input
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                ref="rateOldMinRef"
+                dense
+                outlined
+                v-model="formData.rateOldMin"
+                label="ขั้นต่ำสุด"
+                mask="###,###,###,###,###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-4">
+              <q-select
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                ref="groupOldRef"
+                dense
+                outlined
+                multiple
+                v-model="formData.groupOld"
+                label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${'กรุณาเลือกอัตราค่าจ้าง กลุ่มของผังบัญชีอัตราค่าจ้าง'}`,
+                ]"
+                :options="groupOldOp"
+                map-options
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                use-input
+                @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-4">
+              <q-input
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                ref="rateMaxOldRef"
+                dense
+                outlined
+                v-model="formData.rateMaxOld"
+                label="ขั้นสูงสุดเดิม"
+                mask="###,###,###,###,###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
 
-              <div class="col-12 text-bold">
-                อัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ
-              </div>
-              <div class="col-4">
-                <q-select
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  ref="groupRateHighRef"
-                  dense
-                  outlined
-                  v-model="formData.groupRateHigh"
-                  label="กลุ่มบัญชีค่าจ้าง"
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
-                  ]"
-                  lazy-rules
-                  :options="groupOldOp"
-                  map-options
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  hide-bottom-space
-                  use-input
-                  @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </div>
-              <div class="col-4">
-                <q-input
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  ref="rateHighMaxRef"
-                  dense
-                  outlined
-                  v-model="formData.rateHighMax"
-                  label="อัตราค่าจ้างขั้นสูงใหม่"
-                  mask="###,###,###,###,###,###,###,###"
-                  reverse-fill-mask
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
-                  ]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
+            <div class="col-12 text-bold">
+              อัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ
+            </div>
+            <div class="col-4">
+              <q-select
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                ref="groupRateHighRef"
+                dense
+                outlined
+                v-model="formData.groupRateHigh"
+                label="กลุ่มบัญชีค่าจ้าง"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
+                ]"
+                lazy-rules
+                :options="groupOldOp"
+                map-options
+                option-label="name"
+                option-value="id"
+                emit-value
+                hide-bottom-space
+                use-input
+                @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-4">
+              <q-input
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                ref="rateHighMaxRef"
+                dense
+                outlined
+                v-model="formData.rateHighMax"
+                label="อัตราค่าจ้างขั้นสูงใหม่"
+                mask="###,###,###,###,###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
             </div>
           </div>
         </q-card-section>