diff --git a/ docker/Dockerfile b/ docker/Dockerfile
new file mode 100644
index 0000000..62b1cee
--- /dev/null
+++ b/ docker/Dockerfile	
@@ -0,0 +1,19 @@
+# docker buildx build --platform=linux/amd64 -f docker/Dockerfile . -t hrms-git.chin.in.th/bma-hrms/hrms-user:0.1
+
+# Build Stage
+FROM node:20-alpine as build-stage
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY ./ .
+RUN npm run build
+
+# Production Stage
+FROM nginx:stable-alpine AS production-stage
+RUN mkdir /app
+COPY --from=build-stage /app/dist /app
+COPY docker/nginx.conf /etc/nginx/nginx.conf
+COPY docker/entrypoint.sh /usr/local/bin/entrypoint.sh
+RUN chmod u+x /usr/local/bin/entrypoint.sh
+ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/entrypoint.sh b/ docker/entrypoint.sh
similarity index 69%
rename from entrypoint.sh
rename to  docker/entrypoint.sh
index d84bb9b..ae50dc4 100644
--- a/entrypoint.sh
+++ b/ docker/entrypoint.sh	
@@ -8,14 +8,12 @@ for file in $ROOT_DIR/assets/app.*.js* $ROOT_DIR/js/app.*.js* $ROOT_DIR/assets/Q
 do
   echo "Processing $file ...";
 
-  sed -i 's|VITE_REALM_KEYCLOAK|'${VITE_REALM_KEYCLOAK}'|g' $file 
-  sed -i 's|VITE_CLIENTID_KEYCLOAK|'${VITE_CLIENTID_KEYCLOAK}'|g' $file 
-  sed -i 's|VITE_URL_KEYCLOAK|'${VITE_URL_KEYCLOAK}'|g' $file 
   sed -i 's|VITE_API_URI_CONFIG|'${VITE_API_URI_CONFIG}'|g' $file
   sed -i 's|VITE_API_PUBLISH_URL|'${VITE_API_PUBLISH_URL}'|g' $file
-  sed -i 's|VITE_CLIENTSECRET_KEYCLOAK|'${VITE_CLIENTSECRET_KEYCLOAK}'|g' $file
   sed -i 's|VITE_MANUAL_URL|'${VITE_MANUAL_URL}'|g' $file
   sed -i 's|VITE_URL_SSO|'${VITE_URL_SSO}'|g' $file
+  sed -i 's|VITE_API_REPORT_URL|'${VITE_API_REPORT_URL}'|g' $file 
+
 
 done
 
diff --git a/nginx.conf b/ docker/nginx.conf
similarity index 100%
rename from nginx.conf
rename to  docker/nginx.conf
diff --git a/.env.production b/.env.production
index 277058b..0c77635 100644
--- a/.env.production
+++ b/.env.production
@@ -1,13 +1,5 @@
-VITE_REALM_KEYCLOAK=VITE_REALM_KEYCLOAK
-VITE_CLIENTID_KEYCLOAK=VITE_CLIENTID_KEYCLOAK
-VITE_URL_KEYCLOAK=VITE_URL_KEYCLOAK
 VITE_API_URI_CONFIG=VITE_API_URI_CONFIG
 VITE_API_PUBLISH_URL=VITE_API_PUBLISH_URL
-VITE_CLIENTSECRET_KEYCLOAK=VITE_CLIENTSECRET_KEYCLOAK
 VITE_MANUAL_URL=VITE_MANUAL_URL
 VITE_URL_SSO: VITE_URL_SSO
-# VITE_REALM_KEYCLOAK: "bma-ehr"
-# VITE_CLIENTID_KEYCLOAK: "bma-ehr-exam-vue3"
-# VITE_URL_KEYCLOAK: "https://id.frappet.synology.me/"
-# VITE_API_URI_CONFIG: "https://bma-ehr.frappet.synology.me/api/v1"
-# VITE_API_PUBLISH_URL: "https://bma-ehr-publish.frappet.synology.me"
\ No newline at end of file
+VITE_API_REPORT_URL=VITE_API_REPORT_URL
\ No newline at end of file
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 3983ecd..0a538a6 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -52,6 +52,7 @@ jobs:
         with:
           context: .
           platforms: linux/amd64
+          file: docker/Dockerfile
           push: true
           tags: ${{env.REGISTRY}}/${{env.IMAGE_NAME}}:${{ steps.gen_ver.outputs.image_ver }},${{env.REGISTRY}}/${{env.IMAGE_NAME}}:latest
 
diff --git a/Dockerfile b/Dockerfile
deleted file mode 100644
index a6b08ee..0000000
--- a/Dockerfile
+++ /dev/null
@@ -1,21 +0,0 @@
-# docker build . -t docker.frappet.com/demo/fe:latest
-FROM node:latest as build-stage
-WORKDIR /app
-COPY package*.json ./
-RUN npm install
-COPY ./ .
-
-RUN npm run build
-
-FROM nginx as production-stage
-
-RUN mkdir /app
-COPY --from=build-stage /app/dist /app
-COPY nginx.conf /etc/nginx/nginx.conf
-
-COPY entrypoint.sh /usr/local/bin/entrypoint.sh
-RUN chmod u+x /usr/local/bin/entrypoint.sh
-
-
-ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]
-CMD ["nginx", "-g", "daemon off;"]
diff --git a/src/api/index.ts b/src/api/index.ts
index b646c57..90fc5db 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -4,6 +4,7 @@ import { ref } from "vue";
 const env = ref<string>(process.env.NODE_ENV || "development");
 export const apiUrlConfig = import.meta.env.VITE_API_URI_CONFIG;
 export const apiUrlConfigPublish = import.meta.env.VITE_API_PUBLISH_URL;
+export const apiUrlConfigReport = import.meta.env.VITE_API_REPORT_URL;
 
 // if (process.env.VUE_APP_TEST) {
 //   env = "test";
@@ -15,6 +16,8 @@ const config = ref<any>({
     API_URL_SUPPORT: "https://bma-ehr.frappet.synology.me/api/v1/support",
     MEET_URI: "meet.frappet.com",
     LINK_EVALUATE_PUBLISH: "https://bma-ehr-publish.frappet.synology.me",
+    API_REPORT_TEMPLATE_URI:
+      "https://report-server.frappet.synology.me/api/v1/report-template",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",
@@ -27,6 +30,7 @@ const config = ref<any>({
       "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230707_115124.json",
     MEET_URI: "meet.frappet.com",
     LINK_EVALUATE_PUBLISH: apiUrlConfigPublish,
+    API_REPORT_TEMPLATE_URI: apiUrlConfigReport,
   },
 });
 
@@ -36,6 +40,9 @@ const MEET_URI = ref<string>(config.value[env.value].MEET_URI);
 const LINK_EVALUATE_PUBLISH = ref<string>(
   config.value[env.value].LINK_EVALUATE_PUBLISH
 );
+const API_REPORT_TEMPLATE_URI = ref<string>(
+  config.value[env.value].API_REPORT_TEMPLATE_URI
+);
 
 export default {
   env: env.value,
@@ -44,4 +51,5 @@ export default {
   API_URL_SUPPORT: API_URL_SUPPORT.value,
   MEET_URI: MEET_URI.value,
   LINK_EVALUATE_PUBLISH: LINK_EVALUATE_PUBLISH.value,
+  API_REPORT_TEMPLATE_URI: API_REPORT_TEMPLATE_URI.value,
 };
diff --git a/src/api/probation/api.probation.ts b/src/api/probation/api.probation.ts
index 274f2a1..fdd102b 100644
--- a/src/api/probation/api.probation.ts
+++ b/src/api/probation/api.probation.ts
@@ -6,7 +6,7 @@ const kpiCapacity = `${env.API_URI}/kpi/capacity`;
 const reportProbation = `${env.API_URI}/report/probation`;
 export default {
   probationMain: (id: string) =>
-    `${probation}/assign/probation-assign-list?personal_id=${id}`,
+    `${probation}/assign/assign-user-list?personal_id=${id}`,
 
   orgProfilePlacement: (id: string) => `${org}/profile/placement/${id}`,
   calculateDate: () => `${probation}/calculate/assign-finish`,
diff --git a/src/api/reports/api.report.ts b/src/api/reports/api.report.ts
new file mode 100644
index 0000000..e8c98b4
--- /dev/null
+++ b/src/api/reports/api.report.ts
@@ -0,0 +1,7 @@
+import env from "../index";
+
+const reportTemplate = `${env.API_REPORT_TEMPLATE_URI}`;
+
+export default {
+  reportTemplate,
+};
diff --git a/src/app.config.ts b/src/app.config.ts
index 0b1387d..ecbd141 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -14,6 +14,9 @@ import kpi from "./api/KPI/api.kpis";
 import probation from "./api/probation/api.probation";
 import development from "./api/api.development";
 
+/** API reports  */
+import reports from "./api/reports/api.report";
+
 const API = {
   ...testtest,
   ...retirementResign,
@@ -27,6 +30,8 @@ const API = {
   ...kpi,
   ...probation,
   ...development,
+  //reports
+  ...reports,
 };
 
 const path =
@@ -61,7 +66,9 @@ const generatePopupPath = (routeName: any, type: string) => {
     return `${path}/manual/chapter-6-user-transfer`;
   }
   if (routeName.includes("appealComplain")) {
-    return `${path}/manual/chapter-${type ? "4" : "7"}-user${type}-appeal-complain`;
+    return `${path}/manual/chapter-${
+      type ? "4" : "7"
+    }-user${type}-appeal-complain`;
   }
   if (routeName.includes("KPI-evaluator")) {
     return `${path}/manual/chapter-9-user-KPI-evaluator`;
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 4125e19..f33457c 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -3,10 +3,9 @@
     <div>
       <q-btn
         v-if="viewMode"
-        size="14px"
         flat
         dense
-        color="blue"
+        color="primary"
         @click="add"
         icon="mdi-plus"
       >
diff --git a/src/components/TableD.vue b/src/components/TableD.vue
index e8303c4..b2c5823 100644
--- a/src/components/TableD.vue
+++ b/src/components/TableD.vue
@@ -11,6 +11,7 @@
     :pagination-label="paginationLabel"
     v-model:pagination="pagination"
     :grid="!$q.screen.gt.xs"
+    :rows-per-page-options="[10, 25, 50, 100]"
   >
     <template v-slot:pagination="scope">
       ทั้งหมด {{ attrs.rows.length }} รายการ
diff --git a/src/modules/00_support/views/MainPage.vue b/src/modules/00_support/views/MainPage.vue
index 785a67f..d4ca169 100644
--- a/src/modules/00_support/views/MainPage.vue
+++ b/src/modules/00_support/views/MainPage.vue
@@ -82,7 +82,7 @@ watch(searchData, () => {
                   >
                     <div class="no-active-avatar">
                       <div class="new-avatar">
-                        <q-icon name="mdi-plus" size="24px" color="primary" />
+                        <q-icon name="mdi-plus" color="primary" />
                       </div>
                     </div>
 
diff --git a/src/modules/02_transfer/views/Main.vue b/src/modules/02_transfer/views/Main.vue
index 4fb6a21..42624d7 100644
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@@ -186,10 +186,9 @@ onMounted(async () => {
           <div class="q-pb-sm row">
             <div>
               <q-btn
-                size="14px"
                 flat
                 dense
-                color="blue"
+                color="primary"
                 @click="clickAdd"
                 icon="mdi-plus"
               >
@@ -232,8 +231,6 @@ onMounted(async () => {
                 map-options
                 emit-value
                 style="min-width: 140px"
-
-                
                 class="gt-xs"
               >
                 <template> </template>
diff --git a/src/modules/03_retire/views/main.vue b/src/modules/03_retire/views/main.vue
index bd48787..5ef5e4b 100644
--- a/src/modules/03_retire/views/main.vue
+++ b/src/modules/03_retire/views/main.vue
@@ -140,10 +140,9 @@ onMounted(async () => {
           <div class="q-pb-sm row">
             <div>
               <q-btn
-                size="14px"
                 flat
                 dense
-                color="blue"
+                color="primary"
                 @click="clickAdd"
                 icon="mdi-plus"
               >
diff --git a/src/modules/03_retire/views/result.vue b/src/modules/03_retire/views/result.vue
index bc27137..6d4657b 100644
--- a/src/modules/03_retire/views/result.vue
+++ b/src/modules/03_retire/views/result.vue
@@ -95,7 +95,7 @@ async function fecthQuestion() {
       }));
       question1Answer.value = Answer1;
       question1Answer.value.push({
-        label: "อื่น ๆ (ระบุ)",
+        label: "อื่นๆ (ระบุ)",
         value: Answer1.length,
       });
       question2Answer.value = data.question2Answer.map(
@@ -110,7 +110,7 @@ async function fecthQuestion() {
       }));
       question3Answer.value = Answer3;
       question3Answer.value.push({
-        label: "อื่น ๆ (ระบุ)",
+        label: "อื่นๆ (ระบุ)",
         value: Answer3.length,
       });
       const Answer4 = data.question4Answer.map((e: any, index: number) => ({
@@ -119,7 +119,7 @@ async function fecthQuestion() {
       }));
       question4Answer.value = Answer4;
       question4Answer.value.push({
-        label: "อื่น ๆ (ระบุ)",
+        label: "อื่นๆ (ระบุ)",
         value: Answer4.length,
       });
       question7Answer.value = data.question7Answer.map(
diff --git a/src/modules/05_leave/components/Calendar.vue b/src/modules/05_leave/components/Calendar.vue
index edacad5..67c483e 100644
--- a/src/modules/05_leave/components/Calendar.vue
+++ b/src/modules/05_leave/components/Calendar.vue
@@ -267,27 +267,29 @@ onMounted(async () => {
 <template>
   <div class="row">
     <div class="col-xs-12 col-md-3 q-mt-sm q-pr-sm row">
-      <q-card class="col-12" flat bordered>
-        <div class="q-gutter-sm col-12">
-          <q-list class="rounded-borders q-pt-sm" dense>
-            <q-item
-              v-for="(item, i) in filterLists"
-              :key="i"
-              tag="label"
-              v-ripple
-            >
-              <q-checkbox
-                size="sm"
-                v-model="filterVal"
-                :val="item.id"
-                :color="item.color"
-              />
-              <q-item-section>
-                <q-item-label>{{ item.name }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </div>
+      <q-card class="col-12" flat bordered >
+        <q-scroll-area style="height: 38vw">
+          <div class="q-gutter-sm col-12">
+            <q-list class="rounded-borders q-pt-sm" dense>
+              <q-item
+                v-for="(item, i) in filterLists"
+                :key="i"
+                tag="label"
+                v-ripple
+              >
+                <q-checkbox
+                  size="sm"
+                  v-model="filterVal"
+                  :val="item.id"
+                  :color="item.color"
+                />
+                <q-item-section>
+                  <q-item-label>{{ item.name }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </div>
+        </q-scroll-area>
       </q-card>
     </div>
 
diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 4a72760..a1ee1de 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -499,9 +499,7 @@ watch(
 
             <!-- ข้าราชการแสดงเฉพาะที่ยื่นใบลาไปแล้วเท่านั้น ลูกจ้างไม่มี workflow -->
             <Workflow
-              v-if="
-                leaveStatus != 'DRAFT' && mainStore.officerType == 'OFFICER'
-              "
+              v-if="leaveStatus != 'DRAFT'"
               :id="props.leaveId"
               :sys-name="
                 mainStore.officerType == 'OFFICER'
diff --git a/src/modules/05_leave/components/formDetail/01_SickForm.vue b/src/modules/05_leave/components/formDetail/01_SickForm.vue
index cf8a51a..1c9d53d 100644
--- a/src/modules/05_leave/components/formDetail/01_SickForm.vue
+++ b/src/modules/05_leave/components/formDetail/01_SickForm.vue
@@ -50,9 +50,11 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">
-        ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
+        ลาครั้งสุดท้ายเมื่อวันที่
+      </div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveLastStart ?? "-" }}
       </div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveLastStart }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 8b0b528..5ed3618 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -175,7 +175,7 @@ function onClickOpenStat() {
 
 /** function redirectTo  ยื่นใบลา*/
 async function addAbsence() {
-  await leaveStore.resetForm2();
+  leaveStore.resetForm2();
   router.push(`/leave/add`);
 }
 
@@ -331,15 +331,8 @@ onMounted(async () => {
             <div class="row col-12">
               <div class="row items-center">
                 <div class="q-ml-sm">
-                  <q-btn
-                    round
-                    dense
-                    flat
-                    size="13px"
-                    class="q-px-sm"
-                    @click="addAbsence"
-                  >
-                    <q-icon name="mdi-plus" size="22px" color="blue" />
+                  <q-btn round dense flat class="q-px-sm" @click="addAbsence">
+                    <q-icon name="mdi-plus" color="primary" />
                     <q-tooltip>สร้างใบลา</q-tooltip>
                   </q-btn>
                 </div>
diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index 4b22ba5..2bd0d2f 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -239,7 +239,6 @@ function checkSelectForm() {
     ? dialogConfirm(
         $q,
         async () => {
-          showLoader();
           saveStep1();
         },
         "ยืนยันการดำเนินการ",
@@ -250,6 +249,7 @@ function checkSelectForm() {
 
 /** function บันทักตรวจสอบคุณสมบัติ*/
 async function saveStep1() {
+  showLoader();
   const salaries = formDetail.value.salaries.map((e: any) => ({
     amount: e.amount,
     date: e.date,
@@ -286,9 +286,9 @@ async function saveStep1() {
     userId: formDetail.value.id,
     citizenId: formDetail.value.citizenId,
     prefix: formDetail.value.prefix,
-    fullName: `${formDetail.value.firstName} ${formDetail.value.lastName}`,
+    fullName: `${formDetail.value.prefix}${formDetail.value.firstName} ${formDetail.value.lastName}`,
     position: formDetail.value.position,
-    oc: formDetail.value.oc,
+    oc: formDetail.value.org,
     salary: formDetail.value.salary ? formDetail.value.salary.toString() : null,
     positionLevel: formDetail.value.positionLevel,
     posNo: formDetail.value.posNo,
diff --git a/src/modules/06_evaluate/components/TableListEvaluate.vue b/src/modules/06_evaluate/components/TableListEvaluate.vue
index 190e597..c5916bb 100644
--- a/src/modules/06_evaluate/components/TableListEvaluate.vue
+++ b/src/modules/06_evaluate/components/TableListEvaluate.vue
@@ -144,7 +144,7 @@ onMounted(() => {
     :rows="store.row"
     dense
     :visible-columns="store.visibleColumns"
-    :rows-per-page-options="[1, 25, 50, 100]"
+    :rows-per-page-options="[10, 25, 50, 100]"
     @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index 9ba9503..3b286f8 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -211,6 +211,7 @@ function fetcheSigner(id: string) {
     .get(config.API.evaluationSignerDoc1(id))
     .then((res) => {
       const data = res.data.result;
+
       formCommand.commanderFullname = data.commanderFullname;
       formCommand.commanderPosition = data.commanderPosition;
       formCommand.commanderAboveFullname = data.commanderAboveFullname;
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 00b2f1e..cbec102 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -83,6 +83,7 @@ async function fetchDetail() {
       formDetail.posNo = data.rootShortName + data.posMasterNo;
       formDetail.birthDate = data.birthDate;
       formDetail.govAge = data.govAge; // ยังไม่มี
+      formDetail.salary = data.salary;
 
       http.get(config.API.dataUserEducations).then((res) => {
         formDetail.educations = res.data.result;
@@ -102,11 +103,11 @@ async function fetchDetail() {
 
       http.get(config.API.dataUserSalary).then((res) => {
         formDetail.salaries = res.data.result;
-        formDetail.salary = formDetail.salaries
-          ? formattedNumber(
-              formDetail.salaries[formDetail.salaries.length - 1].amount
-            )
-          : "";
+        // formDetail.salary = formDetail.salaries
+        //   ? formattedNumber(
+        //       formDetail.salaries[formDetail.salaries.length - 1].amount
+        //     )
+        //   : "";
       });
 
       http.get(config.API.dataUserCertificate("training")).then((res) => {
diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
index 0d4d7f7..12e78be 100644
--- a/src/modules/06_evaluate/views/EvaluateMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -219,7 +219,6 @@ onMounted(async () => {
             <div class="col-xs-12 col-sm-3 col-md-2">
               <q-btn
                 v-if="statusSubmit"
-                size="12px"
                 flat
                 round
                 color="primary"
@@ -307,7 +306,6 @@ onMounted(async () => {
                 :options="store.columns"
                 option-value="name"
                 style="min-width: 140px"
-                
               />
             </div>
           </div>
diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index 9a9ecf8..008db43 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -259,7 +259,6 @@ onMounted(async () => {
           <q-btn
             id="addComplaints"
             for="addComplaints"
-            size="12px"
             flat
             round
             color="primary"
@@ -370,7 +369,6 @@ onMounted(async () => {
               map-options
               :options="dataStore.columns"
               option-value="name"
-              
               style="min-width: 140px"
               class="col-xs-12 col-sm-3 col-md-2"
             />
diff --git a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
index 263bed4..5c0db8d 100644
--- a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
+++ b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
@@ -51,7 +51,7 @@ async function redirectViewDetail(id: string) {
       :paging="true"
       dense
       class="custom-table2"
-      :rows-per-page-options="[1, 25, 50, 100]"
+      :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       v-model:pagination="pagination"
       @update:pagination="props.updatePagination"
@@ -85,10 +85,7 @@ async function redirectViewDetail(id: string) {
         <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat @click="redirectViewDetail(props.row.id)">
             <q-list>
-              <q-item
-                v-for="col in props.cols"
-                :key="col.name"
-              >
+              <q-item v-for="col in props.cols" :key="col.name">
                 <q-item-section>
                   <q-item-label caption>{{ col.label }}</q-item-label>
 
diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index ff9b550..ec7fd64 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -344,7 +344,7 @@ onMounted(() => {
         />
         <Work
           v-model:data="rows_03"
-          :title="`3. งานอื่น ๆ ที่ได้รับมอบหมาย`"
+          :title="`3. งานอื่นๆ ที่ได้รับมอบหมาย`"
           :page="3"
           :fetchList="fetchAssigned"
           :total="totalResults3"
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
index 3cef789..2e5737b 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -451,8 +451,8 @@ const title = computed(() => {
       : "เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ";
   } else if (numpage.value === 3) {
     name = isStatusEdit.value
-      ? "แก้ไขตัวชี้วัดงานอื่น ๆ ที่ได้รับมอบหมาย"
-      : "เพิ่มตัวชี้วัดงานอื่น ๆ ที่ได้รับมอบหมาย";
+      ? "แก้ไขตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย"
+      : "เพิ่มตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย";
   }
   return name;
 });
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
index 89dbe49..b929938 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
@@ -423,7 +423,8 @@ watch(
                         <div
                           v-if="
                             formDataView.reasonEvaluator == null &&
-                            store.rolePerson == 'EVALUATOR'
+                            store.rolePerson == 'EVALUATOR' &&
+                            store.tabMain === '2'
                           "
                           class="col-12"
                           align="right"
@@ -475,7 +476,8 @@ watch(
                         <div
                           v-if="
                             formDataView.reasonCommander == null &&
-                            store.rolePerson == 'COMMANDER'
+                            store.rolePerson == 'COMMANDER' &&
+                            store.tabMain === '2'
                           "
                           class="col-12"
                           align="right"
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
index dcb2683..19841c4 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
@@ -127,7 +127,7 @@ const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
   },
   { value: "problem_solving", label: "การแก้ปัญหา (Problem-solving)" },
   { value: "team_working", label: "การทำงานเป็นทีม (Team working)" },
-  { value: "other1", label: "อื่น ๆ (ระบุ)" },
+  { value: "other1", label: "อื่นๆ (ระบุ)" },
 ]);
 const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
   { value: "coaching", label: "การสอนงาน (Coaching)" },
@@ -135,7 +135,7 @@ const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
   { value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
   { value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
   { value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
-  { value: "other2", label: "อื่น ๆ (ระบุ)" },
+  { value: "other2", label: "อื่นๆ (ระบุ)" },
 ]);
 
 const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
@@ -158,7 +158,7 @@ const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
   },
   { value: "meeting", label: "การประชุม (Meeting)" },
   { value: "seminar", label: "การสัมมนา (Seminar)" },
-  { value: "other3", label: "อื่น ๆ (ระบุ)" },
+  { value: "other3", label: "อื่นๆ (ระบุ)" },
 ]);
 
 /** ปิด Dialog */
diff --git a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
index a0a8166..6ebb788 100644
--- a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
@@ -220,7 +220,6 @@ onMounted(() => {
             round
             icon="mdi-plus"
             color="primary"
-            size="12px"
             dense
             @click="onAdd()"
           >
diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
index 5074234..2765555 100644
--- a/src/modules/08_KPI/store.ts
+++ b/src/modules/08_KPI/store.ts
@@ -111,6 +111,57 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     return competency?.name;
   }
 
+  const statusOptions = ref<DataOptions[]>([
+    {
+      id: "",
+      name: "ทั้งหมด",
+    },
+    {
+      id: "NEW",
+      name: "จัดทำข้อตกลง",
+    },
+    {
+      id: "NEW_EVALUATOR",
+      name: "รอผู้ประเมินตรวจสอบข้อตกลง",
+    },
+    {
+      id: "NEW_COMMANDER",
+      name: "รอผู้บังคับบัญชาเหนือขึ้นไปตรวจสอบข้อตกลง",
+    },
+    {
+      id: "NEW_COMMANDER_HIGH",
+      name: "รอผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่งตรวจสอบข้อตกลง",
+    },
+    {
+      id: "APPROVE",
+      name: "รายงานความก้าวหน้า",
+    },
+    {
+      id: "EVALUATING",
+      name: "รายงานผลสำเร็จของงาน",
+    },
+    {
+      id: "EVALUATING_EVALUATOR",
+      name: "รอผู้ประเมินตรวจสอบผล",
+    },
+    {
+      id: "EVALUATING_COMMANDER",
+      name: "รอผู้บังคับบัญชาเหนือขึ้นไปตรวจสอบผล",
+    },
+    {
+      id: "EVALUATING_COMMANDER_HIGH",
+      name: "รอผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่งตรวจสอบผล",
+    },
+    {
+      id: "COMPLETE",
+      name: "รอประกาศผลการประเมิน",
+    },
+    {
+      id: "KP7",
+      name: "ประกาศและลงทะเบียนประวัติแล้ว",
+    },
+  ]);
+
   function convertStatus(val: string) {
     switch (val) {
       case "NEW":
@@ -142,6 +193,45 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     }
   }
 
+  const resultsOptions = ref<DataOptions[]>([
+    {
+      id: "",
+      name: "ทั้งหมด",
+    },
+    {
+      id: "PENDING",
+      name: "รอดำเนินการ",
+    },
+    {
+      id: "PASSED",
+      name: "ผ่านการประเมิน",
+    },
+    {
+      id: "NOTPASSED",
+      name: "ไม่ผ่านการประเมิน",
+    },
+    {
+      id: "EXCELLENT",
+      name: "ดีเด่น",
+    },
+    {
+      id: "VERY_GOOD",
+      name: "ดีมาก",
+    },
+    {
+      id: "GOOD",
+      name: "ดี",
+    },
+    {
+      id: "FAIR",
+      name: "พอใช้",
+    },
+    {
+      id: "IMPROVEMENT",
+      name: "ต้องปรับปรุง",
+    },
+  ]);
+
   function convertResults(val: string) {
     switch (val) {
       case "EXCELLENT":
@@ -159,7 +249,7 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     }
   }
 
-  const defaultCompetencyCoreLevel = ref<number|null>(null);
+  const defaultCompetencyCoreLevel = ref<number | null>(null);
   const defaultCompetencyGroupLevel = ref<number | null>(null);
   function checkCompetencyDefaultCompetencyLevel() {
     const posTypeName = dataEvaluation.value.posTypeName;
@@ -422,5 +512,8 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     selected,
     work,
     isUpdate,
+
+    resultsOptions,
+    statusOptions,
   };
 });
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index ff56a5e..272ef00 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -115,6 +115,9 @@ const evaluatorIdMainOp = ref<DataOptions[]>([]);
 const commanderIdMainOp = ref<DataOptions[]>([]);
 const commanderHighMainOp = ref<DataOptions[]>([]);
 
+const statusOp = ref<DataOptions[]>(store.statusOptions);
+const resultOp = ref<DataOptions[]>(store.resultsOptions);
+
 /** Dialog*/
 const modalDialog = ref<boolean>(false);
 const yearDialog = ref<number | null>(null);
@@ -137,6 +140,8 @@ const formRound = reactive({
 const formQuery = reactive({
   page: 1,
   pageSize: 10,
+  status: "",
+  results: "",
 });
 const total = ref<number>(0);
 const totalList = ref<number>(1);
@@ -151,7 +156,7 @@ const pagination = ref({
 
 /**
  * ดึงข้อมูลรอบการประเมิน
- * @param type 
+ * @param type
  */
 async function fetchRoundOption(type: string) {
   const y = type === "main" ? year.value : yearDialog.value;
@@ -194,11 +199,17 @@ async function fetchRoundOption(type: string) {
  */
 async function fetchList() {
   showLoader();
+  let queryParams = {
+    page: formQuery.page,
+    pageSize: formQuery.pageSize,
+    kpiPeriodId: round.value,
+    status: formQuery.status === "" ? undefined : formQuery.status,
+    results: formQuery.results === "" ? undefined : formQuery.results,
+  };
   await http
-    .get(
-      config.API.kpiEvaluation +
-        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&kpiPeriodId=${round.value}`
-    )
+    .get(config.API.kpiEvaluation, {
+      params: queryParams,
+    })
     .then(async (res) => {
       const data = await res.data.result;
       total.value = data.total;
@@ -369,6 +380,21 @@ function filterOption(val: string, update: Function, refData: string) {
         );
       });
       break;
+
+    case "status":
+      update(() => {
+        statusOp.value = store.statusOptions.filter(
+          (v: DataOptions) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "result":
+      update(() => {
+        resultOp.value = store.resultsOptions.filter(
+          (v: DataOptions) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
     default:
       break;
   }
@@ -405,161 +431,239 @@ onMounted(async () => {
 
       <div class="col-12">
         <q-card bordered class="q-pa-md">
-          <div class="row q-col-gutter-sm q-mb-sm">
-            <div class="col-xs-12 col-md-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="year"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                @update:model-value="  formQuery.page = 1,fetchRoundOption('main')"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    lazy-rules
-                    outlined
-                    hide-bottom-space
-                    :model-value="!!year ? year + 543 : 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 class="col-12 q-col-gutter-sm">
+            <div class="row col-12 q-col-gutter-sm">
+              <div class="col-xs-12 col-md-1">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="year"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:model-value="
+                    (formQuery.page = 1), fetchRoundOption('main')
+                  "
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      hide-bottom-space
+                      :model-value="!!year ? year + 543 : 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-2 col-md-2">
+                <q-btn
+                  flat
+                  round
+                  color="primary"
+                  icon="add"
+                  @click="onClickAddList"
+                >
+                  <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+                </q-btn>
+              </div>
+
+              <q-space />
+              <div class="col-xs-12 col-md-2">
+                <q-select
+                  v-model="visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="columns"
+                  option-value="name"
+                  style="min-width: 140px"
+                />
+              </div>
             </div>
 
-            <div class="col-xs-10 col-md-3">
-              <q-select
-                v-model="round"
-                outlined
-                label="รอบการประเมิน"
-                dense
-                option-label="name"
-                option-value="id"
-                :options="roundMainOp"
-                emit-value
-                map-options
-                @update:model-value="changRound"
-              />
-            </div>
+            <div class="col-12">
+              <q-card bordered class="col-12 filter-card q-pa-sm">
+                <div class="items-center col-12 row q-col-gutter-sm">
+                  <div class="col-xs-12 col-md-2">
+                    <q-select
+                      v-model="round"
+                      outlined
+                      label="รอบการประเมิน"
+                      dense
+                      option-label="name"
+                      option-value="id"
+                      :options="roundMainOp"
+                      emit-value
+                      map-options
+                      @update:model-value="changRound"
+                    />
+                  </div>
 
-            <div class="col-xs-2 col-md-2">
-              <q-btn
-                flat
-                round
-                color="primary"
-                icon="add"
-                @click="onClickAddList"
-              >
-                <q-tooltip> เพิ่มข้อมูล </q-tooltip>
-              </q-btn>
-            </div>
-
-            <q-space />
-            <div class="col-xs-12 col-md-2">
-              <q-select
-                v-model="visibleColumns"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns"
-                option-value="name"
-                
-                style="min-width: 140px"
-              />
-            </div>
-          </div>
-
-          <div class="col-12">
-            <d-table
-              ref="table"
-              :columns="columns"
-              :rows="rows"
-              :filter="filterKeyword"
-              row-key="id"
-              flat
-              bordered
-              :paging="true"
-              dense
-              :rows-per-page-options="[10, 25, 50, 100]"
-              :visible-columns="visibleColumns"
-              v-model:pagination="pagination"
-              @update:pagination="updatePagination"
-            >
-              <template v-slot:header="props">
-                <q-tr :props="props">
-                  <q-th
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
-                    <span class="text-weight-medium">{{ col.label }}</span>
-                  </q-th>
-                </q-tr>
-              </template>
-              <template v-slot:body="props">
-                <q-tr :props="props" class="cursor-pointer">
-                  <q-td
-                    v-for="col in props.cols"
-                    :key="col.id"
-                    @click="redirectViewDetail(props.row.id)"
-                  >
-                    <div>
-                      {{ col.value ? col.value : "-" }}
-                    </div>
-                  </q-td>
-                </q-tr>
-              </template>
-              <template #item="props">
-                <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-                  <q-card bordered flat>
-                    <q-list @click="redirectViewDetail(props.row.id)">
-                      <q-item v-for="col in props.cols" :key="col.name">
-                        <q-item-section>
-                          <q-item-label caption>{{ col.label }}</q-item-label>
-
-                          <q-item-label>
-                            {{ col.value ? col.value : "-" }}</q-item-label
-                          >
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-card>
+                  <div class="col-xs-12 col-md-3">
+                    <q-select
+                      v-model="formQuery.status"
+                      label="สถานะการประเมิน"
+                      class="select_ellipsis2"
+                      dense
+                      emit-value
+                      map-options
+                      :options="statusOp"
+                      option-value="id"
+                      option-label="name"
+                      lazy-rules
+                      hide-bottom-space
+                      outlined
+                      use-input
+                      input-debounce="0"
+                      @update:model-value="(formQuery.page = 1), fetchList()"
+                      :clearable="formQuery.status !== ''"
+                      @clear="
+                        (formQuery.status = ''),
+                          (statusOp = store.statusOptions)
+                      "
+                      @filter="(inputValue: string,
+                    doneFn: Function) => filterOption(inputValue, doneFn, 'status'
+                    )"
+                      ><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-xs-12 col-md-3">
+                    <q-select
+                      v-model="formQuery.results"
+                      label="ผลการประเมิน"
+                      class="select_ellipsis3"
+                      dense
+                      emit-value
+                      map-options
+                      :options="resultOp"
+                      option-value="id"
+                      option-label="name"
+                      lazy-rules
+                      hide-bottom-space
+                      outlined
+                      @update:model-value="(formQuery.page = 1), fetchList()"
+                      use-input
+                      @clear="
+                        (formQuery.results = ''),
+                          (resultOp = store.resultsOptions)
+                      "
+                      input-debounce="0"
+                      :clearable="formQuery.results !== ''"
+                      @filter="(inputValue: string,
+                  doneFn: Function) => filterOption(inputValue, doneFn, 'result'
+                  )"
+                      ><template v-slot:no-option>
+                        <q-item>
+                          <q-item-section class="text-grey">
+                            ไม่มีข้อมูล
+                          </q-item-section>
+                        </q-item>
+                      </template>
+                    </q-select>
+                  </div>
                 </div>
-              </template>
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ total }} รายการ
-                <q-pagination
-                  v-model="formQuery.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(totalList)"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                  @update:model-value="fetchList"
-                ></q-pagination>
-              </template>
-            </d-table>
+              </q-card>
+            </div>
+
+            <div class="col-12">
+              <d-table
+                ref="table"
+                :columns="columns"
+                :rows="rows"
+                :filter="filterKeyword"
+                row-key="id"
+                flat
+                bordered
+                :paging="true"
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+                :visible-columns="visibleColumns"
+                v-model:pagination="pagination"
+                @update:pagination="updatePagination"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.id"
+                      @click="redirectViewDetail(props.row.id)"
+                    >
+                      <div>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template #item="props">
+                  <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                    <q-card bordered flat>
+                      <q-list @click="redirectViewDetail(props.row.id)">
+                        <q-item v-for="col in props.cols" :key="col.name">
+                          <q-item-section>
+                            <q-item-label caption>{{ col.label }}</q-item-label>
+
+                            <q-item-label>
+                              {{ col.value ? col.value : "-" }}</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-card>
+                  </div>
+                </template>
+                <template v-slot:pagination="scope">
+                  ทั้งหมด {{ total }} รายการ
+                  <q-pagination
+                    v-model="formQuery.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="Number(totalList)"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                    :max-pages="5"
+                    @update:model-value="fetchList"
+                  ></q-pagination>
+                </template>
+              </d-table>
+            </div>
           </div>
         </q-card>
       </div>
diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 4f6fad9..b1e3563 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -45,7 +45,7 @@ const budgetSourceOp = ref<DataOptions[]>([
   { id: "HOSPITAL", name: "เงินบำรุงโรงพยาบาล" },
   { id: "FUND", name: "เงินกองทุน" },
   { id: "SUBSIDY", name: "เงินอุดหนุน" },
-  { id: "OTHER", name: "เงินอื่น ๆ" },
+  { id: "OTHER", name: "เงินอื่นๆ" },
 ]);
 
 const formBody = reactive<FormsSholarship>({
@@ -1075,9 +1075,7 @@ onMounted(async () => {
                         </div>
                         <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                         <div class="col-8 text-weight-medium">
-                          {{
-                            dataGuarantor.name ? dataGuarantor.name : "-"
-                          }}
+                          {{ dataGuarantor.name ? dataGuarantor.name : "-" }}
                         </div>
                         <div class="col-4 text-grey">ตำแหน่ง</div>
                         <div class="col-8 text-weight-medium">
diff --git a/src/modules/10_registry/01_Information/01_Information.vue b/src/modules/10_registry/01_Information/01_Information.vue
index 149e4dd..3113630 100644
--- a/src/modules/10_registry/01_Information/01_Information.vue
+++ b/src/modules/10_registry/01_Information/01_Information.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { ref, reactive, onMounted, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useQuasar, type QTableColumn, type QTableProps } from "quasar";
-import { ref, reactive, onMounted, computed } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -241,6 +241,20 @@ function onHistory() {
   modalHistory.value = true;
 }
 
+const mainEmail = ref<string>("");
+const mainPhone = ref<string>("");
+
+const isCheckEmail = computed(() => {
+  return mainEmail.value === formDataInformation.email ? true : false;
+});
+
+const isCheckPhone = computed(() => {
+  console.log("mainPhone", mainPhone.value);
+  console.log("formDataInformation", formDataInformation.phone);
+
+  return mainPhone.value === formDataInformation.phone ? true : false;
+});
+
 /** get data */
 async function getData() {
   showLoader();
@@ -264,6 +278,9 @@ async function getData() {
       formDataInformation.phone = data.phone;
       formDataInformation.email = data.email ? data.email.split("@")[0] : "";
 
+      mainEmail.value = data.email ? data.email.split("@")[0] : "";
+      mainPhone.value = data.phone ? data.phone : "";
+
       email.value = data.email ? data.email.split("@")[0] : "";
       phone.value = data.phone;
 
@@ -525,16 +542,18 @@ onMounted(async () => {
                     color="edit"
                     @click="() => (editPhone = true)"
                   >
-                    <q-tooltip>แก้ไข</q-tooltip>
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
                   </q-btn>
                 </div>
+
                 <div v-else class="self-center col-3">
                   <q-btn
+                    :disable="isCheckPhone"
                     dense
                     flat
                     round
                     icon="save"
-                    color="primary"
+                    :color="isCheckPhone ? 'grey-6' : 'primary'"
                     @click="onSavePhone"
                   >
                     <q-tooltip>บันทึก</q-tooltip>
@@ -588,16 +607,17 @@ onMounted(async () => {
                       color="edit"
                       @click="() => (editEmail = true)"
                     >
-                      <q-tooltip>แก้ไข</q-tooltip>
+                      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
                     </q-btn>
                   </div>
                   <div v-else class="self-center">
                     <q-btn
+                      :disable="isCheckEmail"
+                      :color="isCheckEmail ? 'grey-6' : 'primary'"
                       dense
                       flat
                       round
                       icon="save"
-                      color="primary"
                       @click="onSaveEmail"
                     >
                       <q-tooltip>บันทึก</q-tooltip>
diff --git a/src/modules/10_registry/Dialog/DialogDevelopmant.vue b/src/modules/10_registry/Dialog/DialogDevelopmant.vue
index a88799d..0a58160 100644
--- a/src/modules/10_registry/Dialog/DialogDevelopmant.vue
+++ b/src/modules/10_registry/Dialog/DialogDevelopmant.vue
@@ -82,7 +82,7 @@ const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
   },
   { value: "problem_solving", label: "การแก้ปัญหา (Problem-solving)" },
   { value: "team_working", label: "การทำงานเป็นทีม (Team working)" },
-  { value: "other1", label: "อื่น ๆ (ระบุ)" },
+  { value: "other1", label: "อื่นๆ (ระบุ)" },
 ]);
 const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
   { value: "coaching", label: "การสอนงาน (Coaching)" },
@@ -90,7 +90,7 @@ const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
   { value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
   { value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
   { value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
-  { value: "other2", label: "อื่น ๆ (ระบุ)" },
+  { value: "other2", label: "อื่นๆ (ระบุ)" },
 ]);
 
 const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
@@ -113,7 +113,7 @@ const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
   },
   { value: "meeting", label: "การประชุม (Meeting)" },
   { value: "seminar", label: "การสัมมนา (Seminar)" },
-  { value: "other3", label: "อื่น ๆ (ระบุ)" },
+  { value: "other3", label: "อื่นๆ (ระบุ)" },
 ]);
 
 const choice = ref<string>("MANUAL");
diff --git a/src/modules/10_registry/views/main.vue b/src/modules/10_registry/views/main.vue
index f3e70c5..0fb2ead 100644
--- a/src/modules/10_registry/views/main.vue
+++ b/src/modules/10_registry/views/main.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import avatar from "@/assets/avatar_user.jpg";
 import { ref, reactive, onMounted } from "vue";
+import axios from "axios";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
-import axios from "axios";
+import genReport from "@/plugins/genreport";
+
 //หน้าเมนู
 import InformationPage from "@/modules/10_registry/tabs/01_information.vue";
 import GovernmentPage from "@/modules/10_registry/tabs/02_government.vue";
@@ -18,8 +20,6 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
 
-const apiGenReport =
-  "https://report-server.frappet.synology.me/api/v1/report-template/docx";
 const store = useRegistryInFormationStore();
 const $q = useQuasar();
 const dataStore = useDataStore();
@@ -42,14 +42,20 @@ async function onClickDownloadKp7(type: string) {
   showLoader();
   const url =
     type === "FULL"
-      ?  config.API.profileReportId(store.profileId, dataStore.officerType == "OFFICER" ? 'profile':'profile-employee')
-      : config.API.profileKp7ShortId(store.profileId, dataStore.officerType == "OFFICER" ? 'profile':'profile-employee');
+      ? config.API.profileReportId(
+          store.profileId,
+          dataStore.officerType == "OFFICER" ? "profile" : "profile-employee"
+        )
+      : config.API.profileKp7ShortId(
+          store.profileId,
+          dataStore.officerType == "OFFICER" ? "profile" : "profile-employee"
+        );
   const fileName = type === "FULL" ? "ก.พ.7/ก.ก.1" : "ประวัติแบบย่อ";
   await http
     .get(url)
     .then(async (res) => {
       const data = await res.data.result;
-      await genReport(data, fileName);
+      await genReport(data, fileName, "pdf");
       hideLoader();
     })
     .catch((err) => {
@@ -59,46 +65,6 @@ async function onClickDownloadKp7(type: string) {
     .finally(() => {});
 }
 
-async function genReport(data: any, fileName: string) {
-  showLoader();
-  await axios
-    .post(apiGenReport, data, {
-      headers: {
-        accept: "application/pdf",
-        "content-Type": "application/json",
-      },
-      responseType: "arraybuffer",
-    })
-    .then((res) => {
-      const data = res.data;
-      if (data) {
-        // สร้าง Blob จาก array buffer
-        const blob = new Blob([data], {
-          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-        });
-
-        // สร้าง URL สำหรับไฟล์ Blob
-        const url = URL.createObjectURL(blob);
-
-        // สร้างลิงก์เพื่อดาวน์โหลดไฟล์
-        const link = document.createElement("a");
-        link.href = url;
-        link.download = `${fileName}.pdf`; // กำหนดชื่อไฟล์ที่จะดาวน์โหลด
-        document.body.appendChild(link);
-        link.click();
-
-        // ลบ URL ที่สร้างขึ้นหลังจากใช้งาน
-        URL.revokeObjectURL(url);
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 /**
  * ฟังชั่นกลับหน้าหลัก
  */
diff --git a/src/modules/10_registry/views/requestEditMain.vue b/src/modules/10_registry/views/requestEditMain.vue
index 9d52232..dbba2b5 100644
--- a/src/modules/10_registry/views/requestEditMain.vue
+++ b/src/modules/10_registry/views/requestEditMain.vue
@@ -33,9 +33,9 @@ import { useCounterMixin } from "@/stores/mixin";
  */
 const $q = useQuasar();
 const store = useRequestEditStore();
-const link = ref<string>('')
+const link = ref<string>("");
 const router = useRouter();
-const dataStore = useDataStore()
+const dataStore = useDataStore();
 const { showLoader, hideLoader, messageError, dialogRemove, success } =
   useCounterMixin();
 
@@ -150,7 +150,9 @@ function fetchListRequset() {
   };
   showLoader();
   http
-    .get(config.API.requestEditByType(link.value) + `user`, { params: queryParams })
+    .get(config.API.requestEditByType(link.value) + `user`, {
+      params: queryParams,
+    })
     .then((res) => {
       const data = res.data.result;
       maxPage.value = Math.ceil(data.total / pageSize.value);
@@ -276,7 +278,7 @@ watch(
   }
 );
 
-onMounted(async() => {
+onMounted(async () => {
   link.value = await dataStore.getProFileType();
   fetchListRequset();
 });
@@ -374,7 +376,6 @@ onMounted(async() => {
               map-options
               :options="columns"
               option-value="name"
-              class="col-xs-12 col-sm-3 col-md-2"
               style="min-width: 140px"
             />
           </div>
diff --git a/src/modules/11_probation/component/01_Assign.vue b/src/modules/11_probation/component/01_Assign.vue
index 07c04f4..de6a6e0 100644
--- a/src/modules/11_probation/component/01_Assign.vue
+++ b/src/modules/11_probation/component/01_Assign.vue
@@ -1674,7 +1674,7 @@ onMounted(async () => {
 
           <div class="col-12">
             <div class="col-12 text-top2">
-              กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
+              กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
             </div>
             <div class="col-12 row q-col-gutter-md">
               <div class="col-12">
@@ -2067,7 +2067,7 @@ onMounted(async () => {
       <div class="col-12 row">
         <div class="col-12 text-weight-bold text-dark">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-          3.5 อื่น ๆ (ถ้ามี)
+          3.5 อื่นๆ (ถ้ามี)
         </div>
         <div class="col-12">
           <q-input
@@ -2186,7 +2186,7 @@ onMounted(async () => {
         </div>
         <div class="col-12 text-top2 items-center">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-          4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
+          4.4 การอบรมอื่นๆ ที่หน่วยงานกำหนด (ถ้ามี)
         </div>
       </div>
       <div class="col-12">
diff --git a/src/modules/11_probation/component/07_EvaluateReport.vue b/src/modules/11_probation/component/07_EvaluateReport.vue
index a25377d..c4ac7bd 100644
--- a/src/modules/11_probation/component/07_EvaluateReport.vue
+++ b/src/modules/11_probation/component/07_EvaluateReport.vue
@@ -453,9 +453,7 @@ onMounted(() => {
           <div
             class="row q-pa-sm text-weight-medium items-center q-col-gutter-sm"
           >
-            <div class="col-8">
-              4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
-            </div>
+            <div class="col-8">4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</div>
             <div class="col-2">
               <q-input
                 bg-color="white"
@@ -511,7 +509,7 @@ onMounted(() => {
         />
       </div>
       <div class="col-12 text-dark text-weight-bold">
-        เหตุผลอื่น ๆ ในการพิจารณา
+        เหตุผลอื่นๆ ในการพิจารณา
       </div>
       <div class="col-12">
         <q-input
diff --git a/src/modules/11_probation/component/Header.vue b/src/modules/11_probation/component/Header.vue
index af4ac22..f04573a 100644
--- a/src/modules/11_probation/component/Header.vue
+++ b/src/modules/11_probation/component/Header.vue
@@ -99,8 +99,8 @@ function nextPage() {
           </q-tab>
         </q-tabs>
         <div>
-          <q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
-            <q-tooltip> เพิ่ม </q-tooltip>
+          <q-btn color="primary" flat dense icon="mdi-plus" @click="nextPage">
+            <q-tooltip> เพิ่มข้อมูล </q-tooltip>
           </q-btn>
         </div>
       </div>
diff --git a/src/modules/11_probation/component/addPage/01_addresult.vue b/src/modules/11_probation/component/addPage/01_addresult.vue
index b7b5482..9bd858e 100644
--- a/src/modules/11_probation/component/addPage/01_addresult.vue
+++ b/src/modules/11_probation/component/addPage/01_addresult.vue
@@ -1988,7 +1988,7 @@ onMounted(async () => {
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
                   <q-item-label
-                    >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+                    >4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
                   >
                 </q-item-section>
                 <q-item-section side>
@@ -2134,8 +2134,7 @@ onMounted(async () => {
                 <q-item dense>
                   <q-item-section>
                     <q-item-label
-                      >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
-                      (ถ้ามี)</q-item-label
+                      >4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
                     >
                   </q-item-section>
                 </q-item>
diff --git a/src/modules/11_probation/component/addPage/02_addevaluacommander.vue b/src/modules/11_probation/component/addPage/02_addevaluacommander.vue
index 791a744..3e7de8b 100644
--- a/src/modules/11_probation/component/addPage/02_addevaluacommander.vue
+++ b/src/modules/11_probation/component/addPage/02_addevaluacommander.vue
@@ -1528,8 +1528,7 @@ onMounted(async () => {
                 <q-item dense tag="label" v-ripple>
                   <q-item-section>
                     <q-item-label
-                      >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
-                      (ถ้ามี)</q-item-label
+                      >4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
                     >
                   </q-item-section>
                   <q-item-section side>
@@ -1645,8 +1644,7 @@ onMounted(async () => {
                 <q-item dense tag="label" v-ripple>
                   <q-item-section>
                     <q-item-label
-                      >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
-                      (ถ้ามี)</q-item-label
+                      >4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
                     >
                   </q-item-section>
                   <q-item-section side>
diff --git a/src/modules/11_probation/component/editPage/01_result.vue b/src/modules/11_probation/component/editPage/01_result.vue
index b2b7b7d..89dd7a4 100644
--- a/src/modules/11_probation/component/editPage/01_result.vue
+++ b/src/modules/11_probation/component/editPage/01_result.vue
@@ -568,8 +568,15 @@ onMounted(async () => {
           </q-list>
         </q-menu>
       </q-btn>
-      <q-btn color="blue" rounded flat dense icon="mdi-plus" @click="addData">
-        <q-tooltip> เพิ่ม </q-tooltip>
+      <q-btn
+        color="primary"
+        rounded
+        flat
+        dense
+        icon="mdi-plus"
+        @click="addData"
+      >
+        <q-tooltip> เพิ่มข้อมูล </q-tooltip>
       </q-btn>
     </q-toolbar>
   </div>
@@ -2106,7 +2113,7 @@ onMounted(async () => {
             <q-item dense tag="label" v-ripple>
               <q-item-section>
                 <q-item-label
-                  >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+                  >4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
                 >
               </q-item-section>
               <q-item-section side>
@@ -2251,7 +2258,7 @@ onMounted(async () => {
               <q-item dense>
                 <q-item-section>
                   <q-item-label
-                    >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+                    >4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
                   >
                 </q-item-section>
               </q-item>
diff --git a/src/modules/11_probation/views/main.vue b/src/modules/11_probation/views/main.vue
index 5441912..b5ec831 100644
--- a/src/modules/11_probation/views/main.vue
+++ b/src/modules/11_probation/views/main.vue
@@ -275,10 +275,9 @@ onMounted(async () => {
             <div class="row">
               <q-btn
                 @click="router.push(`/probation/add/${profileId}`)"
-                size="12px"
                 flat
                 round
-                color="add"
+                color="primary"
                 icon="mdi-plus"
               >
                 <q-tooltip>เพิ่มงานที่ได้รับมอบหมาย</q-tooltip>
@@ -315,7 +314,6 @@ onMounted(async () => {
                 outlined
                 emit-value
                 map-options
-                
                 options-dense
                 option-value="name"
                 style="min-width: 140px"
diff --git a/src/modules/13_portfolio/views/Main.vue b/src/modules/13_portfolio/views/Main.vue
index bc0d0ff..a8ff381 100644
--- a/src/modules/13_portfolio/views/Main.vue
+++ b/src/modules/13_portfolio/views/Main.vue
@@ -135,10 +135,9 @@ onMounted(async () => {
           <div class="q-pb-sm row">
             <div>
               <q-btn
-                size="14px"
                 flat
                 dense
-                color="blue"
+                color="primary"
                 @click="clickAdd"
                 icon="mdi-plus"
               >
diff --git a/src/modules/14_IDP/views/main.vue b/src/modules/14_IDP/views/main.vue
index 56a63c5..0c1fddf 100644
--- a/src/modules/14_IDP/views/main.vue
+++ b/src/modules/14_IDP/views/main.vue
@@ -381,7 +381,7 @@ onMounted(async () => {
               row-key="id"
               :paging="true"
               :visible-columns="visibleColumns"
-              :rows-per-page-options="[1, 25, 50, 100]"
+              :rows-per-page-options="[10, 25, 50, 100]"
               @update:pagination="updatePagination"
             >
               <template v-slot:header="props">
diff --git a/src/modules/14_IDP/views/registry.vue b/src/modules/14_IDP/views/registry.vue
index f03ff61..a024f19 100644
--- a/src/modules/14_IDP/views/registry.vue
+++ b/src/modules/14_IDP/views/registry.vue
@@ -102,7 +102,7 @@ const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
   },
   {
     value: "other1",
-    label: "อื่น ๆ (ระบุ)",
+    label: "อื่นๆ (ระบุ)",
   },
 ]);
 //20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
@@ -112,7 +112,7 @@ const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
   { value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
   { value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
   { value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
-  { value: "other2", label: "อื่น ๆ (ระบุ)" },
+  { value: "other2", label: "อื่นๆ (ระบุ)" },
 ]);
 //10 การฝึกอบรมอื่นๆ
 const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
@@ -135,7 +135,7 @@ const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
   },
   { value: "meeting", label: "การประชุม (Meeting)" },
   { value: "seminar", label: "การสัมมนา (Seminar)" },
-  { value: "other3", label: "อื่น ๆ (ระบุ)" },
+  { value: "other3", label: "อื่นๆ (ระบุ)" },
 ]);
 
 /**
diff --git a/src/modules/15_probationReport/components/02_ResultPage.vue b/src/modules/15_probationReport/components/02_ResultPage.vue
index 26baa83..f5a4359 100644
--- a/src/modules/15_probationReport/components/02_ResultPage.vue
+++ b/src/modules/15_probationReport/components/02_ResultPage.vue
@@ -304,9 +304,7 @@ onMounted(() => {
           </div>
           <q-separator class="q-my-xs" />
           <div class="row q-gutter-md align-center q-pl-md">
-            <div class="col-8">
-              4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
-            </div>
+            <div class="col-8">4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</div>
             <div class="col">
               <q-input
                 outlined
@@ -366,7 +364,7 @@ onMounted(() => {
 
       <div class="col-xs-12 col-sm-11">
         <div class="col-12 text-top0 row items-center">
-          เหตุผลอื่น ๆ ในการพิจารณา
+          เหตุผลอื่นๆ ในการพิจารณา
         </div>
         <q-input
           type="textarea"
diff --git a/src/plugins/genreport.ts b/src/plugins/genreport.ts
index 5346948..3c8a638 100644
--- a/src/plugins/genreport.ts
+++ b/src/plugins/genreport.ts
@@ -1,4 +1,6 @@
 import axios from "axios";
+import config from "@/app.config";
+
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -7,18 +9,21 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError } = mixin;
 
-const apiGenReport =
-  "https://report-server.frappet.synology.me/api/v1/report-template/docx";
-
-async function genReport(data: any, fileName: string) {
+async function genReport(data: any, fileName: string, type: string = "docx") {
   showLoader();
   await axios
-    .post(apiGenReport, data, {
-      headers: {
-        accept:
-          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-        "content-Type": "application/json",
-      },
+    .post(config.API.reportTemplate + `/docx`, data, {
+      headers:
+        type == "docx"
+          ? {
+              accept:
+                "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+              "content-Type": "application/json",
+            }
+          : {
+              accept: "application/pdf",
+              "content-Type": "application/json",
+            },
       responseType: "arraybuffer",
     })
     .then((res) => {
@@ -35,7 +40,7 @@ async function genReport(data: any, fileName: string) {
         // สร้างลิงก์เพื่อดาวน์โหลดไฟล์
         const link = document.createElement("a");
         link.href = url;
-        link.download = `${fileName}.docx`; // กำหนดชื่อไฟล์ที่จะดาวน์โหลด
+        link.download = `${fileName}.${type === "docx" ? "docx" : "pdf"}`; // กำหนดชื่อไฟล์ที่จะดาวน์โหลด
         document.body.appendChild(link);
         link.click();
 
diff --git a/src/router/index.ts b/src/router/index.ts
index af9989a..103e994 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ const Dashboard = () => import("@/modules/01_dashboard/views/Dashboard.vue");
 const Error404NotFound = () => import("@/views/Error404NotFound.vue");
 const loginMain = () => import("@/views/login.vue");
 const ErrorPermission = () => import("@/views/ErrorPermission.vue");
+const VerifyEmail = () => import("@/views/VerifyEmail.vue");
 
 import ModuleTransfer from "@/modules/02_transfer/router";
 import ModuleRetire from "@/modules/03_retire/router";
@@ -77,6 +78,11 @@ const router = createRouter({
         Auth: false,
       },
     },
+    {
+      path: "/verifyemail",
+      name: "verifyemail",
+      component: VerifyEmail,
+    },
     {
       path: "/auth",
       name: "auth",
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index 1930ed5..d628cea 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -114,3 +114,20 @@ input.input-alert
     overflow: visible
     white-space: normal
     transition: width 2s
+
+.select_ellipsis3 .q-field__native > span
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    width: auto
+    max-width: 60ch
+
+.select_ellipsis2 .q-field__native > span
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    width: auto
+    max-width: 30ch
+
+.filter-card
+    background-color: #f1f1f1b0
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index b48f710..d32c6ec 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -11,6 +11,11 @@ import { tokenParsed, logout } from "@/plugins/auth";
 
 import { useDataStore } from "@/stores/data";
 
+// landing page config url
+const configParam = {
+  landingPageUrl: import.meta.env.VITE_URL_SSO,
+};
+
 const route = useRoute();
 const router = useRouter();
 
@@ -212,9 +217,9 @@ const handleButtonClick = async () => {
   const currentPath = route.name;
   const queryParams = { role: "user" }; // Replace with your query parameters
   const queryString = new URLSearchParams(queryParams).toString();
-  const type = await dataStore.getProFileType()
+  const type = await dataStore.getProFileType();
   // Assuming config.generatePopupPath() returns a base URL
-  const popupBasePath = config.generatePopupPath(currentPath,type);
+  const popupBasePath = config.generatePopupPath(currentPath, type);
 
   if (popupBasePath) {
     const popupPath = `${popupBasePath}?${queryString}`;
@@ -227,6 +232,18 @@ const handleButtonClick = async () => {
 function onInfo() {
   router.push(`/retire`);
 }
+
+// landing page redirect
+const landingPageUrl = ref<string>(getLandingUrl());
+function getLandingUrl() {
+  if (window.location.hostname === "bmasso.bma.go.th") {
+    return `${configParam.landingPageUrl}/landing?mode=dev`;
+  } else if (window.location.hostname === "bma-ehr-user.frappet.com") {
+    return `${configParam.landingPageUrl}/landing?mode=prod`;
+  } else {
+    return `${configParam.landingPageUrl}/landing?mode=dev`;
+  }
+}
 </script>
 
 <!-- โครงเว็บ -->
@@ -484,6 +501,19 @@ function onInfo() {
             </q-item>
           </template>
           <q-list>
+            <q-item clickable v-close-popup :href="landingPageUrl">
+              <q-item-section avatar style="min-width: 30px">
+                <q-avatar
+                  color="blue"
+                  text-color="white"
+                  icon="home"
+                  size="18px"
+                  font-size="14px"
+                />
+              </q-item-section>
+              <q-item-section> Landing Page </q-item-section>
+            </q-item>
+
             <q-item clickable v-close-popup @click="onInfo">
               <q-item-section avatar style="min-width: 30px">
                 <q-icon
@@ -521,14 +551,24 @@ function onInfo() {
           <q-btn round>
             <q-avatar>
               <q-img
-                src="@/assets/avatar_user.jpg"
+                :src="dataStore.profileImg"
                 class="border-100"
                 spinner-color="white"
-                style="height: 30px; max-width: 30px"
               />
             </q-avatar>
             <q-menu>
-              <q-list>
+              <q-list dense>
+                <q-item clickable v-close-popup :href="landingPageUrl">
+                  <q-item-section avatar style="min-width: 30px">
+                    <q-avatar
+                      color="blue"
+                      text-color="white"
+                      icon="home"
+                      size="18px"
+                    />
+                  </q-item-section>
+                  <q-item-section> Landing Page </q-item-section>
+                </q-item>
                 <q-item clickable v-close-popup @click="onInfo">
                   <q-item-section avatar style="min-width: 30px">
                     <q-icon
@@ -542,7 +582,7 @@ function onInfo() {
                   >
                 </q-item>
 
-                <q-item clickable v-close-popup>
+                <!-- <q-item clickable v-close-popup>
                   <q-item-section avatar style="min-width: 30px">
                     <q-icon
                       color="orange-9"
@@ -555,7 +595,7 @@ function onInfo() {
                       >เปลี่ยนรหัสผ่าน</q-item-label
                     ></q-item-section
                   >
-                </q-item>
+                </q-item> -->
 
                 <q-item clickable v-close-popup @click="doLogout">
                   <q-item-section avatar style="min-width: 30px">
diff --git a/src/views/VerifyEmail.vue b/src/views/VerifyEmail.vue
new file mode 100644
index 0000000..a0e04dc
--- /dev/null
+++ b/src/views/VerifyEmail.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import axios from "axios";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import env from "@/api/index";
+
+const $q = useQuasar();
+const route = useRoute();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+const pathApi = ref<string>(`${env.API_URI}/org/unauthorize/verify-email`);
+const token = ref(route.query.upn);
+const isCheckEmail = ref<boolean>(false);
+
+async function fetchCheckVerifEemail() {
+  if (!token.value) {
+    return false;
+  }
+
+  showLoader();
+  await axios
+    .post(pathApi.value, { token: token.value })
+    .then(() => {
+      isCheckEmail.value = true;
+    })
+    .catch((err) => {
+      // messageError($q, err);
+      isCheckEmail.value = false;
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  fetchCheckVerifEemail();
+});
+</script>
+
+<template>
+  <div
+    class="bg-light text-center q-pa-md flex flex-center"
+    style="
+      height: 90vh;
+      background: linear-gradient(to bottom, #e0f7fa, #ffffff);
+    "
+  >
+    <div>
+      <!-- <div class="header"> -->
+      <q-icon
+        :name="isCheckEmail ? 'mdi-check-decagram' : 'mdi-alert-decagram'"
+        :color="isCheckEmail ? 'blue' : 'warning'"
+        size="64px"
+      />
+      <div v-if="isCheckEmail">
+        <div class="text-h4 text-primary q-mt-md">Verify Your Email</div>
+        <div class="text-subtitle2 text-grey-7 q-mt-xs">
+          Your email address has been successfully verified. Thank you!
+        </div>
+      </div>
+      <div v-else>
+        <div class="text-h4 text-negative q-mt-md">
+          Email Verification Failed
+        </div>
+        <div class="text-subtitle2 text-grey-7 q-mt-xs">
+          Something went wrong. Please try again or contact support.
+        </div>
+      </div>
+      <!-- </div> -->
+
+      <q-btn
+        class="q-mt-xl"
+        color="primary"
+        text-color="white"
+        to="/"
+        label="กลับหน้าหลัก"
+        no-caps
+        rounded
+        size="lg"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>